1. LIGブログ
  2. Web制作
  3. イラストを効果的に使用しているデザインが...
Web制作

イラストを効果的に使用しているデザインがいい感じのサイト10選

イラストを効果的に使用しているデザインがいい感じのサイト10選

こんにちは、デザイナーの藤田です。

先日、がっつりイラストを使用する案件を担当して以来、デザインにイラストを取り入れているサイトが気になっております。

図版を入れる箇所に写真を使用するのが困難だったり、写真を入れるとデザインが説明的になりすぎて雰囲気が薄れたりする場合に、イラストやアイコニックな表現を行うことはよくあります。
今回は、その表現方法が素敵だなと感じたサイトをまとめてみました。

イラストを効果的に使用しているサイト10選

写真を愉しむ家 &ima (アンド イマ)

名称未設定-2

http://and-ima.jp/

トップページにて「STUDIO、LIVING、KITCHEN」の3つの機能訴求の補助としてイラストを使用しておりますが、こちらのイラストがあることで訴求対象が「子どものいる家族」であることが一目でわかるようになっております。
素敵です。

株式会社秋田屋

名称未設定-3

http://www.akita-ya.com/

酒問屋さんのサイトですが、「酒」の表現に象徴的なイラストを使用することで、閲覧者が各々にとって「好きな酒」をイメージしやすくなるのではないでしょうか。
多種多様な商品を扱う酒問屋さんにはうってつけの表現だと思います。

DONGURIコンサルティング

名称未設定-4

http://www.don-guri.com/doncon/

DONGURIコンサルティングさんのサイトですが、イラストもさることながら、コンセプトワークが素晴らしすぎますね。
「トップページ」→「メソッドページ」→「お問い合わせページ」までのストーリーの構成がとても腑に落ちて、やられた感しか残りませんでした。
もちろん、この構成をしっかりと表現に落とし込んだイラストワークもとてもすてきだと思います!

※こちらもDONGURIさんの素敵なサイトです。
http://www.don-guri.com/music/

WHY WASEDA

名称未設定-5

http://www.waseda.jp/inst/whywaseda/en/

早稲田大学の海外留学生向けに作った、日本誘致サイトです。
「日本」や「早稲田大学」の利点をさまざまなデータを用いりPRしておりますが、イラストを使用することによって、テキストを読み込まなくても、何に対しての利点について語っているのかが伝わりやすくなるのではないでしょうか。

やさい あまうま ル・クルーゼ

名称未設定-6

http://www.lecreuset.jp/yasai/

こちらは、視線がコンテンツエリアに向かうように、右カラムの左右にできた余白に野菜のイラストを配置したのではないでしょうか。
イラストがあることにより、サイト自体の雰囲気も素敵なものになっております。

sweets atelier TOKYOの畑から

名称未設定-7

http://www.ecute.co.jp/tokyonohatakekara/

東京の畑からとれた素材を使って皆様に届けたいという意図から、線路のイラストを使用した視線の誘導を行っているのでしょうか。
イラストを随所に使用することで、訴求対象者である2~30代の女性が雑誌を読むような感覚で気軽に閲覧できるようになっております。

松山市六軒家のひなた歯科クリニック

名称未設定-8

http://hinata-dental.net/

トップページのイラスト・ナビゲーションのアイコンも素晴らしいですが、中ページのキービジュアルにスクロールをするとちょっとした仕掛けを設けているのがとても良いアイディアだと感じました。
こちらもイラストだからこそできる表現かと思います。

東京メトロ 銀座線全面リニューアル

名称未設定-9

http://www.tokyometro.jp/ginza/

フッターに固定配置されているナビゲーション上部にイラストを使用した遊び心が、とても素敵だと感じました。
イラストレーションもさることながら、配色もとても参考になります。

豆苗研究会

名称未設定-10

http://murakamifarm.com/myouken/

イラストレーションとその世界観を踏襲した写真のコラージュがとても素晴らしく感じます。
「豆苗研究」という、ややとっつきにくいテーマも、ポップな雰囲気の世界観を作り出すことにより、閲覧者にすんなり伝わるのではないのでしょうか。

たかしま農園

名称未設定-11

http://www.takashima-nouen.com/

手書き風のイラストを使用することで、柔らかさや親しみやすさが感じられるデザインになっております。
「愛情と手間をかけて育てたトマト」という商品価値がイラストを使用することで、閲覧者に対してより伝わりやすくなっていますね。

まとめ

いかがでしたか?
見ているだけで、楽しい気分にしてくれるようなサイトばかりでしたね。
今後もイラストを使用しているサイトに注目し続けようと考えておりますので、第2弾もご期待ください。