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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

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

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

組版(くみはん)

組版(くみはん) もともとは活版の版を作成する作業のこと。現在では、ページレイアウトソフトなどで文字や図版をページに配置していく作業のことも組版と呼ぶ。組版には、文字を美しく、読みやすくレイアウトする …

ガモット

色の再現範囲のこと。通常はモニタやプリンタの表現可能な色の範囲を意味する。 スポンサーリンク 関連

色数(いろすう)

モニターまたはカラー画像データで、同時に表示することが出来る色の数のこと。各ピクセルが、それぞれ何ビット分の情報を持っているかによって決定される。1つのピクセル当たり24ビットまたは32ビットの色情報 …

デザインに役立つ色の組み合わせ

デザインに大事な色のセンス。以前、色を決める時ってどうしてるんですか?って質問をされた事があります。配色を考える場合、闇雲に決めている訳ではありません。色々と意味合いがあって配色をしているのですが、そ …

2018/06/24

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

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

2018/06/24

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

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

2018/06/01

サムネイル

画像やページのイメージ等を、小さいサイズで一覧表示する機能のこと。また、その画像を指す。thumbnailは親指の爪という意味。本来は、小さなアイデアスケッチなどを指す言葉。業界的には、サムネなどと略 …

2018/04/07

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

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

2018/04/03

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

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

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


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

スポンサーリンク

    スポンサーリンク

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