Webページ制作

目次

1. Webサイト制作の目的とゴール
2. 要件定義
3. ワイヤーフレームの作成
4. ムードボードの作成
5. 制作のポイント
6. 頑張ったポイント

1. Webサイト制作の目的とゴール

■目的

• Webデザインにおいて必要な手順を一通り学ぶ
• 要件書の意図を理解し、目的に沿った情報の優先度付けや適切なレイアウトを考えながらワイヤーフレームを作成する方法を学ぶ
• 実装を考慮してデザイン還付を作成することを学ぶ
• 自分で0からコーディングする際の手順を学ぶ

■ゴール

• ワイヤーフレーム作成、デザインカンプ作成、コーディング、サーバーアップを一通りできるようになる
• 要件書を見て自分でワイヤーフレームを作成することができる
• 実装を考慮したデザインカンプを制作できるようになる
• 自分が制作したデザインカンプのコーディングができるようになる

2. 要件定義

3. ワイヤーフレームの作成

ビジョンに共感した求職者からのエントリーを増やすため、TSUTSUMUが目指していることをキャッチコピーとして入れ、興味を喚起。

その後、「企業について」でビジョンを、「事業について」で何をやっている会社なのかを伝えることで、企業への理解を深めてもらう動線にしました。

続いて、「募集職種」で、閲覧しているユーザーに合った求人があるか確認してもらい、「メンバー紹介」で、どんな従業員がいるのか、何を大切にしながら働いているのかを知ってもらう。

そして、会社のやりたきことと募集職種を一通り伝えた上で、CTAでエントリーを促しその後「環境について」で、さらにエントリーへの不安を払拭しています。

4. ムードボードの作成

「創造」をテーマにした、カラフルなデザインにしました。

ただ、カラフルでも子供っぽくならないように、また、「やさしさ」「温もり」「寄り添い」といったキーワードを意識し、全体的に淡いあしらいを入れました。

5. 制作のポイント

■Webサイトのコンセプトやテーマ

ムードボードを元に、カラフルなデザインにし、全体的に淡いあしらいを入れました。

FVには、フィルムのように配置した家族写真を挿入し、TSUTSUMUが家族の幸せを創る会社であることを視覚的に伝えています。

■ユーザーストーリー

ワイヤーフレーム作成時に考えたユーザーストーリーを磨きこみ、会社のやりたきことと募集職種を一通り伝えた上で、CTAでエントリーを促し、その後、「環境について」や「選考の流れ」で、さらにエントリーへの不安を払拭し、もう一度CTAに繋げています。

6. 頑張ったポイント

ビジョンに共感した求職者からのエントリーを増やすため、情報設計はこだわりました。

また、デザインについても、性別を選ばない配色や、TSUTSUMUの伝えたい世界観を意識したテーマ・キーワードを考え、意識しながら作成しました。