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

制作期間：2025年12月22日〜2026年1月25日（5週間/デザイン2週間、コーディング3週間）
制作範囲：情報設計・ワイヤーフレーム・デザインカンプ・コーディング（レスポンシブ）

使用ツール：figma、Visual Stiudio Code

📍目次

1.制作物

2.課題要件

3.ユーザーストーリ

4.ムードボード

5.工夫点

　①ヘッダー、ファーストビュー

　②私たちについて

　③メンバー紹介

　④募集職種

　⑤エントリー

6.課題を通して学んだこと

1.制作物

2.課題要件

3.ユーザーストーリ

4.ムードボード

忙しい育児の合間にサイトを見た人が、安心できるような雰囲気作りを大切にしました。

色もパステルカラーにし、カラーに合わせてイラストもパステルカラーで柔らかいものを選び、温かい空気感が伝わるように設計しました。

5.工夫点

①ヘッダー、ファーストビュー

まだ企業のことを知ってもらうために、カジュアル面談のCTAボタンを追加しました。

ただ、目的はエントリーしてもらうことなので【エントリー】のCTAボタンは一番目立つようにさせました。

アニメーションとして、スクロールしても常についてくるようにしたため、いつでCTAボタンを押せるようにしました。

TSUTSUMUに合ったキャッチコピーを考え、ファーストビューに配置し見た人の感情を揺さぶらせるようにしました。

あなたの仕事が、誰かのいちばん優しい記憶になる

意味：フォトブック事業やベビー用品を通じて、家族の大切な時間に寄り添う仕事であることを強調します。

報酬や条件よりも「誰かのために働きたい」というカルチャーフィット層の貢献意欲に火をつけさせます。

星のあしらいは、キャッチコピーに合わせ働く人の想いが誰かに届き、未来を明るく照らす様子を表現しています。

アニメーションとして、下に情報がたくさんあることを伝えるためにSCROLL文字の下に常に動いている直線と下向きくの字を配置させました。

②私たちについて

TSUTSUMUの重要ポイントである【世界をやさしさでつつむ。】が一番目立つよう、フォントサイズを大きくし、メインカラーであるブルーで強調させました。

左右にあるガーランドのあしらいは、赤ちゃんの誕生を祝うことと、紐と旗が繋がっていて、家族や社会との「やさしい繋がり」を表現させました。

アニメーションとして、スクロールすると下から上にふわっと浮かび上がるように設定しやさしさを表現しました。

各セクションの区切りを、メインカラーであるパステルカラーのブルーとオレンジをの曲線にしました。直線ではなく曲線にすることで、柔らかさを演出しました。

ムードボードにもある「調和する多様性」をイメージし、大小さまざまな球がバランスよく配置されることで、家族一人ひとりの個性が共存する世界を表現しています。

③メンバー紹介

メンバーをカード型で表現し、役職の下にインタビューされた時の言葉を追加しました。

現場で働くメンバーの声を追加することで、ユーザーに働くイメージと共感を促せるようにしました。

④募集職種

各職種をアコーディオンで示しました。

閉まっている時は職種名とメッセージを表示させ、開いている時は活動内容と各職種の特徴を示して、自分に合ったものを見つけられるようにしました。

⑤エントリー

ページの上部と下部で同じ星を使うことで、サイト全体にリズムと統一感が生まれ、ブランドの世界観をより強固に印象づけられるようにしました。

6.課題を通して学んだこと

デバイスごとのデザイン再現力

PC版の固定レイアウトとは異なる、スマホの画面幅に最適化した情報の優先順位付けとレイアウト再構築の手法を習得しました。
vw 単位やマイナス余白を活用し、デザインカンプ特有の「画面の外から入り込む装飾」を正確に実装する技術を学びました。

詳細度を意識したCSS設計

共通のクラス名を使いながら、子孫セレクタ（#entry .button-item など）を駆使してセクションごとに個別の挙動（左揃えと中央揃えの使い分けなど）を制御する、メンテナンス性の高いコーディングを習得しました。
Flexboxを利用し、要素の整列や余白の微調整をデバイスごとに柔軟に制御するスキルを深めました。

実機検証による品質管理