WEBオペレーターのためのWEBデザイン勉強会Vol.10
～サイトデザインのモックアップを手書きで作ってみよう～

おかげさまで10回目の開催となりました。今回は、今までと趣向を変え、デジタルからアナログへ。
WEBサイトデザインを作る上ので考え方の解説と、皆さんと一緒に、サイトデザインを手書きで作っていこうと思います。
今回も軽食を食べながらのスタイルを予定しています。そのため、開催時間が長くなっています。また、参加費用を固定にしました（トータルで若干お得になるようにしています）。

日程内容は下記となります。参加される方はATNDの告知ページから参加申し込みをお願いします。

• 題目：WEBオペレーターのためのWebデザイン勉強会Vol.10
• 参加費：1,500円
  ※参加費に軽食1品（決定済み）＋ドリンクバーが含まれます。
• 定員：30名（先着順）
• 日程：2012年3月10日（土）18:00～21:00
• 場所：場所：ダイニング＆カフェON（おん） / 新和食 温
  ※予約名は「IDプロジェクト」となります。
• 住所：北海道札幌市東区北17条東15丁目4-20
• WebサイトURL：http://on-sapporo.com/access.html

• 当日は筆記用具をご用意下さい（用紙はこちらでご用意致します）。
• 参加費は当日徴収いたします。
• PCを持っていなくても参加できます。
• キャンセルについてはATNDからお願いいたします。
• 参加定員についてはATNDの参加状況をご確認下さい。

以上、よろしくお願いいたします。

第7回目は、WEBサイトのページを構成する各グループに使われているデザインとパーツごとのデザインの制作方法について解説しました。記事内容は、当時紹介した内容を再構成してまとめています。

WEBサイトページの構成

WEBサイト1ページ内で構成されているグループには次のようなものがあります。

背景

画面背景は、手の込んだ加工を行うと立体感を出す、メインコンテンツを目立たせることが可能です。ベタ一色、グラデーション、市松模様など、簡単なものが多かったのですが、最近ではノイズを乗せるなど手書き感や立体感を出すものが増えてきています。

ヘッダー・フッター（ナビゲーション）

ヘッダーやフッターには、ホームやポリシーなど、サイトの基本コンテンツへリンクするナビゲーションを表示します。矢印を加工してユーザーに分かりやすいようにします。

グローバルナビゲーション

グローバルナビゲーションは全ページに表示されるリンクボタンです。そのため、はっきり作ることで目立つようにする、シンプルに作りメインコンテンツへ誘導させるなど、色々な表現方法があります。

パンくず

パンくずはユーザビリティの観念から表示が一般化しています。デザインとして有名なのはアップルのWEBサイトで作られた背景と矢印をまとめたものです。

メインコンテンツ

単記事など、一つの情報を角丸なのでまとめ、一目で分かりやすくすることでユーザーへの誘導を計る工夫がされるようになりました。

見出し

メインコンテンツ内の文章タイトルとして表示するものです。背景を濃い色にすると区切りとしての意味合いが強くなります。シンプルにすると見出し下にある文章が読みやすくなります。

サイドメニュー（サブメニュー）

グローバルメニューがまとめられ、サイドカラムが一般化したのでよく見られるようになりました。作り込むとデザインとしてワンポイントとなり、ページが引き立ちます。

ページトップ

縦に長くなるページは必ずついてるリンクボタンです。目立たないように右下隅に置いたり、フッターに組み込む、画面の端など種類があります。

フッター、メインビジュアル

コピーライトやクライアント情報の表示がされる部分です。最近ではサブメニューの項目を表示するなど、ユーザーへのフォローをするようになりました。また、デザイン的に大きく加工しリッチに見えるように工夫されるようにもなりました。

また、メインビジュアルは、色の階調をより幅広くしたHDR（ハイダイナミックレンジ）と呼ばれる手法を使った画像が使われるようになり、より印象を高める傾向が出てきています。

参考サイト

上記グループのデザインを考えるときに参考となるサイトを挙げておきます。

• ブブンデザインアーカイブ
• フェンリル　デベロッパーズブログ