【Illustrator】インフォグラフィックの作り方│パーセントゲージ

Adobe Illustratorを使用して、インフォグラフィックに使えるパーセントゲージの作成方法を解説します。
インフォグラフィックとは、情報をわかりやすく図やイラストにしたものです。

シンプルでアレンジしやすいデザインと、ニューモーフィズムを取り入れたデザインを作成していきます。

シンプルで簡単です。%に合わせてゲージを後から変更できます。

塗りなしで、線は灰色にします。ここでは太さ65px、パスの直径300pxにしています。

アピアランスパネルは、メニューバー→[ウィンドウ]→[アピアランス]で表示できます。

線パネルで、破線にチェックを入れ、”線分と間隔の正確な長さを保持”にします。間隔は1000pxにします（設定できる数値の上限です）。
線分は、何%のゲージにしたいかで計算します。計算式は、円（パス）の直径×3.14×%です。例えば直径300pxの円で30%にしたい場合は、300px×3.14×30%=282.6pxです。

ここでは線端を丸型にしました。

円の直径がわからない場合は、線を内側に揃えてからプロパティパネルのW（H）を見ればわかります。

丁度よく色が移り変わるよう、グラデーションスライダーを左に寄せて調整しています。

線幅を変えたり線パネルで線端を”線端なし”にしたりすると、シンプルなアレンジができます。

リピートを使って円を放射状に分割します。

後で灰色の円でくり抜くので、黒い部分が目盛りになります。

線を選択した状態で、メニューバー→[オブジェクト]→[リピート]→[ラジアル]を選択します。

プロパティパネルは、メニューバー→[ウィンドウ]→[プロパティ]で表示できます。整列パネルで円と中央揃えにします。

20に分割したので、1目盛りは5%になります。放射状にした線で型抜きするので、線幅を好みに調整します。

パスファインダーパネルは、メニューバー→[ウィンドウ]→[パスファインダー]で表示できます。

ニューモーフィズムは、2020年ごろに話題になったWebデザインにおけるトレンドです。
アピアランスで塗りを重ねるので、混乱しないよう順番に注意して作成します。

「シンプルなパーセントゲージ 作成手順」では背面に灰色の線がありますが、破線だけでOKです。

線形グラデーションを適用し、角度を-45°にします。グラデーションスライダー左は#dbdbdb、右は#ffffffにします。

アートボードを#f9f9f9の色の長方形で覆っています。別レイヤーにしてロックをかけておくと作業しやすいです。

ここでは線幅66pxにしているので、オフセットは33pxになります。塗りが線の外側にピッタリ揃いました。

アピアランスパネル下部の新規効果を追加アイコン→[スタイライズ]→[ぼかし]を選択します。
ウィンドウが表示されるので、境目が目立たなくなるまで数値を上げます。ここでは30pxにしています。

ここでは120%にしています。光源が左上の想定で、窪みを表現しています。拡大したことにより、左上の灰色（影）が浅くなり、浅い窪みに見えるようになったと思います。

線の内側にピッタリ収まるように縮小します。ここでは78％にしています。

先ほど変形で縮小させた塗りの、変形の効果をコピーします。Altを押しながらドラッグするとコピーできるので、追加した線に適用させます。
先ほどの塗りと同じ大きさに縮小しました。ハイライトを表しています。

下から3番目なので、手順⑨で縮小させた塗りの下です。中央の円の影を作ります。
線形グラデーションを適用し、角度を135°にします。グラデーションスライダー左は#cfcfcf、右は#ffffffにします。

アピアランスパネル下部の新規効果を追加アイコン→[スタイライズ]→[ぼかし]を選択します。下から2番目の塗りにかけたぼかしと同じ数値にします（なので、下から2番目のぼかしの効果をAltを押しながらドラッグでコピーしてもOK）。

さらに、パネル下部の新規効果を追加アイコン→[パスの変形]→[変形]を選択します。中央の白い円の下から少し見える程度に縮小します。

先ほどのニューモーフィズムをベースに、ゲージをぷっくりさせてみました。

破線のグラデーションスライダー左は#67afe6、右は#bfe4ffにします。

描画モード：乗算　カラー：#5777dd
不透明度：30%
ぼかし：プレビューを見ながら調整
境界線にチェック

以下のように設定します。
描画モード：乗算　カラー：#416896
不透明度：50%
X軸オフセット：0px
Y軸オフセット：1px
ぼかし：2px

一番上の線を編集します。光彩（内側）とドロップシャドウの効果も複製されてしまっているので、削除します。

グラデーションスライダー左を#6991d4、右は#b0ffc5にします。
描画モードはオーバーレイにして、不透明度を70％にします。線幅は少し細くします。ここでは66px→50pxに変更しています。

ウィンドウが表示されるので、プレビューを見ながら数値を調整します。ここでは13pxにしています。

少し縮小させ、移動でやや左下に移動させます。

一番上にある線のグラデーションを変更します。グラデーションスライダー左を#000000、右は#def5ffにします。
線幅はさらに細くし、50pxだったのを25pxにしました。描画モードをスクリーンにし、不透明度は100％にします。

画像では追加と書いてありますが、複製したときに効果も複製されているので、既に効果適用済みの状態です。
変形の効果をクリックして、設定を変更します。少し縮小して移動で左下に移動させます。ハイライトが先ほどより強くなりました。
必要であればぼかしの効果も再調整します。

先ほどと同じように変形の効果をクリックして、設定を変更します。少し縮小して移動で左下に移動させます。ハイライトがさらに強くなりました。
ぼかしの効果も再調整し、少し数値を下げます。

いかがでしたか？
インフォグラフィックはおしゃれな見た目ですが、わかりやすさが重要です。
他にもインフォグラフィックに使える図を解説しています。こちらも是非チェックしてみてくださいね。