この矢印のデザイン、どっちが正解？図解における矢印選びのセンスを磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
デザイナーのベーコンです。
今回、私は「矢印」についてのクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「矢印の使い方」がよいと感じますか？
1問目「ご利用の流れの矢印」（難易度★）
2問目「図の中の矢印」（難易度★★）
3問目「アクセス図の矢印」（難易度★★★）
いかがでしたか？
私が考える答えは……
1問目の答え：B
2問目の答え：A
3問目の答え：B
以上が私なりの解答です。
あなたがよいと感じた矢印は、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
1．矢印の「形」と「大きさ」はスッキリさせ、主役の情報を邪魔しない
では、1問目から振り返っていきます。
私がよしとした答えは「B」でした。
作例AとBの違いは、STEPの情報をつなぐ矢印の「形」と「大きさ」です。
作例Aの矢印は存在感のある大きさなのに対して、Bの矢印は存在感を抑えた大きさとなっています。
形状も作例Bのほうがスッキリとしています。
図解で矢印を用いる際に重要なのは、主役となる情報を邪魔しないことです。
矢印はあくまでも脇役であり、主役となる情報の「流れ」を支える存在です。
控えめすぎると、それはそれで矢印としての機能を果たせなくなる恐れがありますが、主役より目立ってはいけません。
「三角形」の画像にも、矢印としての役割を果たせる
作例Bを見て、これは矢印ではなく「三角形」では？と思われた方もいるかもしれません。
なぜなら矢印とは本来「→」という形を指すからです。
結論からいうと、「三角形」であっても、矢印としての機能を果たせるのであれば問題ありません。
矢印に求められている役割は、「情報と情報をつないでいる理由が正しく伝わること」と「視線を誘導できること」です。
見た目が“矢印かどうか”よりも、どの方向へ、どの要素からどの要素へ、どれくらいの重要度で流れているのかという「文脈」が読み取りやすいことのほうが重要です。
特に三角形はスッキリとした見た目なので様々な図解で使いやすく、矢印のデザインに困ったときは、三角形の使用も検討してみましょう。
では続いて、そんな矢印代わりの三角形を、Adobe Illustratorを用いてカンタンに作る方法をお教えします。
Illustratorで「三角形」を作成する方法
Illustratorの「多角形ツール」を使えば、今回の作例のような三角形もカンタンに作成できます。
その手順をお教えします。
1．ツールバーから「長方形ツール」を長押しして「多角形ツール」を選択します。
2．アートボード上をドラッグし、クリックした状態のままでキーボードの「↓（下方向の三角形）」キーを押すと、辺の数（角の数）を変更できます。
辺の数が3つになったタイミングで、クリックした状態を解除します。
3．そうすると、三角形が完成します。
「Shift」キーを押しながらドラッグすることで、底辺が水平な三角形もカンタンに作成できます。
こういうまさに、痒いところに手が届く機能を多く備えているのが、Illustratorが便利な理由です。
2．矢印の「色」は控えめにし、主役を邪魔しない
続いて2問目の振り返りです。
私がよしとした答えは「A」です。
作例AとBの違いは、3つの項目の循環を示す矢印の「色」です。
Aは白で統一されているのに対し、Bは彩度の高いピンク色になっています。
Bのピンクの矢印は、一見すると華やかでデザイン性が高く見えるかもしれません。
しかし、このように主張の強い色を使ってしまうと、矢印が目立ちすぎてしまい、本来伝えるべき情報から視線を奪ってしまいます。
1つ目の作例で解説したように、矢印はあくまで情報の流れを補助する「脇役」です。
作例Aのように、主役を引き立てる色を選ぶことで、図解全体がしっかりとまとまります。
矢印をデザインする場合は、色も重要であることを覚えておいてください。
3．矢印の機能が異なる場合は、しっかりと矢印のデザインを分ける
最後に3問目の振り返りです。
私がよしとした答えは「B」です。
作例AとBの違いは、画像下部の二次元コード（QRコード）に案内している矢印の「形状」です。
この作例では、2つの属性の矢印が存在しています。
「人の移動を案内する矢印」と「二次元コード（QRコード）へのアクセスを案内する矢印」です。
このように役割が異なっている矢印に関しては、両者のデザインを同一にしないほうがよいケースが多くあります。
作例Aを見てみると、両者の矢印のデザインが同じになってしまっています。
一方、作例Bでは、両者の矢印のデザインを変えることで、役割の違いを明示しています。
このようにデザイン内に複数の矢印が出てくる際は、役割によってデザインを使い分けることで、よりわかりやすく情報を伝えられます。
Illustratorで「普通の」矢印を作る方法
Illustratorで今回の作例のようなデザインに馴染む「普通の」矢印を作成する方法と、オススメの設定をご紹介します。
矢印の作成方法
1．「直線ツール」を選択し、線を引く
2．引いた線を選択した状態で、「ウィンドウ」＞「線」で線パネルを開き「オプションを表示」をクリック
3．矢印の形を選択
※今回は使い勝手のよい形の「矢印 8」を選択します。
4．「線幅」の数値を設定
※「線幅」の数値を大きくすると、線の太さに合わせて矢印の先端も大きくなります。
※矢印全体の長さは変わりません。
5．「倍率」で矢印の先端サイズを調整
※今回は、先端のサイズを倍率25%に変更します。
これでデザインに馴染む「普通の」矢印の完成です。
グラフィックスタイルに登録
矢印の設定はグラフィックスタイルに登録できます。
作った設定を用途別に登録しておくと、気軽に呼び出せて便利です。
まとめ：伝わる矢印デザインにするための3つのコツ
今回は矢印に関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
- 矢印の「形」と「大きさ」はスッキリさせ、主役の情報を邪魔しない
- 三角形も矢印の機能が果たせれば、代用できる
- Illustratorでは多角形ツールを用いてカンタンに三角形を作成できる
- 矢印の「色」は控えめにし、主役を邪魔しない
- 派手な色の矢印は、本来伝えるべき情報の邪魔になる。
- 矢印の機能が異なる場合は、しっかりと矢印のデザインを分ける
- 矢印のデザインを使い分けることで、図解の情報がより伝わりやすくなる。
お相手はデザイナーのベーコンでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：ベーコン
北海道で「楽しく暮らす」をテーマに活動するグラフィックデザイナー。
「ベーコンさんの世界ブログ」や、登録者数11万人を超えるYouTubeチャンネル『ベーコン家のポテとひだり』を運営している。
著書に累計3万部を超える『レイアウト・デザインの教科書』（共著／SBクリエイティブ）他。Adobe Community Expert。