Hasegawa Mariポートフォリオサイト

制作概要 Overview

作品名

WSS（職業訓練校サイト）

対応サイズ

PCサイズ（1920*1080のみ）

ターゲット

すべての世代

コンセプト

「学びを楽しみ、目指す自分へ」

はじめての学びが、“もっと知りたい”に変わる。
そんな前向きな一歩を後押しするサイトを目指しました。

制作期間

2024年12月～　計60時間 企画10時間　デザイン20時間　コーディング30時間

制作区分

学校課題 グループ制作

担当

• ・企画
• ・Design（コース内容ページ）
• ・Coding（説明会ページ・運営会社ページ）

使用技術・ツール

• Photoshop
• Figma
• VS Code
• HTML
• CSS(Sass)

ユーザー深層&競合分析 Insight & Analysis

ペルソナ

• ・クリエイティブな仕事に憧れがあり、Web業界への転職を目指している。
• ・未経験からのスタートに不安を感じており、「本当に自分にできるのか？」という思いを抱えている。

インサイト

好きという気持ちはあるけれど、独学では続けられるか不安。
だからこそ、自分のペースで学べて、
同じ目標を持つ仲間と励まし合える環境に魅力を感じる。

競合他社サイト分析

• ・A社→情報量は十分だが、デザインや導線に古さがあり「誰のためのサイトか」が伝わりづらい印象。
• ・B社→以前は背景の柄や写真の使い方により視認性が低くなっていた。リニューアル後は未経験者を意識した情報設計とUIに変わり、わかりやすい構成になっている。
• ・いずれのサイトも、「自分が学んでいる未来」をイメージできるかどうかが、ユーザーの判断に大きく影響していると感じた。

結果

WSSの特徴である「学びたいという気持ちに寄り添う姿勢」が伝わるよう、実際の学習風景を思い描けるような構成と、明るく親しみやすいサイトに。初めて訪れる方にも直感的に理解してもらえるよう、ファーストビューに配慮した。

制作の目的 Objective

• ・HTML/CSSを学び始めてから約1ヶ月のタイミングで、グループ制作という実践的な経験を通じて学びを深めるため。
• ・クライアント役との対話やペルソナ設計など、現場を意識した取り組み方を身につける。
• ・それぞれの担当を決め、スケジュール管理やチーム内の連携を意識する力を養うこと。

直面した課題 & 学び Challenges & Insights

実務を想定したチーム制作

特に難航したのが「コンセプト決め」でした。実際の企業の事例を参考にしながらインサイトを深掘りし、何度も検討を重ねた結果、3度目の提案でようやく方向性が固まりました。

→内容自体が良くても、コンセプト名の印象や表現のニュアンスひとつで評価が変わる難しさを学びました。

→チーム全員で疑問を共有し、咀嚼して進めたことで、納得感のある企画に繋がりました。

制作初期の技術的チャレンジ

クラス名の設計ルールがチーム内で統一されておらず、他メンバーのコードに戸惑いました。初期段階でのルール共有の大切さに気付きました。

プレゼン内容の構成

自ら手を挙げてプレゼン文章を担当。
情報の取捨選択や順序に悩みながら、自分たちの企画に合った伝え方を模索しました。

→参考事例の「良い」と思った点をそのまま使うのではなく、
内容やターゲットに合った伝え方を選ぶ力の大切さを学びました。

→責任感から張り詰めていた部分もありましたが、
行き詰まったときにチームで見直しながら進めることで肩の力が抜け、支えられていることのありがたさを実感しました。

フィードバックをもとに再構築 Page Update

完成後のフィードバックを受け、説明会ページをリニューアル。デザインカンプの変更に合わせて、構成や表現を見直しながら再コーディングを行いました。