この矢印のデザイン、どっちが正解？図解における矢印選びのセンスを磨いておこう

3問目の答え：B

以上が私なりの解答です。

あなたがよいと感じた矢印は、AとBどちらでしたか？

ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。

「三角形」の画像にも、矢印としての役割を果たせる

作例Bを見て、これは矢印ではなく「三角形」では？と思われた方もいるかもしれません。

なぜなら矢印とは本来「→」という形を指すからです。

結論からいうと、「三角形」であっても、矢印としての機能を果たせるのであれば問題ありません。

矢印に求められている役割は、「情報と情報をつないでいる理由が正しく伝わること」と「視線を誘導できること」です。

見た目が“矢印かどうか”よりも、どの方向へ、どの要素からどの要素へ、どれくらいの重要度で流れているのかという「文脈」が読み取りやすいことのほうが重要です。

特に三角形はスッキリとした見た目なので様々な図解で使いやすく、矢印のデザインに困ったときは、三角形の使用も検討してみましょう。

では続いて、そんな矢印代わりの三角形を、Adobe Illustratorを用いてカンタンに作る方法をお教えします。

Illustratorで「三角形」を作成する方法

Illustratorの「多角形ツール」を使えば、今回の作例のような三角形もカンタンに作成できます。

その手順をお教えします。

1．ツールバーから「長方形ツール」を長押しして「多角形ツール」を選択します。

2．アートボード上をドラッグし、クリックした状態のままでキーボードの「↓（下方向の三角形）」キーを押すと、辺の数（角の数）を変更できます。

辺の数が3つになったタイミングで、クリックした状態を解除します。

3．そうすると、三角形が完成します。

「Shift」キーを押しながらドラッグすることで、底辺が水平な三角形もカンタンに作成できます。

こういうまさに、痒いところに手が届く機能を多く備えているのが、Illustratorが便利な理由です。

Illustratorで「普通の」矢印を作る方法

Illustratorで今回の作例のようなデザインに馴染む「普通の」矢印を作成する方法と、オススメの設定をご紹介します。


矢印の作成方法

1．「直線ツール」を選択し、線を引く

2．引いた線を選択した状態で、「ウィンドウ」＞「線」で線パネルを開き「オプションを表示」をクリック

3．矢印の形を選択
※今回は使い勝手のよい形の「矢印 8」を選択します。

4．「線幅」の数値を設定
※「線幅」の数値を大きくすると、線の太さに合わせて矢印の先端も大きくなります。

※矢印全体の長さは変わりません。

5．「倍率」で矢印の先端サイズを調整

※今回は、先端のサイズを倍率25%に変更します。

これでデザインに馴染む「普通の」矢印の完成です。


グラフィックスタイルに登録

矢印の設定はグラフィックスタイルに登録できます。

作った設定を用途別に登録しておくと、気軽に呼び出せて便利です。

まとめ：伝わる矢印デザインにするための3つのコツ

今回は矢印に関するクイズと、デザインテクニックを取り上げました。

最後に今回のノウハウのまとめです。

1. 矢印の「形」と「大きさ」はスッキリさせ、主役の情報を邪魔しない

• 三角形も矢印の機能が果たせれば、代用できる
• Illustratorでは多角形ツールを用いてカンタンに三角形を作成できる

2. 矢印の「色」は控えめにし、主役を邪魔しない

• 派手な色の矢印は、本来伝えるべき情報の邪魔になる。

3. 矢印の機能が異なる場合は、しっかりと矢印のデザインを分ける

• 矢印のデザインを使い分けることで、図解の情報がより伝わりやすくなる。