【課題】LP制作(コーディングを含む)

<制作概要>

＊使用ツール
　Figma
＊制作時間
　情報設計：10h
　ビジュアルデザイン：15h
　コーディング：25h
＊制作範囲
　ワイヤーフレーム、デザインカンプ、コーディング(HTML/CSS/Java Script)
＊制作時期：2025/12

目次

1. 制作物
2. 課題要件
3. 要件定義
4. 情報設計・ユーザーストーリー
5. デザインカンプ
6. コーディング
7. 制作を通して学んだこと

1. 制作物

（リンクボタンを貼る）※後日対応

2. 課題要件

3. 要件定義

【要件定義】
提供された課題要件を自分なりに噛み砕き、目的とターゲットを設定しました。

目的
ー TSUTSUMUが掲げるビジョンに共感いただける方の多くにエントリーしてもらうこと

目的達成のためにLPのに求められること
ー TSUTSUMUのビジョン/カルチャーをしっかりと伝える、伝わるようにすること
ー エントリーへのハードルの軽減
ー エントリーへの導線を確保

ターゲット
ー TSUTSUMUのビジョンに共感いただける方
ー 報酬よりもビジョンへの共感を重視する方
ー 経験も重視したいが、なによりもカルチャーフィットするかどうか
ー 転職希望者(性別問わず)

【コーポレートサイトと採用サイトの違い】
同じ企業でもコーポレートサイトと採用サイトで、目的とターゲットが大きく異なります。その違いを下表にまとめ、それらを意識した制作を行いました。

4. 情報設計・ユーザーストーリー

ユーザーストーリーをもとに、セクションの流れを下図のように設計しました。

5. デザインカンプ

ムードボード

フォント

ファーストビューのキャッチコピーには、手書き風のフォント"Zen Kurenaido"を用い、よりメッセージ性を高めました。
また、ファーストビュー以外では、"Zen Kaku Gothic New"を用い、やわらかい雰囲気と採用サイトの規律さのバランスをとったものとしました。
各セクションの英語表記には、"Caveat"を用い、筆記体風で手書き感を出しながら可読性が高いものを選びました。

デザインカンプ

6. コーディング

ヘッダー上のナビゲーションメニューでは、選択すると色を変化させ、どこを選択しているかをわかりやすいように設計しました。

同様に、各セクションの一番下にある詳細ページに遷移させるボタンでは、カーソルを合わせるとボタンが上に動くようなモーションをつけました。

また、職種紹介では、各職種の具体的な業務内容をアコーディオンメニューで表示し、興味のある職種に絞って見ていただくことで、情報過多にならないようにしました。

ホバーやアコーディオンメニューを用いることで、閲覧している方が能動的にアクションを起こしている感覚が芽生え、より掲載されている内容に興味をもってもらいやすいと考えました。

7. 制作を通して学んだこと

• Webサイトの目的を理解することで、各セクションに掲載する内容を精査することができました。特に、今回の要件ではコーポレートサイトと採用サイトの目的の違いを意識することで、求職者が求めている情報を掲載することができました。
• 実際にコーディングをすることで、コーディングで表現しやすいものとしにくいものがあることがわかり、コーディングしやすいデザインを考えることの重要性を学びました。
• Webサイト制作の一連の流れを経験したことで、各工程がそれ以外の工程にどう影響を与えているのかを知ることができ、各工程で抑えておくべきポイントを学ぶことができました。
• デベロッパーツールを使いこなすことで、うまくコーディングできたいないときの要因を探ることができました。