Project
みなみ歯科
クリニック
Overview（概要）
デイトラのWeb制作コース上級編の卒業制作として、歯科クリニックの架空サイトをWordPressのオリジナルテーマで実装しました。デザインカンプをもとに、静的実装からWordPress化まで一貫して担当し、見た目の再現だけでなく、更新や運用を見据えた構造づくりを意識して制作しました。
提出後の講評では、デザインの再現性とテーマ構造の整合性を評価いただき、50点満点の評価をいただきました。
ユーザー名：demo
パスワード：demo
Description（詳細）
- 概要
- 歯科クリニック架空サイトのWordPressオリジナルテーマ制作
- 課題
- デザインを再現しながら、更新・運用しやすいWordPressサイトとしてどう構築するか
- 目的
- デザインカンプを忠実に再現する
更新・運用を見据えたWordPressテーマとして実装する - ターゲット
- 来院を検討している患者
通院中の患者やその家族 - 担当範囲
- 実装
- 制作期間
-
静的実装 4週間WordPress化 / テンプレート構築 3週間
- 使用ツール
- Figma / VS Code / WordPress / Local
- 使用言語
- HTML / CSS（Sass） / JavaScript / PHP
Foundation（環境構築）
WordPress化を前提に、実装前にサイトマップからページ構成とテンプレートの対応関係を整理しました。固定ページ・投稿・カスタム投稿など、それぞれの情報をどの仕組みで管理するかを事前に整理し、サイト全体の構造を把握したうえで実装を進めました。
あわせて、ディレクトリ構成やSCSSの変数設計、ファイル分割のルールを整備しました。繰り返し使用するパーツはコンポーネントとして切り出し、修正や再利用がしやすい構成とすることで、その後のWordPress化も進めやすい実装環境を整えました。
Development（実装）
デザインカンプを忠実に再現しながら静的実装を行い、WordPressのオリジナルテーマへ展開しました。WordPressでは、標準投稿とカスタム投稿を用途に応じて使い分け、WP_Queryで一覧表示や表示件数を制御しました。タクソノミーやカスタムフィールドも組み合わせ、管理画面から情報を更新できる構造としています。
スタイルはBEMをベースに命名ルールを統一し、レスポンシブでは各デバイスで表示を確認しながら、デザインカンプの意図を損なわないよう余白やレイアウトを調整しました。
Learning（学び）
静的実装からWordPress化まで一連の工程を経験したことで、見た目を再現するだけでなく、その後の更新や運用まで考えて実装することの重要性を学びました。テンプレート構成や投稿タイプ、カスタムフィールドの役割を事前に整理することで、実装中の手戻りを減らし、保守しやすい構造につなげられることを実感しました。
また、Notionを活用して工程やタスクを可視化し、進捗を管理しながら制作を進めました。静的実装からWordPress化までを計画的に進めた経験から、実装そのものだけでなく、事前の設計や進行管理も制作の品質を支える重要な要素だと学びました。
