ターゲット
近隣に住む子どもから大人までのすべての住民
コンセプトとデザインの意図
デザインコンセプト
安心感・清潔感・高級感
デザインプロセスの効率化
初期段階ではCanvaのテンプレートを使用してスピーディーに大枠のビジュアルを作成しました。
その後、Figmaへ移行し、コンポーネントや各ページの詳細デザインを作り込みました。
デジタル庁デザインシステムへの準拠
デザインの統一性を持たせるため、「デジタル庁デザインシステム」を設計のベースとして取り入れました。
アクセシビリティを満たすカラーパレットの再構成
クリニックのコンセプトである「安心感・清潔感・高級感」を表現するキーカラーを選定した上で、Webアクセシビリティの基準を満たすコントラスト比（4.5:1以上）を意識しました。
背景色と文字色の組み合わせ、セマンティクスを考慮した一貫性のあるカラーパレットを再構成し、すべてのユーザーが情報を識別しやすい設計にしました。
可読性を最優先したタイポグラフィの設計
デジタル庁デザインシステムが推奨する、読みやすい行間・文字間の選定等をそのまま採用しました。
その上で、デザインシステムが提供する膨大なスタイルから、「メインコピー」「見出し1・2・3」「本文（太字）」「本文（標準）」など、本サイトに必要な最小限のスタイルだけを厳選して再定義しました。
AIを活用したコンテンツ（文言）の制作効率化
サイトの掲載テキストの作成にAIを活用しました。 単に文章を生成させるのではなく、クリニックの特徴を提示し、クリニックに合わせたキャッチコピーや診療案内文を出力、生成されたテキストを自身の目で調整して配置することで、コンテンツの質を落とすことなく、制作のスピードを上げました。
技術的な取り組みと実装内容
完全オリジナルテーマ開発
既存テーマの編集ではなく、phpのマークアップとCSSを用いた完全オリジナルテーマとして自作しました。 WordPressの仕組みを深く理解するために、カスタマイズにはプラグインを使わず、functions.phpへコードを記述して実装しました。
クリニック基本情報・診療時間の一元管理
サイトの運用者が、クリニックの基本情報（住所・電話番号など）や診療時間を管理画面から簡単に登録・編集できるよう、管理画面のカスタマイズを行いました。
管理画面から入力されたデータが、トップページやフッターなどサイト内のすべての該当箇所へ自動反映される仕組みを構築しています。
診療内容のカスタム投稿タイプの追加
サイトの運用者が、診療内容を管理画面から簡単に登録・編集できるよう、カスタム投稿タイプの追加を行いました。
サイドバーからアイキャッチ・抜粋文・スラッグ・アイコン画像などを登録・編集できるようにしました。
診療内容のスライダーにはSplide.jsを使用しました。
自動デプロイを取り入れた開発環境
バージョン管理：Git/GitHubを用いたソースコード管理を行いました。
本番環境（サーバー）：ColorfulBoxのタダサーバー
自動デプロイ（CI/CD）：GitHub Actionsを活用。mainブランチへのプッシュをトリガーにして、本番サーバーへ最新ファイルを自動転送する環境を構築しました。
制作を終えて（自己評価・学び）
functions.phpを用いた管理画面のカスタマイズや、Splide.jsで作成した診療案内のスライダーのカウンター表示は難易度が高かったため、AIを活用してコードを生成しました。
使用されている関数を調べ、コードの役割や構成を1行ずつ読み解きながら安全に動作するか検証を行いました。
現在はAIが生成したコードの構造を読み解く段階ですが、今後はドキュメントを参照しながら、自分自身でゼロからテーマのカスタマイズや機能拡張ができるよう、学習を継続していきます。