leaf design lab

概要

架空のWeb制作会社「Leaf Design Lab」のコーポレートサイトとして制作したWordPressテーマです。
デザインはGoogle AI Studioを活用し、コーディングおよびWordPress化はすべて自ら行いました。

実務で求められるテーマ開発の流れを想定し、投稿管理・カスタム投稿・カスタムフィールド・お問い合わせ機能など、運用を前提とした構成で実装しています。

本作品は、WordPressテーマ開発の基礎から実践的な実装までを体系的に理解することを目的として制作しました。
静的コーディングだけでなく、CMSとしての運用を見据えた設計力を身につけることを重視しています。

特に、管理画面からコンテンツを更新できる構造を意識し、クライアントワークを想定した設計を目指しました。

本テーマでは、更新頻度の高い「お知らせ」と、制作実績を想定した「制作物」を分けて管理できる構成としました。
投稿内容に応じて適切なデータ構造を設計することで、運用時の分かりやすさと拡張性を確保しています。

各投稿で必要となる情報はACFを用いてカスタムフィールド化し、入力内容を構造化しました。
これにより、表示の一貫性を保ちながら柔軟なコンテンツ管理が可能となるよう設計しています。

また、再利用性の高いパーツはtemplate-partsとして分割し、テーマ全体の保守性と可読性を高めています。

カスタム投稿による情報整理

CPT UIを使用して「制作物」用のカスタム投稿タイプを作成し、通常の投稿（お知らせ）と役割を分離しました。コンテンツの種類ごとに管理方法を分けることで、運用時の視認性と拡張性を高めています。
ACFによる入力項目の構造化

投稿ごとに必要な情報をACFでカスタムフィールド化することで、入力の自由度を保ちつつ、表示の一貫性を担保しました。実務を想定し、編集者が迷わず入力できる構成を意識しています。
マルチステップフォームの導入

Contact Form 7をベースに、入力画面・確認画面・送信完了画面の3段階構成を実装しました。送信前に内容を確認できるフローとすることで、誤送信を防ぐ設計としています。
template-partsによるコンポーネント化

繰り返し使用するパーツはtemplate-partsとして分割し、再利用性と保守性を向上させました。構造を整理することで、将来的な改修や機能追加にも対応しやすい設計としています。
運用を前提としたテーマ設計

単なる表示用サイトではなく、実際に運用されることを想定し、管理画面からの更新性や拡張性を重視して設計しました。コンテンツの追加や変更が容易に行える構成を意識しています。

WordPressを採用することで、クライアント自身がコンテンツを更新できるCMSとしての利便性を実現しました。実務でも広く使われているため、テーマ開発の理解を深める目的とも合致しています。

また、CPT UIやACFなどのプラグインを活用することで、開発効率を保ちながら柔軟なデータ設計を可能にしました。

本制作ではGoogle AI Studioを活用し、サイトデザインのベースとなるアイデア生成を行いました。AIによって方向性を可視化した上で、自身の意図に合わせてブラッシュアップを重ねています。

デザインにおいては、配色やレイアウトの初期案を参考にしつつ、そのまま使用するのではなく、情報設計や視認性を考慮しながら調整を行いました。最終的なアウトプットは自分の判断で再構成しています。

また、WordPressの実装においてもAIを活用し、不明点の解消や実装方針の整理を行いました。コードをそのまま利用するのではなく、動作の仕組みを理解することを重視しながら制作を進めています。

AIを「補助ツール」として活用しつつ、最終的な設計や判断は自ら行うことで、理解と再現性のある開発を意識しました。

本制作を通して、静的サイトとCMSサイトでは設計の考え方が大きく異なることを実感しました。特に「誰が・どのように更新するか」を前提にした設計の重要性を学びました。

また、カスタム投稿やカスタムフィールドを用いて情報を構造化することで、表示の自由度と管理のしやすさを両立できることを理解しました。単に見た目を作るだけでなく、データ設計から考える必要があると感じています。

さらに、template-partsによる分割やコードの整理を通して、保守性の高いテーマ設計の重要性を学びました。今後はより実務を意識した拡張性のある構成を意識していきたいと考えています。