コンテンツをデザインする
キービジュアルのデザインが終わったら、次はコンテンツのデザインに進みましょう。
まず最初に考えなければならないのが、コンテンツ内容の視覚的優先順位です。
「鈴木智子のホームページのアクセスアップ講座」トップページのコンテンツ内容は、下記の3つです。
| コンテンツ内容 | 視覚的優先順位 |
|---|---|
| コンテンツ | 2 |
| ダイレクトリンク | 1 |
| トピックス | 3 |
どんなコンテンツ内容のホームページでも、デザインに取り掛かる前に視覚的優先順位を確定しておくことが重要です。
優先順位を曖昧にしたままデザインを進めてしまうと、様々な弊害が発生します。
完成間近になっても全体のバランスが取れずに、作り直しになったりすることもあるかもしれません。
完成して公開したとしても、閲覧者が見たときに「全てのコンテンツ内容が目立ちすぎていて（地味すぎて）、どこから見ればよいのか一目で把握できない」という問題が起こりかねません。
もっとも、「楽しい」「内容豊富」などの視覚的効果を狙うのなら、全てのコンテンツ内容を別々に凝ったデザインにしても良いかもしれません。
しかしこの手法は、下手をすると単に「まとまりがない」「うるさい」「必要な情報がどこにあるのか分からない」といった印象になりがちですので、デザインのどこかに共通点を持たせて統一性を保つ方が良いです。
優先順位でデザインする
「鈴木智子のホームページのアクセスアップ講座」トップページのデザイン手順を説明します。
まずは優先順位第1位のダイレクトリンクから。
優先順位の高い順番に、画面上での占有率・色の含有量などを大きく取ると破綻のないデザインに仕上げることができます。
使う色は、サイトで使用している共通の色、またはその反対色が一般的です。
「鈴木智子のホームページのアクセスアップの講座」では、大項目ごとにコンセプトカラーがありますので、そのまま使用します。
ここでもまず要素の配置を行います。
要素の配置は、「ワイヤーフレームとして仕上げる」にある通りです。
ダイレクトリンクのレイヤーを選択して、右クリックから［レイヤー効果］をクリックします。
境界線を1pxの赤（#ff6666）に設定します。
[四角形ツール]で見出しの部分を作ります。
見出し部分のレイヤーのサムネイルをダブルクリックして色を赤（#ff9999）に変更します。
背景のレイヤーの色も白（#ffffff）に変更します。
さらに、ここへイラストを乗せます。
イラストの作成は、「シンボルマーク（アイコン）の制作」にある通りです。
IllustratorからPhotoshopへのデータの貼付は、「キービジュアルをデザインする」で説明してあります。
「鈴木智子のホームページのアクセスアップ講座」では、各講座を執筆するにあたって私をサポートしてくれた社員にマスコットキャラクターとして登場してもらいます。
大企業のホームページでも、商品の画像やサービスをイメージした画像が配置されていることが多いですよね。画像を使った装飾的なデザインは目立ちますので、自然にユーザーの目を誘導することができます。
デザインに迷った時は、画像やイラストを使うことを検討してみましょう。
テキストの位置や色を調整します。
同じように、各コンテンツを制作します。
トップページ全体を見渡すと、なぜかオレンジやピンクなどの帯の部分が浮いているように感じました。
しばらくじっと見つめていると、共通要素にはグラデーションを使用しているのにこの部分はマットであることに気づきました。
ダイレクトリンクの部分にもグラデーションを乗せて、全体の調整をしなければなりません。
更に、帯の部分には斜線を入れて目立たせてみようと思います。
では早速やってみましょう。
グラデーションを入れる
色の付いた帯のレイヤーを右クリックして［レイヤー効果］をクリックします。
［グラデーションオーバーレイ］を選択して、グラデーションを調整します。
ここはダイレクトリンクなので、はっきりと目立たせながらも調和を保つよう、今回は描画モードを「焼き込みカラー」としました。
グラデーションの色はあまり強い印象にならないようグレー（#999999）としました。
グラデーションは入りましたが、まだ何か物足りない印象がしませんか？斜線を入れてみます。
斜線を入れる
まず、パターンを用意します。
［ファイル］→［新規］をクリックします。
新規ファイルを作成します。
［レイヤー］→［新規］→［レイヤー］をクリックして新規レイヤーを作成します。
[ズームツール]を選択して1600％まで拡大します。この時、［ビュー］→［定規］をクリックして定規を表示させておきます。
[鉛筆ツール]を選択して大きさを1pxに設定をします。
適当な場所にマウスを当てて斜めに3ドット、クリックして線を書きます。
[長方形選択ツール]を選択して、先程書いた線を囲むようにドラッグで3px×3pxの正方形を選択します。
正方形が選択された状態のまま、［編集］→［パターンを定義］をクリックします。
パターン名を入力します。今回は「斜線」としました。
制作中のドキュメント画面に戻ります。
ワークスペース右下の右から二番目をクリックして、新規レイヤーを作成します。最後にクリッピングマスクを作成しますので、新規レイヤーはグラデーションレイヤーの上に作成します。
[長方形選択ツール]を選択して、パターンを使用したい部分より少し大きめにドラッグして選択します。
選択された状態のまま［編集］→［塗りつぶし］をクリックします。
先程作成した斜線パターンを選択します。
選択した範囲が斜線で塗りつぶされました。
ワークスペース右上にある不透明度のスライダを調節します。
斜線レイヤーにもグラデーションを掛けたいと思います。
レイヤーを右クリックして［レイヤー効果］→［グラデーションオーバーレイ］を選択します。
さらにはっきりとした印象にしたいので、ハイライトを設定していきたいと思います。
新規レイヤーを斜線レイヤーの上に追加します。［レイヤー］→［新規］→［レイヤー］をクリックします。
レイヤーの名前を「ハイライト」としました。
[長方形選択ツール]を選択して、ハイライトを入れる範囲を設定します。
[グラデーションツール]を選択して、グラデーションを編集するメニューバー上部のグラデーションバーをクリックします。
ハイライトなので、グラデーションの色を白（#ffffff）に設定します。
[長方形選択ツール]で範囲設定をした長方形下部から上部へドラッグをします。
上部の方が明るいグラデーションがかかりました。逆に上部から下部へドラッグすると、下部が明るくなります。
レイヤーパレット右上にある塗りや不透明度スライダなどを使用して、色を調整します。
斜線レイヤーとグラデーションを掛けたレイヤーを、枠のレイヤーにクリッピングします。
ctrlキーを押しながら2つのレイヤーをクリックして、同時に選択します。
その状態のまま右クリックをして［クリッピングマスクを作成する］をクリックします。
どちらのレイヤーも枠より下に置かれましたね。
また、キービジュアルに揃える為に、ダイレクトリンクの四角形も角丸長方形ツールで作成したいと思います。詳しくは「キービジュアルをデザインする」をご参照ください。
このように、目立つだけでなく、全体との統一感も大切です。
他の3つも同じ作業になりますので、複製を作成して制作します。
この時点でのpsdデータをこちらに上げていますので、解凍してご覧ください。
あと一歩で完成ですね。
「トップ画面のデザインを仕上げる」で完成させます。
