制作概要
| サイトURL | https://open-cafe.saki-portfolio-create.com |
|---|---|
| Basic認証 | ユーザ名：demo パスワード：demo |
| 使用スキル | HTML / CSS / JS / jQuery / WordPress |
| 制作範囲 | コーディング / WordPress構築 |
| 制作概要 | オンラインスクールの課題として制作した、架空のカフェサイトです。 |
デザインデータ：Figma
CSS設計：BEM
カスタム投稿
カスタムフィールド
お問い合わせフォーム
制作で意識したこと
CSS設計にはBEMを用い、保守性・再利用性を意識したコーディングを行いました。また、レスポンシブ対応を実施し、PC・タブレット・スマートフォンなど各デバイスで最適な表示になるよう調整しています。メディアクエリを用いてブレークポイントごとに余白やレイアウトを細かく調整し、デザインの再現性と閲覧時の快適さを意識しました。
工夫したこと
ファーストビューにはフェードアニメーションのスライダーを実装し、自然で落ち着いた印象になるよう工夫しました。また、メニュー・ショップ・ギフトページはカスタム投稿とACFで実装し、管理画面から簡単に更新できる構成にしています。さらに、最新の投稿を自動取得してファーストビュー内に表示し、新しい情報に気づきやすい設計にしています。