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, デザイン
-, ,

執筆者:


コメントを残す

関連記事

DTP向けレーザープリンター比較

DTP向けレーザープリンター比較 DTP用に使えるレーザープリンターって実は少ないんです。ただ出力すれば良いという方は、普通のレーザープリンターで構わないのですが、色も忠実に再現して、色校正紙の代わり …

解像度(かいぞうど)

画像やプリンタなどのきめ細やかさを表す指標。dpi(またはppi)という単位で表される。dpiは1インチ当たりにいくつの点(ドット)があるかを表すもので、この値が大きいほど精細な画像を表現する事ができ …

クライアント

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

行揃え

スポンサーリンク 行の中で、文字列をどの位置を基準に揃えるかという設定のこと。横組みの場合、左揃え、右揃え、中央合わせ(センタリング)などの種類がある。また、行の左端から右端までに文字を均等の間隔で配 …

no image

ウェイト

書体の文字の太さの事。フォント名にはウェイトを表す言葉が含まれている事も多い。例えば同じ系統のデザインで太さが違うフォントには、基本のフォント名の後に、ライト(L)、レギュラー(R)、ミディアム(M) …

スポンサーリンク

2018/04/07

レバテッククリエイターさんでこのブログが紹介されました

昨年末くらいにレバテッククリエイターというweb、ゲーム業界のクリエイター向けの求人サイトのブログで、このブログが紹介されました。ということでご紹介させていただきます。 レバテッククリエイターさんの取 …

2018/04/03

地域ポータルサイトを作ろう 第3回

前回地域ポータルサイトを作ろう 第2回からさらに1ヶ月以上が経ちました。 現状は、mottokasukabe.comで確認できます。 本業のデザイン仕事で、現在とある酒蔵のホームページリニューアルがか …

2018/03/30

Illustratorショートカット集

Illustratorショートカット集 Illustratorで必須のショートカットを記しておきます。Illustratorの操作を素早くする事で仕事の効率は倍以上に早くなります。覚え方は実に簡単。そ …

DTP画像

2018/02/22

これだけでデザインが良くなる!字詰めをちゃんとしよう!

さて、タイトル通り今回は字詰めのお話。 以前、デザインで素人がやりがちな事。プロっぽく魅せるコツ。でも軽く触れたのですが、先程ディレクターの方から 「字詰めの仕方を新人に教える本とか持ってない?」 っ …

2018/02/19

地域ポータルサイトを作ろう 第2回

前回地域ポータルサイトを作ろう 第1回から約1ヶ月経ちました。 あれから進んだ事は、トップページのデザインが概ね出来た事。下層ページのスマホデザインがなんとなく出来た事くらいです。 その他、サイトの構 …

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


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

スポンサーリンク

    スポンサーリンク