ウェブデザインB 第13回 - ウェブデザインB | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザインB 第13回

webdesignb13

ウェブデザインB 第13回

前々回、前回と、「配色」「レイアウト」のお話をしました。
デザインの基本的な部分を学んできたんですが、今回は応用を行います。

今週、来週と二週にわたり、
みなさんが制作するWebサイトのロゴを作ってみましょう。

Webデザインの構築③ Webサイトのロゴデザイン

ロゴは「らしさ」を一目で表すもの

ロゴの制作をするにあたり最初に行うのは、
そのWebサイト(Webサービス)が何を目的としているか、
そしてどんな性質を持っているかを考えること。

ロゴは、そのWebサイトやサービスの「らしさ」を、
一目で表現できるもの
でなければいけません。
一言で自己紹介をするようなものです。

クリエイティブなロゴデザインで例を挙げると、
ネットショッピングのAmazonが最も有名です。

webdesignb13_01-01

Amazonはネットショッピングの企業ですね。
開設当初はインターネット書店、つまり書籍販売からスタートしたそうですが、
現在では売っていないものを探す方が難しいほどの品目があります。

そんなAmazonのロゴは本当によくできています。
画像を見てみましょう。

webdesignb13_01-02

Amazonという英字の下に矢印があり、矢印は「a」から「z」へ伸びていますよね。
「A」と「Z」はそれぞれアルファベットの最初と最後の文字。
つまり、「Amazonには全ての商品が揃っています」という意味を持っています。

それだけではありません。

webdesignb13_01-03

矢印をよく見ると、人の口元が笑っているように見えます。
これは「Amazonを利用した顧客が商品を手にして笑っている様子」になっていて、
顧客の満足を表現しています。

ロゴデザインではこういった意味をいくつも込めることが重要で、
自己紹介と同時に「こうありたい」という企業の思いを表現するものでなくてはいけません。

デザインラフで書いた3つのポイントを有効に使う

今回、みなさんが各々のWebサイトのロゴデザインを制作するにあたり、
みなさんに書いてもらったデザインラフの3つのポイントが役に立ちます。

3つのポイントにはそれぞれ以下のようなものがありました。

  1. クライアントの業種
  2. どんなサービスを提供している?
  3. メインターゲットは?

ここをできるだけ詳細に書き出している人は非常に有利です。
詳細に書き出していて、どんなメリットがあるかを少し思い出してみてください。

参考:ウェブデザインB 第2回 デザインラフの制作① ポイントを紙に書く理由

頭の中の引き出しにポストイットを貼って、
キーワードを見つけやすくするためでしたね。

ポイントからキーワードをしっかり抽出していれば、
そのキーワードからロゴを表現するものを取り出せるはず。

ロゴデザイン課題その① キーワード抽出

ではデザインラフからキーワードを取り出してみましょう。
配布した課題用紙にキーワードを記入してください。

授業にでられなくて課題用紙がない場合は以下のURLからダウンロード・印刷してください。
IDとPASSはいつものですが、わからなければ友達に聞いてください。

WebデザインB ロゴデザイン課題用紙

今回はロゴデザインの実例を出してレクチャーします。
今回のクライアント様は岡山市北区で3代続く建具店を経営されています。

ハウスメーカー様からのご依頼を受けての建具設置もされていますが、
オーダーメイドでの建具の製作販売もされています。

今まではハウスメーカー様や工務店様など法人からのご依頼が多いそうなのですが、
今後は個人顧客からのご依頼も受けていきたいということで、Webサイトの新規制作のご依頼を頂きました。

クライアントの業種 岡山市北区にある3代続く家族経営の建具店様。
どんなサービスを提供している? ハウスメーカーや工務店などの法人から依頼を受けて建具の設置を行っているが、今後は個人顧客からの依頼数も増やしていきたい。
取り扱っている商品はドアなどの建具の設置やオーダーメイドで家具などを制作している。また、障子や襖(ふすま)、サッシの網戸などの張り替えも行っている。
メインターゲットは? 個人顧客のメインターゲット層は20代以降の男女。
一戸建てを建てた人やマンションを購入した人を主なターゲットに。

ここからロゴデザインに関係のありそうなキーワードを取り出します。

建具、家族経営、建具設置、法人と個人のご依頼、
ドア、障子、ふすま、網戸、一戸建て、マンション
・・・

現時点でこちらのキーワードを取り出しました。
まだまだありそうですが少なくともこれだけ出てきましたね。

デザインラフを持ってきていない人は自分が作っているデザインからラフを思い出し、
思い当たるキーワードを抽出し課題用紙に記入してください。

ロゴデザイン課題その② ラフスケッチ

キーワードの抽出が終わったら、それを元にぼんやりとプランが浮かんでくると思います。
浮かんできたプランを配布した用紙にスケッチしてみましょう。

注意点として、一つだけではなく思い浮かんだものを全てスケッチしてください。
あくまでスケッチなので一つを丁寧に書かず、ざっとでいいので最低3つは書いてみましょう。

webdesignb13_02-01

おそらくこの工程が最も時間を使うと思います。
最も大変な工程ですが、この工程をおろそかにすると、
次のパス切りや色付けをする時にかなり苦労してしまいます。

逆に言えば、キーワードの抽出やラフスケッチでたくさんアイディアを出しておけば、
そのあとの工程は比較的スムーズに進めることができます。

デザインをスムーズに進めるためにも思いつくだけのラフスケッチを書き出してみましょう。
もしかしたらその中のいくつかのラフスケッチを組み合わせたりすると、
思いのほか納得のできるクオリティのロゴができるかもしれませんよ??

ロゴデザイン課題その③ ラフスケッチを絞り込む or 組み合わせる

ある程度の数のラフスケッチができてきたら、
その中から「これだ」というものを選んでみましょう。

もちろん一つに絞り込めないこともありますよね。
その場合は前述したように組み合わせてみるのも面白いと思います。

webdesignb13_02-02

ロゴデザイン課題その④ ロゴスケッチをチェックする

ロゴデザインにも様々なルールがあります。
以下のチェック項目に沿ってルールに沿ったものかどうかをチェックしてみましょう。

  1. 単色でも表現できるか?
  2. 縮小しても潰れないか?
  3. 文字部分以外を数秒で書くことができるか?
  4. 流行にとらわれていないか?

1と2は、Webサイト以外の媒体への展開性を考えたものになります。
例えばチラシと名刺に使う場合などは、サイズによってはロゴを小さく表示しなければいけない場合があります。
その場合、複雑なパスを使い続けたロゴにしてしまうとロゴが潰れてしまう可能性が高く、使い物になりません。

また、チラシや名刺がいつもフルカラーのものだとは限りません。
キーカラーを1色目、明度を上げたものを2色目に使うくらいなら問題ありませんが、
多くの色を使って色表現に頼ってしまうとWebサイト以外の媒体で使えなくなってしまいます。

次に3は、見た人にすぐ覚えてもらえるかどうか?というところを考えています。
すぐに忘れられるロゴには複雑なものが多いため覚えられないというのが理由です。
皆さんもNIKEだとかAmazonだとかのロゴはすぐに書けますよね?

4はロゴの将来性を考えたものになります。
ロゴは通常、数年程度では変更されず、何年も使い続けるものです。
その時の流行を追いかければその時はモダンなデザインだと思われても、
何年も過ぎれば流行も変わり、古びたものになってしまいます。
「何年も使い続けるもの」ということを念頭に、ロゴデザインを行わなければいけません。

以上です。

どうですか??問題なさそうですか??
実際にはもっともっと本当にたくさんのチェック項目があります。
ルールに沿ったものであればそのまま、そうでなければ修正を行います。

続きは来週

来週は読み込んだ画像を元に、Illustratorでパスを切ったり色をつけたりしていきます。
下準備として、今回書いたラフスケッチをスマホなどで撮影、
もしくはスキャナーで読み取ってUSBメモリやPCに保存しておいてください。
そのデータをそのまま使います。

来週の講義の課題提出ができなくなるので、
必ず画像を開ける状態にしておいてください。

今日のまとめ

具体的なパーツデザインはこれが初めてかもしれませんね。

ロゴはWebサイトに使うだけではありません。名刺に使ったり、チラシなどの印刷物に使ったり、展開性を考えるためによりシンプルなものを作る必要があります。

ロゴデザインのIllustratorを使ったパス切りや配色のコツは来週レクチャーします。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE