制作期間

約２週間

使用ツール

Figma / HTML / CSS / VS Code

担当箇所

デザイン・コーディング(全て個人で制作)

制作背景・目的

初めてデザインからコーディングまで全て一人で制作したWebサイトです。

犬、猫向けの無添加ペットフードサイトをテーマに、安心・安全なブランドイメージを大切にしながら、商品の魅力が伝わるデザインを目指しました。 (ターゲットは犬、猫を家族の一員として考える20代～40代の女性で、オンラインショップへの誘導を目的としています)

制作プロセス

1. 企画・コンセプト設計
   • ターゲットユーザー(20代～40代の女性)とサイトの目的を設定
   • サイトマップを作成し、必要なページ構成を検討
   • 伝えたい情報の優先順位を整理
2. ワイヤーフレーム作成
   • 紙でラフスケッチを描き、レイアウトの大枠を検討
   • Figmaで簡易的なワイヤーフレームを作成
   • ユーザーの視線の流れと情報の配置を意識
3. デザインカンプ制作
   • Figmaで配色・フォント・余白を細かく調整
   • ユーザーの見やすさを第一に考えたレイアウト
4. コーディング
   • HTML/CSSでデザインカンプを実装
   • ブラウザでの表示確認を繰り返し実施
   • レスポンシブ対応を実装し、スマートフォンでも見やすく調整
5. 課題と改善の試行錯誤
   • デザインカンプ通りに実装することの難しさを実感
   • 特に余白の調整や画像の配置に苦戦
   • ブラウザで確認しながら、実装可能な範囲で微調整

直面した課題と対応

初めての個人制作だったため、デザインカンプ通りに実装することの難しさを痛感しました。 特に、余白の微調整や画像の配置で思い通りにならない場面が多く、 ブラウザでの表示確認を繰り返しながら、試行錯誤を重ねました。 実装可能な範囲で調整し、完成させることができました。

学んだこと

この制作を通じて、デザインとコーディングの両方を理解することの重要性を学びました。 「デザインで描いたものが、コードでどう実装されるか」を意識することで、 次のグループ制作では1px単位での精度の高い実装ができるようになりました。 また、一人で全ての工程を経験したことで、Webサイト制作の全体像を理解できました。