Lesson 06 レイヤー感と奥行きのあるカラフルな分布図 - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

Webデザイン 表現&技法の 新・スタンダード

Lesson 6

レイヤー感と奥行きのある カラフルな分布図

	制作・文			奥山寿史（ユルユラデザイン.）
＞	To Use			Photoshop | Illustrator
＞	Browser			IE | Firefox | Safari

Webサイトでは情報を視覚的に伝える手段として、図やグラフを掲載する機会は多い。イメージ写真と違い地味になりがちだが、透明感ある配色やパースをつけるなどの工夫でスタイリッシュな印象を与えることができる。

最初にIllustratorで[#000000]の新規スウォッチを「black」で登録しておく。420×270ピクセルの長方形を[塗り：なし][線：black30%][線幅：1pt]で描画する。[ツール]から[ダイレクト選択ツール]を選択して左辺をクリックして、オブジェクトメニュー→" 変形" →" 移動..." を選択、【1-1】の設定でコピーする。コピーした線をblack10%にして、オブジェクトメニュー→"変形" →"変形の繰り返し" を長方形の横幅いっぱいまで繰り返す。⌘（Ctrl）+Dを行うと便利だ。次に上辺を[ダイレクト選択ツール]で選択し、下に15ピクセルでコピーする。同様にblack10%にして"変形の繰り返し"を行い長方形いっぱいにコピーする。black10%の縦ラインの中央と、横ラインの中央から1つ上のラインをblack30%にして、black30%のラインをすべて最前面に配置する【1-2】。


【1-1】「OK」をクリックするとただの移動になってしまうので、「コピー」をクリックする


【1-2】

左横と下に、グラデーションの長方形を描画し、それぞれの軸に合ったテキストを添える【2-1】。方眼の上に135×100ピクセルの楕円形を描画する。色は透明感のある色でスウォッチに「color1」と登録しておく。下に添えたテキスト以外を選択して、[ツール]の[シアーツール]をダブルクリックする。【2-2】の設定で実行し、オブジェクトの高さを230ピクセルに縮める。左横のテキストの可読性が低いので、【2-3】のように設定する。下のテキストの位置が右にずれてしまっているので、横グラデーションの中央に配置しなおす【2-4】。


【2-1】テキストは新ゴMの12ptとし、グラデーションは#FFE682と#FF9673で配色した


【2-2】


【2-3】水平比率を広げ、垂直比率を100%に戻す。トラッキングを100ほど広げると可読性が上がる/span>


【2-4】 横ラインの中央から1 つ上のラインをblack30% にしたのは、シアーをかけた際に人の目の感覚でこれくらいの位置が中央にあるように感じられるためだ

楕円オブジェクトのグラデーションを【3-1】の設定にする。このオブジェクトをコピーして背面にペーストし、少し拡大して右下に配置。カラーガイドパレットを使うなど、「color1」より少し濃い色を設定して立体の影のように見せる【3-2】。上のグラデーションの楕円をコピーしておき、グラデーションの楕円と下の影の楕円を選択して、パスファインダの[前面オブジェクトで型抜き]を実行する【3-3】。コピーしておいたグラデーションの楕円を前面にペーストしたら、この2つのオブジェクトを[描画モード：乗算]に設定する。さらにこれらをコピーして背面にペーストし、塗りを白にして、[描画モード：通常][不透明度：50%]に設定する。再度グラデーションの楕円をコピーして前面にペーストしたら、[ 塗り：なし][ 線：白][線幅：1pt][描画モード：通常][不透明度：60%]に設定。これで1つの円図が完成だ【3-4】。


【3-1】［種類：線形］、［角度：60°］【a】［位置：0%/color1： 100%］ 【b】 ［位置：100%、color1：50%］


【3-2】


【3-3】


【3-4】［塗り：白］、［描画モード：通常］［不透明度：50%］のオブジェクトを背面に配置したのは、方眼の透け具合をやわらげるため

この円図を複製し、区別がつく透明感のある色で再配色していく【4-1】。円図の上に載せるテキストは、視認性を考えて長方形の背景に載せていく。個々の円図の色に合わせていきたいが、ここまで使ってきた透明感のある色だと文字の視認性が悪い。スウォッチパレットで各円図のキーカラーを選択し、カラーガイドパレットの「ハーモニールール」から適したルールを選択する【4-2】【4-3】。この候補色の中で、同色から濃度が上がった色を選択しスウォッチに登録する。[塗り：白]、[線：濃度を上げた色]の長方形を描画し、その上に[塗り：濃度を上げた色]でテキストを配置する。長方形は[描画モード：通常]、[不透明度：70%]程度に設定すれば、全体的にレイヤー感が増してくる。


【4-1】再配色していく際は、最終的に分布する内容をふまえて、その項目に合った色を設定していくとよい


【4-2】


【4-3】元の色によって、「隣接補色【4-2】」や「ハイコントラスト1」などを選んでいく

この作業を各円図ごとに行い、テキストを配置していく【5-1】。各円図を重ねるとレイヤー感が強調されるので、目的の分布に合うようにうまく配置していこう。


【5-1】各円図、テキストオブジェクトは個々でグループ化しておくとよい