【実践課題】LPデザイン・実装_ベビー用品をメイン事業とする企業の採用サイト

• 制作時間：5週間（デザイン2週間、コーディング3週間）
• 制作範囲：情報設計、ワイヤーフレーム制作、デザインカンプ制作、コーディング（レスポンシブ対応含む）
• 制作ツール：Photoshop、HTML5、CSS、jQuery

制作物

• Webサイト

• デザインカンプ

制作要件

制作過程

【STEP1】ペルソナの設定

クライアントから提示された制作要件を元にペルソナを設定し、ターゲット像をより具体的にした。

【STEP2】情報設計

制作要件として提示された情報を元に、3C分析及びSWOT分析から『TSUTSUMU株式会社』の特徴を整理した。これに沿ってデザインコンセプトを制定することで、競合とするベビー用品取り扱い企業の採用サイトとの差別化を図り、ペルソナに合ったデザインが設計できると考えた。

SWOT分析にて整理した内容を掘り下げ『TSUTSUMU株式会社』が目指すポジションを明確にするためのポジショニングマップ、及びデザインの方向性を決めるためのイメージスライダーを作成した。

【STEP3】コンセプトシートの作成

STEP1・2を踏まえ、今回制作するLPに対する制作コンセプトを設定した。そのうえでユーザーストーリー、配色、キーワードを設定し、イメージボードを作成した。

【STEP4】ワイヤーフレームの制作

STEP3で作成したコンセプトシートに沿ってレイアウトを検討した。まず、既存の採用サイトのなかからエントリーまでのユーザーストーリーが秀逸でコピーの目立たせ方が参考になりだと考えた「株式会社集英社」の採用サイトを対象とし、どのようなフォントを使っているか、余白感、セクションの並び順等を中心にじっくりと観察した。

観察の結果、TSUTSUMU株式会社はカルチャーフィットする方を求めることから、エントリーまでにこの会社が大事にしている価値観をたっぷり伝えることや、社員の人物像や具体的な業務の姿勢が伝わるようなセクションを厚くすることとした。

【STEP5】デザインカンプの制作

ワイヤーフレームに対し、ビジュアルデザインを施した。スマートフォン版ではボタンの大きさやカードの表示形式等を調整し、ユーザーが操作・閲覧しやすいサイトとなるよう意識した。特に工夫した点は以下となる。

• 原料にこだわっている姿勢を表現するため綿の画像を背景に使用するとともに、あしらいの形でキーアイコンとして用いた。

• どのような社員が働いているか・働く様子を強調して伝えるため、写真を多用できるカルーセルを用いて強調した。

• CTAであるエントリーを促すために、直前までに使用した色と異なるものを背景に広く塗ることで変化を生ませ、強調した。

【STEP6】コーディング

パソコン版ではホバーした際のアクション付与や、jQueryによる写真の自動再生やカルーセルを用いた。記述の前にマークアップ設計図を作成しサイト全体で文字サイズや余白の取り方にブレが生じないように留意した。

制作を通しての学び

• Webサイト公開まで一貫して、制作の目的から逸れないことが極めて重要であると認識した。ワイヤーフレームやデザインカンプ、コーディングとそれぞれ求められる技能特性が異なるからこそ、サイト全体として達成したい目的を常に念頭に置きながら作業をしないと、ブレが生じてしまいかねないと感じた。
• 既存のWebサイトをよく観察し、参考にできる要素は積極的に取り入れてデザインの引き出しを増やしていきたいと感じた。