サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

矢印の色々な作り方(Illustrator)

矢印の色々な作り方(Illustrator)

この記事にはプロモーションが含まれています。

今回紹介するのはAdobe Illustratorを使った、色々な矢印の作り方です。
矢印は紙面でもWebページでも、よく使われる記号・オブジェクトです。
使われるシーンとしては例えば、

地図や施設案内図で現在地や目的地を示す

説明書などで操作手順を説明する

Webページで次のページに進む・前のページに戻るボタンとして配置する

…などなど、使用・活用シーンをあげだしたらキリがないくらい、日常的に目にするものです。
それゆえ、ちょっとした矢印をIllustratorで作る機会も多く、作り方をいくつか知っておくだけですぐに実務に役立てることができると言えます。

この記事では、簡単な矢印の作り方から、少しこだわった作り方まで、色々な矢印の作り方をご紹介します。

– 目次 –

Illustrator:矢印の作り方

フォントの矢印をアウトライン化

まずはもっとも簡単な矢印の作り方からご紹介します。
使用しているフォントにもよるのですが、「やじるし」と入力して変換すると、漢字の「矢印」だけでなく、など、色々な矢印が変換候補として出てきます。

フォントには著作権があるため、変換で出てくる記号の矢印の取り扱いには注意が必要ですが、フォントの利用規約を確認した上で、規約に従って活用する分には問題ありません。

ではさっそく、Illustratorの文字入力ツールを使って、「やじるし」と入力して変換し、記号の矢印を配置してみましょう。
※再生ボタンをクリックすると、動画が再生されます

このように、簡単に矢印の配置ができました。
このままでも矢印の向きを変えたり、大きさを変えることは可能ですが、フォントのままでは矢印を変形させることができません
フォントとして配置した矢印の変形を行うには、テキストをアウトライン化する必要があります。
テキストをアウトライン化するには、テキストを選択して右クリック→「アウトラインを作成」をクリックします▼

このようにテキストをアウトライン化すると、フォントとして文字を変更することができなくなりますが、アンカーポイントやパスが表示されるようになるので変形ができるようになります。
フォントや矢印の種類によっては、グループ化の解除や複合パスの解除を行う必要が出ることもありますが、まずはここまでの手順を押さえておきましょう。
特に矢印の形にこだわる必要がなく、利用規約で商用利用可能・変形や編集可能となっているフォントであれば、この方法が早くて便利です。

一方、作りたい矢印の形によっては最初から自作した方が良い場合もあります。
目的や用途に応じて、作成方法を使い分けることが大切です。

    POINT!
  1. ・文字入力ツールで「やじるし」と入力して、記号の矢印に変換する!
  2. ・矢印を変形させたりする必要がない場合はそれでOKだが、さらに変形させたい場合は「アウトライン化」する!
  3. ・アウトライン化することでフォントとしての再編集はできなくなるが、アンカーポイントやパスが現れて変形できるようになる!

「線」パネルでパスを矢印にする

Illustratorを始めたばかりという方でも、直線のパスを引くぐらいなら簡単にできると思います。
そして、矢印は直線のパスを引くことができれば、あとは線パネルの設定を少し変えるだけで矢印が作れます。

直線パスを書いたら、アピアランスの線をクリックするか、ウィンドウメニューから線パネルを開いて、線の形を「矢印」にするだけです。
作りたい矢印の太さに合わせて、線を太くすると良いでしょう▼

驚くほど簡単にできました!
しかし、このままではフォントで作った矢印と同じように変形ができません(パスの状態なので)。
ここからさらに変形させたい場合は、「オブジェクト」メニューから、パス→パスのアウトラインを作成を選択し、アウトライン化する必要があります▼

    POINT!
  1. ・直線のパスを引いたら、線パネルから矢印を選択することでパスを矢印にできる!
  2. ・矢印を太らせたい場合は、線の太さを太くすると良い!
  3. ・変形させたい場合は、パスのアウトラインを行う必要がある!

四角形と三角形を組み合わせる

3つ目に紹介する方法は、図形を組み合わせて矢印の形を作るという方法です。
フォントの変換やパスを矢印にするのと比べて、図形を用意する必要がありますが、最初からシェイプとして作られるので変形させるのに手間がかからないというメリットもあります。

作成方法は、長方形に三角形をくっつけて、2つの図形を同時に選択し、パスファインダーから「合体」を選びます▼

ある程度初めから狙った形の矢印を作成できる分、慣れればこちらの方法の方が結果的に早く済むかと思います。
Illustratorを初めて触るという方は、「パスファインダー」がよくわからない…という場合も多いかと思いますが、「合体」は図形(シェイプ)が文字通り合体してくっつくというだけなので、難しく考えすぎずとりあえず使ってみましょう!

    POINT!
  1. ・四角形と三角形を組み合わせることで、矢印を作ることができる!
  2. ・作成した四角形と三角形を同時に選択し、パスファインダーの合体で完成!
  3. ・初めからシェイプとして作成されるので、後で変形させるのも楽というメリットも!

グリッドガイドを目安にしてペンツールで矢印を作る

この方法は下準備がやや面倒くさいのであまり実用的ではないのですが、「グリッドを表示させる」・「ペンツールを使う」といった、Illustratorの基本操作の練習になる方法となっています。
なので、とにかく矢印が作れれば良いというよりは、Illustratorの練習がてら矢印でも作ってみようかなという方にオススメです。

作り方の手順としては、以下のようになります。

表示メニューからグリッドを表示させる

ペンツールを選択し、グリッドガイドに合わせてアンカーポイントを繋いでパスを作成

ダイレクト選択ツールで大きさなどを調整し、完成

「グリッドガイド」は、初心者のうちは見づらくて、逆に邪魔に感じてしまうこともあるかと思います。(僕もそうでした)
ですが、1mmのズレもなく図形やアイコンを作るにはとても役立つ機能です。
ショートカットでグリッドガイドの表示・非表示を切り替えることもできるので、ぜひ使いこなしてくださいね!

    POINT!
  1. ・グリッドガイドを利用して、ペンツールで直接矢印を描くこともできる!
  2. ・下準備に手間がかかるが、完璧に作りたいサイズに合わせて図形を作ることができる!
  3. ・グリッドガイドはショートカットキーで表示・非表示を切り替えることも可能!

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン