7-3.説明内容を視覚的に見せる画像作成

今回は、Skillhubメソッドに使う画像3つを作成します。
それぞれ見出しに合わせて、文字を読まなくても内容がなんとなくわかるように作りましょう。

ドキュメントの作成

Illustratorで、新規ドキュメントを作成します。
使用する画像サイズに合わせて幅400px × 高さ300pxでアートボードを作成。

アートボードをコピーして3つにします。
（※リンクファイルで使いたい場合は、ドキュメントを3つ作成しても良いです）

わかりやすい名前をつけて保存しておきましょう。

step01の画像

下記のような画像を作成します。

1.ピクトグラムを作る

土台の作成

前回の復習も兼ねて、サクッと土台を作りましょう。

1. 正円（頭）、角丸長方形（胴体）を作成
2. 長方形を作成し、下の円の左半分を隠す
3. 前面オブジェクトで型抜き
4. 角丸長方形で腕（上腕）をつける
5. 角丸長方形で肘下（前腕）をつける
6. ３つのパスを選択し、複合シェイプを作成

下図の“複合シェイプ”ようになりましたか？
一体化している場合は合体されているので、やり直してみてください。
複合シェイプは、元のパスを維持したままで、複数のパスを一体化します。
グループ化と合体の間、仮の合体、というイメージです。

アンカーポイントとハンドル

完成した複合シェイプの選択状態を解除してください。

ダイレクト選択ツールに持ち替えましょう。
細かい作業になるので、拡大率を上げておくと見やすいです。

ダイレクト選択ツールで、上腕をクリック。
下図のように左右に線が伸びたような表示になります。

※ならない場合は、境界の表示・非表示切り替えを行ってください。
Windows：Ctrl+H　/　Mac：⌘+H

それぞれの部位名と役割は次のとおりです。

①アンカーポイント
アンカーポイントはパス（図形）を構成する基準の点です。

②セグメント
アンカーポイントとアンカーポイントの間に引かれる線分をセグメントと言います。
パスの骨格を作る部分で、“ベジェ曲線”と呼ばれているのもここです。

③ハンドル
アンカーポイントから伸びている 「方向線」と「方向点」のセットをハンドルと呼びます。
方向線の角度と長さを変更することで、セグメントの曲がり具合を変更することができます。

もっと詳しい定義や解説もありますが、触ってみるのが一番わかりやすいです。
アンカーポイント、ハンドル共に、ダイレクト選択ツールで操作したい箇所をクリックすると動かすことができます。

アンカーポイントを動かすと、このようになります。

ハンドルを動かすと、このようになります。

変になってしまっても“元に戻す”で直せば良いので、まずは触ってみましょう。

肘を滑らかにする

アンカーポイントとハンドルを動かして、肘の繋ぎ目を滑らかにしてみましょう。

拡大表示して作業していると、ポイントが微妙に合わせられないことがあります。
100％で見ると違和感のないことも多いので、厳密にやりすぎなくても大丈夫。
100％～300%くらいで綺麗に見えるように調整してみてください。

反転させ調整

複合シェイプを選択して、リフレクトで反転コピーを作ります。
少し身幅が広かったので、拡大縮小させてバランスを整えました。

ダイレクト選択ツールで向かって左の前腕を選択。
アンカーポイントやハンドルではない部分をドラッグすると、移動ができます。
下方向に移動させましょう。

頭を近づけるなど、お好みに合わせてバランスを整えてください。
最後にまた調整するので、一旦、アートボード外など邪魔にならない場所に置いておきます。

2.簡易版の円グラフ作成

Illustratorにはグラフツールもあります。
が、厳密さを必要としないグラフを作る際には、下記のような作り方も出来ます。

1.正円×1、細長い長方形×1を作る
2.長方形は左下のアンカーポイントを削除して、三角にする
3.円と三角形を重ねる（円の中心に先端を合わせる）
4.円と三角を選択し、パスファインダーから分割を選ぶ
5.円からはみ出した部分のパスを削除

6.白い円を描画、黄色い円に重ねる（中央配置）
7.文字を重ねる
8.グループ化する

3.配置する

【電球アイコンを作る】

1.正円と長方形を描画する
2.小さい正円と長方形を描画する
3.パスファインターで小さい正円を半分にする（型抜き）
4.出来た半円を移動
5.長方形とその上の円で複合パスを作成
6.電球のシルエットをイメージして、少し縦に伸ばす

7.効果>スタイライズ>角を丸くする を選ぶ
8.繋ぎ目がカーブになるように半径を調整し、OK
9.下の長方形部分をコピー
10.同じ場所に貼り付ける
11.下の角のみ、8と同じ分だけ角丸を適用
12.塗りをLPで使用している黄色、線を黒に変更

13.コピーした長方形を少し短くする
14.バランスを整える（不要な場合はそのまま）
15.下の半円を黒に変更し、バランスを整える

電球の完成です。
バラバラに動かないようにグループ化しておくと便利です。

【全体像を作る】

長方形（角丸）と線を使って、1で作成した人を画面の中に配置します。
画面からはみ出す部分は、クリッピングマスクを使って隠しています。

画面を見ているユーザーを追加します。
見やすいように、頭の円には白い枠線を加えています。

電球アイコンを配置し、各パーツの大きさや配置を調整します。
装飾を増やしたい場合は足しても良いでしょう。
今回はシンプルに、下図の状態で完成としました。

step02の画像

下記のような画像を作成します。

step01の画像はイチから作成したので、時間がかかった方もいらっしゃると思います。

Webデザインで必要な画像を全て自分で作ろうと思うと、結構時間がかかります。
納期や報酬、クライアントの提示する条件に合わせて、素材も取り入れていきましょう。

今回はフリー素材を使って作成していきます。

フリー素材のDL

TopeconHeroesさんが提供しているヒューマンピクトグラムと、ICOOON MONOというサイトから素材をお借りして画像を作ってみましょう。
どちらも使用報告の義務はなく、加工しての使用が認められています。

https://pictogram2.com/?p=426
考える人 | human pictogram 2.0

Illustrator Aiをダウンロードします。

次に、ICOOON MONO。
「WEBページのアイコン」と「折れ線グラフのアイコン」、それぞれSVGをダウンロードしてください。

https://icooon-mono.com/11412-web%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3/
WEBページのアイコン | icooon-mono

https://icooon-mono.com/00103-%e6%8a%98%e3%82%8c%e7%b7%9a%e3%82%b0%e3%83%a9%e3%83%95%e3%81%ae%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e7%b4%a0%e6%9d%90/
折れ線グラフのアイコン素材 | icooon-mono

解凍が必要なファイルは解凍し、それぞれIllustratorで開いてください。
作成中のドキュメントにコピー＆ペーストします。

配置する

メイン要素の配置

1. 素材ファイルを扱いやすい大きさにして並べる 2 .前回のレッスンで作ったファイルアイコンをコピー
2. テキストツールでコードを示す< / >と入力
3. テキストのアウトラインを作成する
4. ファイルアイコン内に配置し、グループ化する
5. 他のアイコン2つを黒色に揃える

自作アイコンだけ線が細いので、ちょっと誤魔化しましょう。

1. ファイルアイコンを選択
2. 右クリックメニューから変形 > 拡大縮小を開く
3. 数％大きくして「コピー」をクリック

文字・矢印の配置

【矢印の作成】

1. 円を2つ描画し、重ねる
2. 型抜きを使って、三日月型のパスを作成
3. 多角形ツールで三角形を作る
4. 三日月と三角形を重ねる
5. 三日月のアンカーポイントを移動し、矢印に見えるようにする
6. 矢印のサイズ、バランスを調整する

【全体配置】

1. 矢印部分を複合パス化する
2. 矢印の線を黒・塗りを無しor白に変更
3. ピクトグラムにクリッピングマスクを適用
4. ピクトグラムをグラフに近づける
5. ３つのアイコンを繋ぐように矢印を配置
   （※説明文では「2つのWebサイトをリリース」となっているので、Webサイトアイコンを2つに増加）
6. それぞれのアイコンの説明を入れる

配色・Step01とのバランス調整

全体のバランスを整えつつ、ピクトグラムの色をLP使用の黄色に変更。
中央部分の空いている場所には「Level UP!!」という文字を入れます。

Step1の画像と見比べると、自作ピクトグラムと素材では肩や手の丸みが違いますね。
なるべく違和感がなくなるように、自作ピクトグラムの方を調整しましょう。

1. 両肩を覆うように、楕円ツールで横長の円を描画
2. 頭を少し持ち上げて間隔を作る
3. 手の先にも楕円を追加
4. アンカーポイント・ハンドルを使って繋ぎ目を滑らかに

追加した部分も、ピクトグラムのグループ内に入れておきましょう。

手前の人の体も、角丸ではなく円にした方が馴染みますね。

Step01とStep02の画像に統一感が出来たら完成です。

step03の画像

下記のような画像を作成します。

使用する素材のダウンロード

Step03では下記の素材を使用します。 それぞれai,svg形式のファイルをダウンロードしてください。

https://pictogram2.com/?p=1812
鍵を手に入れた人 | human pictogram 2.0

https://icooon-mono.com/10418-%e8%b1%9a%e3%81%ae%e8%b2%af%e9%87%91%e7%ae%b1%e3%81%ae%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3/
豚の貯金箱のアイコン | icooon-mono

ダウンロードしたファイルをIllustratorで開き、Step02の時と同じ様に作成中のドキュメントにコピー＆ペーストしてください。

素材・今まで使ったアイテムの調整

素材のアレンジ

1.ピクトグラムから鍵部分を削除
2.アートボード右にピクトグラムを配置（少し拡大する）
3.ピクトグラムの左に豚の貯金箱を配置
4.豚の塗り色を黄色、線を黒に変更する
5.豚の線の位置を外側に設定する
6.コインの外枠部分の塗りを黒に変更
7.コインに重なるように、楕円ツールで黄色の円を描画
8.７で作った円を最背面に移動する

9.＄マークを削除
10.テキストツールで¥マークを入力し、アウトライン化して配置
11.ピクトグラムを黒にする

今まで使ったアイテムを再利用

• step02で使ったWebサイトアイコン
• 前回のレッスンで作ったキラキラ（大小セット）

これらをコピー＆ペーストして、下図のように大まかに配置します。
色や線の太さはお好みで調整してください。

訪問ユーザーのイメージを作る

「Webサイト/Webサービスに人がたくさん来て、収益化」を示すために、訪問ユーザーのイメージを作ります。
Step1で作ったピクトグラムをベースに編集していきましょう。

1.Step1で作ったピクトグラムをコピー
2.使わない部分を削除する
3.上腕部分を回転させ、胴に沿わせる
4.パスファインダーの「拡張」で合体する
5.肩になる円とも合体する
6.リフレクトツールで反転コピー

7.移動させ左半分を作る
8.パスファインダーで合体する
9.線を黒、塗を白もしくは無しにする
10.楕円ツールで横長の円を作って重ねる
11.クリッピングマスクを作成する
12.出来た人型を縮小し、複製して配置

流入元を示す文字を入れます。
Step02で使った矢印で繋げば完成です。
矢印はカーブの向きが合わせにくいので、アンカーポイントを使って少し調整すると良いです。

LPデザインに配置する

出来た画像をそれぞれ、LPデザインに配置します。

スペース確保のために使っていた灰色の枠は、白に変更して背景として使うと良いです。 画像の背面に置いてグループ化しておきましょう。
コーディングの時に統一した画像サイズに切り出しやすいです。

画像作成が終わり、LPのデザインも完成です。