PC/SPデザイン・実装【架空案件】
SHElikes MULTI CREATOR COURSEの課題で、架空企業の採用サイトの制作に取り組みました。(期間:4週間)
所要時間:約80時間
制作ツール:Photoshop、Illustrator、Visual Studio Code
■クライアントについて
クライアント名:TSUTSUMU株式会社
ベビー用品の開発をメインに、家族みんなが幸せになることを目指した事業を展開している。
■要件
採用強化のため採用サイトを作成したい。
目的 :LPを通してエントリーをしてもらうこと
ターゲット:・転職希望の方
・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
・各職種において全くの未経験よりは経験を重視したいが、
それよりもカルチャーフィットしている人がターゲット
トンマナ :明確に決まっていないため、事業内容に合うトンマナを自由に提案してほしい。
■ユーザーストーリーの設定
①私たちについて➡(会社側)TSUTSUMUが作っていきたい世界に強く共感してくださる方をターゲットとしているため、メッセージを見てほしい。
②事業について➡(求職者側)まずは会社について知りたい(どのような事業を展開しているか)
③働く環境➡(求職者側)どのような環境で働くことができるのかが知りたい(労働時間・福利厚生など)
④メンバー紹介➡(求職者側)どのような人が働いているか知りたい(実際に働いている人の一日のスケジュールや、会社の感想など)
⑤募集職種➡(求職者側)現在どのような職種が募集中なのか
⑥エントリー➡(求職者側)①~⑤まで読んだうえで、応募したい
※TSUTSUMUが作っていきたい世界に強く共感してくださる方をターゲットとしているため、途中にエントリーへのリンクは入れず、ヘッダーとフッターのみにエントリーへのリンクを入れた。
■制作物
■課題を通して学んだこと
・これまでの課題にもありましたが、導線を考えることの難しさを学びました。
・初めてデザインからコーディング、サーバーアップまで行こなったので、完成までの一連の流れを学べました。
・コーディングには正解がなくいろんな方法で作ることができるということ。
■頑張ったポイント
★デザイン
・温かみ・明るさを意識した写真選び・配色(配色サイトで「幸せ」のカテゴリにあるものを選んだ)
・背景は手書き風のイラストを選び、あかちゃん向けの事業を展開している会社らしさをだした。
・エントリー枠の画像の加工
★コーディング
・背景画像の設置
・「事業について」「メンバー紹介」の画像からずらして薄い黄色の枠線をつけた部分
■課題の感想
コーディング前のマークアップ設計図含めLPデザインの際にコーディングのことも考えたつもりでしたが、実際にコーディングに入ると想定外の作業が入ることもあり、改めて難しいと感じました。
JQueryが特に記入方法がわからず、これから更に勉強していきたいです。
初めてデザインからコーディングまで行ったため、完成できて一安心しました。