キービジュアルをデザインする
「ユーザーがサイトの特長を一目で把握できる」ためのキービジュアルをデザインしましょう。
ショッピングサイトであれば主要商品、サービスを提供しているサイトであればイメージ画像、ゲームであればキャラクターなどが一般的です。
キービジュアルは、場合によってはポスター・名刺・カタログ・パッケージなどの印刷媒体にも使用され、そのサービス（商品・会社）のイメージの核になります。
企業のキービジュアルは、綿密なブランディングから始まり、ディレクターやデザイナーが試行錯誤して出来上がります。
皆さんが目にするキービジュアルは、写真・ＣＧ画像・Flashなど様々ですが、いずれもサイト（サービス・商品・会社）の特長を視覚的に訴えるものであるはずです。
では「鈴木智子のホームページのアクセスアップ講座」の場合はどうなるでしょうか。
このサイトの「売り」は情報、メインキャラクターは鈴木智子です。
また、各講座には私をサポートしてくれる社員のみんなにも登場してもらおうと考えています。
彼らの写真をコラージュして使用することも考えましたが、写真だとビジネスっぽいというか、硬い印象が強くなりすぎると思いましたで、イラストにすることにしました。
Photoshopでの「フォトコラージュについて」は後ほど、解説します。
ラフスケッチの作成
「レイアウトパターンを配置する」のワイヤーフレームの作成でもやったように、Illustratorで制作する前に、紙の上でラフスケッチを繰り返すと良いでしょう。
Illustratorでデジタル化
ラフスケッチをスキャンしてIllustratorに取り込んで、データに起こし、細かく修正・変更を加えます。
キャラクター部分の制作は、「シンボルマーク（アイコン）の制作」を参考にして下さい。
人物が出来たら次に背景を制作します。
背景の制作は、「地図の制作」を参考にして下さい。
Illustratorで制作したデータをPhotoshopに貼りつける
Illustratorの[選択ツール]で、作成したキャラクターと背景を選択します。
Illustratorの[編集]→[コピー]をクリックします。
Photoshopの[編集]→[ペースト]をクリックします。
［ピクセル］を選択してペーストします。
Photoshopで移動、拡大をして、適宜配置します。
ペーストしたレイヤーを設置するレイヤーのすぐ上に移動させます。
Photoshopで［編集］→［変形］→［拡大縮小］
Photoshopで縦横比固定アイコンをクリックして、ドラッグで適宜配置しましょう。
クリッピングマスクを使って画像を切り抜く
キービジュアルに丸みを出す為、角丸四角形で枠を作成します。
Photoshopで角丸四角形アイコンをクリックして、丸みを3pxとします。
その後、Photoshopの角丸長方形ツールでキービジュアルの領域を描きます。
「ワイヤーフレームとして仕上げる」で説明した通り、これまで使用していた長方形シェイプを削除して、新しく作成した角丸長方形シェイプをキービジュアルのレイヤーの下に移動させます。
Photoshopでキービジュアルのレイヤーを右クリックして[クリッピングマスクを作成]をクリックします。
キービジュアルの角が丸くなって、親しみやすい雰囲気になったでしょう？
半透明なレイヤーを作成する
次に、吹き出しを設置します。
Illustratorで作成したキービジュアルのファイルを開き、［選択ツール」を使用して吹き出しを選択します。
Illustratorの[編集]→[コピー]をクリックします。
Photoshopの[編集]→[ペースト]をクリックします。
［シェイプレイヤー］を選択してペーストします。
ペーストする時、[シェイプレイヤー]にしておくと、後で拡大・縮小する際に便利です。
Photoshopで吹き出しをドラッグして移動、適宜配置します。
縦横比固定アイコンをクリックして、吹き出しを適切な大きさに拡大・縮小します。
次に、吹き出しレイヤーの不透明度を変更します。
不透明度100％のままでも良いのですが、吹き出しが強すぎる印象がありますし、せっかくの西新宿の街並みが隠れてしまいます。
吹き出しレイヤーを選択した状態で、レイヤーウィンドウ右上の[不透明度スライダを動かしてください。
Ctrl＋Alt＋PrintScreenでは、スライダのみになってしまうのでトリミングして使用してください。
70％ほどにすると、若干背景が透けて、「吹き出しでコピーを目立たせる」「キービジュアルでホームページの内容を印象付ける」の二つを両立できた形になります。
吹き出しにドロップシャドウを設定します。
吹き出しレイヤーを右クリックして、［レイヤー効果］を選択します。
[ドロップシャドウ]を選択して不透明度を20％に設定します。
最後に、すでに入力してある下記のテキストを吹き出しレイヤーの上に移動し、フォントや文字サイズを調整します。
テキストのフォントや大きさを調整します。
テキストレイヤーのサムネイルをダブルクリックします。
今回は「AR_P悠々ゴシック体E」のフォントで24pxとしました。
最後に行間など調整します。
キービジュアルのaiデータをこちらに上げていますので、解凍してご覧ください。
現在のpsdデータをこちらに上げていますので、解凍してご覧ください。
一気に印象が変わりました。完成に近づいている感じ…ワクワク。
次に「コンテンツをデザインする」に進みます。
クリッピングマスクを使用すると、レイヤーの内容を使って、上にあるレイヤーをマスクすることができます。マスクは、一番下のレイヤーつまりベースレイヤーの内容によって決まります。
つまり、クリッピングマスクとは、写真や画像をくり抜いたり、文字に水滴模様を乗せたりする時に使う機能です。
