猫専門ペットショップのWordPressサイト 静的コーディング・WordPress構築

https://www.kohei-test.site/cat

ユーザー名　cat

パスワード 　user@01cat

■構成（8ページ）
トップページ（お知らせは最新の記事を表示）　
└ ブログ - ブログ（カテゴリー一覧）- ブログ詳細　※デフォルト投稿タイプ
└店舗情報
└ 猫を探す- 猫を探す（カテゴリー一覧）- 猫詳細　※猫詳細情報はカスタムフィールド
└ お問い合わせ（フォーム）Contact Form 7
└ 送信完了

■制作環境について
・WordPress開発環境にはLocalを活用しました。
・CSS設計には、BEMを採用しました。他者でも見やすく、使い回しができ、更新しやすいコーディングを心がけました。
・Gulpを利用し、Sassのコンパイルや画像圧縮、ブラウザの自動リロードなど、タスクを自動化して効率的に作業を進めました。

■管理画面について
・猫ちゃんの記事を更新する際に、運営者様がわかりやすいように、デフォルトのラベルを変更しました。「投稿」 → 「ブログ」など

・ペットショップでは、頻繁に猫ちゃんの情報を追加・更新されると想定してAdvanced Custom Fieldsを利用して作成しました。画像部分はswiperのスライド要素ですが、画像他性別、生年月日、価格を変更するだけで猫ちゃんの情報が更新できるようにしました。

■お問い合わせフォームについて
・お問い合わせページでは、Contact Form 7を利用してお問い合わせフォームを設置しました。未入力項目がある場合には、エラーメッセージが表示されます。送信後、送信完了ページに遷移します。

■レスポンシブ対応について
・今回のデザインは、PC表示向けに1280px幅でデザインされていました。そこで、SP表示については、デザインの比率や重要な要素を考慮しつつ、レイアウトを調整してコーディングしました。
・リキッドデザインを採用し、中途半端な画面サイズでもレイアウトが崩れないように調整しました。画面幅が768px未満の場合は、スマートフォン向けの375pxのデザインを基準に、デザインを拡大して表示します。この際、フォントサイズが小さくなりすぎないよう、最小フォントサイズを12px以上に調整しました。

■品質チェックについて
・案件に応じた品質チェックリストを作成し、機能や表示について丁寧に確認しております。（以下はチェックリストの一部です）

■PC表示（トップ）

■SP表示（トップ）
シャッターのタイミングがMV画像の切り替わりのタイミングと重なって画像が下に表示されている用に見えますが、実際には重なっていません。