サイトの雰囲気を決める大事な要素!イラストを効果的に使っている日本サイトをご紹介!

ウェブデザイン 最終更新日:2020/02/14 公開日:2013/12/20

今回はイラストを効果的に使っているサイトをご紹介したいと思います。

イラストは小さくてもサイトの全体の雰囲気を決める大事な要素の1つです。
それだけイラストは見ている人の目をひきやすいものなのです。

イラスト自体が魅力的でなかったり、意図の違ったイラストを使ってしまうと、ちぐはぐなイメージを与えてしまいますが、上手く使うことで、サイトの内容をより分りやすく魅力的に伝えることができます。

それではご紹介いたします。どうぞ!

ワコール LALAN(ララン)

04
パステルカラーで構成されており、ガーリーな雰囲気のサイトです。ところどころに描かれている手書きのりボン、白馬、豚などのイラストがガーリーな雰囲気をあげるのに一役かっています。

スクロールすると白馬が上からおりてきたり、ボタンにマウスをのせるとちょうちょが出てきたりとイラスト以外の部分でも参考になるサイトです。

福岡県立城南高等学校

03
サイトのヘッダーとフッターに校舎と生徒のイラストを大きく配置しています。ひと目で学校のサイトだということが分かって良いですね。
キャンバス地の背景に温かみのあるイラストを使うことで、全体的に健やかで楽しい学校生活を連想させます。

たがみ文具店

01
サイトの緑に合わせてイラストも緑主体で描かれていているので統一感があります。ゆるキャラ系の女の子が色んな場所に使われており、このサイト独特の世界観を作っています。

個人的には、アクセントで使われているピンクが、全体的に緑っぽいサイトをきりりと引き締めており上手いなと思いました。

Kamuro|メガネフレームブランド・セレクトショップ

07
イラストを使ったサイトは、どちらかと言うと可愛らしくなりがちなのですが、ここでは大人っぽいサイトのご紹介。サイトの一番上に大胆に水彩のイラストを入れることで、大人っぽく上品な雰囲気を与えることに成功しています。

はたらきっぷ

06
白地に青ベースで作られたサイト。イラストも青一色で描かれており統一感があります。あまりデフォルメせず写実的に描くことで、青と黄色だけのサイトを上手く引き締めています。

TOPページだけでなく個別ページにもそれぞれイラストがアクセントとして入っており、すごいなと思いました。

スカイダイブ グアム

02
サイト右にあるパラシュートのドット絵がかわいく楽しい印象を与えてくれます。GIFアニメーションでイラストを動かしているのも楽しさを出しているポイントですね。フッター部分のイラストもドット絵になっていて上手いなと思いました。

学校法人秋本学園 浦和つくし幼稚園 採用サイト

05

TOPに大きくカラフルなイラストをもってくることで、サイト全体の雰囲気がとても楽しそうなサイトになっています。

写真とイラストの組み合わせがとても上手く、こういうイラストの使い方もあるんだなと勉強になったサイトです。吹き出しの形1つとっても、挿絵のイラスト1つとっても、かわいい雰囲気を作るのに大きな役割を果たしていると思います。


以上で、イラストを上手く効果的に使っているサイトの紹介を終わります。いかがだったでしょうか?
イラストが上手く使われているサイトは個性が強く出てくるので面白いですね!

WEB企画でもイラストをアクセントに使ったサイトを作成しております。(というか私が描きます!)ご興味ありましたら。是非ご連絡ください。また面白そうなサイトを見つけたらまとめてご紹介いたします!

CONTACT

Webサイト制作のご相談やご質問、ご不明点などございましたらこちらよりお問い合わせください。
「ホームページ制作について」とお伝えください。担当者におつなぎいたします。

オフィス一覧へ

受付時間|9:00~18:00(土・日・祝除く)

※お電話にてお問い合わせの際はオフィス一覧からお近くのオフィスにご連絡ください

※全国対応

ホームページ無料診断 毎月10社限定

ホームページ制作のプロがユーザビリティ・SEO・競合などを多角的に分析し、
具体的な改善案をご提案します。

無料診断する