目次
BRIK GALLERYについて
デザインやコンテンツの参考になる国内最大規模のWebサイトリンク集・デザインギャラリーの BRIK GALLERY では、日々クリエイターの方々の参考になる作品を更新しています。
クリエイティビティを刺激し、デザインの参考になり、仕事に役に立つ、Webサイトなどを中心に紹介しています。BRIK GALLERYでは、カテゴリーやタグから検索し、気になった作品はお気に入り機能で保存可能な機能があります。
作品は、INDUSTRY (業種)、TYPE (Webサイトなどの種類)、COLOR (キーカラー)、DESIGN (デザイン表現の方法) などのカテゴリーで分類されています。ここから目的としているデザインを絞り込んで探すことが可能です。
本特集では、BRIK GALLERYに掲載されている作品の中から、特定のテーマで作品をピックアップしていきます。
ポップなデザインテイストのWebサイトに求められることとは？🤔
ポップなデザインは、ユーザーの気持ちを明るくワクワクさせたり、「フレッシュさ」「可愛らしさ」「親しみやすさ」などを演出したりすることもできます。そのため、若者をターゲットにしたWebサイトで用いられることが多いデザインであることが特徴です。他にも、ブランドのイメージチェンジを狙う際に度々用いられるデザインでもあります。そこで本記事では、ポップなデザインテイストのWebサイトを作る際にデザインやコンテンツなどの面で参考になる、優れたウェブサイト15選を紹介します。ぜひ参考にしてみてください。
ご紹介する作品は、以下の3つの基準を元に選出しました。
- ✅見るものを明るい気持ちにさせるデザイン
- ✅ターゲットに合わせたデザイン
- ✅目的に合わせてポップテイストを用いているデザイン
参考になるポップなデザインテイストのWebサイトのご紹介🎨
博報堂プロダクツRECURUIT 2024
博報堂プロダクツの新卒採用サイト。トップページのハート型のオブジェは、グミのような弾力のモーションがつけられており、目が釘付けになります。また、ビビッドでカラフルな配色によって、多種多様な分野のエネルギッシュな人材を求めていることが伝わってきます。ポップなデザインテイストを使うことで、企業カルチャーがにうまく伝えられている例と言えるでしょう。
Niew
NiewJ-WAVEによるカルチャーメディア。まず背景がスクロールするについれて、マーブルやグラデーション、青年のイラストに変わっていきます。これによって様々な分野のカルチャーを紹介しているメディアであることが目の刺激と共に伝わってきます。カラフルでありながらも枠線を用いることで、一定の見やすさが保たれている点も注目です。
DEMI DO
「あらゆる年齢の人に、10代のころのような美しい髪を」がキャッチコピーのスカルプシャンプー＆トリートメント。暖色系のカラフルな配色をし、様々な種類のモーションをつけることで、ユーザーの心をワクワクさせるような効果を生み出しています。「中高年が使うスカルプシャンプー」というイメージを一新することに成功しています。
IKEN WEBマガジン
I福岡医健・スポーツ専門学校の受験生向けサイト。在校生のインタビューが雑誌風のデザインによって掲載されています。医療×スポーツということで、誠実なイメージを与える「青」と、活発な印象を与える「オレンジ」を用いています。将来に悩む受験生に、学校の魅了を爽やかに伝えることに成功しています。
infomart
クラウドサービスを提供する株式会社インフォマートのコーポレイトサイト。緑というカラーは信頼感を与えるので、全体的にはスタイリッシュな印象を与えるでしょう。しかし、トップページの動く丸みのある太い曲線や、生き生きした表情の人々の写真を大きく配置させることで、親しみを持ちやすいデザインとなっています。
デートサイエンス｜大阪工業大学
大阪工業大学のデータサイエンス学科の特集サイト。データーサイエンスという分野がいかに日常の生活と関係の深いものであり、魅力的な学問であるのかを「デート」という言葉と掛けて、ユニークな角度から受験生にアピールしています。手描き文字やピンクと緑黄色の淡いグラデーションの背景など、マッチングアプリの広告のようなデザインを彷彿とさせる点が面白いです。
Oops WOMB
オンラインピル処方のサービスを提供するブランドWOMB。ピルに対して多くの人が持つ「怖い、怪しい」といったネガティブな印象を払拭するような明るいデザインがポイントです。具体的には、産婦人科系のサイトによく使われているカラーであるピンクではなく、オレンジを採用したり、絵の具テイストのイラストを載せていたりする点が挙げられます。
うおみこども園
鹿児島県にある幼稚園。従来の幼稚園のサイトのテイストとは異なり、黒の背景にネオンのピンクやグリーン、ブルーといったカラーを採用しています。これによって、個性的で自由な印象を与えるでしょう。幼稚園児たちの可愛らしさや無邪気さがイラストとコラージュによって見事に表現されている点にも注目です。
寄ってきゃ瑞浪!!!
岐阜県瑞浪市のプロモーションサイト。様々な種類のパターンが張り付けられ、加えて小さく震えるようなモーションも各所に仕掛けられており、楽しげで、はつらつとした雰囲気を感じられます。手書きで描かれたような枠線も素朴で、懐かしさと親近感を同時に感じられるデザインになっています。
瀬戸内オーシャンズX
日本財団が主導する瀬⼾内海での海洋ごみ対策のプロジェクト。昔話桃太郎のキャラクターたちが、現代の道路でゴミ拾いをしている様はとてもコミカルです。カラーのテイストが落ち着いているので、ポップになりすぎず、洒落た印象を見るものに与えるでしょう。
FELISSIMO RECURUIT 2024
通信販売会社フェリシモの新卒採用サイト。画面右半分を占めている「ノート」や左半分の「コルクボード」に貼り付けられた、社員らの写真や線画のゆるいイラストは、カジュアルで風通しの良い社風を予想させます。ポップでありながら、やわらかさも表現しているデザインです。
東急エージェンシー2024新卒サイト
広告代理店東急エージェンシーの新卒採用サイト。インタビューを受けている社員の趣味やバックグラウンドがイラストによって表現されており、「好き」を大切にしている企業のカルチャーが伝わってきます。背景や文字、モーションを極力シンプルにすることで、カラフルなイラストとのバランスが取れたデザインになっています。
NEWPEACE
クリエイティブカンパニーNEWPEACE。人々がさまざまなアクティビティを楽しんでいる様がアニメーションやスクロールエフェクトによって陽気に賑やかに表現されており、会社のミッションを感覚的に伝えることに成功しています。カラフルでありながら、配色の箇所を絞ることでユーザーに洗練されたイメージを与えるでしょう。
GINZA MAGAZINE
モードな女性誌ginza magazine。インターネット黎明期を彷彿とさせるような野暮ったいデザインがまず目を惹きます。しかし同時に枠に影をつけて立体的にしたり、emojiを随所に取り入れたりすることで、読者にトレンド感をアピールすることに成功しています。
TBS Podcast
TBSのPodcastのブランドサイト。グレーというカラーを選択することで、各番組のデザインが活かされているだけでなく、都会的な印象を表現できています。また、絵文字を所々に散りばめたり、様々な種類のフォントを用いたりすることで「親しみやすさ」も演出しています。
まとめ
ポップなデザインテイストのWebサイト制作時にデザインやコンテンツの面で参考になる、優れたWebサイト15選をピックアップし解説していきました。どのWebサイトも、ポップなデザインテイストをターゲットや目的に合わせて巧みに用いていたかと思います。ぜひ、これからのWebサイト制作の参考にしてみてください。
