こばクリニック
特徴的なファーストビューの写真は耳、鼻、喉のシェイプでホバーアクションも遊び心を感じるデザイン。グレーを基調とした清潔で明るい背景に、視認性の高い水色のアクセントカラーを要所に配し、医療機関に求められる「信頼」と「安心」を両立させた配色設計です。外観、内装のデザインを活かした写真は自然光を取り入れた明るいトーンで統一され、キャッチコピーにある「当たり前の幸せ」を守る温かな姿勢を視覚的に裏付けています。レイアウトは、診療科目や予約への導線をグリッドに沿って整然と配置し、アイコンを効果的に用いることで視線が迷うことなく目的の情報へ到達できるよう整理されています。随所にさりげないホバーアクションが設置され、ユーザーを飽きさせません。また、画像がスクロールに合わせてゆったりと流れるスクロールエフェクトとコンテンツのフェードインがシックで落ち着いた世界観を演出。グラスモーフィズムの追従メニューでどの画面位置からもスムーズにコンバージョンへアクセスできるよう、ユーザビリティを最優先した導線設計が徹底されています。
株式会社東組 採用サイト
サイト全体でキャッチーなイラストと写真の組み合わせで、フッターまで閲覧者を楽しませてくれるリクルートサイト。ファーストビューから段階的な情報提供構造で、ユーザーが知りたい情報にスムーズにアクセスできる導線になっています。配色はグレーを基調に、海洋土木のイメージのやや落ち着いたグリーンや同系色が使われ、親しみやすさもありながら落ち着いた企業イメージを演出しています。写真背景には 空や海の青が継続して見えるため、色温度が冷たすぎず安定感があります。タイポグラフィは、日本語中心でセクション見出しと本文に明確なウェイト差を付けています。特に見出しは可読性重視で枠で囲み背景色を付けて、情報の階層を分かりやすくしています。メニューバーは常に画面上部にあり、回遊動線が明確。余白は十分に確保されながら、写真とテキストをバランスを取りながら重なり、まとまりがあります。過度な動きはなく落ち着いたモーション設計で、読み進めやすくデザインされています。
villa itsutsu
長崎・新上五島の自然と静けさを主軸に据えた構成により、閲覧者に「非日常の上質な滞在体験」を直感的に伝えるデザインになっています。落ち着いたベージュオレンジをベースカラーに、文字色には落ち着いたダークトーンを用いることで、全体に余計な主張を抑えた上品で静かな印象を与えています。その中で、写真の色味が自然なアクセントとして機能し、空間の魅力を際立たせています。写真の明度や色温度も統一されており、視覚的に心地よいリズムが生まれています。タイポグラフィは、見出しが大きめで存在感を持たせつつ、本文は細めのウェイトで抑制的に設計されているため、落ち着きと読みやすさの両立が図られています。レイアウトは余白を広く取り、情報を詰め込みすぎない構成によって「ゆったりとした時間の流れ」を感じさせ、サイト全体でどこか海外風のサイトデザインに仕上がっています。写真とテキストの配置も整っており、視線が自然に下方向へ導かれるため、無理なく読み進められます。モーションはフェードインや軽微なスライドが中心で、動きは緩やかかつ一定で、上質感を支えています。導線は物語をたどるように構成されており、施設紹介から予約導線までが自然につながることで、「体験への期待感」を段階的に高める役割を果たしています。
あまの皮ふ科
クリニックの清潔感と安心感を伝える配色設計で、基調色として白～淡いグレーが全面に使われ、アクセントにロゴのやや彩度の高いピンク〜赤が配置されています。一般的に青や緑が多い医療系サイトの中で、暖色を用いることで「活力」や「血行の良さ」を想起させ、色味がスタイリッシュなピンクで美容皮膚科としての審美的な感度も表現。写真は明度が高く統一されており、院内やスタッフの人物写真も色温度が暖かく整っていることで全体の印象に一貫性があります。タイポグラフィは見出しと本文でウェイト差があり、情報の階層が視覚的に区別され、また見出しに欧文を併記することでモダンな印象をプラスし、情報の圧迫感を軽減。レイアウトは十分な余白を確保し、グリッドに沿った整列感で明確なゾーニングがなされており、迷いのない視線誘導を実現。モーションはスクロールでの軽微なフェードやスライドが用いられ、安定感があり速度は控えめにしあくまで情報の閲覧を妨げない「抑制の美学」で統一。医療機関としての信頼感を保ちつつ、美容サロンのような洗練された美意識と、肌に触れるような優しさを感じさせるデザイン。
FAVTOWNキャリア（ファボタウン キャリア）
白を基調とした清潔感のある背景に、ダークトーンの文字色、ロゴのアクセントカラーで地域の活気や前向きな未来を表現した配色が印象的。奇をてらわないニュートラルなキャンバスが、掲載企業のロゴや写真を主役として引き立てている。円形や角丸のあしらいが随所に見られ、行政・地域連携プロジェクト特有の堅苦しさを払拭し、親しみやすさを醸成している点も巧みで見やすいサイトに。視認性に優れたゴシック体の文字で、見出しには欧文を添えて視覚的なアクセントとリズムを付与。企業ロゴの羅列やイベント情報のカード配置において、整然とした美しさと検索性の高さを両立しています。アニメーションは、要素が静かに湧き上がるような滑らかなイージングを採用し、地域に根差したサービスの温かみを増幅させています。コンバージョンエリアは彩度を上げたアクセントカラーで視認性を最大化しつつ、コンテンツの文脈に沿って配置することで、押し付けがましさのない自然な誘導を実現しています。
溝田建築設計株式会社
全体を温かみのあるアイボリーと木材の風合いを感じさせるベージュで統一し、住宅の「心地よさ」をWeb全体で体現したナチュラルなサイト。レイアウトは、ランダムな写真の配置で世界観を印象付けるセクションが、端正で整ったレイアウトの堅実な全体のテーマをより際立たせます。豊富な施工写真を大きく配置しながらも、余白を大胆に取ることで、圧迫感を排したギャラリーのような空間を構築。タイポグラフィは、見出しの明朝体が柔らかさの中にも建築会社らしい信頼感と構造的な安定感を引き締めています。本文やスペック情報には可読性の高いゴシック体を組み合わせ、感性と理性のバランスを巧みに調整。落ち着きのあるレイアウトと細めの線や明朝体のスタイリッシュさのマッチングが信頼とスマートな印象を与えます。サイトイメージに影響せず、それでいてユーザーの操作を優しく肯定するクオリティの高いマイクロインタラクションが光るコーポレートサイトです。
にじのわクリニック
清潔感と青空、虹色のロゴが映えるサイトです。配色や余白の取り方から優しさを感じられる設計。ファーストビューの虹がかかったようなシェイプからロゴや世界観の統一を図っています。文字色には真っ黒ではなく深いネイビーを採用し、可読性を保ちつつも威圧感を排除。アクセントとしてロゴ由来の柔らかなパステルカラーや自然を感じさせるグリーンを配し、多世代を受け入れる包括的な姿勢を視覚化。タイポグラフィは、親しみやすさを重視したゴシック体を広めの字間・行間で組み、専門的な情報も咀嚼しやすいよう配慮。レイアウトは「輪」を想起させる曲線や円形のモチーフをセクションの境界や画像のトリミングに多用し、視線が滑らかに循環するよう誘導。モーション言語は、スクロールに呼応して要素がゆっくりとフェードインする「静かな動き」で統一され、閲覧者を急かさない配慮が徹底されています。しっかりと情報を掲載し信頼感を与えると同時に、静かに優しい世界観を作り上げています。
イチゼンブックス
白と青の清潔感のあるカラーで煩雑にならず、イラストを引き立たせます。まずファーストビューは「読むたび、読む旅」というコンセプトを、ページをめくるたび窓外の景色が変わるビジュアルで提示し、世界観を立ち上げます。過度な装飾色を抑え、メインの青が見出しとしてしっかり主張し、文章とのメリハリをつけて読み物としての集中を保っています。イラストを要所に配した柔らかなトーンが「本との出会い」と「旅」 のリンクを補強。出現モーションは短距離のフェード／スライドに統一し、見出し・画像・下線のイージングを反復させ、ページ全体のモーション言語が一貫。青のトーン、イラストのテイスト、余白感が抜かりなく計算されたデザイン。また本のシルエットでセクションの切り替えやアニメーション、イラストの “はずし” などに見られる遊び心がユーザーを楽しませます。
株式会社エムハンド
薄いグレーメインのたっぷりな余白のセクションとテキストデザイン鮮やかなセクションのコントラスト。コンセプトセクションではStickyでユーザーを立ち止まらせ背景動画、スクロールエフェクトはUXのポイントに。多種多様なクライアントのクリエイティブが持つ本来の色味を最大限に引き立て、制作会社としての柔軟性と品質の高さをアピールすると同時にサイトのオリジナリティを出しています。レイアウトは、グリッドシステムをベースにしながらも、視認性の高いゴシック体のテキストを、あえて要素をずらしたり重ねたりすることで動的な緊張感を生み出し、スクロールを飽きさせません。モーション言語は「静と動」のコントラストを意識し、ファーストビューのアニメーションから静的な情報セクションへの遷移を滑らかなフェードやパララックスで繋ぐことで、シームレスな閲覧体験を提供。ボタンのホバー時は控えめながらもユニークな動きを添えるなど、機能美を損なわない洗練された振る舞いで統一。
サントリーグローバルイノベーションセンター
白を基調に、研究事業のイメージに合う深いブルーをアクセントに用いた高コントラストのコーポレートサイト。ヘッダーに英日の言語切り替えを常設することで可読性と操作の軽さを両立しています。グローバルナビは下層への導線を迷わせず、グラスモーフィズムでデザイン性を持たせています。レイアウトは広めの余白とグリッドにより “見えない線” を揃えてバランスが調整され、大きめの明朝体の見出しが信頼と誠実な印象を与えます。モーションは必要最小限で、図版の切替と視線誘導を補助する程度に抑制。リンク色や下線の出現など微細な反応に留めたクオリティの高いホバーアクションで、可視フォーカスも確保。CTAは各所のテキストリンクとカード型導線で散らしつつ、セクション末に明確な到達点を用意し、研究ストーリーを一筆書きのように通読できるトップ体験を実現。
