BRIK GALLERYについて
デザインやコンテンツの参考になる国内最大規模のWebサイトリンク集・デザインギャラリーの BRIK GALLERY では、日々クリエイターの方々の参考になる作品を更新しています。
クリエイティビティを刺激し、デザインの参考になり、仕事に役に立つ、Webサイトなどを中心に紹介しています。BRIK GALLERYでは、カテゴリーやタグから検索し、気になった作品はお気に入り機能で保存可能な機能があります。
作品は、INDUSTRY (業種)、TYPE (Webサイトなどの種類)、COLOR (キーカラー)、DESIGN (デザイン表現の方法) などのカテゴリーで分類されています。ここから目的としているデザインを絞り込んで探すことが可能です。
本特集では、BRIK GALLERYに掲載されている作品の中から、特定のテーマで作品をピックアップしていきます。
イラストを使ったWebサイトに求められることとは？🤔
イラストには、写真や動画、文字では伝わらない感覚的なメッセージや概念、世界観を表現する力があります。また、イラストのテイストによって「親しみやすさ」「可愛らしさ」だけでなく、「柔らかさ」「洗練」「エネルギッシュさ」などさまざまな印象を演出できるのも特徴です。そこで本記事では、イラストを使ったWebサイトを作る際にデザインやコンテンツなどの面で参考になる、優れたウェブサイト15選を紹介します。ぜひ参考にしてみてください。
ご紹介する作品は、以下の3つの基準を元に選出しました。
- ✅イラストによって独自の世界観が表現できているデザイン
- ✅複雑な情報や抽象的な概念をイラストによってわかりやすくしているデザイン
- ✅ターゲットの属性に合わせたデザイン
参考になるイラストを使ったWebサイトのご紹介🎨
CASTER BIZ
業務をサポートするリモートアシスタントサービス、CASTER BIZ。トップページのインパクトのあるイラストからは、どんなサービスを提供しているのかが感覚的に伝わってきます。宇宙空間やゴールドのジュエリーをつけた美しい女性の手先は、優秀なアシスタントの人材を提供してくれることを想像させるでしょう。
総合建材商社エムエム建材
総合建材商社エムエム建材の新卒サイト。トップページでは、仕事に勤しむ男女のイラストが臨場感を持って描かれています。イラストの質感やテイストによって、向上心の強い人材を求めていることがひと目でわかります。
groxi株式会社 採用サイト
ITインフラ領域の事業を行うgroxi株式会社の採用サイト。「自分の能力を解放したい者は、ここに集え。」というキャッチコピーの通り、バトルものアニメのような世界観が広がっています。会社の魅力を物語の力を借りながら伝えている点が面白いです。
講談社2023年度定期採用[書き出そう世界と君のものがたり。]
講談社2023年度定期採用[書き出そう世界と君のものがたり。]
大手出版社講談社の2023年採用サイト。カラフルでユニークなテイストのキャラクターたちにまず目が惹かれ、個性的で「とんがり人間」なる人材を求めていることが伝わってきます。また背景の様々な柄のパターンのコラージュからは、親しみやすい印象を与えるでしょう。
2024年卒 新卒採用サイト
Webサイト制作会社バケモノの2024卒採用サイト。ストリートファッションの男女やレコード盤など、抜け感のある線画のイラストが描かれており、ターゲットである20代前半の若者のトレンドを意識したデザインになっています。かなりイラストの量が多いですが、ミントグリーンとグレー、ホワイトという存在感を抑えた色味を採用することで、まとまりのある印象となっています。
デジホ | 一歩ふみだす保険
デジタル完結型の保険ブランド、デジホ。前向きな様子の人々の線画のイラストは、とてもカジュアルな雰囲気を演出しており、従来の堅い保険のイメージを一新したデザインといえるでしょう。「今を自分らしく ちょっとアクティブに」のキャッチコピーがイラストによってしっかりと体現されています。
こどもの毛おなやみそうだんしつ
体毛の悩みを持つ子供に向けた除毛クリームブランド。ベージュ系のカラー、曲線が用いられたイラストやフレームによって、柔らかな雰囲気が演出されています。イラストの人物は、皆目を瞑っており、毛の問題がセンシティブなものであることを物語っています。コンプレックスなど悩みを持つ人たちの心を包み込むようなデザインです。
Let’s Talk Gender
マッチングアプリtinderが「性の多様性」をテーマに企画したプロジェクトのサイト。ニュアンスカラーを使うことで、曖昧さや多様さが表現されています。また、曲線的で男らしさ女らしさをはっきりと感じさせない人物のイラストを採用することで、視覚的にサイトのテーマをユーザーに伝えることに成功しています。
ファンファーレ株式会社
AIを活用した配車管理サービスを提供しているファンファーレ株式会社のコーポレートサイト。ブラウン系のカラーを用いた曲線的なイラストは、テック会社らしからぬ雰囲気で、見るものに親しみや温もりを感じさせるでしょう。イラストを用いることで人々の生活に寄り添ったサービスを提供している会社であることをアピールできています。
Balming Tiger
Balming Tiger韓国のオルタナティブバンドBalming Tigerのサイト。アメコミ風のイラストで部屋の様子が描かれています。手紙のイラストをクリックすると「くしゃっ」という音と共にライブ情報が表示されるなど、一定の見やすさを保ちながらも遊び心に溢れているところがポイントです。モーションやサウンドにこだわることで部屋を立体的に表現しているのも面白いです。
FOR A SUITANABLE FUTURE
シャンプー、リンスブランドのBOTANISTが環境保護のために行っている活動を紹介するサイト。スクロールテリングが採用されており、スクロールするたびに森の中に誘われるような気持ちにさせてくれます。イラストの質感によって素朴でナチュラルなイメージを演出しています。
すべてのお母さんに、ありがとう。
スキンケアブランドPOLAが母の日を記念して製作したサイト。スクロールするたびに花が次々と開花し、宙を舞い、最後には一つの花束になっていく過程は、とても滑らかで喜ばしい気持ちになります。また、花々のイラストが赤など原色を用いたカラフルな色使いをすることで、はつらつとしためでたい印象を与えるでしょう。
PARKLET BAKERY
日本橋にあるパン屋さん、PARKLET BAKERY。スクロールするたびにマスコットキャラクターが形を変えてふにゃふにゃ動いている様がかわいいです。なんとなく愛着が湧いてくるのだから不思議です。ぷっくりしたフォントとこのキャラクターがうまくマッチしていて、カジュアルでゆるい雰囲気を作り出しています。
SEA HARVEST
SEA HARVEST
オーストラリアにある魚屋さんのサイト。昔の新聞のようなデザインが採用されておりレトロでありながら、同時にレイアウトをシンプルにすることでモダンな雰囲気も演出されています。また、「About」の部分をかざすと、ペンで文字を囲うようなモーションがつけられており、インタラクティブな面も真似したいポイントです。
Kihealth
自宅で糖尿病の検査をできるサービスを提供する、アメリカにある会社のコーポレートサイト。シンプルなラインの抽象的なイラストを用いて、サービスの有用性を統計を用いてわかりやすく説明しています。背景のグラデーションやパステルカラーの配色とイラストが良く融合していて、サイト全体が洗練された印象になっています。
ひとはなコンサルティング
株式会社ひとはなコンサルティングのコーポレートサイト。コンサルティング会社のサイトのデザインは、通常クールでスタイリッシュなものが多いですが、本サイトにはカラフルなモーション付きの花のイラストが随所に配置されています。オープンでいてお客様に寄り添うような穏やかな雰囲気を醸しだしていて、会社の大切にしている価値観や哲学が伝わってきます。
まとめ
イラストを使ったWebサイトの制作時にデザインやコンテンツの面で参考になる、優れたWebサイト15選をピックアップし解説していきました。イラストを用いることで、ターゲットや伝えたいメッセージ、表現したい世界観がデザインに落とし込まれていたかと思います。ぜひこれからの制作の参考にしてみてください。
