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

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

クリエイティブアイランド中之島

クリーンなホワイトを基調に、大阪中之島を囲む川や水を連想させる鮮やかで澄んだブルーをメインカラーに据えた、爽やかで知的な配色です。背景に敷かれた淡いブルーのグラデーションが、水辺の心地よい空気感や透明感を視覚的に表現しています。 ファーストビューや随所にあしらわれた、クレヨンのような手書き風のラフなブルーの線画イラストが特徴的で、サイトのアクセントになっています。イベント情報のセクションでは整然としたカード型のグリッドレイアウトを採用して情報をわかりやすく整理する一方で、コンテンツを紹介するセクションでは写真を多角形にマスクし、テキストを自由なレイアウトで散りばめています。この「整頓」と「自由」のコントラストが、アートやカルチャーを発信する拠点にふさわしい遊び心とクリエイティビティを体現しています。CTAのホバー時には、アイコンやボタンが直感的に変化するといったインタラクションで、遊び心のあるビジュアルの中でも、ユーザーを迷わずイベント情報や詳細ページへと導く、ユーザビリティに優れた導線設計となっています。水辺のカルチャーと遊び心を自由に繋ぐ、ワクワクさせるアートマップ。

東京都私学財団

ページ全体に丸みを帯びたアイソメトリック調の柔らかなイラストを展開し、多様な学びの風景や人々のつながりを親しみやすく俯瞰的な視点で表現し、サイトのイメージを特色付けています。もう一つのサイトのユニークポイントは、ページ中盤でまるで書類を整理するようなUXの要素がスティッキーで重なるセクション設計。配色はクリーンなホワイトと淡いミントグリーンを背景に、知性と安心感を与える深いフォレストグリーンを主軸に、教育系のイメージにふさわしい誠実で穏やかなカラーリング。要所に散りばめられた鮮やかなイエローのアクセントが、画面全体に温かな活気と視覚的なリズムを与えています。タイポグラフィは視認性に優れたプレーンなゴシック体を採用し、的確なウェイト差とゆとりのある行間によって、豊富な情報を圧迫感なく丁寧に整理されています。レイアウトは堅牢なグリッドをベースにしながらも、背景に流れるような有機的な曲線やイラスト要素を重ねることで、学びの道筋を優しく描き出すような心地よい視線誘導を実現しています。直線、曲線、角丸のバランスが絶妙で可愛いくなりすぎず、真面目すぎない印象で、細部までこだわり抜かれています。

JAグループ愛知 公式採用サイト

クリーンなホワイトベージュと鮮やかな自然のグリーンをメインに、大地を思わせるブラウンや温かみのあるイエローをアクセントとして用いた、親しみやすく活気のある配色設計です。サイト全体を彩るフラットテイストの温かなイラストは、街と農地が共存する風景や農作業の様子を細やかに描き出し、地域に根ざす事業のスケール感を視覚的に表現しています。配置された写真は自然光を活かした高明度のトーンで統一され、職員の穏やかな表情をクリアに伝えています。タイポグラフィは丸みを帯びたゴシック体を主軸に据え、余白を持たせた字間設計がリラックスした印象を与えます。レイアウトは、厳格な直線グリッドではなく、丘や畑を連想させる波打つような有機的な曲線をセクションの境界線に用いることで、のどかな風景の中を歩むような心地よい視線誘導を実現しています。スクロールに伴うアニメーションは、カードやイラストがフェードインする挙動で統一され、柔らかな世界観を崩さない抑制的な一貫性を保っています。ホバー時にはズームインや色変化などでフォーカス状態を可視化し、十分な余白の中に色分けして配置されたボタン群が、ユーザーを自然に次のアクションへと導く手堅い導線設計となっています。

全ての猫を幸せに。│ 株式会社ねこぜん

肌馴染みの良いベージュとオレンジを基調とし、ブラウンや三毛猫カラーをアクセントに忍ばせた、ぽかぽかと陽だまりのように温かい配色設計。猫ちゃんの幸せを大事にするコンセプトを、色彩の温度感と柔らかさで見事に体現しています。柔らかな流体シェイプとノイズテクスチャが、猫ちゃんの写真と相性120点のファーストビューから始まり、セクションごとの強弱やイラストの配置によって視線が自然に誘導される構成です。要素を丸く切り抜き、アナログな手触り感を持たせることで、丸まった背中や肉球のような柔らかさを視覚的に表現。特にアクティビティセクションでは波形のレイヤーデザインと質感が最も活きています。また、合間から猫ちゃんの手が伸びてきたり、並んで座っていたりと、随所に散りばめられた愛らしいイラストが、ユーザーの心を優しく掴みます。加えて、ループするロゴの猫模様や、魚のアイコンで1・2・3が示される演出などの細部での工夫が、猫ちゃんの茶目っけを連想させるようです。掲載写真も毛並みや仕草の可愛らしさが伝わるものを厳選して配置。保護猫活動やドネーションといった真面目で大切なテーマを、徹底的に優しく、親しみやすいデザインで包み込むことで、ユーザーの共感と応援を自然な形で引き出す、愛情に満ちた導線設計となっています。

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