イラストを効果的に使用したWebサイト制作事例12選（ファーストビュー）
「なんかこのサイト、いいな」
そう思うホームページやサイトにはある共通する点があります。
まず、第一に”見やすさ”があげられます。情報が整理されたサイトというのは、見ていて疲れません。
そこには、どんな工夫がなされているのか？
文字のフォント、レイアウト、イラスト、そしてメインビジュアル。それらが互いにバランスを取り合って最もユーザーに見やすいデザインをつくりあげています。
その中でも今回はイラストを活用したファーストビューに焦点をあてて、過去の事例をご紹介させていただけたらと思います。イラストを活用すれば、専門用語を使った小難しい文章でも、雰囲気を変えることができます。これからイラストの導入を検討している方はぜひ本記事を参考にしてみてください。
目次
水彩イラスト＋アニメーション – 株式会社モリヤマ
神奈川県 横浜市にある「株式会社モリヤマ」様のイラスト制作をお手伝いしました。メインビジュアルなどのイラストも担当させていただいています。
本社がある上星川駅周辺の風景イラストにアニメーションをつけ、動きのあるメインビジュアルを作成しました。水彩系を使用したやわらかいイラストで、企業様のイメージする世界観や背景を表現しています。
水彩イラスト＋アニメーション – ぶるべの樹
神奈川県 相模原にあるブルーベリー農園「ぶるべの樹」様のホームページ等に活用するイラスト制作をお手伝いしました。
アニメーションで動きをつけたオリジナルイラストは、線を細めに、水彩画のような淡い色で制作しています。手書き感があり、見るひとにあたたかい印象を残してくれます。
水彩風イラスト – げんきキッズクリニック
山梨県でクリニックやこども園などの事業を行う「げんきキッズクリニック」様のホームページ制作に活用するイラスト制作をお手伝いしました。
げんきキッズクリニック様がお持ちの想いやメッセージをヒアリングさせていただき、イラストで表現できるよう意識して制作しています。全体的に明るく楽しい雰囲気のイラストになっているかと思います。
子どもたちの服や、手にする風船なども艶やかな色で仕上げ、背景に虹や太陽を描くことで、明るさを象徴しています。
手書き水彩イラスト＋アニメーション – カズミア
女性、子供、保育・教育サービス事業向けに制作された当社ホームページのイラストです。
サイトをひらくと、まるで絵本の世界に迷いこんだかのような不思議な錯覚にとらわれることと思います。
全体的に艶やかな色味を使用し、愉快な雰囲気をつくりあげてるよう心がけています。また、キャラクターたちに動きをつけることで立体感を出す反面、ごちゃちゃにならないよう全体のバランスを考慮しながら制作しています。
一目みてビジュアルや世界観が伝わるイラストになっているのではないでしょうか。
手書き水彩イラスト＋アニメーション – 株式会社アイリスファーマ
アイリスファーマ様の採用サイトに活用するメインイラストをリニューアル制作いたしました。薬局内外、医療モール、在宅、地域などの繋がりを、薬局を中心にアイリスファーマ様が目指すビジョンとしてイラスト化。Webアニメーションにて表現しています。
ほんわかとした淡い色彩で表現しつつ、建物などの輪郭ははっきりわかりやすく、全体で見たときのバランスをイメージしながら制作いたしました。
水彩イラスト＋アニメーション – はるかぜ相続
東京都 板橋区にある司法書士「はるかぜ相続」様のホームページへ活用するイラストを制作いたしました。
サイトのトップページに、アニメーションで動きをつけたオリジナルイラストを描いています。
さくらの木や菜の花、川のそばのカエルなど、春の素材を水彩系の淡い色味で表現。春の陽気が画面の向こうから風となって伝ってくる、そんな温かみにあふれるイラストを演出できたのではないでしょうか。
アイソメトリックイラスト - 教育機関向けLPページ カズミア
教育機関向けホームページに使用するためのオリジナルイラストを制作しました。対象物をななめ上から見下ろすような視点で描いたイラスト「アイソメトリック」を構築し、ページに立体感を持たせ、視覚に訴えます。
ランドセル、三角定規、上履き、帽子など学校をイメージさせる素材をふんだんに落とし込み、オリジナリティあるサイトとなるよう意識。使用する色彩を限定し、全体に統一感を与えています。また上記サイト内でも多彩なイラストをご紹介させていただいていますので、ぜひ参考にしてみてください。
アイソメトリックイラスト – ココロとカラダのことを学べるココカラ学園
Yahoo!きっず内の性教育コンテンツ「ココロとカラダのことを学べるココカラ学園」のイラスト制作に協力させていただいています。
ココカラ学園入り口となる特設ページトップでは、アイソメトリックイラスト（斜め上から見下ろしたようなイラスト）で学園全体を表現しています。
学園の背景イラストでは、現実にありそうでない豪華な学園の世界観を保ちつつ、実際の学校と親近感が持てるように建物や小物を描かせていただきました。また、さまざまな子供たちが通っているということを踏まえ、バリアフリーな建物や背景を意識して制作を進めています。
アイソメトリックイラスト – 出る杭
麻布大学様の取り組みの一つ、「麻布出る杭」の特設サイトに活用するイラスト制作（アイソメトリックイラストなど）をお手伝いさせていただきました。
「好きに没頭できる」「親しみやすさの中に成長・成果という力強さ」「“出る杭”というキーワード」「人生としての物語展開」など、イラストに込める思いをお伺いし、構成を3つご提案。さらに、よりイメージに近づけるようイラストのタッチも複数ご提案しております。
たのしく、にぎやかな印象を活かすためにアニメーションを細かく調整。“想い”と“ものがたり”が詰まったメインビジュアルとイラストになっているかと思います。
フラットイラスト – 株式会社VIVAインテリジェンスネットワーク
東京都にある「株式会社VIVAインテリジェンスネットワーク」様のホームページに活用するためのイラストを制作させていただきました。
”前向きに相談してみたい”
そう思えるホームページとなるよう、飛行機のイラストを取り入れています。「不安な中でも頼りたくなるような優しさと温かさも表現したいけれど、これからの人生を考える真剣さもあるので可愛くなりすぎないようにしたい」とのご要望をいただき、イラストタッチを4つ、ご提案いたしました。
文章を補足するイラストではあるものの、管制官とパイロット・コンサルタントと求職者の立ち位置がうまく混ざり合い、世界観の構築に一役買うイラストになっています。
クレヨン風イラスト – 株式会社ユーネクサス
東京都 足立区でネオンサイン・看板の製作を行う「株式会社ユーネクサス」様のホームページへ使用するイラスト制作をお手伝いいたしました。
こちらのイラストは完全オリジナルで制作しています。春夏秋冬と昼夜の合計８枚を作成し、閲覧のタイミングによって表示が変わるよう設定しています。
まるでクレヨンで描いたような力強さと温かみがあり、柔らかさ、親しみを覚えるイラストとなっているかと思います。
個性的／コミカルなイラスト – カカカナイトマーケット
当社が運営する神奈川県央エリアを中心とした地域メディア「Kanahoshi」の主催イベントを企画・運営するにあたって、ポスターやWeb告知に使用するイラストを制作しました。
イベントのテーマが「新しい夜」だったので、近未来をイメージした”宇宙っぽい”世界観になるようデザインしました。キャラクターの影にこれまでとは一風変わった色味を使用し、オリジナリティあふれる世界観を表現。全体的にユーモアを散らした ワクワク感の詰まったビジュアルを描いています。
見れば見るほど、引き込まれるような世界観になっているかと思います。
電光掲示板やチャット風の吹き出しなど、若者に馴染みのあるモチーフや、神奈川県央にまつわる小物を散りばめた遊び心のあるデザインとなっています。
“企業らしさ”を演出するイラスト作成は当社にお任せください。
「なんかこのサイトっていいよね。世界観が好き」
ターゲットユーザーにそう思ってもらうために、フォント、レイアウト、イラスト、メインビジュアルのバランスを大切に、企業やお客様”らしさ”を表現していきたいと思いながら、これまで制作に臨ませていただきました。
- そもそも、どういうイラストを取り入れたらいいのかわからない
- “らしい表現”や会社にあった世界観をいくつか提案してほしい
- 専門用語などが多くどうしても表現が硬くなりがちなので柔らかくしたい
こんなことでお困りのかたはぜひ一度ご相談ください！
より良いものをつくるために一緒に話し合いましょう。
