制作期間

約2週間

使用ツール

Figma / HTML / CSS / VS Code

担当範囲

• aboutページのデザイン・コーディング
• supportページのデザイン・コーディング

制作背景・目的

職業訓練のグループワークで、山梨県勝沼町の移住サイトをテーマにしたWebサイトを制作しました。

チームメンバー4名と役割分担をしながら、統一感のあるサイトを目指しました。 (ターゲットは20代～40代の、田舎で仕事をしたい働き世代で、地域の雰囲気や情報を分かりやすく伝えることを目的としています)

サイトの仕様として、モバイルファーストで作成し、PC版はヘッダーとフッター以外の部分はモバイルのサイズを利用し、背景に動画を配置することで町の雰囲気が伝わるように設計

制作プロセス

1. 企画・コンセプト設計(チーム全体)
   • ターゲットユーザーとサイトの目的をチームで話し合い決定
   • サイトマップとワイヤーフレームを作成
2. デザインコンペ
   • Figmaを使用し、それぞれがtopページのデザインカンプを制作
   • チーム内でtopページ担当を決定するため、コンペ形式で提出
   • それぞれの下層ページ担当者の決定
   • 全体のトンマナ(カラー・フォント・余白ルール)をチームで統一
3. デザイン(私の担当:aboutページとsupportページ)
   • topページ担当者のデザインを継承する形で下層ページを制作
   • topページとの統一感を保つため、定期的にメンバーと確認
   • チームメンバーからフィードバックをもらい、修正を反映
4. コーディング(私の担当:aboutページとsupportページ)
   • デザインカンプを1px単位で忠実に再現することを意識
   • HTML/CSSでVS Codeを使用して実装
   • ブラウザで何度も表示確認
   • レスポンシブ対応を実装
5. チーム内での確認・調整
   • 毎日30分程度ミーティングを行い、進捗を共有
   • お互いのページをレビューし合い、改善点を提案
   • コーディングルールを統一し、保守性を意識
   • 全体の統一感を最終チェック

学んだこと

グループでの制作を通じて、コミュニケーションの大切さや、 チーム全体で統一感を保つための工夫の重要性を学びました。 また、個人制作での課題を克服し、より精度の高い実装ができるようになりました。 メンバーと気づきを共有し合うことで、一人では気づけなかった改善点も見つかり、 チーム全体のクオリティ向上につながったと感じています。