URL：https://open-cafe.kurino096.com/
※Basic認証をかけています。
Basic認証ログイン：opencafe
Basic認証パスワード：opencafe
制作工程
- 使用言語：HTML/CSS/Sass/JavaScript/jQuery/PHP/WordPress
- 担当領域：XDデザインカンプからのコーディング、WordPress化を担当しています。
- 制作期間：約2か月で制作しています。（平日1～2時間、休日5～8時間）
こだわったポイント
- 命名規則はBEM設計、フォントサイズや余白はremを使用しました。
CSS記述量も多い為、SCSSフォルダ分割で「修正しやすい」コーディングを意識しました。 - 下層ページ「MENU」はカスタムタクソノミーを使用しました。
選択ジャンル毎に表示を切り替え、カレント表示で色を変えるコーディングを行いました。 - TOPページのメインビュー上に表示している「pickupニュース」はpickupタグが付いた投稿をサブループで処理し、表示させる工夫をしました。
- 下層ページ「MENU」や「SHOP」はカスタムフィールドを導入し、クライアントが簡単に更新できる設計にしました。
苦労したポイント
- TOPページ「NEWS」の投稿サイズの異なるデザインのWordPress化に苦戦しました。
WordPress化でデザインが崩れてしまうエラーがでましたが、サブループでループ処理を分けてあげることで、異なるデザインを実現できることを学びました。 - お問い合わせフォームの実装に苦戦しました。
プラグイン「Contact Form 7」を導入しましたが、デザインの崩れやフォームの挙動のエラー解決に時間がかかりました。
<form>タグの自動生成やWordPress特有のクラスが生成されることを知り、検証ツールでコード構造を確認しながらスタイルをあて実装できました。 - WordPressサイト完成までの工数の見積もりの難しさを実感しました。
静的コーディング、WordPress化、ローカル環境からテスト・本番環境への移行など
サイト完成までの工数が多く、当初予定していた倍の時間がかかってしまいました。
「WordPress化を意識したコーディング」、「制作スピード」が自分自身に足りない課題であると痛感しました。