2010
10/22
先日は、ご参加された皆様ありがとうございました。おかげさまで第2回目を無事、終了することができました。改めてお礼の程、申し上げます。Webデザイン勉強会#2でプレゼンした内容を下記にまとめました。当日参加できなかった方、興味のある方はごらん頂ければ幸いです。
出席者の状況と要望
今後の参考に聞いてみました。デザイン系を学ぶ方よりもシステム系の参加が多かったのが以外でした。勉強会の要望については、配色、文字組、ライブデザインなど実技系のモノが多く挙げられました。
尚、前半部分は前回のおさらいでしたので割愛します。
Webレイアウト方法について
初期ヒアリング時に考えておきたいこと
Webサイト制作を進める上で、クライアントからヒアリングする時の情報整理が上手にできないと、その後の進捗に影響が出ます。デザイン面に関してクライアントから聞き出したい情報は次の通りです。
- クライアントの業態
- 最終目的
- イメージカラー
- ターゲット層
- エンドユーザーに伝えたいこと
- クライアントが求めているイメージ
これは一例です。制作会社の方針によりヒアリング項目は変化します。また、ヒアリング項目は資料としてまとめておき、クライアントに書いてもらう方法もあります。これがヒアリングシートです。多忙で時間が合わなかったり、具体的な情報がもらえないときに役立ちます。
アイデア発想法
ヒアリング時、情報が少ない場合、制作側で考える必要があります。しかし、そう良いデザインが出るわけでもありません。その様なときの考え方の一つとして「ブレインストーミング」を挙げます。
ブレインストーミング→質より量でもって情報を出す方法
- 一つ物事（テーマ）について何でも良いから情報を出す
- 出された情報について批判、反論しない
- 情報を箇条書きする
- ある程度人数が居た方が良い
情報整理法
ヒアリング時に情報が多かった場合、それらをどうまとめるかにより、サイト構成やサイトデザインが大きく変化します。情報を上手に整理する方法の一つ「KJ法」を挙げます。
KJ法→情報を整理しまとめる方法
- テーマについて量を基準に単語を書き出す
- 単語をグループにまとめる
- グループ同士の関係性を結びつける
- スタート地点を決め、ゴールに向かって文章化する
このようなアイデア発想法は一例です。デザインを作る時にも効果がありますので、興味のある方は調べてみると面白い発見があるかも知れません。
1ページに掲載する情報
ページデザインを行う時、どんな情報をどこに置いたらよいか判断に迷う場合があります。Webサイトの1ページに掲載する情報は、最近ではほぼ決まっていることが多いです。下記に代表的なものを挙げておきます。
- ヘッダー
ロゴ、リード、検索、サブコンテンツメニュー
- グローバールナビ
全てのページに表示するコンテンツ
- メインビジュアル
- コンテンツ
見出し、文章、画像
- サイドカラム
サブコンテンツ、バナー
- フッター
コンテンツメニュー、コピーライト
制作時、迷うと思ったら、ひとまず上記項目をテキストでも良いので並べてましょう。そこからサイト構成は導線を考えながら組み替えていくと、上手く進めることができます。
モノの立体感
Webサイトデザインを作ったとき、思ったより立体感が出ずのっぺりとして印象になってしまうことがあります。薄い印象のサイトはエンドユーザーの記憶にも残りづらいため、あまりお薦めできません。その様なとき、こういったことを押さえておきながら作るとより良いモノができます。主にイラストなどを描かれる場合のTIPSになりますが、Webデザインにも応用が利きます。
「陰」について
立体を持っている物体は手前にある部分が明るく、奧にある部分が暗く見えます。
影について
陰は太陽などの光源が物体に当たった場合、その下の物体に落とす暗い部分です。上記に挙げた「陰」と違うことを押さえて下さい。
明暗の受け取り方
上記に記述しましたが、明るい方が手前、暗い方が奧になりますので、色を付けるときも暗い色は奧に引っ込んで見えるのが一般的です。色の面積により逆転することもあります。
位置による受け取りの違い
Webサイトは文字を左から右に読むため、左上が原点となり、光源の位置も同様となります。ドロップシャドウのように暗い部分をかける場合には、右下にかけた方が違和感がありません。
グラデーションとドロップシャドウ
ボタンやバナーなど、最近のWebパーツは角丸と微妙な立体感です。この場合、グラデーションは緩くかける、ドロップシャドウの不透明度や幅は小さくします。こうすることでより形が分かりやすくなります。
工業製品の形と立体感
3Dアイコンなどよりリアルな形や立体感を求める場合、身近にあるものから学ぶことができます。人間が使うモノは怪我をしないよう全て角が丸く落とされています。また、電気を点灯させるスイッチは、時とともに使いやすく、分かりやすく洗練されて続けています。こういったモノからWebデザインへの応用を考えることができます。
実践編～ワイヤーフレーム～
ワイヤーフレームもどきをIllustratorで作る
私はサイトデザインをする場合、ワイヤーフレームではなく、四角形をグレースケールで置いています。その後、四角形の中にどのような項目をどう配置し、どうまとめるかを考える参考しています。
一人反省会
今回は初心者～中級者を中心に組み立てた内容です。そのため、概念的な説明が多く、現役の方には物足りなかったと反省しています。次回はそこを踏まえて、具体的なデザインTipsを中心に考えてみたいと思います。
タグ: WEBデザイン勉強会
