イラストが効果的なWebサイト事例15選!無料素材サイトも紹介

この記事のレベル
初心者
(4.0)
重要度
(3.0)
難しさ
(1.5)

こんにちは、編集長のカワウソです。

はじめてのWebサイト制作、どのようなデザインにするか迷いますよね。

きっと数多くの参考サイトを見て、「あれでもない、これでもない」とイメージを固めていらっしゃる真っ最中だと思います。

中には「イラストを取り入れたい」と考えている方もいるのではないでしょうか。

そこで今回は、イラストを効果的に使ったWebサイト事例を紹介します。

カワウソ

この記事は次のような人におすすめ!

  • はじめてWebサイトを作る人
  • Webサイトのデザインに迷っている人
  • Webサイトにイラストを取り入れたい人
  • イラスト導入のメリットを知りたい人

この記事を読めば、イラストのトレンドを知るだけでなく、自社に適したものを選べるようになります。

また、無料で使えるイラストの素材サイトも紹介しているので、気になる方はご覧ください。

それではどうぞ!

トレンドのイラスト5選

Webデザインで使われるイラストにはトレンドがあります。トレンドのイラストを使えば、企業の先進性をアピールできます。

ここでは最近よく利用されるイラストを5つ紹介するとともに、それぞれ参考サイトを3つずつ紹介します。

アイソメトリック

アイソメトリックとは、対象物を「ななめ上」から見下ろすような視点で描かれた図のことで、「等角投影法」とも呼ばれます。

製図の際に用いる図法のひとつで、各辺を実寸で描くことから、寸法を伝えやすいメリットがあります。

アイソメトリックの手法を活用したイラストは、対象物を立体的に表現できるため、インテリアや街など「空間」を表現するのによく利用されます。

それでは参考サイトを見ていきましょう。

Sangetsu Recruit 2023

Sangetsu Recruit 2023

出典:Sangetsu Recruit 2023

Sangetsu Recruit 2023は、株式会社サンゲツのリクルートサイト(採用サイト)です。

インテリアの企画、開発、製造、販売などを行う会社ということもあり、アイソメトリックを用いて「部屋の空間」をうまく表現しています。

ボラギノールタウン

ボラギノールタウン

出典:ボラギノールタウン

ボラギノールタウンは、ロート製薬グループの天藤製薬株式会社が運営するブランドサイトです。

イラスト上の建物ごとに番号が振られていて、クリックすると、ボラギノールⓇに関する豆知識や歴史が学べます。

単に情報を並べただけのWebサイトと違い、「街」というコンセプトで楽しく閲覧できるよう工夫されています。アイソメトリックは「街」を表現するために、一役買っているといえるでしょう。

また、躍動感が感じられるようにイラストを動かしている点にも注目です。

GLADCUBE

GLAD CUBE

出典:GLADCUBE(グラッドキューブ)

デジタルマーケティング支援事業を手がける株式会社グラッドキューブのコーポレートサイトです。

アイソメトリックで表現された社名の「GLAD CUBE」という文字がインパクト抜群で、うまくデザインに溶け込んでいます。

Webサイトの「企業ロゴについて」というコンテンツには以下のような記載があります。

グラッドキューブは、「喜び(glad)」を「カタチにする(cube)」という2つの単語を組み合わせて、2007年に名付けました。

(中略)

「喜びをカタチにする」とは抽象的に感じるかもしれませんが、キューブとは多次元の階層構造をもったデータを意味します。三次元立体を応用して、分析することの意思表示でもあります。

引用:ビジョン|株式会社グラッドキューブ

そもそも「cube」には「立方体」という意味があるため、関連するデザインとしてアイソメトリックが採用されたのかもしれません。

このように、コーポレートサイトでは、企業の社名や理念を表現するデザインを採用する会社が多いのです。

フラット

フラットは、立体感がなく平面でシンプルなデザインです。

基本的に、立体感を生み出すグラデーションやシャドウ(影)は用いられません。

色数が少なかったり、不要な要素が削ぎ落されたりするため、ユーザーの目線を「ビジュアル」より「内容」にフォーカスできるのがメリットです。

また結果として、イメージファイルのデータ容量が少なくなります。Webサイトのページ読み込み速度の高速化が求められる昨今ではアイコンなどにも多く用いられます。

それでは参考サイトを見てみましょう。

SOUND TRIP

SOUND TRIP

出典:SOUND TRIP

SOUND TRIPは、株式会社 on the tripが運営するブランドサイトです。

サウンドトリップは、アーティストがその地にまつわる音を使い、そこでしか体験できない「物語のある音楽」をつくるプロジェクト。

引用:SOUND TRIP

たとえば、「仁和寺でしか聴けない音楽体験」と題して、お寺の中に「サウンドトリップブース(音楽視聴ブース)」が設置されています。

Webサイトにはフラットデザインが用いられており、シンプルです。そのため、すぐに「音で飛ぶ、寺社の新体験 SOUND TRIP」というキャッチコピーが目に入ります。

一般的に、寺社のWebサイトは写真が使われるケースが多いようです。

しかし、あえてイラストを使って「寺社の新体験」を演出しているといえるでしょう。

名古屋エステイト社

名古屋エステイト社

出典:名古屋エステイト社

不動産の管理・売買・仲介等トータル的にサポートする名古屋エステイト社のコーポレートサイトです。

シンプルなイラストなので、「さて、どの手でいきますか?不動産に、あの手、この手で応える」というキャッチコピーにすぐ目がいきます。

一般的に不動産のコーポレートサイトは、イメージが湧きやすい「青空」と「ビル」の写真をよく使用します。ただ、それだと他社と差別化しづらいのがデメリットです。

名古屋エステイト社のWebサイトは「スーツを着た人物のイラスト」がところどころに登場して、シーンがよりイメージできる仕組みになっています。

スーツを着た人物の躍動感のあるイラストを生かして、不動産や顧客への思いを伝えているといえるでしょう。

FiveStarClub

FiveStarClub

出典:FiveStarClub

株式会社ファイブスタークラブが運営するFiveStarClubは、世界ツアーに申し込みができるWebサイトです。

現地を知るスタッフに相談できるため、訪れたことのない国でも安心して旅行できます。

フラットデザインが利用されているのは、ファーストビューの地図です。

地図は地味な印象になりがちですが、配色が上手いため、おしゃれに見えます。

国(地域)をクリックすれば、専門ページにアクセスできるため、旅行先が探しやすいのも特徴です。

デザインのみならず、ユーザービリティ(操作性)を兼ね備えたWebサイトの好例といえます。

ラインアート

ラインアートは、線だけで表現するデザインで、「線画」とも呼ばれます。

表情が表現しやすいため、人物イメージによく使われるデザインです。

また、色数が少ないことから、シンプルなデザインに仕上げたいときにも重宝します。

それでは参考サイトを見てみましょう。

日興フロッギー

日興フロッギー

出典:日興フロッギー

日興フロッギーは、SMBC日興証券株式会社が運営するサービスサイトです。

「記事から株が買える」というユニークなサービスで、学びながら投資ができます。

「100pt」という文字には赤色が使われており、その他の部分はモノクロです。

日興フロッギーの特徴である「dポイントで株が買える」に目がいくようにデザインされているとわかります。

色を使いすぎると、どこを見ればよいかユーザーは迷うでしょう。しかし、日興フロッギーのWebサイトは、ユーザーに見て欲しい箇所にのみ色を付けています。

まさに「引き算の美学」といえるでしょう。

そもそもホームぺージは目的を達成するためにつくるもの。サービスサイトの目的は「サービスに申し込んでもらう」なのです。

「口座開設(無料)はこちら」の青いボタンも、ユーザーにすぐに見つけてもらえます。

あおば会計事務所

あおば会計事務所

出典:あおば会計事務所

あおば会計事務所は、会計顧問業務を中心として「起業・開業相談」「創業融資」「会社設立の支援」を行う会社です。

「会計事務所」と聞くと少し難しそうなイメージを抱く方もいるかもしれません。ラインアートが用いられており、柔らかい雰囲気になるよう工夫されています。

また、苗が育つイラストを用いて「会社の成長を支えます」というメッセージをうまくビジュアル化しています。

ファーストビューこそ背景色が黄色でベタ塗りされていますが、基本的には色数の少ないWebサイトです。

とくに注目したいのが、トップぺージをスクロールした際に表示されるコンテンツエリアの人物イラストです。

モノクロのラインアートを主体としながらも、「ネクタイ」「タオル」「帽子」「ファイル」などの対象物に、緑色を効果的に差し込んでいます。

あおば会計事務所のコーポレートカラーの緑色を印象づけるための仕掛けです。

vakel

vakel

出典:vakel(バケル)

vakelは、株式会社LARGO(ラルゴ))が運営するサービスサイトで、内装工事・店舗デザイン・設計などをサポートしています。

vakelのWebサイトのラインアートは動くのが特徴です。依頼から完成までのストーリーが描かれています。

そもそもvakelの名前の由来は「化ける」で、「あなたに化ける」「空間に化ける」といった思いが込められているのです。

「化ける」の意味があるところは、オレンジ色で効果的に演出しています。

ぜひ一度覗いてみてください。

コミカルタッチ

コミカルタッチは、漫画的な要素やキャラクターを使用したイラストです。

カラフルな色使いが多く、楽しい雰囲気を演出するのに活用されます。

では参考サイトを見てみましょう。

オオサカマニア

オオサカマニア

出典:オオサカマニア

OsakaMetroが運営するオオサカマニアは、地下鉄の路線・駅から大阪のマニアなスポットが探せるWebサイトです。

コミカルタッチなイラストが活用されており、見ていて楽しいWebサイトといえます。

まさに大阪を表現するデザインといえるでしょう。

魔法部

魔法部

出典:魔法部

魔法部は株式会社フェリシモが運営するECサイトです。

単に商品が並べられたECサイトとは異なり、見ていて楽しいWebサイトに仕上がっています。

魔法部のコンセプトは、魔法の世界。

毎日に、ときめきと勇気が必要な女性にマジカルアイテム(魔法のアイテム)を届けるのが使命です。

ターゲットが女性ということもあり、幻想的で、ユニークなイラストが用いられています。

また、占いなどのコンテンツも用意されており、毎日アクセスしたくなる仕掛けがあります。

FREAK’S STORE

FREAK’S STORE ONILINE

出典:FREAK’S STORE

株式会社デイトナ・インターナショナルが展開するセレクトショップ「FREAK’S STORE」のWebサイトです。

FREAK’S STORE ONILINEの15周年記念に作られた特設サイトで、さまざまな企画が掲載されています。

コミカルタッチなイラストにより、にぎやかで楽しい雰囲気です。

また、Webサイト以外にもWeb CMも公開されており、イラストはそれらのトンマナを揃えるのに一役買っています。

トンマナとは?

トンマナとはトーン(tone)&マナー(manner)の略称。 広告やWeb制作のデザインにおいてコンセプトや雰囲気に一貫性をもたせること。

手書き風

その名の通り、手書き風のイラストです。

すでに紹介した、ラインアートやコミカルタッチの中にも手書き風のデザインは存在します。

ここではラインアートやコミカルタッチとは少し性質が異なる「水彩画」や「鉛筆画」に特化した参考サイトを紹介します。

温かみのある優しい雰囲気のサイトを作りたいときに活用してください。

それでは参考サイトを紹介します。

養老うまいもん広場BBQ場

養老うまいもん広場BBQ場

出典:養老うまいもん広場BBQ場

養老うまいもん広場BBQ場は、養老ミート株式会社が運営するサービスサイトです。

「ビール」と「肉(トング)」でバーベキューの雰囲気を演出していますが、イラストだからこその温かみがあります。

仮にイラストではなく、肉の写真を載せるとどうでしょうか。生々しさが出てしまうため、デザインとしての「柔らかい雰囲気」が出しづらくなります。

飲食についてはあえてイラストを使うケースも珍しくありません。以下のサイトもあわせてご覧ください。

「 table trip」(SUNTORY × FOOD MAGAZINE 「ELLE gourmet」)

PREMIUM WATER

PREMIUM WATER

出典:PREMIUM WATER

PREMIUM WATERは、プレミアムウォーター株式会社が運営するウォーターサーバーの申し込みサイト(サービスサイト)です。

ウォーターサーバーは、安心で安全な天然水が飲めたり、すぐにお湯が出たりするメリットがあります。そのため、妊婦さんや赤ちゃんを育てているママに人気があります。

「プレミアムウォーターマムクラブ」は、まさにそんなママ向けのプラン。

子供のためのウォーターサーバーというニュアンスが出るように、ママと子どもの写真と、手書き風のイラストが上手く組み合わされています。

株式会社パラダイムシフト

パラダイムシフト

出典:株式会社パラダイムシフト

IT領域におけるM&Aアドバイザリーを手がける株式会社パラダイムシフトのコーポレートサイトです。

Webサイト全体に鉛筆画が使用されており、アートのような世界観を感じます。

使われている色数も少なく、「大人っぽさ」や「知性」が感じられます。

IT業界でよく使用するのは、デジタル感のあるデザインです。あえて鉛筆画でアナログ感を演出しているのが特徴といえるでしょう。

写真ではなくイラストを使うメリット

いくつか参考サイトを紹介しましたが、いかがでしたでしょうか。

「写真じゃダメなの?」と考える方もいると思います。ここでは写真と比較した際のイラストのメリットを紹介します。

写真と比較した際のイラストのメリット
  • 非現実的な表現ができる
  • コストを抑えられる
  • スタッフの顔出しが防げる

非現実的な表現ができる

イラストであれば、写真では難しい非現実的な表現ができるのが一番のメリットです。

以下のWebサイトをご覧ください。

株式会社ディンプス

出典:Dimps Recruit

ゲーム開発を事業とする株式会社ディンプスのリクルートサイトです。

近未来的な建物や乗り物が大木を囲んでいる空想の世界になっています。

主人公は猫。二足歩行している猫もいれば、乗り物を運転している猫もいます。

会社の理念やブランドコンセプトなどは、頭に描いたものを具現化するのが難しいときがあるのです。

イラストであれば、自由な発想かつ何の制限も受けずに、イメージをビジュアル化できます。

コストを抑えられる

表現するものによっては、写真よりイラストのほうがコストを抑えられるときもあります。

たとえば、以下のWebサイトをご覧ください。

立ち喰い梅干し屋

出典:立ち喰い梅干し屋

全国のおいしい梅干しを取り揃える店舗「立ち喰い梅干し屋」のWebサイトです。

インパクトのあるイラストが使われています。これを写真で表現すると意外とコストがかかります。

モデル、ヘアメイク、カメラマン、衣装、スタジオ、交通費、ケータリングなど、少なくとも50万円以上かかるでしょう。

また、納品された写真には使用期限も設定されます。使用期限を延長する場合、モデル事務所に契約延長料を支払う必要があるためコストがかかるのです。

経費を抑えるため、知人に頼めるかもしれません。しかし、たくさんの人数を集めるのは大変です。

仮に集まったとしても、素人モデルではイラストのような「酸っぱい表情」ができるか定かではありません。

もちろんイラストも、依頼するイラストレーターによって金額は変わります。

まずは写真とイラストで、どちらがコストを抑えられそうか検討してみてください。

スタッフの顔出しが防げる

Webサイトにスタッフ紹介ページがあれば、顧客や就職者がイメージしやすいため、安心感を覚えます。

しかし昨今、Webサイトに顔出しするのが難しいスタッフも増えています。

個人情報の取り扱いが厳しくなっていたり、SNSで簡単に個人が特定できたりするためです。

イラストを使えば、スタッフが顔出しせずにイメージを伝えられます。

以下、参考サイトです。

株式会社Roots

出典:株式会社Roots

イベントコンサルティングの株式会社RootsのWebサイトは、スタッフのイメージをイラストで表現しています。

各メンバーの個性がイラストに反映されており、明るい表情に統一されているため、親近感が湧きます。

また、Webサイトはグリーンとベージュが基調です。スタッフの服の色を変えることで、華やかさを演出しています。

商用利用可能なフリーイラスト素材サイト

コストを抑えたいという方は、まずフリー(無料)のイラスト素材サイトから、自社に合うものがないか調べてみてください。

ここで紹介する素材サイトは、どれもイラストに特化しており、商用利用可能です。

※使用前には必ず規約をご確認ください。

イラストAC

イラストAC

出典:イラストAC

会員登録 必要
フリー(無料)
商用利用
改変
クレジット表記 不要
ファイル JPEG/PNG/AI
規約 https://www.ac-illust.com/main/terms.php

イラストACは、約240万点のフリーイラスト素材、無料画像がダウンロードできる素材サイトです。

Adobe Illustrator(画像編集ソフト)で編集可能なAIファイルがダウンロードできます。たとえば色を変えたり、パーツを組み替えたりできます。

無料会員だと、一つの素材をダウンロードするのに15秒の待ち時間があるのがデメリットです。さらに、一日のダウンロード数が9点までと制限がかかります。

有料のプレミアム会員になれば、制限が解除されるだけでなく、無料会員ではダウンロードできない素材なども対象に含まれるようになります。

この記事で紹介したアイソメトリックの素材もダウンロードが可能です。

unDraw

unDraw

出典:unDraw

会員登録 不要
フリー(無料)
商用利用
改変
クレジット表記 不要
ファイル PNG/EPS
規約 https://undraw.co/license

unDrawは、おしゃれかつモダンなイラストがダウンロードできる素材サイトです。

画面右上のカラーアイコンをクリックして好きな色を選べば、その色に変更された素材をダウンロードできます。

カラーコード(色番号)にも対応しているため、自社のWebサイトのカラーコードが決まっている場合も、トーン(色味)を合わせられます。

また素材数も多く、ビジネスシーンのイラストも豊富なので、BtoBサイトの素材としても活用できます。

Linustock

Linustock

出典:Linustock(ライナストック)

会員登録 不要
フリー(無料)
商用利用
改変
クレジット表記 不要
ファイル PNG,EPS
規約 https://www.linustock.com/termsofuse

Linustockは、シンプルな線画イラストを配布するフリーイラスト素材サイトです。

ラインアートとしてそのままモノクロの状態で使ったり、ダウンロードしたEPSファイルを画像編集ソフトで好きなカラーに変更したりもできます。

フリーサイトのイラストでは満足いかない方へ

フリーサイトのイラストだけでは、自社に適した素材が見つからないときもあります。

その場合は、以下の方法を検討しましょう。

  • 有料の素材サイトを利用する
  • フリーランスに依頼する
  • イラストが得意なWeb制作会社を見つける

有料の素材サイトを利用する

無料もあれば、有料の素材サイトもあります。

ここでは、弊社もよく利用する素材サイトを紹介します。

iStock

iStock

出典:iStock(アイストック)

イラストのみならず、映像(動画)や写真、音楽などがダウンロードできる有料素材サイトがiStockです。

数百万点の素材から探せるため、希望に近いものが見つかる可能性が高いでしょう。

「定額制プラン」と「クレジットパック」の二つがあります。

月額の定額制プランは「ベーシック」「プレミアム」「プレミアム+ビデオ」の3つです。プランによってダウンロード可能な素材が異なります。

フリーランスに依頼する

有料の素材サイトでも、理想の素材が見つからない場合は、オリジナルで発注することも検討しましょう。

フリーランスに依頼すれば、比較的コストを抑えられます。

フリーランスを探すには以下のサイトがおすすめです。

Lancers

Lancers

出典:Lancers(ランサーズ)

Lancersは、日本最大級のクラウドソーシング仕事依頼サイトです。

提案・見積もりを集めて一点を選ぶ「プロジェクト方式」や実際に制作物を集めて一点を選ぶ 「制作物コンペ方式」など、自社に合う発注方式で依頼できます。

また、デザイナーのプロフィールから実績を見て、直接依頼も可能です。

コンペ方式では、「提案数保証」という制度があります。対象となった依頼の提案件数が15件未満の場合、全額返金になる制度です。

加えて、著作権はクライアント側に譲渡されるため、安心して利用できます。

イラストが得意なWeb制作会社を見つける

そもそもWebサイトの制作を外注しようと考えている方は、イラストが得意な会社を見つけるのが一番手っ取り早いでしょう。

自前でイラストを用意した場合、実際にWebサイトにはめ込むと「なんかイメージと違う……」と感じる場合もあります。

イラストが得意なWeb制作会社に依頼すれば、リスクを軽減できます。

しかし、日本には5,000社を超えるWeb制作会社が存在すると言われており、イラストが得意なWeb制作会社を見つけるのは困難です。

そこでご紹介したいのが、弊社が提供する無料のサービス「ホームぺージ制作相談」です。

ホームぺージ制作相談

ホームページ制作相談

ホームぺージ制作相談

専門のコンサルタントが「目的」「予算」「スケジュール」などを事前にヒアリングしたうえで、お客様に合うWeb制作会社を厳選してご紹介します。

プロに相談すれば、初心者の方でも簡単かつ安心してWeb制作会社を選べます。

弊社「エックスサーバー」「Xserverビジネス」のご契約者様向けのサービスではありますが、ご契約前の相談も可能です。ぜひお気軽にご利用ください。

まとめ

この記事では、イラストを効果的に活用したWebサイトの参考事例を紹介しました。

イラストと一口にいっても、さまざまな種類があります。この記事で紹介したトレンドのデザインの中から探すのがおすすめです。

まとめ
  • Webデザインにはトレンドがあり、イラストでは主に5種類がある
  • 「なぜイラストを使うのか」を考え、写真と比較すると良い
  • フリー(無料)のイラスト素材サイトで見つからない場合、有料サイトも検討する
  • オリジナルイラストを発注する場合は、フリーランスかWeb制作会社に依頼する
  • イラストが得意なWeb制作会社を選ぶなら「ホームぺージ制作相談」がおすすめ

イラストを活用すれば、写真では得られないさまざまな効果が期待できます。Webサイトを制作する際には、ぜひとも検討してみてください。

それでは、素敵なWebサイトの完成を祈っております。

以上、最後まで読んでいただきありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1のレンタルサーバーであり、16万社の導入実績があります。

10月13日12時まで利用料金最大30%OFFキャンペーン開催中です!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

【誰でも簡単】ホームページの作り方!自社に最適な方法が選べる

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!