ホームページを作ろう！webデザインも出来る様になりたい Part.2
AdobeCreative Cloud Illustrator Photoshop webデザイン wordpress デザイン
前回、webデザインも出来る様になりたい Part.1ではグラフィックデザインしかやったことない方向けにwebのデザインについて書きました。しかし、考えてみたらこれはもはや新しい事へのチャレンジなので、グラフィックデザイナー向けと言うか、どんな人にも当てはまるのかもしれないですね。
という事で、誰にでも分かるように書いていけたらと思います。
まずはデザインする事の大前提
ここからはwebデザイン、主にコーディングについて書いて行くのですが、web制作における大前提の話に触れておきます。
このブログを見ているという事は、少なからずデザインに興味があるという事でデザインをやった事があれば尚更理解しやすいかとは思いますが、グラフィックデザインも含めたデザインって行為は単なる絵作りではありません。
これは以前、グラフィックデザイナーになるためにやるべき事でも触れていますが、デザインには目的があり、それを効率よく達成する為の視覚的記号化なのです。紙媒体でもチラシやポスター、パンフレットなどを作る際には必ず目的がありますよね。この様な媒体を作る場合もそうなのですが、目的をどこに設定するかという事が重要になってきます。
例えば、イベントを告知する為のポスターを作成した場合の話をします。この場合、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は必ず半角の英数字で書いて下さい。
|
1 |
<!DOCTYPE html> |
これがDOCTYPE宣言になります。続いてHTMLを示すコード”<html>”を書きます。
|
1 2 3 |
<!DOCTYPE html> <html> </html> |
HTMLは必ず閉じタグをセットで書きます。閉じタグは、同じものの”<“の次に/を入れるだけです。この場合は、</html>になります。
これをテキストツールに書くだけでHTMLの基本は完成です。あとは保存してから、拡張子を.htmlに書き換えるだけでHTMLファイルになります。
では、この中に日本語を表す一文を追加しましょう。
|
1 2 3 |
<!DOCTYPE html> <html lang="ja"> </html> |
このlang=”ja”を加える事で日本語という表記になります。jaはJapanですね。ちなみにenと書くと、Englishなので英語という事になります。
このHTMLの中に、情報を入れていきます。情報を入れる為の要素は<head>になります。もちろん閉じタグも必要ですので、
|
1 2 3 4 5 |
<!DOCTYPE html> <html lang="ja"> <head> </head> </html> |
と書きます。さらに文字エンコーディングの指定をこの<head>内に追加していきます。”<meta charset=”utf-8”>”を追加します。このmeta要素はこの後も登場しますが、閉じタグは不要になります。閉じタグが要らない要素はいくつかあります。HTML5では、文字のエンコードにUnicode8が推奨されている為、utf-8と書きます。
|
1 2 3 4 5 6 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> </html> |
これで、日本語のUnicode8という指定までが完成しました。<head>内にもう一つ要素を追加していきます。<title></title>です。これはサイトのタイトルを表す要素になります。webブラウザの上部に、webサイトのタイトルが表示されていますよね。あれです。この<title></title>の間に文字を入れると、サイトのタイトルとして表示されるんです。便利ですね。
|
1 |
<title>サイトタイトル</title> |
こんな風に書きます。もちろん日本語でOKです。決められた要素間では、日本語で普通に表記していく事が可能です。
|
1 2 3 4 5 6 7 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サイトタイトル</title> </head> </html> |
ここまででサイトのタイトルまで表示する事が可能になりました。次にコンテンツを入れていく為の要素を追加します。これは先程のheadに対してbodyになります。書き方は<body></body>です。これをheadの閉じタグの後に書きます。基本的にHTMLは、このbodyの中に要素を書いて行く事になります。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サイトタイトル</title> </head> <body> </body> </html> |
これでHTML5の基本ベースの完成です。もうお気付きの方もいると思いますが、HTMLは、原則として入れ子にして書いていくのです。この入れ子が出来てないとエラーが起きますので要注意です。
今回はここまでで続きはまた次回書いていきます。次回は、body要素の中身を実際に入れていきたいと思います。
コメントを残す