【課題制作】Webサイト制作(デザイン/コーディング)

OVERVIEW

SHElikes PRO デザイナー5つめの課題。架空クライアントの依頼内容をもとに、デザインからコーディングまでWebページ制作の一連の流れを習得しました。 使用ツール |figma 制作期間|デザイン(2週間)コーディング(3週間)

YEAR 2026

《制作物》

https://tsutsumu-saiyo.raindrop.jp/practice5/

《課題要件》

《ペルソナ》

《ムードボード》

・「世界をやさしさでつつむ」という言葉から、暖かさ・愛・守る・繋がりをキーワードとして制作。ベビー用品の開発に取り組んでいることや、家族みんながやさしく幸せに暮らせる世界を創りたいという思いから、暖かい空間の中で子供を守る親の姿や・包み込む愛情・または兄弟愛など、人と人との優しい繋がりを連想しました。 見た人があたたかい気持ちになるような、そんな世界観のサイトをテーマとして制作しました。

《情報設計》

《工夫点》

【キービジュアル】

・FVではお母さんと赤ちゃんの手の写真を採用し、”触れる”という行動から「守る・繋がる・愛する」という感情が直観的に伝わるように工夫。

・TSUTSUMUのロゴをあしらいとして配置し、ブランドの印象が自然と記憶に残るように意識。

【コンセプト】

・実際に働く人や会社の雰囲気が伝わる写真を掲載し、自動スライドで展開。
・動きをつけることで、自然と空気感が伝わるよう意識。

【メンバー紹介】

・写真の上に、その人の想いや価値観が一目で伝わる一文を配置。
・一言で心を掴むことで、「もっと知りたい」という気持ちを生み出し、自然とインタビューへ遷移する導線を設計。

【働く環境】

・ライフステージの変化にも寄り添える企業であることを伝わるようにアイコンで表示。

【募集要項】

・企業の世界観が伝わるよう、各職種にそれぞれキャッチコピーを追加。

・この会社の中でどのような役割を担っているのかが伝わるようにし、働くイメージをより具体的に想像できるよう意識。

【採用の流れ】

・応募から内定までのステップを可視化することで、「どんな流れかわからない」という不安を軽減。

【エントリーセクション】

・「今のあなたのままで、大丈夫」というメッセージを添え、エントリーへの心理的ハードルを下げるとともに、ブランドの優しく包み込む世界観を表現。

《本課題で学んだこと》

・要件定義・・・クライアントの情報をもとにペルソナを設定し、クライアントと求職者双方の想いが重なる接点を設計することの重要性を学びました

・LP構成・・・ブランドの世界観を表現するだけでなく、求職者の不安を軽減する設計が、クライアントの成果につながる重要な要素であると学びました

・コーディング・・・デザインをそのまま形にするだけでなく、構造を理解しながら組み立てることの重要性を学びました。見た目だけでなく、動きやレスポンシブ対応まで考える必要があることを実感しました。

WEBSITE