WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >WEBデザイン

今回は、グラフの作り方・応用編（その2）です！グラフシリーズ、今回が最後です。
予告していたとおり、「立体的な3Dっぽいグラフ」の作り方をご紹介します。

過去の記事はこちら
→更新もできる！Illustratorグラフ作成方法【基礎編】
→更新もできる！Illustratorグラフ作成方法【応用編（その1）】

まずは普通に棒グラフを作ります

立体棒グラフを作ろう！といっても、最初から立体的に作るわけではありません。まずは、基礎編で作ったような、普通の2Dグラフを用意しましょう。

棒グラフができたら、立体化していきます！
グラフ全体を選択した状態で、画面上部のメニューから「効果」＞「3D」＞「押し出し・ベベル」をクリックします。

3D化の調整ウィンドウが出てきました。ここで、まずは右端にある「プレビュー」にチェックを入れましょう。私を含め、ほとんどの方は数値を操作するだけではどういう状態になっているのか分からないので、実際の図形を見ながら調整していきます。
すると、グラフが立体的になりますね。

角度を調整

3つの角度がありますので、これを調整します。

すべての数値を0にする

「プレビュー」にチェックを入れたときにお気づきかと思いますが、調整ウィンドウを開くと、デフォルトで数値が入っています。まずは、これをすべて0にしましょう。すると、角度がまったくついていない、2Dの状態に戻ります。

あとは見ながら調整

2Dの状態から、お好みの角度に調整していきます。
数値は上から、縦回転、横回転、傾き、となっています。
実際に回してみないとピンとこないと思いますので、数値を操作して確認しながら進めます。

数値はテンキーなどで調整できますが、微調整が必要になりますので、毎回キーボードを打つのが面倒な方は、入力欄を選択している状態で「↑」「↓」キーを押せば、数値を動かすことができますので、おすすめです。

なお、左の立方体を操作しても実は調整できます。しかし、手動だとなかなか難しいので、個人的には数値を直接変更する方法をおすすめします。これも、お好みですね。

次に奥行きと遠近感を調整

角度が調整できましたら、次は奥行きと遠近感を調整します。これらを調整した後からでも角度は変えられますので、何度でも行き来してみてください。

奥行きを調整

奥行きを調整します。これは何なのかというと、簡単に言えば、図形の厚み調整と思っていただいて大丈夫です。
実際に数値を操作してみると、厚みが変わると思います。

遠近感を調整

遠近感を調整します。これは何となくご想像がつくかと思いますが、回転した結果、奥になった部分が小さくなり、より立体感が増すものです。
これは、0でもいけますので、遠近感をつけてみてちょっと大げさな感じになってしまうようなら、0でOKです。

最後に光源を調整

上記の数値を調整して、一旦OKをした図です。

なんか、暗くないですか？（汗）

立体になると、どこかに光が当たっていて、どこかが影になる、つまり光源が必ずあります。
今、この図は光がグラフの裏側から当たるようになってしまっているので、暗くなってしまっているのです。
これも調整しましょう。

光源調整は隠れています

立体調整ウィンドウは、一度閉じてしまってもまた開き、調整しなおすことができます。「アピアランス」ウィンドウの「3D 押し出し・ベベル」をクリックすると、また同じ調整ウィンドウが出てきます。
なぜか一旦リセットされたように表示されるのですが、「プレビュー」にチェックを入れれば、現状の図になります。

光源調整ってどこにあるんでしょう。これは隠れています。
「詳細オプション」をクリックしてください。すると、ウィンドウが伸びて、光源調整が出てきます。

角度調整の時には「図形を操作してもやりにくいから、数値を調整してね」と書きましたが、光源の位置調整については、球体の上の点を操作して調整します。というか、それしか選択肢がないです（汗）。
光の強さ（明るさ）については、球体の右の数値で調整しましょう。

明るくなりましたね！これでOK・・・と思いましたが、線が立体的になっているので、邪魔ですね・・・。消しちゃいましょう。

余分な要素を消す

数字や線などの余分な要素を非表示にします。先ほど操作した、「アピアランス」ウィンドウの「3D 押し出し・ベベル」、これを非表示にします。すると、グラフが2Dに戻ります。

そうすると、グラフの中の数字や線のみを選択できるようになりますので、あとはこれを非表示にします。消してしまうとあとあと調整がしづらくなってしまうので、非表示です。

要素を非表示にする方法は、消したい要素を選択した状態で、機能ウィンドウの一番下にある色変え部分で、塗りも線も「／」にします。これで、存在はしているけど見えないという状態にできます。

数字と線をすべて「非表示」にした状態です。これで、先ほど「非表示」にした「アピアランス」ウィンドウ＞「3D 押し出し・ベベル」を「表示」にします。

グラフだけが立体的になりました！これで完成です。

立体グラフを使用するときの注意点

立体グラフを活用すると、より楽しさや勢いなどが表現できてとても良いのですが、ここで、立体グラフをWebサイトなどに使用する際の注意点を1つ、書いておきます。

例えば、こういうグラフがあるとします。左のほうが数値が大きく、右のほうが小さいですよね。これを立体的にすると、

右のほうが大きく見えませんか？

これはちょっと極端な例ですが、立体的に見せることによって、本来の情報とは違うように見えてしまうということがあります。
そうなると、最悪の場合は「このWebサイトは嘘を掲載している！」と誤解されてしまいます。

立体グラフはあくまでも「イラスト」

立体グラフは基本的に「イラスト」として使用しましょう。IRページのように正確な情報を伝えたいページに掲載する場合は、以下のようにするのがおすすめです。

• 立体感を控えめにして、大小などが正しく認識できる範囲内にしておく
• 立体グラフの近くに、正確な数値が分かるような情報を必ず併記しておく
• そもそも、立体にしない

いろいろなデザインに活用してみましょう！

以上で、グラフシリーズは終了です。
立体グラフについては使いどころに少し注意が必要ですが、グラフ制作は今後も必要な場面があると思いますので、ぜひ挑戦してみてくださいね！