【LP制作】架空ベビー用品事業会社の採用サイト | 実践課題

制作時間：情報設計〜ワイヤーフレーム作成⋯約15時間、デザインカンプ作成⋯約20時間、コーディング⋯約18時間

制作期間：約5週間

使用ツール・言語：Photoshop／Figma／HTML／CSS(SCSS)／JavaScript(Alpine.js)

制作範囲：情報設計〜ワイヤーフレーム／デザインカンプ／コーディング(レスポンシブ含む)

目次

• 制作物
• 課題内容／要件
• 情報設計
  • ペルソナ
  • ユーザーストーリー
  • ワイヤーフレーム
• ビジュアルデザイン
  • デザインコンセプト／ムードボード
  • 配色、フォントについて／スタイルガイド
• デザインの工夫
• 実装の工夫
• 課題を通して学んだこと

制作物

実際のWebサイトはこちら

・デザインカンプ

課題内容／要件

架空クライアントからの、採用強化のための採用サイト作成依頼。

情報設計

依頼内容を基に、ペルソナとユーザーストーリーを考案しました。

・ペルソナ

・ユーザーストーリー

・ワイヤーフレーム

ユーザーストーリーを踏まえて掲載コンテンツの順序を決定し、追加情報も考えました。

ビジュアルデザイン

・デザインコンセプト／ムードボード

デザインコンセプトは「やさしさの糸で織る、あたたかな世界」です。これからTSUTSUMUへエントリーする求職者を含めた一人ひとりが紡ぐ「やさしさの糸」が織り合わさり、組織を作っていく、世界をつつみこむ一枚の大きく柔らかい布を織っていくというコンセプト。TSUTSUMUという企業が、多様な個性と経験を持つ人材が集まることで、より豊かで温かい世界を創造していく様子を表現しました。

・配色、フォントについて／スタイルガイド

■配色⋯「やさしさ」をイメージする柔らかなパステルカラーを基調としながら、CTAボタンにはアクセントのコーラルレッドを使用し、ぼんやりしすぎない配色に。
【それぞれのカラーに込めた意味】
　・ローズ： 包容力と思いやり、やさしさ
　・イエロー： 陽だまりのような温かさと希望、明るい未来への期待
　・セージグリーン： 安心できる環境での個人の成長と発展
　・コーラルレッド(アクセント)： 新たな挑戦への勇気、一歩踏み出す決断力

■フォント⋯可読性が高く、親しみやすい印象のNoto Sans JPをメインフォントとして選定。キービジュアルなどのメッセージを伝える部分には、ぬくもりと優しさを感じられるはんなり明朝を使用。ENTRYボタンなどの英語表記には、丸みを帯びたサンセリフ体のNunitoを選び、アクションを促しながらも温かさを保てるようにしました。

デザインの工夫

・メインビジュアル

デザインコンセプトに合致する、柔らかい布の上で微笑む家族の写真を選定し、メインカラーの糸のあしらいを追加。「やさしさの糸で織る世界」を視覚的に表現しました。

・私たちについて

背景にはハートを手のひらで包んでいるイラストを配置し、詳細ページ遷移のボタンは「私たちの想いを知る」というより感情を動かすような文言に変更。「もっともっと〜」の部分はメッセージ性を持たせるため明朝体を使用しました。TSUTSUMUの世界観をより深く伝えるため、写真ギャラリーを追加しています。

・事業について

メインカラーの3色を各事業に取り入れ、レイアウトも画像・文章を交互に並べることで単調にならないデザインにしました。

・働く環境3つの制度に合わせたイラストを追加。また、社内や勤務の様子がわかるような画像ギャラリーを設置し、社内の雰囲気を伝え、働いている様子が想像できるようにしました。

・採用情報

要件にはなかった選考の流れ、FAQを追加し、募集職種と合わせて「採用情報」として1つのセクションにまとめ、情報を整理しました。

・採用メッセージ／エントリー採用メッセージの画像は、布地と手のひらの別々の写真を組み合わせて作成。メインカラーの糸のあしらいも追加しました。ENTRYボタンは他のボタンよりも目立つように大きく配置し、最終的なアクションへの導線を強化しました。

・統一感のあるモチーフデザイン

糸や楕円、曲線のモチーフをセクション間の区切りや画像・アイコン背景として取り入れ、デザインコンセプトを一貫して表現しました。

・クリック可能なカードデザイン

クリック可能なインタビューと募集職種のカードには影を付け、マウスホバー時には不透明度を下げふわっと浮き上がるようなアニメーションを追加。ユーザーがアクション可能な要素であることを直感的にわかるようにしました。

アニメーションはこちらのサイトからご確認いただけます。

実装の工夫

・パフォーマンス最適化

画像は全てwebp形式にも対応し、読み込み速度を向上。セクションタイトル背景の楕円あしらいはCSSで実装し、軽量化を図りました。

・技術実装

画像ギャラリーのスライダーとFAQのアコーディオンはAlpine.jsで実装。軽量なJavaScriptライブラリを選択し、パフォーマンスとユーザビリティを両立しました。CSS設計はFLOCSSをベースにSCSSで記述し、保守・管理しやすいコードにしました。

課題を通して学んだこと

・Web制作の全体フローの理解

ペルソナの設計からワイヤーフレーム作成、デザインカンプ作成、コーディング、サーバーアップまで、Web制作の一連の流れを体験できました。実際の案件では、ワイヤーフレームやデザインカンプ作成時にクライアントと細かく要件をすり合わせていくと思うので、サイトの目的という軸をぶらさずに、合意を取りながら進めていくことが重要だと感じました。

・効率的なデザイン・開発手法

コーディングを意識したデザインの作り方を学びました。事前にスタイルガイドや余白のルールを決めておくことで、CSS設計がしやすくなることを改めて実感。デザインと実装の連携を考慮した制作プロセスの重要性を理解できました。

・情報設計の重要さ

クライアントから提供された要素に対して、ペルソナやユーザーストーリーを踏まえた構成変更や追加提案を行うことで、より効果的なサイトを作れることを学びました。単に与えられた要件をそのまま形にするのではなく、目的達成のための提案も積極的に行えるデザイナーを目指したいです。