| keyword 健康 ［類義語］ヘルシー、ナチュラル、運動、食育 point ■温かみのある配色 ■堅苦しくならないポップなデザイン |
健康をテーマにしたサイトの場合、コンテンツはたいてい「○○をして○○になろう」といった、訪問者に行動を促す内容になる。つまり魅力的なリターンを提示して相手の行動を促すようなデザインをしなければならない。しかも、その良い結果をなるべく楽にもたらすという印象でなければ何かアクションを起こさせるのは困難だろう。そこで、スタンダードなレイアウトと暖色系の色合いで安心と明るさを出しつつ、ポップなテイストでまとめることで手軽さを表現するのがよい。
制作・文＝沖塩慶悟（有限会社ムーニーワークス）
■Design Parts／デザインパーツ
角丸長方形ツールで白い長方形を描き、レイヤーを複製。下のレイヤーにレイヤースタイルウインドウからグラデーションオーバーレイを選択して［描画モード：通常］、［不透明度：90％］と設定。さらに境界線を選択して［サイズ：1px］、［位置：内側］と先ほど登録したパターンを［不透明度：30％］で追加する。次に、上のレイヤーの長方形の上辺にペンツールで適当にパスを3つ追加する。追加したパスの真ん中を下げて緩い「ν」状のカーブをつくり、レイヤースタイルで好みのグラデーションを追加して完成。角丸とグラデーションで、柔らかく、かつスポーティなヘッダーができた。
［その他のデザイン］
■Layout／レイアウト
堅苦しくならないためにコンテンツの大枠を囲わずに広がりのあるデザインにしたが、今回のサンプルのようにヘッダーが目立つ場合、コンテンツ部分のビジュアルが弱くなってしまう。そういったときは各コンテンツを分けてビジュアライズするとデザインにメリハリが出る。この場合はサイド領域の背景に薄くオレンジを敷いて目立たせた。
■Texture／テクスチャ
Web2.0的な斜線をつくる。長方形選択ツールで1px×1pxの正方形をつくり、斜めに7つ並べる。背景を透明な状態にし、つくった斜線「／」を長方形選択ツールでピッタリ正方形に囲む。編集メニュー→“パターンを定義”でパターン登録して完成。レイヤースタイルのパターンで選択して使おう。
■Example／実例
ファイブミニ
www.fibe-mini.jp/
かわいいフォントと柔らかな色味でポップで明るく「健康」というテーマを印象づけている。
■Application／応用
色味をオレンジから緑ベースに変えることで「環境（エコ）」や「和風」など、「自然」をテーマとしたイメージを感じさせる効果が出る。背景にグラデーションを敷けばより掛け合わせるテーマのイメージを強調することができ、周囲を囲うことでサンプルのポップさが少し引き締まり、かしこまった雰囲気になる。
■Color map／配色
高明度・中彩度の黄系と黄緑系、オレンジが中心。寒色系は避ける
| #ffcc99 | #ff6633 | #99cc66 | abc | #ffffcc | #ffff00 | #99cc33 | abc | #ffcc99 | #ff6603 | #ffcc66 |
| #FFCC99 | #FF6633 | #99CC66 | #FFFFCC | #FFFF00 | #99CC33 | #FFCC99 | #FF6603* | #FFCC66 |
キーワード1 「上品」
キーワード2 「健康」
キーワード3 「ナチュラル」
キーワード4 「インダストリアル」
