広島市安佐北区可部にある「土井クリニック」様は、地域で長年親しまれてきた内科クリニック。このたび新たに「消化器内科」を標榜するにあたり、既存の患者さまに加え、新しい患者層にもやさしくアプローチできるよう、Webサイトを全面リニューアルいたしました。
リニューアル目的
診療体制の拡充（消化器内科の追加）に伴い、地域住民に向けて情報を分かりやすく発信できるWebサイトが求められたタイミングでのリニューアル。 あわせて、ドクターの親しみやすい人柄や医院のやさしい雰囲気をWeb上でも丁寧に伝えることを目指しました。
制作のポイント
優しさや信頼感が伝わる“丸み”のあるデザイン
サイトの印象を決定づけるUI面では、全体のビジュアルに「円」や「カーブ」を多用。これは「優しさ」「柔らかさ」「親しみやすさ」を意図した設計で、来院前の不安を軽減する心理的効果も期待できます。
写真・ボタン・セクションの区切りなどにも、直線的ではなく丸みを帯びたマスクや装飾を採用。無意識のうちに安心感を演出する工夫が散りばめられています。
医院ロゴやカラーもその世界観に寄り添うよう、柔らかいトーンで統一しました。
消化器内科の新設が目立つ情報設計
診療科の拡張（消化器内科）の周知が主目的のひとつだったため、トップページのファーストビューやバナーに「消化器内科新設」を明記。 視認性の高い配置で自然に注目を集めます。
消化器疾患の症状や対応する検査内容など、専門性のある内容も専門ページで丁寧に解説。情報の信頼性・医師の技術力がしっかり伝わるようライティングに配慮しました。
内科との違いや相談の目安が分かりやすいよう、アイコンやQ&A形式での説明パーツも取り入れています。
幅広い世代に向けた「読み疲れしない」余白・レイアウト
クリニックの主なユーザー層は高齢者からファミリー層まで幅広いため、読みやすさを最重視したUI設計を徹底。
フォントサイズ、行間、余白バランスを調整し、文章が詰まりすぎず、目が滑らないよう配慮。
コンテンツの区切りには余白やイラスト的アイコンを活用し、パッと見て理解できる視認性の良さを担保しています。
モバイル・タブレットでの閲覧にも最適化しており、どの年代でも使いやすいインターフェースに仕上げました。
使用技術・CMS構成
- CMS：WordPress（完全オリジナルテーマ開発）
- フロント技術：HTML5 / CSS3 / JavaScript（Vanilla JS）
- レスポンシブ対応：モバイル・タブレット・PC 全対応
UI最適化
- 画像軽量化（WebP対応 / Lazy Load）
- スムーズなスクロール設計
- 円形レイアウトのカスタム実装
保守性
- 診療科目ごとに更新しやすいカスタム投稿
- お知らせページの自動日付更新
- 消化器内科の情報を今後増やせる拡張設計
想定ユーザー
- 地域住民（安佐北区可部・近郊エリア）
- 高齢者やその家族（かかりつけ医を求める層）
- 働く世代・ファミリー層（健康管理・消化器症状の早期発見を希望する層）
- 医療に対して不安がある方（やさしさ・安心感を重視する層）
制作を終えて
土井クリニック様のWebリニューアルでは、開院以来の信頼と新しい診療内容のバランスをとりながら、誰が見ても安心できるサイト設計を実現しました。
特に「やさしさ」「親しみ」「丁寧さ」といった目に見えにくい価値を、ビジュアルと情報設計の両面から形にすることを意識し、診療スタイルと強く連動するサイトになっています。
このサイトの運用実積
サイト制作後の状況はこちらからご覧いただけます。