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

WEBCRE8TOR.COM

ウェブデザインB 第13回

webdesignb13

ロゴデザイン 前編

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

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

以上です。

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

ロゴデザイン 前編のまとめ

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

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

ロゴデザインのIllustratorを使ったパス切りや配色のコツは来週レクチャー、
さらにチェックに基づき修正点をあぶり出します。

修正点を反映させ、ロゴを完成させ、いよいよIllustratorのデータの制作に取り掛かります。

そしてこれは提出課題です。
キーワードとスケッチを書いた状態にまでしておいて、
PCで扱えるようにスキャナで読み取るか、スマホで撮影して画像データ化して取り込んでおいてください。

パーツ別デザインレイアウトパターン 前編

さて以前の講義でサイトのページタイプ別のウェブデザインを紹介しました。
紹介したものは以下の5つのパターン。

それぞれに掲載されている参考サイトを見てみて、
その中から大まかな方向性を決定しようというお話しでした。

今回と次回は、さらに具体的にページデザインのブロック別に役割と参考アーカイブを紹介します。
まず今回は「ヘッダー」と「フッター」に関するお話。

特に役割に関しては「なぜ?何のためにそこにある?」を考えながら見ていくことが重要です。
それぞれレイアウトの参考になるものを見つけてみましょう。

ヘッダー

役割① 内部リンクを発生させる

ウェブの用語で、同一サイト内でのリンクを「内部リンク」といい、
一般的なウェブページでのヘッダーの役割は、この内部リンクを促すこと、
すなわち「サイト内の他のページへの遷移を容易にする」ことです。

多くの場合、グローバルナビゲーション(以下ナビ)という、
「サイト内の主要なページへのリンクを設定したボタンやテキストの集合ブロック」を配置し、
それぞれをクリックやタップすることでサイト内の他のページへ遷移させるようにします。

また、ナビはページ内に「ただあればいい」というわけではなく、
閲覧者がサイト内で迷うことなく、いち早く目的のページにたどり着くために、
ファーストビューに配置することが適切とされています。

「見やすい位置」に「使いやすいユーザーインターフェイス(以下UI)」で配置することが重要です。

しかし例外もあります。
コンバージョンのための1ページ完結型のランディングページ(LP)の場合は、
そもそも1ページのみであるためページの遷移が不要ですよね。

役割② 次のアクションを起こさせる

役割①で「ファーストビュー」のことを少し説明しましたが、
ファーストビューとは「ページを開いてすぐ見える位置」のことを意味します。

ページを開いてすぐ見える位置、ということは、
つまり、閲覧者が最初にページのデザインに触れる場所になりますね。

ファーストビューに触れた時点で、
「スクロールをするかどうか」「リンクをクリックするかどうか」など、
閲覧者からサイト内で次のアクションを起こしてくれるかどうかが決まってしまいます。

最悪なのはブラウザの「戻る」ボタンで検索結果に戻ってしまうこと。
ヘッダーのデザインのチョイスには細心の注意を払いましょう。

最近のコーポレートサイトに多い「サイトロゴ」と「ナビ」のみで成り立っているものや、
「電話番号」や「簡単な説明」「検索ウィジェット」などを組み込み出来る限り機能性を持たせたもの、
また、メインビジュアルである動画やスライドショーと組み合わせる形で配置したものもあり、
そこまで大きなブロックではないながらも、運営者の意図が最も伝わる場所であることは間違いありません。

参考になるパーツ別ウェブデザインアーカイブ

ではどんなレイアウトパターンがあるのか見てみましょう。
上にもありますが、以下のようなパターンが多いかと思います。

  • 「サイトロゴ」と「ナビ」のみで成り立っているもの
  • 「電話番号」や「簡単な説明」「検索ウィジェット」などを組み込み出来る限り機能性を持たせたもの
  • メインビジュアルである動画やスライドショーと組み合わせる形で配置したもの

こういったパターンのことも確認しながら見ていきましょう。

デザインの参考②ヘッダーの素敵なサイトを集めてみた! | ホームページ制作 大阪【インフォメーションメディアデザイン株式会社】

フッター

役割① フッターナビゲーション

ヘッダーにグローバルナビゲーション(以下ナビ)を配置したことと同じように、
フッターにもナビゲーション(以下フッターナビ)を置く場合があります。

フッターナビにもナビと同等のリンクを配置することもありますが、
「ナビに配置するほどでもなかった」「ヘッダーには入りきらなかった」ために、
ナビにはないリンクを設置することもあります。

例)プライバシーポリシー、サイトマップなど

役割② 運営者の連絡先を明記

どれだけ立派なクオリティの高いサイトを制作・運営していたとしても、
誰からもお問い合わせなどがなければ、ただの自己満足になってしまいます。

閲覧者が運営者に連絡を取りたいと思った時に備えて住所や電話番号などの連絡手段を明示しておけば、
次のステップにつなげることができますね。

役割③ 著作権表記

サイトの著作権の帰属先が誰なのかを明記したものが著作権表記です。
「Copyright 20XX 〜」なんてものがそれですね。

役割④ ページデザインのシメとして

龍弥デザインでも行なっているんですが、
ヘッダーからメインコンテンツを経てたどり着いたデザインのシメになることがあります。

ヘッダーはページを開くたびに毎回表示されますが、
フッターは最下部までスクロールしなければ表示されません。

ページデザインの全体的なまとまりを考えて制作したのに表示されないことがあるのは少し悲しいですが、
その分メインコンテンツに魅力を持たせて自然と最後までスクロールして表示されるようになればこっちの勝ちです。

参考になるパーツ別ウェブデザインアーカイブ

今度はフッターのレイアウトパターンを見ていきましょう。

  • 内部リンクのサイトマップなどを表示した情報量の多いもの
  • サイトマップほどはないものの上部ナビと同等の情報量を掲載したもの
  • 上部のナビに入りきらないリンクを掲載したもの
  • 極力シンプルにして、お問い合わせリンクを目立たせたもの
  • そもそもフッターが存在しない

上記のようなものが多いと思います。
そもそもフッターが存在しないパターンもあるので、
下までスクロールして見ると新しい発見がありますよ。

フッターデザイン.com -Webデザインの“フッター”を集めたサイト-

パーツ別デザインレイアウトパターン前編のまとめ

ヘッダーとフッターの役割に関しては理解できましたか??

当レクチャーをヘッダーとフッターのブロックから始めたのには、実は理由があります。
それは多くの場合、デザイン制作はヘッダーとフッターから行うことが多いからです。

ウェブページは上から下へコンテンツが並んでいますが、その順番通りに制作することはまずありません。
以前にも言いましたが、まず全体からどんどん範囲を縮めて最後に細部の制作を行います。

参考サイトを見て大まかに決めた方向性をもとにヘッダーとフッターから制作を開始していくので、
ページデザインのテイストもこの時点で固まると言っても過言ではありません。

次回はメインコンテンツブロックのお話になりますが、
星の数ほどレイアウトパターンが存在するため現場で登場頻度の高いレイアウトを紹介できたらと思います。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE