ピクトグラム(アイコン)を使ったデザイン活用例!おすすめ素材サイトも紹介!

こんにちは、読むだけでデザインを学べる!デザイン研究所です!

毎日デザインのポイントを解説するインスタアカウントを運営しております。

こちらのブログはインスタ投稿をより深く解説した記事になります!

今日のテーマ:文字情報+ピクトグラム活用

ピクトグラム活用していますか?文字情報だけだと分かりづらいデザインもピクトグラムがあることによって伝わりやすさがUPします。

またそれらを繰り返すことによってデザインの統一感UPも狙えるピクトグラム活用。色んなサンプルを用意したのでぜひ記事をご覧ください!

 

ノンデザイナー 向けのまとめ記事を作りました。ぜひご覧ください!

関連記事

デザイナーではない、つまりノンデザイナーの方でも知るだけで今すぐ使えるデザインポイントというのは存在します。今回の記事ではそんな知れば今すぐ使えるデザインのポイントを紹介!ノンデザイナーの方もブログのアイキャッチ画像[…]

ピクトグラム(アイコン)のデザインは素材サイトを活用しよう!

こちらが今回のデザインサンプルです。

ピクトグラムを使って内容を紹介しています!

ピクトグラムを活用することでして分かりやさ、伝わりやすさが上がります。

今回のようなピクトグラムはWEBデザインやチラシでよく使われます。

特にポイントの解説や手順の流れなどリスト式文章にプラスで使われることが多いです!

しかもピクトグラムは無料で商用利用可能な素材が多いです。おすすめは「icooon-mono」というサイト。センスが良く無料で商用利用OKです。

ちなみにピクトグラムであっても素材サイトによっては初心者ぽさがでる場合あるので注意!心配な方はさきほど紹介したサイトを使ってみてください。

 

ちなみにピクトグラムは初心者は自分で作ろうとしない方が良いです

(自分で作るとかなり初心者ぽくなる、だけど頑張って作ったものだからとダサくてもそれに気付かない…)

せっかく素材サイトがあるのだからそれを利用しましょう!

 

こちらの記事では吹き出しに関して、プロの作った素材を使おうと紹介している記事です!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

ピクトグラムは自分で作らず、素材を利用しよう!!

 

ピクトグラムは今回のサンプルデザインのようにリスト式の文章に対して、文字と同じサイズで横に配置したり、文字より大きくアイキャッチとして配置したり。(次章で解説)

 

リスト式の文章以外では、検索を虫眼鏡で表したり、マイページを人型のピクトグラムで表したり。

これらは特にアプリのUIやスマホデザインなどに見受けられます。

 

単純に文章の横に・(丸)ではなく、このようなピクトグラムを使うことをぜひ試してみてください!

 

こちらの記事ではリスト式の文章を揃える裏技を紹介しているので合わせてご覧下さい。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

デザ研
次の章ではさらにピクトグラムの応用について解説していきます!

 

 

ピクトグラム(アイコン)を活用したデザイン例を紹介します

上のデザインサンプルでもピクトグラムを使ったデザイン例を並べてみました!

このようなデザイン見たことありますよね?文字情報+ピクトグラムで分かりやすくする例をさらにご紹介します!

 

ピクトグラムのデザイン例を紹介!

ここからはピクトグラムのデザイン例を紹介していきます。

名刺でよく見るピクトグラム

名刺の記載文に対してピクトグラムを使うことかなりあります!

文字が並んでいるだけだと分かりづらいですがピクトグラムがあることで視覚的にグッと分かりやすくなります!

また名刺は文字サイズがどうしても小さくなるのでこのようなピクトグラムがあることで伝わりやすさが断然違いますね。

 

こちらの例では白のピクトグラムを楕円形で囲みました。

このようにピクトグラムはそれぞれデザインが違いますが、同じ図形(今回の場合楕円形)で囲むことにより統一感がでています!

これは反復(繰り返し)を意識したデザインです。

反復に関してはこちらの記事で詳しく解説しています!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

資料やLPでよく見るピクトグラム

こちらのデザインは資料やLPでよく見るポイント解説+ピクトグラムの例です!

ピクトグラムは文字情報にプラスして使用することが多いですね。

こちらのデザインでも線の楕円形で囲むことでピクトグラムの形は違っていても統一感がでています!

 

こちらのデザインではピクトグラムを大きく薄く文字の下に配置した例です!

ピクトグラムが目を留まらせるアイキャッチの役割も果たしています。

効果的な境界線の使い方についてはこちらの記事で解説しているので合わせてご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

このように、、、

ピクトグラムを使うことによって繰り返しによる統一感UP、視覚的に伝わりやすさUPを狙えます

ぜひ文字情報だけで伝わりづらい時はこのピクトグラムを活用してみてください。

複製のショートカットキーは?▼
複製の方法は様々にありますが、イラレでもフォトショでもoptionを押しながらクリックして引っ張るショートカットをよく使います!

ピクトグラム(アイコン)のデザインを使うメリットはたくさんある

いかがでしたでしょうか?文字情報+ピクトグラムのデザインを紹介しました。

実は日常でもピクトグラムはかなりの数見ることができます。例えばトイレの男女表記や標識や案内板など。

そんなピクトグラムを伝わりやすさUP、統一感UPのために自分のデザインに取り入れてみてください!

 

なお今回のデザインでも使っている反復コピーのやり方はこちらの記事で詳しく解説しているのでぜひ記事をご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

・ピクトグラムは自分で作ろうとせずに素材を活用しよう
・文字情報+ピクトグラムで伝わりやすさUP、統一感UP!

 

 

この投稿をInstagramで見る

 

デザイン研究所(デザ研)ほぼ毎日投稿(@designkenkyujo)がシェアした投稿


全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。

>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG