焼津市の矯正専門歯科【やいづ原崎矯正歯科】

基調色は清潔感のあるオフホワイトと落ち着いたネイビーブルーで構成され、明快なコントラストの中にも医療機関らしい信頼感と温かみを感じさせる配色です。写真は明度を高く保ち、ニュートラルから微かに暖色寄りの色温度で統一することで、院内の清潔で穏やかな空気感を伝えています。レイアウトは堅実なグリッドシステムをベースにしながらも、セクションの境界や所々のアクセントに繊細な線で波打つような有機的な曲線を用いることで、まるで静かな水面を眺めるような心地よい視線誘導を実現しています。タイポグラフィは視認性の高いゴシック体を軸とし、見出しにはエレガントな欧文フォントを併記して視覚的なアクセントを付与。本文との明確なウェイト差と十分な行間・字間設計により、高い可読性を確保しています。スクロールに呼応するモーションは、各要素が短い移動距離を下からゆっくりとしたイージングでフェードインする挙動に統一されており、サイト全体の柔らかなトーンを損なわない一貫性を保持しています。ホバー時のマイクロインタラクションは、CTAボタンの色変化や微小なズームなど、抑制の効いた変化でフォーカス状態を明確に可視化。また、診察時間やアクセスといった閲覧者が知りたい情報がすぐアクセスできるように常時サイドに追従する設計で次のアクションへ安心して導く堅実な導線設計となっています。

武蔵野美術大学 市ヶ谷キャンパス

大学キャンパスの紹介サイトとしてファーストビューから施設の魅力的なグラフィックが印象的。サイトカラーはテクスチャーのある薄いグレーと白背景の境界線を組み合わせ、テキストやグラフィックにブラックを用いて明快な情報の切り分けを特徴的に。写真は彩度と明度を抑え、色温度をニュートラルに整えることで、建築や学生の活動を客観的かつ静謐に捉えるトーンに統一。見出しには洗練されたサンセリフ体、本文に可読性の高いゴシック体を採用。英語と日本語を軽めのウェイトで並記し、字間を詰めることで、情報の密度とスピード感を両立。たっぷりとした余白を活かしたレイアウトは、厳格なグリッドシステムに基づく見えない線で各要素が整列されており、まるで建築物のような堅牢な骨格を形成しています。スクロールに伴うモーションは、要素が下から上へ緩やかなイージングを伴ってフェードインする挙動で統一され、画面全体にリズムを生んでいます。マイクロインタラクションは、リンク要素へのホバー時に背景色が変化し、アイコンの移動等に限定され、操作に対するフィードバックが即座に返ります。

クリニック杜の里|金沢市の消化器内科・内視鏡内科

クリニックの特徴的な建物のフォルムをポイントに、柔らかなクリーム色をベースに、ブランドカラーであるエメラルドグリーンをアクセントに効かせたサイト。優しさと安心感を両立させた配色設計で医療機関に求められる清潔感を保ちつつ、緊張を和らげるような柔らかなトーンで統一されています。木々や鳥などのイラストを水彩風のタッチで全体に散りばめている点が特徴的。これにより、「クリニック杜の里」という名の通り、まるで森の中にいるような安らぎの空間をウェブ上で表現しています。タイポグラフィは、親しみやすいゴシック体を主体にしつつ、見出しと本文にジャンプ率をつけてメリハリをつけています。レイアウトは、緩やかな曲線や斜めのラインを効果的に使い、スクロールするごとに物語が進んでいくような、流れるような視線誘導を実現しています。閲覧者の心地よさを最優先にし、抑制の効いたモーション言語は、イラストがふわふわと揺れたり、じわっと現れるアニメーションが、静的なページに穏やかな生命感を与えています。CTAボタンはグリーンのグラデーションで視認性を高めつつ、角を丸くすることで全体の柔らかな雰囲気に馴染ませ、クリックへの心理的障壁を下げる丁寧な導線設計となっています。

ボンジュール株式会社

全体を包み込む柔らかなサンドベージュのニュアンスカラーを基調とし、フランスの優雅さと日本の繊細さを融合させた、上質でオーガニックな配色の海外風デザイン。写真、動画はパリの街並みや商品を情緒的なトーンで切り取り、背景色と馴染む低い彩度で統一することで、ブランドの世界観を映画のワンシーンのように演出しています。グリッドに縛られない自由な配置に見せつつも、たっぷりの余白によって視線が自然と中央から下流へと導かれるよう計算されており、スクロールするたびに心地よいリズムが生まれます。タイポグラフィは、見出しに格調高いセリフ体の欧文を大きく配置して視覚的なアンカーとしつつ、日本語テキストは控えめに添えることで、デザインのノイズを極限まで排除しています。抑制の効いた演出のモーションは「静寂」をテーマに、品格を損なわないよう配慮されています。CTAやリンクは文字主体のミニマルな装飾で統一され、ホバー時にアイコンのエフェクトやわずかに色が薄くなる等の微細な変化が、洗練された大人の閲覧体験を提供しています。

しま歯科院

全体を包み込む柔らかなベージュとホワイトの基調色に、大胆な扇形シェイプを取り入れた心地よい印象のサイト。歯科医院の怖さを払拭する安らぎの配色と、暖色系のライティングで統一された写真。清潔感と温かみを同時に表現しています。構成として、ファーストビュー直下に診療時間を配置し、閲覧者が知りたい情報を明確に提示する安心設計。 モーションは、フェードインやゆったりと動く無限ループのテキストや画像が、患者の緊張を解きほぐすような穏やかな時間を表現。CTAボタンは落ち着いたブラウンで統一され、ホバー時にふわりと透過する控えめなマイクロインタラクションが、品格を損なわずスムーズな予約行動へ誘導する洗練された導線となっています。角を大きく丸めた画像や背景の有機的な曲線シェイプを多用し、グリッドを緩やかに崩すことで、空間に広がりと優しさを付与しています。

yuppa(ゆっぱ)

湯葉を使ったヘルシーファストフードのシズル感と、ブランドの遊び心を体現したポップでモダンなサイト。湯葉の白やベージュを基調にしつつ、食材由来の鮮やかなオレンジやグリーン、イエローをアクセントに散りばめ、食欲をそそる彩度の高い写真素材が高コントラストで配置されています。タイポグラフィは、太めのサンセリフ体で力強いインパクトを与えながら、和文には可読性の高いゴシック体を採用し、カジュアルさと信頼感を両立。レイアウトは、雑誌のように写真とテキストを大胆に重ね合わせたり、斜めのラインや不規則なグリッドを用いることで、ファストフードらしい軽快なリズムと躍動感を生み出しています。角丸や太めの線の装飾がカジュアルな印象を与えて、具材が飛び出すような「賑やかさ」も演出。ホバー時にはボタンの色が反転したり、アイコンが回転するなどのマイクロインタラクションが仕込まれ、ユーザーの操作に心地よいフィードバックを返しつつ、店舗や商品ページへの導線をスムーズに繋ぐ設計となっています。

こばクリニック

特徴的なファーストビューの写真は耳、鼻、喉のシェイプでホバーアクションも遊び心を感じるデザイン。グレーを基調とした清潔で明るい背景に、視認性の高い水色のアクセントカラーを要所に配し、医療機関に求められる「信頼」と「安心」を両立させた配色設計です。外観、内装のデザインを活かした写真は自然光を取り入れた明るいトーンで統一され、キャッチコピーにある「当たり前の幸せ」を守る温かな姿勢を視覚的に裏付けています。レイアウトは、診療科目や予約への導線をグリッドに沿って整然と配置し、アイコンを効果的に用いることで視線が迷うことなく目的の情報へ到達できるよう整理されています。随所にさりげないホバーアクションが設置され、ユーザーを飽きさせません。また、画像がスクロールに合わせてゆったりと流れるスクロールエフェクトとコンテンツのフェードインがシックで落ち着いた世界観を演出。グラスモーフィズムの追従メニューでどの画面位置からもスムーズにコンバージョンへアクセスできるよう、ユーザビリティを最優先した導線設計が徹底されています。

villa itsutsu

長崎・新上五島の自然と静けさを主軸に据えた構成により、閲覧者に「非日常の上質な滞在体験」を直感的に伝えるデザインになっています。落ち着いたベージュオレンジをベースカラーに、文字色には落ち着いたダークトーンを用いることで、全体に余計な主張を抑えた上品で静かな印象を与えています。その中で、写真の色味が自然なアクセントとして機能し、空間の魅力を際立たせています。写真の明度や色温度も統一されており、視覚的に心地よいリズムが生まれています。タイポグラフィは、見出しが大きめで存在感を持たせつつ、本文は細めのウェイトで抑制的に設計されているため、落ち着きと読みやすさの両立が図られています。レイアウトは余白を広く取り、情報を詰め込みすぎない構成によって「ゆったりとした時間の流れ」を感じさせ、サイト全体でどこか海外風のサイトデザインに仕上がっています。写真とテキストの配置も整っており、視線が自然に下方向へ導かれるため、無理なく読み進められます。モーションはフェードインや軽微なスライドが中心で、動きは緩やかかつ一定で、上質感を支えています。導線は物語をたどるように構成されており、施設紹介から予約導線までが自然につながることで、「体験への期待感」を段階的に高める役割を果たしています。

あまの皮ふ科

クリニックの清潔感と安心感を伝える配色設計で、基調色として白~淡いグレーが全面に使われ、アクセントにロゴのやや彩度の高いピンク〜赤が配置されています。一般的に青や緑が多い医療系サイトの中で、暖色を用いることで「活力」や「血行の良さ」を想起させ、色味がスタイリッシュなピンクで美容皮膚科としての審美的な感度も表現。写真は明度が高く統一されており、院内やスタッフの人物写真も色温度が暖かく整っていることで全体の印象に一貫性があります。タイポグラフィは見出しと本文でウェイト差があり、情報の階層が視覚的に区別され、また見出しに欧文を併記することでモダンな印象をプラスし、情報の圧迫感を軽減。レイアウトは十分な余白を確保し、グリッドに沿った整列感で明確なゾーニングがなされており、迷いのない視線誘導を実現。モーションはスクロールでの軽微なフェードやスライドが用いられ、安定感があり速度は控えめにしあくまで情報の閲覧を妨げない「抑制の美学」で統一。医療機関としての信頼感を保ちつつ、美容サロンのような洗練された美意識と、肌に触れるような優しさを感じさせるデザイン。

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