制作概要
| サイトURL | https://saki-portfolio-create.com |
|---|---|
| 使用スキル | HTML / CSS / JS / jQuery / WordPress |
| 制作範囲 | コーディング / WordPress構築 |
| 制作概要 | 私のポートフォリオサイトです。 デザインをご担当いただいたミツキさんのX→https://x.com/mitsuki_s01 |
デザインデータ：Figma
CSS設計：FLOCSS
カスタム投稿
カスタムフィールド
制作で意識したこと
CSS設計にはFLOCSSを用い、保守性・再利用性を意識したコーディングを行いました。また、レスポンシブ対応を実施し、PC・タブレット・スマートフォンなど各デバイスで最適な表示になるよう調整しています。メディアクエリを用いてブレークポイントごとに余白やレイアウトを細かく調整し、デザインの再現性と閲覧時の快適さを意識しました。
工夫したこと
制作実績は更新しやすいように、カスタム投稿とACFを用いて実装しました。また、サイト全体の構成をシンプルにし、下層ページを実績詳細ページのみにすることで、内容を一目で把握しやすい設計にしています。開発環境にはGulpを導入し、タスクを自動化することで制作効率を高めながら実装を行いました。アニメーションはやわらかい動きを意識し、サイト全体に親しみやすい印象を与えられるよう工夫しました。