Project Detail
Portfolio Site
自身のポートフォリオサイトをデザイン・コーディングで制作。WordPressオリジナルテーマをゼロから構築し、カスタム投稿タイプで実績を管理できる設計にしました。
制作サイトを見る（新しいタブで開きます）
Project Info
Overview
制作会社への営業用ポートフォリオサイトをデザイン・コーディングから一貫して制作しました。
デザインはFigmaで設計し、BEM設計・SCSS管理によって保守性の高いコーディングを意識しました。WordPressオリジナルテーマとしてゼロから構築し、実績の追加・更新が管理画面から簡単に行えるよう設計しています。
パフォーマンス最適化にも取り組み、PageSpeed InsightsでパフォーマンススコアGreen（90点台）を達成しています。
Implementation Notes
実績を増やしても、
更新に迷わない。
実績を追加するたびに、ページを一から組み直す手間を減らす。
WordPressの実績投稿とACFで、入力する情報と表示の仕組みを分けました。
テンプレートが表示を整える
画像はMAMPの管理・表示画面の一部です。内容は撮影時点のものです。
01 / Make updates clear
実績情報は、
コードを触らずに更新。
- 入力
- 担当範囲・使用技術・実装機能はチェック項目で選択。説明文、制作時間、PC・スマホの画像も、それぞれ専用の欄で管理します。
- 表示
- 選択した値をテンプレートが読み込み、Role・Techなどの同じ書式で表示。実績ごとにHTMLを組み直す必要がありません。
更新する人は内容に集中し、
レイアウトはテーマ側でそろえる設計です。
02 / One entry, consistent output
一度入力した情報を、
一覧と詳細で使う。
同じ内容を複数のページに入力し直す手間を減らし、掲載先ごとの情報の食い違いを防ぎやすくしています。
- Works実績一覧
- 画像・説明文・担当範囲・使用技術を、同じ実績投稿から表示します。
- Project Detail実績詳細
- 共通の情報に加え、制作時間・概要・工夫したポイントを詳しく紹介します。
- Selected Worksトップページ
- 「トップ掲載」にチェックした実績のうち、最新3件を表示します。
制作後の更新と、次の改修まで。
投稿内容はWordPress、表示はPHPテンプレート、見た目はBEM・SCSSで管理。コードはGit / GitHubで履歴を残し、情報の更新と表示の改修を分けて進められる構成にしています。
Points
- BEM設計・SCSS管理による保守性の高いコーディング
- WordPressオリジナルテーマ構築
- カスタム投稿タイプ・ACFで実績を管理画面から更新可能
- フェードアニメーションなど細部のインタラクションを実装
- レスポンシブ対応でモバイルでも快適に閲覧可能
- WP Super Cache・フォント自己ホスト化によるパフォーマンス最適化
実績の追加・編集・削除がすべて管理画面から操作できるよう設計し、公開後の運用負荷を最小限に抑える構成としました。