AdobeCreative Cloud Illustrator Photoshop webデザイン wordpress デザイン

webデザインも出来る様になりたい Part.2

投稿日:2017年10月31日 更新日:

Pocket

前回、webデザインも出来る様になりたい Part.1ではグラフィックデザインしかやったことない方向けにwebのデザインについて書きました。しかし、考えてみたらこれはもはや新しい事へのチャレンジなので、グラフィックデザイナー向けと言うか、どんな人にも当てはまるのかもしれないですね。

という事で、誰にでも分かるように書いていけたらと思います。

まずはデザインする事の大前提

ここからはwebデザイン、主にコーディングについて書いて行くのですが、web制作における大前提の話に触れておきます。

このブログを見ているという事は、少なからずデザインに興味があるという事でデザインをやった事があれば尚更理解しやすいかとは思いますが、グラフィックデザインも含めたデザインって行為は単なる絵作りではありません。

これは以前、グラフィックデザイナーになるためにやるべき事でも触れていますが、デザインには目的があり、それを効率よく達成する為の視覚的記号化なのです。紙媒体でもチラシやポスター、パンフレットなどを作る際には必ず目的がありますよね。この様な媒体を作る場合もそうなのですが、目的をどこに設定するかという事が重要になってきます。

例えば、イベントを告知する為のポスターを作成した場合の話をします。この場合、3つくらいに目的が分かれます。

  1. イベントの知名度を上げる
  2. イベントに集客する
  3. イベントで商品を買ってもらう

大きく分けてこの三つが目的になってきますね。仮に何度も開催が決まっている場合は、少なからず1を繰り返す事で、より2を達成しやすくなります。さらに2の分母を上げる事が出来れば、3に繋がりやすくなります。そこから3をより増やす場合は、また違ったアプローチが必要になってきますね。この場合は、イベントなのでイベント会場に於いてどうやって顧客をクロージング(実際に購入に繋げる)するかを考えます。より詳しく商品を知ってもらう為の声掛けをしたり、セミナーやったり、商品のパンフレットを作成したり。

そして、1より2。2より3の人達のことを確度の高い顧客と呼びます。

この確度の高さの設定こそが目的をどこに設定するかという話になるのです。

小さなお店でも大企業でもこの話は共通しています。特に大企業の場合はこの目的達成率こそが予算の基準になるほど重要視されています。所謂、費用対効果というやつですね。

ここからwebの話に戻します。

この目的達成率をwebの場合はコンバージョン率と呼びます。

webデザインの場合は、このコンバージョン率が重要になってきます。このコンバージョンは商品購入だけではありません。お問い合わせ数や会員登録数を以てコンバージョンとする場合もありますので、最終的に顧客に能動的にさせたい行為というのが正しい説明になります。

長くなりましたこの大前提の話。しかし、ものづくりにはとても重要な話です。

さて、webデザインはいわばプロダクトデザイン的な領域です。webデザインは、このコンバージョンを達成する為の設計が要になります。まずは、この事を頭に入れて置いてください。

HTMLを書いてみよう

では、実際にHTMLを書いて行きましょう。やっとここまで来ましたね。そう、webの世界は入りが重要なのです。私は文系なので、何度も挫折しながらここまで来ましたが、目的や言葉を知ることで少しづつ理解出来る様になりました。

スポンサーリンク

あ、あとHTMLは一応、英語をベースにしているので、多少の英語力は必要ですよ。スペルミスで動かないとか多々ありますので。

まずは前回のおさらいから。

現在の最新バージョンのHTMLは、

HTML5

CSSの最新バージョンは、

CSS3

でしたね。

それではHTML5を書いていきましょう。最初に書くべきはDOCTYPE宣言です。HTML5はかんたんです。ちなみにHTMLは必ず半角の英数字で書いて下さい。

<!DOCTYPE html>

これがDOCTYPE宣言になります。続いてHTMLを示すコード”<html>”を書きます。

<!DOCTYPE html>

<html>

</html>

HTMLは必ず閉じタグをセットで書きます。閉じタグは、同じものの”<“の次に/を入れるだけです。この場合は、</html>になります。

これをテキストツールに書くだけでHTMLの基本は完成です。あとは保存してから、拡張子を.htmlに書き換えるだけでHTMLファイルになります。

では、この中に日本語を表す一文を追加しましょう。

<!DOCTYPE html>

<html lang=”ja”>

</html>

このlang=”ja”を加える事で日本語という表記になります。jaはJapanですね。ちなみにenと書くと、Englishなので英語という事になります。

このHTMLの中に、情報を入れていきます。情報を入れる為の要素は<head>になります。もちろん閉じタグも必要ですので、

<!DOCTYPE html>

<html lang=”ja”>

<head>

</head>

</html>

と書きます。さらに文字エンコーディングの指定をこの<head>内に追加していきます。”<meta charset=”utf-8″>”を追加します。このmeta要素はこの後も登場しますが、閉じタグは不要になります。閉じタグが要らない要素はいくつかあります。HTML5では、文字のエンコードにUnicode8が推奨されている為、utf-8と書きます。

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”utf-8″>

</head>

</html>

これで、日本語のUnicode8という指定までが完成しました。<head>内にもう一つ要素を追加していきます。<title></title>です。これはサイトのタイトルを表す要素になります。webブラウザの上部に、webサイトのタイトルが表示されていますよね。あれです。この<title></title>の間に文字を入れると、サイトのタイトルとして表示されるんです。便利ですね。

<title>サイトタイトル</title>

こんな風に書きます。もちろん日本語でOKです。決められた要素間では、日本語で普通に表記していく事が可能です。

 

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”utf-8″>

<title>サイトタイトル</title>

</head>

</html>

 

ここまででサイトのタイトルまで表示する事が可能になりました。次にコンテンツを入れていく為の要素を追加します。これは先程のheadに対してbodyになります。書き方は<body></body>です。これをheadの閉じタグの後に書きます。基本的にHTMLは、このbodyの中に要素を書いて行く事になります。

 

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”utf-8″>

<title>サイトタイトル</title>

</head>

<body>

</body>

</html>

 

これでHTML5の基本ベースの完成です。もうお気付きの方もいると思いますが、HTMLは、原則として入れ子にして書いていくのです。この入れ子が出来てないとエラーが起きますので要注意です。

今回はここまでで続きはまた次回書いていきます。次回は、body要素の中身を実際に入れていきたいと思います。

スポンサーリンク

この記事が気に入ったら
いいね ! しよう

Twitter で

-AdobeCreative Cloud, Illustrator, Photoshop, webデザイン, wordpress, デザイン
-, ,

執筆者:


コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

サーバー

クライアントサーバー型のネットワークで、クライアントコンピュータからのリクエストを受けて各種のサービスを提供するコンピュータのこと。ローカル上で使用されるサーバーとしては、プリント処理を受け持つプリン …

クライアント

クライアント クライアントサーバー型のネットワークで、サーバーにリクエストを送ってサービスの提供をを受ける側のコンピュータのこと。 スポンサーリンク また、一般用語としては、発注主(顧客企業)の事をい …

色補正(いろほせい)

カメラで撮影した画像はそのままでは色やコントラストが印刷には向かないネムタイ状態にある。 そのため、画像の色のトーンや濃淡を調整し、印刷用に適したものに補正する操作。カラーコレクションなどともいう。具 …

アンシャープマスク

印刷用の画像に対して施す処理で、細部のコントラストを調整して、輪郭をよりシャープにするもの。通常の撮りっぱなしの画像はどんなに鮮明でもそのまま印刷をするとネムたい感じの結果にしかならず、必ず必要な処理 …

グラフィックデザイナーになるためにやるべき事

長年グラフィックデザイナーとして生きて来ました。採用面接をしたり、新人教育をしたりしてきてグラフィックデザイナーになるために必要な事。なるためにはまず何をするべきかなど、長年考えて来た事や、必要な条件 …

2018/07/30

オリジナルTシャツを簡単に作れるTシャツトリニティ

気軽にTシャツを作りたい!そんな思いを簡単に実現出来てしまうサイトがあります。 Tシャツトリニティ Tシャツトリニティ このTシャツトリニティは、パソコンやスマートフォンからでも画像を用意するだけで簡 …

2018/07/27

簡単!Photoshopで太陽を作る方法

猛暑が続くので、それにちなんで太陽のネタを書こうと思います。 以外と知らない!?Photoshopで太陽の作り方 晴れた写真を撮ると太陽の光が強すぎて、青空だったはずが、空が真っ白に飛んでしまうこと、 …

2018/07/20

ウォータープルーフ対応Bluetoothスピーカー JBL FLIP4を買ってみました

毎日、猛暑日が続きますね!そんな夏本番を楽しくする、便利なガジェットをご紹介します! どんなシーンでも使える便利なBluetoothスピーカー JBL FLIP4です。 ちなみに、なにかと話題のスマー …

2018/06/24

35mm版(さんじゅうごみりばん)

一般的なロールタイプの写真フィルムサイズ。35mmフィルムがかつてライカに採用され全世界に広まったことから、このサイズのフォーマット(縦3.6 cm×横2.4 cm)をライカ版と呼ぶこともある。1カッ …

2018/06/24

三原色(さんげんしょく)

割合を変えて混ぜ合わせることで、あらゆる色を表現出来る3つの基本的な色のこと。光の三原色は、RED(赤)、GREEN(緑)、BLUE(青)であり、全てを混ぜ合わせると白(本当は透明)になる。また、イン …

クリックしていただけると助かります


デザイナーランキングへ にほんブログ村 デザインブログへ
にほんブログ村

スポンサーリンク

    スポンサーリンク

    %d人のブロガーが「いいね」をつけました。