ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

インバウンドサイトを作るときに知っておきたいこと

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

【Webデザイン10選】イラストを効果的に使った完成度の高いサイトまとめ

  • WEBデザイン

WEBサイトを作る時、できるだけオリジナル性を高めて、少しでも同業他社サイトとの差別化を図りたい…と思いますよね。そのための効果的な表現方法の1つに、イラストを使うというものがあります。

イラストレーションの特徴は、写真では表現できないような独創性のある世界観を表現できること。特に女性向けや子ども向けのサイトでは、「かわいさ」や「あたたかみ」などを、イラストでうまく表現しているサイトがたくさんあります。今回の「WEBデザイン10選」では、そんな中からおすすめサイトを厳選。ターゲットに合わせて効果的にイラストを活用した、ユーザビリティも高く印象に残るWEBサイトをご紹介します。いつまでも見飽きることがない、魅力的なサイトばかりですよ!

イラストを使ったサイト作成の参考に。厳選おすすめサイト

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

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

業種:調理器具メーカー
サイトの目的:ル・クルーゼのプロモーション
サイトの特徴:レスポンシブWEBデザイン、パララックス

フランス産のキッチンウェア「ル・クルーゼ」のプロモーションサイトです。ナチュラルテイストの印象的な野菜のイラストを大胆に使って、野菜を美味しく調理できる調理鍋であることを効果的に表現しています。ル・クルーゼのホーロー加工の鍋の雰囲気とイラストのトーンがマッチしており、商品の邪魔をせず、その特徴を際立たせることに一役買っています。

自分史上最高の「キレイ」のつくりかた

image01
http://woman.mynavi.jp/pantene2015/pc/

業種:美容
サイトの目的:ネイティブ広告
サイトの特徴:1カラムデザイン、パララックス

「働く女子の恋とシゴトと本音がわかる!」がキャッチフレーズの情報サイト「マイナビウーマン」の中にある、パンテーン・ヘアトリートメントのネイティブ広告のページです。スタイリッシュな女性と植物のイラストで、風になびく美しい髪を表現。シンプルな1カラムデザインの情報ページですが、さりげないアニメーションがあることによって、イラストレーションが創りだす世界がより魅力的に表現されており、クオリティの高い仕上がりになっています。

スペインバル トルトゥガ

image01
http://tortuga-ebi.com/

業種:飲食店
サイトの目的:店舗・サービス紹介
サイトの特徴:1カラムデザイン、アニメーション

東京にあるスペインバルのWEBサイトです。お店の特徴である「スペイン」と「海老」と「ワイン」のイラストが背景にたくさん敷き詰められており、1度見ると忘れられない印象的なページになっています。アナログテイストであたたかみのあるイラストに、お店に行ったことがなくても親しみを感じる人も多そうです。イラストのところどころに、かわいく動くアニメーションが施されているのも楽しく、ずっと見ていても飽きないサイトになっています。

伊丹高台の日本茶専門店 茶舗木蔭

image01
http://chaho-kokage.com/

業種:食品
サイトの目的:お店と商品の紹介+ECサイト
サイトの特徴:1カラムデザイン、アニメーション

兵庫県にあるお茶屋さんのWEBサイトです。旧西国街道というところに店舗があることや、その場所の雰囲気や歴史を、和風の貼り絵のようなイラストで表現しており、お茶という商品が持つ雰囲気とよくマッチしています。トップページだけでなく、どのコンテンツを見てもイラストが効果的に使用されていて、通信販売の機能もうまく組み込まれており、歴史を感じさせながらもモダンでお洒落な印象を受けるサイトです。

Bee happy

image01
http://www.beehappy238.com/

業種:食品
サイトの目的:商品の紹介とECサイト
サイトの特徴:1カラムデザイン

宮崎県にある養蜂場のはちみつ販売サイトです。このサイトは、もしイラストがなければ商品写真と文章だけの単調なサイトになってしまうところ。しかし、ヘッダー部分にかわいらしい雰囲気のみつばちと太陽、照葉樹林のイラストがあり、見出しやサイトの端々にもワンポイントのイラストが配置されていることでクオリティを高め、印象に残るサイトに仕上がっています。Facebookページでも、ビジュアル連動が効果的に行われています。

白山歯科クリニック

image01
http://hakusan-dental.com/

業種:病院
サイトの目的:歯科医院の紹介サイト
サイトの特徴:1カラムデザイン

神奈川県にある歯科医院の紹介サイトです。「よくうなずく歯科医院」というキャッチフレーズとイラストレーションだけでも、多くのことを想像させるような、メッセージ性のあるトップページになっています。

大人でも歯医者嫌いの方は多いものですが、このサイトは、文章の語り口や写真、そしてメインビジュアルやキャラクターにイラストを使用することによって、「歯医者=怖い」というイメージを払拭させています。コンテンツごとに使われたフラットデザインのアイコンも1ポイントとして効いており、デザイン性の高いサイトです。

緊張型頭痛研究所 ズキラボ

image01
http://www.kobayashi.co.jp/brand/zukilabo/

業種:医療・健康
サイトの目的:頭痛薬のプロモーションサイト
サイトの特徴:アニメーション、1カラムデザイン

小林製薬が運営する、頭痛薬のプロモーションサイトです。「緊張型頭痛を研究して治そう」というテーマで、緊張型頭痛についての理解を深めるための情報提供を行いながら、自然に製品紹介を行っています。医療や健康に関するサイトということで、サイト全体のトーンを落ち着いたブルーでまとめながらも、シンプルな線画で描かれたキャラクターのイラストがアクセントになっています。難しい印象になりがちな内容をわかりやすく、親しみやすく伝えるためには、イラストが非常に効果的だということがわかるサイトです。

女子美術大学 ”新しいワタシ、生まれる。”

image01
http://www.joshibi.net/joshibi2010/(※音声が出ます)

業種:学校
サイトの目的:女子美術大学の特設サイト
サイトの特徴:カラー、アニメーション、音楽

「新しいワタシ生まれる」というテーマで作られた、女子美術大学の特設サイトです。最初にビビッドなピンクが目に飛び込んできて、女性らしさと若々しい印象をアピール。そこに表示されるアーティスティックなキャンパス・イラストがインパクトを感じさせます。それぞれのコンテンツで色を変えながら、統一したトーン&マナーでデザイン。美大らしいクリエイティビティ、オリジナリティーに溢れるレベルの高いサイトです。

善称寺

image01
http://zensho-ji.com/

業種:寺院
サイトの目的:お寺(お墓)の紹介サイト
サイトの特徴:1カラムデザイン

和歌山県にあるお寺、善称寺(ぜんしょうじ)のWEBサイトです。手作り感のあるやわらかいテイストのイラストをメインビジュアルに使用することによって、普通の人にはあまり馴染みのないお寺の敷居を低くし、永代供養墓というサービスに興味を持ちやすいサイトにしています。デジタルなWEBにアナログ感を加えたバランスの良いサイトに仕上がっています。

中澤季絵

image01
http://www.kienoe.com/

業種:クリエイター
サイトの目的:プロモーション、ポートフォリオサイト
サイトの特徴:1カラムデザイン、パララックス

最後にご紹介するのは、イラストレーター/絵描きの中澤季絵さんのサイトです。イラストレーターの方のサイトということで、トップページには素敵な花のイラストが数多く使われています。パララックスの効果で、花々が浮かびあがってくるようなアニメーションになっており、イラストの見せ方の良い参考になります。

今回のまとめ

いかがでしたか?ずっと見ても飽きない、と感じたサイトも多かったのではないでしょうか?それが、イラストの魅力です。WEBサイトはデジタルなものであるため、グリッドデザインなどで見やすくキレイにレイアウトにすることに意識がいきすぎると、どうしても単調で冷たい感じや、機能的なイメージになりがち。そのような問題を解決したい時に、今回ご紹介したサイトのように効果的にイラストを使用すると、同じ基本構造でもイメージは大きく変わります。

さらに、多くのサイトが行っていたように、さりげないアニメーションをつけると、全体のクオリティは大幅にアップします。これまでとはちがうテイストのサイトを作りたい、文章や写真ではニュアンスを表現しづらい…、という場合には、イラストを使用したデザインで制作してみてはいかがでしょうか?

<関連情報>
【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ
【WEBデザイン10選】これはスゴい!クオリティの高い2016年度新卒採用サイトを厳選
【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ
【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  7. 7

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  8. 8

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  7. 7

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

PDFで出力できる!無料自動お見積り

選択するだけで簡単にお見積り可能です。

さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

簡単なお見積りが発行できます

ワンクリックに命がけのホームページ制作会社M-HAND