ハイブリッドホーム

住まいを豊かにするリフォーム企業のサイトですが、一般的な建築業の堅実でお堅いイメージを根底から覆す、一冊の絵本のようにワクワクするデザインに仕上げられています。最大の魅力は、サイト全体を一軒の大きな家に見立てた大胆でユニークな構成。画面をスクロールするごとに別のフロアへと視点が移り、ダイニングで会議する様子や、お風呂でのんびりする風景など、それぞれの部屋で展開される温かな日常のイラストが、見る者の心を優しく惹きつけます。背景には爽やかなライトブルーの空と白い雲が広がり、建物の骨組みとなる煉瓦のテラコッタブラウンが画面全体にどっしりとした安心感と温もりを付与。そこにアクセントとなるグリーンをボタンやロゴに配することで、空間全体をクリーンに引き締めています。専門的で難しくなりがちな施工事例やスタッフ紹介といったコンテンツも、この家の中のポスターや窓の景色のように違和感なくシームレスに配置。リフォームという工事の物理的なハードルを取り払い、その先にある理想の暮らしのストーリーを疑似体験させてくれる、世界観が光るデザイン設計。

考動アカデミー

エネルギーに満ちた鮮やかなオレンジをメインカラーに据え、「考えて、動く。」というコンセプトを体現した、企業向け研修・人材育成、組織づくりの取り組みのサイトです。企業向けの施策でありながら、堅苦しさを全く感じさせないポップで親しみやすいトーンが画面全体を包み込んでいます。まずファーストビューで目を惹くのは、親近感のあるポップな線画イラスト。オレンジ色の差し色がサイト全体の配色とリンクし、学ぶことの楽しさや前向きな活力を視覚的に伝えています。動きのあるレイアウトと実写の組み合わせが特徴。背景に散りばめられた手描き風の波線や、カタカタと動くイラスト、取り組みを紹介するカードUIがスクロールで積み重なるなど、思考から行動へと移る「考動」の活力をサイト全体で表しているようです。そこに、グリッドをメイン背景に実際の研修風景を収めた高品質な写真を合わせることで、ポップな世界観の中に説得力とリアリティを付与しています。そして、オレンジとライムグリーンという元気なカラーの組み合わせが、画面全体にポップな活気と親しみやすさを生み出しています。人材育成の場でありながらも決して堅苦しくならず、これから学ぶ人たちの背中を明るくポジティブに押してくれるような、温かみに溢れたデザイン設計です。

Yoom

AIエージェントや業務自動化という専門性の高いサービスを、親しみやすく直感的に伝えるデザインです。ファーストビューでは、カラフルでモフモフとした質感の3Dキャラクターたちを用いることで、「AI社員」という概念を難しいテクノロジーではなく身近な存在として表現し、初見ユーザーの心理的なハードルを下げています。配色はホワイトをベースにしながら、パープルやイエロー、グリーン、ブルー、ピンクなど鮮やかなアクセントカラーをセクションごとに切り替えることで、単調さを感じさせず、テンポよく読み進められる構成になっています。一方で、機能紹介や連携アプリ、導入実績、セキュリティなどの情報は白を基調としたカードUIで整理されており、ポップな世界観の中でも情報の視認性と信頼性を損なっていません。タイポグラフィは太めで丸みのあるフォントを中心に構成され、絵文字やイラストと組み合わせることで親近感を演出。さらに、豊富な連携サービス数や導入実績、テンプレート紹介などを段階的に配置することで、楽しさだけでなく「実際に業務で使えるツールである」という安心感も醸成しています。複雑な業務自動化を、まるで新しいアプリやゲームを触るような感覚で体験できる期待感を生み出している優れたサービスサイトです。

奈良のウェディング前撮りならSHY(シャイ)

雑誌の切り抜きやスクラップブックを彷彿とさせる、手作り感に溢れたコラージュレイアウトのサービスサイトです。スタンプやペンキで描いたようなかすれのある太字フォント、マスキングテープのようなあしらい、そして被写体をステッカーのように切り抜いて散りばめる演出が、遊び心とエモーショナルな温かみを両立させています。特別な日も何気ない瞬間も、全ての思い出をふたりで手作りするようなハンドメイド感とマッチし、従来の純白で厳かなウェディングのサイトの定石をあえて外し、日常の延長線上にあるカジュアルで自由な空気感を表現しています。配色は、淡くくすんだブルーやイエロー、パープルといったペールトーンの背景をセクションごとに切り替えながら、ビビッドなピンクのタイポグラフィで強烈なアクセントを加え、ポップでストリート感があるカラーリング。ページ全体に、自然体で笑い合うふたりの魅力溢れる写真が掲載され、ブランドコンセプトを最大限に引き出し、ページレイアウトと合わせて写真の中でもこの「ふたりらしく “好き” を残す」オリジナリティを体現しているようです。一見すると写真や要素がランダムに散らばっているように見えますが、セクションごとに背景色を明確に分け、テキストは中央揃えや左揃えでしっかりとブロック化されています。世界観の崩しと情報伝達の整理のバランスを絶妙に保つことで、ウェディングの枠を超えまるでファッション誌をめくるような、ポップで自由な没入感を与えてくれるサービスサイトです。

とよたフィルムコミッション

無機質でクリーンなライトグレーを背景に、極太でソリッドなブラックのタイポグラフィと、鮮烈なシアンを掛け合わせた、スタイリッシュでモダンな配色設計です。公的団体のサイトでありながら、お堅い行政的なイメージを完全に払拭し、ターゲットのクリエイターに真っ直ぐ響く、洗練されたクリエイティブな空間を作り上げています。大小さまざまなサイズのロケーション写真を、あえて規則性を崩してリズミカルに散りばめたレイアウトが特徴的。このコラージュのような見せ方が、まるで映画のフィルムのコマや、ロケハン中に見つけた風景の断片を連想させ、豊田市が持つ多様で魅力的な撮影スポットを視覚的に語っています。また、画面を斜めに横切るシアンの図形や、黒帯に白抜きされたキャッチコピーが、サイト全体に心地よい緊張感と映画のポスターのようなドラマチックさを与えています。中盤以降のロケーションの詳細や支援実績といった具体的な情報セクションでは、一転してグリッドに沿った端正なレイアウトを採用。画面中央に常にフォーカスマークがありカメラのファインダーを覗いているような遊び心を感じさせます。映像を通して世界とつながるという情緒的なブランドメッセージと、撮影地としての機能性・利便性を伝える情報設計が高度に融合した、優れたデザインです。

株式会社KEEPs | 雨漏りの窓口キープス

柔らかなアイボリーやペールピンク、イエローといったパステル調の暖色を背景に敷き詰め、テキストには黒ではなく温かみのあるブラウンを採用した、極めて優しく親しみやすい配色。雨漏りや外壁塗装という、困っている時に助けてくれる安心感を全ターノカラーで表現しています。構成の最大の特徴は、ファーストビューからサイト全体に広がる、街と人々を描いた絵本のようなイラストレーションと、丘のように緩やかな曲線で区切られたセクションレイアウトです。家を単なる物件としてではなく、人々の温かい生活の場として温かく描くことで、サービスの大切なコンセプトである「安心を暮らしに。」というメッセージを情緒的に伝えています。また、料金プランや管理のステップといった複雑になりがちな情報も、角を丸めたカードUIやアイコンを用いてスッキリと整理されており、視覚的なノイズが全くありません。スクロールに合わせて背景の丘が連なっていくような構成は、ユーザーに安心感を与えながら、自然とサービス内容の理解からお問い合わせへと導きます。堅苦しさを完全に排除し、徹底的にユーザー目線で優しさと使いやすさに寄り添った、サービスサイトのお手本のような導線設計です。

【公式】ツクリオ(Tsuklio) | 手料理サブスク

角を丸めた豊富な写真レイアウトと、フラットで可愛らしい食材のイラストレーションの組み合わせが特徴的なサイトです。単なる美味しそうな料理の写真だけでなく、家族が笑顔で食卓を囲むシーンや、温かな光が差し込むキッチンの風景を多用することで、このサービスを利用することで得られるゆとりある時間や幸せな日常といったベネフィットを情緒的に訴求。また、見出し回りなどに散りばめられた野菜や調理器具のシルエットイラストが、手作りのような温もりと楽しさを演出しています。カラーリングは清潔感のある柔らかなオフホワイトをベースに、食欲を刺激し、家庭的な温もりを感じさせるオレンジをメインカラーに据えた、非常に親しみやすくアットホームな配色。アクセントとして新鮮な野菜を連想させるグリーンを配置することで、食品を扱うサービスとしての安心感とフレッシュさを表現しています。配色とイラスト、写真の色彩がこのサイトの清潔感と温かさのイメージを決定づけています。スクロールに呼応するモーションやレイアウトは奇をてらわず、見出しがポンと浮き上がり目を引き、要素がじわっとフェードインするバランスの取れたモーション。オレンジの背景色で視覚的な区切りを明確に行うことで、豊富なコンテンツ量を感じさせず、さらにホバーアクションなどの細かなこだわりを細部まで感じさせ、心地よいリズムと高いユーザビリティを実現した導線設計となっています。

日経電子版 for Education|公式サイト

大胆なカラーブロックと角丸のカードが、堅いメディアのイメージを親しみへ書き換えるカラフルなサイト。背景はクリーンなホワイトで、イエロー、ライトブルー、ライトグリーンといった明るいビタミンカラーをセクションごとに大胆に切り替え、ポップで親しみやすいマルチカラーの配色。「日本経済新聞」という伝統的で堅実なメディアのイメージを良い意味で裏切り、学生や教育現場に向けたフレッシュな活力とワクワク感を視覚的にアピールしています。角を大きく丸めた巨大なカラーブロックと、その中で展開されるカードUIの組み合わせがサイトの顔になっています。事例や教材紹介など、情報量が多くなりがちなコンテンツをカルーセルのカードUIに収めることで、縦方向のスクロール量を抑え、ユーザーに圧迫感を与えないスマートな情報設計を実現しています。また、見出しには知性を感じさせるエレガントなセリフ体を使いつつ、ファーストビューにはコラージュのようなあしらいをミックスさせることで、アカデミックな品格と親近感を両立させています。カードやCTAのホバー時には丸い矢印ボタンが直感的に反応するなど、誰にでも使いやすいUIが徹底されています。豊富な教育コンテンツを楽しく、かつ論理的に整理して届ける、メディア企業ならではの質の高いサイトとなっています。

株式会社バイオフィリア(Biophilia inc.)

生命力や愛情、温もりを感じさせる鮮やかなオレンジがかった赤をメインカラーに、清潔感のあるクリーンなホワイトを基調色に極めてエネルギッシュで愛情深い配色設計です。テキストには完全な黒ではなく、柔らかなダークブラウンを採用することで、視覚的なコントラストを和らげ、全体のトーンに優しい統一感を持たせています。構成の最大の特徴は、角を丸めた柔らかなデザイン言語と、動物たちと人間が触れ合う大きな写真の配置です。背景の赤に有機的な曲線を組み合わせたレイアウトが、命の温かさや企業理念である「しあわせ」を直感的に伝えます。また、丸みを帯びたポップなタイポグラフィやアイコンが、親しみやすさをさらに後押ししています。ホバー時には、視認性の高いカプセル型の赤いボタンがポップに変化し、ユーザーの操作を心地よくアシストします。直感的なレイアウトと温かなビジュアルコミュニケーションが融合し、動物への深い愛情という企業のコアバリューを一切のノイズなくユーザーの心へ届ける、極めて純度の高い導線設計となっています。

shica shica candle

温もりを感じさせる柔らかなアイボリーを基調に、テキストには優しく空間を引き締めるチャコールグレーを配した、心安らぐナチュラルな配色設計です。サイト自体に強い色を持たせず、キャンドルの灯りや自然光を捉えた写真の色彩をそのまま活かすことで、ハンドメイドならではの温もりと穏やかな空気感を視覚的に伝えています。キャンドルや炎の揺らぎを連想させる楕円形の柔らかなシェイプと、手描きの細い点線やイラストを空間に散りばめたレイアウト。画像を規則的なグリッドに並べるのではなく、あえてアシンメトリーに配置し、たっぷりと余白を取ることで、ゆったりとした心地よい時間の流れを表現しています。見出しにはエレガントなセリフ体と本文は柔らかく親しみやすい明朝体で上品でありながらも日常にそっと寄り添う、アトリエの優しい世界観を見事に体現しています。スクロールに呼応するモーションは、写真やテキストがふんわりと優しく浮かび上がるフェードインで統一され、テキストもふわっと出現するアニメーションで、キャンドルに火が灯るような静かで落ち着いたリズムを生み出しています。柔らかな楕円と手書きの線が、キャンドルのような温もりを画面に灯す穏やかなアトリエのサイトです。

Making Design Make Sense.
デザインを、感覚から理解へ。
© Design Decode. 901