テーマ設計
WordPressのテーマ構成ルールに従い、functions.php・
header.php・footer.php・front-page.phpなどの
テンプレートファイルをすべて独自に作成。
責務ごとにファイルを分割する設計を採用し、
inc/フォルダにsetup・enqueue・woocommerce・
custom-fields・helpersの5ファイルに機能を整理。
保守性と可読性を意識したコード構成にしています。
WooCommerceカスタマイズ
WooCommerceのテンプレートを woocommerce/フォルダで
上書きする手法を採用。プラグインのアップデートに影響されない
安全なカスタマイズ設計を実現しています。
デフォルトのCSSを enqueue.phpで完全無効化し、
カート・チェックアウト・商品一覧・商品詳細のすべてを
オリジナルCSSで再構築しています。
CSS設計
CSS変数(カスタムプロパティ)でカラー・フォント・
余白・トランジションを一元管理。
base / components / pages / woocommerce の
4レイヤーにCSSファイルを分割し、
変更箇所が明確になる構造を意識しました。
コンテンツ管理設計
ACF(Advanced Custom Fields)を活用し、
制作者でなくても管理画面から更新できる
コンテンツ構造を設計。
トップページのキャッチコピー・画像・ブランドコンセプト文や
商品ページのストーリー・内容量・使い方などを
管理画面から直接編集できる仕組みを実装しています。
購入フロー
商品ページ → カート → チェックアウト → 注文完了 →
管理画面での注文確認まで、実際に動作する状態で実装。
決済方法・配送先を国内のみに限定するなど、
日本市場向けの設定も行っています。
レスポンシブ対応
メディアクエリによるPC・スマートフォン両対応を実装。
ヘッダーナビゲーションはスマートフォン表示時に
ハンバーガーメニューに切り替わる仕様です。
パフォーマンス
外部ライブラリへの依存を最小限に抑え、
スクロールアニメーションはIntersection Observerで
軽量実装。Google FontsはDisplay=swapで
レンダリングブロックを回避しています。
━━━━━━━━━━━━━━━━━━━━━━
■ ご依頼前にご準備いただくもの
━━━━━━━━━━━━━━━━━━━━━━
・サイトのイメージ・参考URL(あれば)
・掲載する商品の情報(商品名・価格・説明文・画像)
・ロゴデータ(お持ちの場合)
・ご希望のドメイン・サーバー(お持ちでない場合はご相談ください)
・お問い合わせ先メールアドレス
━━━━━━━━━━━━━━━━━━━━━━
■ 制作の進め方
━━━━━━━━━━━━━━━━━━━━━━
1. ヒアリング
ご要望・世界観・ターゲットをお聞きします。
2. デザイン確認
トップページのデザイン案をご確認いただきます。
3. 制作・実装
ご承認後、全ページの制作を進めます。
4. 修正対応
制作中の修正は2回まで無料で対応いたします。