作品スクリーンショット

駅近・夜間診療・土曜診療など、忙しいビジネスパーソンにも通いやすい「笹塚スマイル歯科クリニック」の架空コーポレートサイトを制作。 安心感と信頼感を重視し、清潔感のあるデザインとユーザーが迷わず予約できる導線設計を意識しました。

URL

笹塚スマイル歯科クリニック

担当

デザイン・コーディング

サイトの目的

駅直結・夜21時まで・土曜も診療。 忙しくても“通いやすい”を叶える、笹塚の歯科クリニックサイト本サイトは、「忙しくて なかなか歯医者に通えない」という声に応えるため、駅直結・夜21時まで診療・土曜診療と いう強みを持つ笹塚の歯科クリニックの魅力を、誰にでも伝わりやすく、安心感を持っても らえるように設計。 特にターゲットとなるのは、仕事や家事・育児に追われ、平日の日中に通院が難しい ビジネスパーソンや共働き世帯、近隣に住む地域住民の方々です。こうした層が 「あ、ここなら通えそうと自然に感じてもらえるように思ってもらうのが目標。

ターゲット

エリア特性(笹塚)・新宿駅から京王線で1駅という好アクセス • 単身世帯・共働き夫婦が多く、住宅と商業施設が混在 • 駅周辺にはオフィスビルもあり、昼間人口も一定数いる • 住民の年齢層:20代後半〜40代前半が中心
利用者に刺さる特徴 • 駅直結:雨でも通いやすい/仕事帰り・買い物ついでにもOK • 21時まで診療:フルタイム勤務でも通える • 土曜診察あり:平日通えない人の強い味方 • 予約が取りやすい:スケジュール調整が楽、急なトラブル対応可能
ターゲット(サイトの利用者) • 平日忙しい社会人や共働き世帯 • 子ども連れの親、近隣に住むシニア層 • 美容・審美に関心のある30〜50代女性 • 急な歯の痛みに対応してほしい人

デザインについて

本サイトは「信頼感」と「通いやすさ」をユーザーに伝えることを最優先にデザインしました。ファーストビューでは、「笹塚駅すぐ」「21時まで診療」「土曜も診療」といった医院の利便性を、キャッチコピーとアイコンで直感的に伝えることで、ひと目で医院の特徴が理解できるよう工夫しています。 全体の配色は、白をベースに水色をアクセントとして取り入れ、清潔感と安心感のある柔らかい印象に仕上げました。また、情報の流れを「診療時間 → 特徴 → 医院紹介 → 診療メニュー → お知らせ → 予約導線」と整理することで、初めて訪れるユーザーでも迷わず目的の情報にたどり着けるよう構成。 スマートフォンでの閲覧を意識し、ボタンのサイズや文字の可読性にも配慮したスマホファースト設計とし、視線誘導や余白バランスにも気を配った、シンプルで親しみやすいデザインを目指しました。

コーディングについて

HTML/CSSを中心に、構造と視認性に配慮しながら丁寧にコーディングしました。スクロールしても常に表示される固定ヘッダーにより、ナビゲーションの利便性を高めつつ、ページ内各所に目立つ「予約ボタン」を複数配置することで、いつでもアクションにつなげられる導線設計としています。 各セクションはセマンティックなタグでマークアップし、ユーザーにも検索エンジンにもわかりやすい構造を意識。スマートフォンではボタンがタップしやすいよう調整を行い、文字サイズや余白も最適化。レスポンシブ対応により、PC・タブレット・スマホすべてで快適に閲覧できる設計にしています。 デザインと連動し、コンテンツが自然な流れで閲覧できるよう、細かな視線誘導・余白調整・アクセシビリティにも配慮しました。