【実践課題５】LP制作（デザイン・コーディング）

●制作情報

制作時期：2024年 10月
制作時間：カンプ作成２週間　コーディング３週間
使用ツール：photoshop、Visual Studio Code

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

●要件

・クライアント情報
　〈クライアント名：TSUTSUMU 株式会社〉
　ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。

・目的
　LPを通してエントリーをしてもらうこと
　＊採用強化のため、できるだけたくさんの応募がきて欲しいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらう

・ターゲット
　・転職希望の方
　・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
　・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人

・必要要素
　・セクション
　　①キービジュアル　②私たちについて　③働く環境　④事業について　⑤募集職種　⑥メンバー紹介　⑦エントリー　⑧フッター
　　※ワイヤーフレーム作成時に適切な順序に並び替えOK
　・ロゴ
　　支給のロゴを使用。LPのトンマナに合わせて色の変更はOK

・ペルソナ設定

●制作物

デザインカンプ

●ユーザーストーリー

●ワイヤーフレーム

ユーザーストーリーを元にしてワイヤーフレームを作成しました

●ムードボードとスタイルガイド

●課題を通して学んだこと

・ユーザーストーリーの大切さ
→デザイン→要件定義からのユーザーストーリーの大切さを学びました。商品を買ってもらいたいのかイベントに参加してほしいのか採用エントリーをしてほしいのか、で例え同じ写真を使っているとしてもストーリーが全く異なること。ユーザーの悩みとそれに対して寄り添う提案をするという流れから設計に入りました。

・表現と設計の工夫
「つつむ」から連想されるあたたかみの表現と、リクルートという引き締まった表現を両方入れ込まなければいけない部分で色味や設計の大切さを学びました。

・コーディングを意識したカンプづくり
前回の課題で同じ文字やスペースを使いまわしていると言われていた意味が本当によくわかりました。また、親要素で指定していれば子、孫要素で何度も書かなくても良かった部分があり、最初の設定をしっかり考えることでcssがコンパクトにできたと思います。

●こだわったポイント

・要件定義に沿った配色
優しいイメージのベージュ、黄色に清涼感のあるグリーンを入れることでページ全体が締まったのではないかと思っています。ホバーした時に濃いグリーンにして、更にそのイメージを強くしています。

・ファーストビューの画像のこだわり
ファーストビューで全てが決まると言われているように、ファーストビューの画像にはこだわりました。光の加減の調整や光彩でふんわり感を出しています。わかりにくいですが「つつむ」の文字の背景に光彩を入れています。

・ペルソナに沿った写真加工
事業についてのアルバムの写真は、元画像では外国人の赤ちゃんの写真のアルバムでした。ペルソナは日本人ですのでアルバムの中身を日本の家族写真に見えるように加工しています。

・コンテンツの追加
ファーストビューの印象では赤ちゃん用品のページなのかと誤認する可能性があるため「一緒に世界を創る仲間を募集しています」という文言を追加しました。FB会でヘッダーに「RECRUIT」を入れてみる方法を教えていただいて実践しています。

働きたいママさんたちは自分がきちんと働けるだろうかという悩みを内包していると思うのでお悩みはありませんか→そのお悩みに寄り添いますで安心感を持ってもらえるようにしています。