【スクール課題】 LP制作_採用サイト (ワイヤーフレーム制作~コーディング・実装)

OVERVIEW

架空クライアントより提供された要件書をもとに「ワイヤーフレーム・デザインカンプの作成」「コーディング・実装」「サーバーアップロード」まで行いました。 使用ツール:photoshop、Visual Studio Code(HTML、CSS、jQuery) 所要時間:70時間

【目次】
①制作物
②課題要件
③デザインイメージ
④情報設計
⑤制作を通じて学んだこと

----------------------------------------------------------------------

①制作物

URL:http://odd-usuki-0528.deci.jp/

②課題要件

■架空クライアント

「TSUTSUMU株式会社」様

ベビー用品をメインとし、育児をサポートするコミュニティ事業や家族みんなが幸せに

なるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、

家族向けのサービスも展開していく予定。

■制作目的

採用サイトを通してエントリーをしてもらうこと

(採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば

誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい)

■ターゲット

・転職希望の方(性別問わず)

・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方

・各職種において全くの未経験よりは経験を重視したいが、それよりも

 カルチャーフィットしている人がターゲット

③デザインイメージ

・「あたたかい」「やさしい」などをキーワードとし、デザインをしました。これらのキーワードを体現するようあたたかさを感じられるベージュや暖色系で目を引くオレンジなどの配色にしました。

・見出しなどの要素で丸ゴシックを使ったり、角が丸い四角形を随所で用いたりすることで、ブランドイメージを伝えられるようにしました。

丸ゴシックを使うことでゴシック体の持つ堅実でビジネス感を連想させつつ、柔らかい印象を与えられるようにしました。

④情報設計

TSUTSUMU株式会社様の持つ思い・世界観が伝わること、サイトを閲覧する求職者がサイトを見て働く環境や会社の雰囲気がわかることの2つを軸に情報設計や写真の選定などを行いました。

⑤制作を通じて学んだこと

■デザイン

・TSUTSUMU株式会社のあたたかさがある世界観と採用サイトという真面目さ・堅実さの両方を兼ね備えたデザインにするのが難しく苦戦しました。これらを実現するために他社の採用サイトなどを見て情報分析をし、デザインに落とし込むことの重要性を実感しました。

・サイトを閲覧するユーザーのことを考え、写真の選定などにも気を配るなど細かい部分まで考慮してデザインを行う必要があることを学びました。


■コーディング

・ユーザーがどのデバイスでサイトを閲覧するかがわからないため、どのデバイスで見ても表示崩れを起こさないよう、メディアクエリを細かく設定しました。検証ツールを用いて細かい箇所まで確認し、作業することが大切だと学びました。

・実際にコーディングを行うことで、 パーセントなどの相対数値でのサイズ指定を行う必要ことの大切さを実感しました。