社員ブログ

配色が素敵なサイト｜デザイナーsite hunt!

Bit Beans
2026.08.05

デザイン

こんにちは！
Bit Beansでは、毎週デザイン会を開き、現在進行中の案件報告や、デザインに関する課題・疑問を共有し合うようにしています。そして最後に発表するのが「サイト探し」。毎週、それぞれがテーマに合わせて探したサイトを紹介します。

デザイナーの目線で選んだサイトは、ユニークで刺激的。そして毎回、新しい発見もあるのでブログで紹介しています。今週のテーマは、SHさん提案の「配色が素敵なサイト」です。各自が「これはいいデザイン！参考になる！」と思ったサイトを紹介し、各自どんなポイントに注目したかというコメントを添えました。

キュリアス

SHさんが紹介するのは、堅い企業イメージをポップな配色で和らげたサイト

SH「IHIのキャリア採用ページのコンテンツです。堅い企業イメージをポップカルチャーへ翻訳し、好奇心を入口に採用へつなげる設計が印象的です。テック感のあるコーポレートカラーのブルーを軸に、好奇心やエンタメ性を担う多色を絶妙なバランスで配置することで、『企業としての信頼感』と『遊び心』を無理なく両立しています。」

KA「東京ばな奈の『バナナクッキー』商品ページ。クッキーのカラフルさをそのまま活かした配色が魅力的です。ピンク・ブルー・グリーンなど使用している色数は多めですが、全体の明度が揃っているため、画面がうるさくならず、自然な統一感が生まれています。ベースとしてバナナカラーの黄色とブラウンを中心に据えつつ、アクセントとして他の色を程よく取り入れることで、可愛らしさとブランドらしさのバランスがうまく取られていると感じました。」

ポムポムプリン 30周年アニバーサリーサイト

NOさんが紹介するのは、キーカラーを軸に、淡いトーンで世界観を広げる配色

NO「昨年のサンリオキャラクター大賞で、絶対王者のシナモロールから1位を奪取したポムポムプリンの特設サイト。今年（2026年）で30周年を迎えるキャラクターらしく、ブランド（キャラクター）のキーカラーをメインに使いながら、水色やピンク系も使って、配色が単調にならない工夫がされています。色のトーン設計にも細やかな配慮が感じられ、全体を淡い色合いでまとめることで、優しく、可愛らしく、思わず愛おしさを感じてしまう世界観が表現されています。」

「らんま1/2」限定コラボグッズ｜フェリシモ

TOさんが紹介するのは、レトロモダンな配色で現代に引き寄せるサイト

TO「レトロモダンやシティポップが再注目されている中で、このサイトにもそうしたテイストが随所に散りばめられているのが印象に残りました。原作の『らんま1/2』自体が昭和〜平成初期の漫画・アニメであることを考えると、どこか懐かしさのある配色やビジュアル表現が使われているのも自然に思えます。アニメならではのポップさをベースにしながら、Webとしての配色やデザインに落とし込むことで作品の持つ空気感を現代的に再解釈している点が印象的です。」

caica

MAさんが紹介するのは、爽やかなブルーに、花の色が映える配色設計

MA「ナッツ菓子ブランド『caica』のサイトです。全体は爽やかなブルーを基調としており、赤やオレンジのナッツの花がアクセントとして映える、華やかな配色が印象的です。ベースカラーを抑えめにしている分、花の色味が自然と目に入り、ブランドの世界観が伝わりやすくなっています。パッケージに使われている花のイラストよりも、ややコントラストを強めた写真を取り入れることで、画面全体が引き締まり、単調にならない点も好印象です。」

手紙社の学校

YAさんが選んだのは、彩度を抑えた配色で、可愛さと視認性を両立

YA「手紙社が開催するワークショップや手芸などの講座のサイトです。全体の配色はミッフィーを思わせるようなレトロなトーンでまとめられています。ピンクとグレーの格子柄の使い方が新鮮で、甘くなりすぎず程よいアクセントになっています。可愛らしさとほっこりとした雰囲気を残しつつも、文字や情報の視認性がしっかり確保されており、丁寧に設計されていることがわかります。イラストと配色をどのように合わせているのか、気になります。」

CHILL GREEN

SUさんが探したのは、世界観で見せる特集ページが素敵なサイト

SU「濵田酒造の『CHILL GREEN』を実際に楽しんだ人の体験レビューを通して、商品の魅力や飲用シーンを伝える特集ページです。ボタニカルな世界観と“チル”な時間の過ごし方が、写真とコメントでわかりやすく紹介されています。商品の特徴だけでなく、『どう楽しむか』まで、自然に伝わってくる構成が印象的です。2種類の商品のカラーが効果的に使われており、背景写真もツートーンで統一されており、おしゃれにまとめられている点も魅力です。イラストもほっこりとしたテイストで、全体の色味とマッチしていて心地よい雰囲気です。」

UN–DIMENSION　vol.7

TAさんが紹介するのは、イラストと配色がつくる一貫した世界観

TA「バーチャルライバーグループに所属する2名がプロデュースしたバッグ&スモールグッズの販売サイトです。イラストと配色のバランスが非常に秀逸で、ビジュアル全体から一貫したエモーショナルな世界観が伝わってきます。線のタッチやモチーフの雰囲気に寄り添うように色が選ばれており、全体として心地よくまとまっています。イラストと色彩が互いを引き立て合いながら、感情や空気感を自然に伝えている点が印象的です。単におしゃれということだけではなく、ビジュアルそのものがブランドの雰囲気や伝えたい温度感まで自然に伝わってくる点も魅力的です。」

UM English Lab.

KOさんが紹介するのは、音楽の世界観を感じるビジュアル設計

KO「洋楽を活用した英語教育を促進するためのメディアサイトです。レコードやCDをイメージさせる丸いオブジェクトが印象的で、サイト全体に音楽らしい世界観が表現されています。これだけ多くの色を使っていても、不思議と統一感があり、どんな要素が入っても違和感がありません。Aboutのエリアの背景の滲んだカラーも、ライブのスポットライトのような雰囲気があり、音楽メディアらしさを引き立てています。記事一つ一つはカラフルなデザインですが、そのほかの文字要素やボタンにはあえてグレーを使わないことで、パキッとした印象になり、メリハリが生まれているように感じました。」

栄養モニタリングサービス Vivoo | 大塚製薬

YOさんが紹介するのは、カラフルさと見やすさを両立したデザイン

YO「大塚製薬から出ているアプリの『Vivoo』のサイトです。カラフルな配色を使用していますが、ベースを白やグレーでまとめているため、うるさくならず見やすいバランスにまとまっている点が魅力的です。イラストも今っぽく可愛らしいテイストで、ベタ塗りではなくグラデーションを使っているのもおしゃれで印象に残ります。ステップや流れごとに色を変えているため、内容が直感的に理解しやすいのも、配色の良さだと思いました。カラフルさを活かしながら、情報整理と視認性をきちんと両立している点も参考になります。」

今回ご紹介したサイトは、どれも配色だけでなく「何を伝えたいか」に合わせて色が意図をもって設計されていることが伝わってきました。デザイン性はもちろん、情報整理や世界観づくり、スマートフォン（SP）での見せ方など、学びになるポイントがたくさんありました。配色ひとつで印象や体験は大きく変わるからこそ、制作に携わる私たちも日々参考にしたいと感じます。