WEBデザインで活用できる矢印アイコンまとめ
WEBデザインをしていると、記号や絵文字など色々なアイコンを使う場面が多いですよね。
そんなアイコンの1つに矢印があります。
シンプルなデザインですが、次のページに誘導したり結果を示すために使ったり、使用頻度が多いアイコンです。
とは言え、矢印のアイコンはたくさんあって、選ぶのに迷いますよね。
そこで今回は、矢印のアイコンを集めた素材サイトと、CSSで作る方法をご紹介します。
2つの方法それぞれのメリットがあるので、使い分けをすることで、よりスマートにWEBデザインを進めることができるはずです！
WEBデザインにおける矢印の効果とは？
矢印は道路標識などでも使用されている、馴染みのあるデザインですよね。
日常生活でも目にする機会が多いので、特別な印象はないかもしれませんが、矢印には絶大な効果があることをご存知ですか？
「←←← 右をご覧ください」
あなたは今、右を見る前に左を見ようとしませんでしたか？
そうなんです、矢印がさした方向につい視線を向けてしまうんです。
つまり、それだけ矢印には目を引き、誘導する力があるということなんですね。
それではWEBデザインではどのような効果があるでしょうか？
ページ中央に設定して、下へのスクロールを促したり、左右の矢印を設置したりすることで、ユーザーがWEBページを読み進める効果があります。
また、WEBデザインにおける矢印の大事な役割は、購入や申込ボタンをユーザーに押してもらうことです。
単純にボタンを設定するだけではなく、矢印の先に置いたり、ボタンに矢印を使ったりすることでユーザーの視線や意識を引くことができます。
このように、矢印にはWEBデザインにおいても多大な効果があるのです。
次に、おすすめの矢印素材サイトとCSSでの作り方を紹介するので、効果的に矢印を使って、より魅力的なWEBデザインを行っていきましょう！
おすすめの矢印素材サイト5選
素材サイトのよい点は、加工などせずに、そのまますぐに使用できるところです。
シンプルな矢印のほかに、手書き風やデザイナブルなものなど、自分で作ったら時間がかかりそうなデザインの矢印を、簡単に入手することができます。
ご紹介するのは商用利用可、無料で使えるサイトですが、利用規約がある場合は一度目を通してから利用しましょう。
矢印デザイン
矢印に特化したWEBサイトで、スタンダードなものから、手書き風のものまで、豊富なデザインが揃っています。
矢印は「スタンダード」や「指・ハンドタイプ」のように形状別にカテゴリー分されているので、探しているイメージの矢印を素早く見つけられるのも魅力です。
ダウンロードできる素材ファイルの形式はillustrator、 ai、PNG、JPGなどありますが、PNGは背景が透過されているので使いやすく、おすすめです。
超シンプル素材集
WEBデザイナーが作ったアイコン集なので、よくWEBデザインで見かけるような、シンプルで実用的なものが多いです。
矢印の他にもレ点やメールのアイコンも揃っています。
1つのアイコンが10色程度、ZIPで一括ダウンロードして使用します。
よく使われる三角矢印などは、上下左右それぞれの向きがセットになっているものもあります。
ファイル形式はGIFもしくはPNGで用意されています。
DOTS DESIGN
さまざまなカテゴリーのドット絵素材が10,000個以上揃います。
WEBデザインに使える矢印以外のアイコンも豊富に用意されているので、色々活用できますよ。
背景なしのシンプルな矢印が多く、四方向がセットで8色程度でまとまっています。
同じ矢印でも、明るいカラフルなセットと、色の強さを抑えたシックなカラーのセットがあるので、WEBデザインの雰囲気に合わせて選びやすいです。
素材を単純に画像として使う場合と、背景画像として使用する場合の使い方を説明しているページがあるので、参考にしてください。
PIXEL LAB
フリーのWEBデザイナーのサイト内で公開・配布されているので、実際にデザインでよく使われる四角背景の白抜きや、枠付きなどが揃います。
25種類の基本の矢印の形をベースにして、それぞれ10サイズずつ用意されているのですが、ピクセルを最適化し、どのサイズでもシャープに見えるよう配慮されています。
ファイルはPNGとPSDで用意されています。ZIPファイルをダウンロードして使用してください。
ICOOON MONO
モノトーンのアイコン集で、シンプルに正確に、わかりやすく伝えられるデザインをモットーに作られています。
矢印だけではなく、「ビジネス・金融」「健康・医療」「ファッション」15のカテゴリーに分けられているので、WEBデザインの分野に合わせて使えそうですね。
素材は、すぐに使えるJPG、PNGのほかに、編集可能なillustratorやESPなども用意されています。
使い方について説明されたページがあるので、参考にしてみましょう。
CSSで作成する基本の矢印5型
CSSで矢印を作るのは面倒…と思われるかもしれません。確かに、複雑なデザインを表現するのは難しいです。
ですが、CSSを利用すると、自分で矢印の大きさや色など指定でき、見た目の調整や後からの修正が簡単にできますよ。
WEBデザインでも使用頻度が多い、三角形や「く」の字の矢印アイコンは、作れるようになると便利です。
ぜひ、一度試してみてください！
三角アイコン
【HTML】
<div class="sample1">右向き三角アイコン</div>
【CSS】
.sample1 {
position: relative;
padding-left: 20px;
}
.sample1::before {
position: absolute;
content: '';
width: 0;
height: 0;
border: solid 6px transparent;
border-left: solid 8px #ffc0cb;
top: 50%;
left: 0;
margin-top: -5px;
}
背景付きの三角アイコン
【HTML】
<div class="sample2">背景付き三角アイコン</div>
【CSS】
.sample2 {
position: relative;
padding-left: 20px;
}
.sample2::before {
position: absolute;
content: '';
width: 16px;
height: 16px;
background: #ffc0cb;
top: 50%;
left: 0;
margin-top: -7px;
}
.sample2::after {
position: absolute;
content: '';
width: 0;
height: 0;
border: solid 4px transparent;
border-left: solid 6px #ffffff;
top: 50%;
left:6px;
margin-top: -3px;
}
シンプルな矢印アイコン
【HTML】
<div class=”sample3″>右向き矢印アイコン</div>
【CSS】
.sample3 {
position: relative;
padding-left: 20px;
}
.sample3::before {
position: absolute;
content: ”;
width:6px;
height:6px;
background-color:#ffc0cb;
top: 50%;
left: 0;
margin-top: -2px;
}
.sample3::after {
position:absolute;
content:””;
border:solid 7px transparent;
border-left:solid 7px #ffc0cb;
top: 50%;
left: 5px;
margin-top: -6px;
}
V字型の矢印アイコン
【HTML】
<div class=”sample4″>右向き矢印(山形括弧)アイコン</div>
【CSS】
.sample4 {
position: relative;
padding-left: 20px;
}
.sample4::before {
position: absolute;
content: ”;
width: 6px;
height: 6px;
border-top: solid 2px #ffc0cb;
border-right: solid 2px #ffc0cb;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
left: 0;
margin-top: -3px;
}
丸背景付きV字型の矢印アイコン
【HTML】
<div class="sample5">丸背景付き右向き矢印(山形括弧)アイコン</div>
【CSS】
.sample5 {
position: relative;
padding-left: 20px;
}
.sample5::before {
position: absolute;
content: '';
width: 17px;
height: 17px;
background: #ffc0cb;
border-radius: 50%;
top: 50%;
left: 0;
margin-top: -7px;
}
.sample5::after {
position: absolute;
content: '';
width: 4px;
height: 4px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
left: 5px;
margin-top: -1px;
}
まとめ
見慣れている矢印も、WEBデザインにおいては、ユーザーの視線を引きつける効果が大きいとなると、何でもいいから設定する、というわけにはいかないですよね。
サイトのイメージにあった色や、大きさ、バランスを自分で調整するなら、CSSで作るのがおすすめです。
とはいっても「作るのは大変……」という方は、フリー素材を使うことで、時間をかけずにサクっと矢印のアイコンを入手できますよ。
矢印をうまく利用することで、WEBデザインのクオリティを上げることが可能です。
ぜひ、矢印を有効利用して、ユーザーの関心を高められる、魅力的なWEBデザインを作り上げていきましょう！
日本デザインスクールでは、WEBデザインのTipsや、幸せに生きるためのちょっとしたコツを発信中
＼毎週火曜・木曜 23:00〜デザインLIVE開催／
デザインTipsを発信、日本デザインスクールのインスタはこちら
＼毎週 月.水.金 12:30〜聞くだけで整うLIVE開催中／
日本デザインスクール校長、久保のインスタはこちら
インスタライブやDMでの質問もお待ちしております。
最後までお読みいただきありがとうございました＾＾