01
企画からデザイン・実装まで
TRIVERA建設採用サイト（架空）
AIスクール卒業制作 / 採用ランディングページ
数字と社員の声で、
入社後の不安を減らす。
- 目的
- 働きやすさを判断できる情報を届け、説明会への参加につなげる。
- 担当範囲
- 要件定義・ワイヤーフレーム・デザインカンプ・AIを活用した実装と調整。
- 使用ツール
- Photoshop / Figma / Claude Code / Codex / GitHub / Cloudflare
先入観から、判断材料へ。
建設業への不安に対して、働き方の数字、社員の声、キャリアの流れを掲載。応募前に確認したい情報をまとめました。
信頼感と、前向きな印象。
青を基調に、現場で働く人の表情を大きく配置。黄色を申し込みボタンに使い、次の行動を見つけやすくしました。
スマホでも、迷わない導線。
画面下部に申し込みボタンを固定。ページ内の申し込み導線が見えるときは追従ボタンを隠し、二重表示を避けました。
PLANNING → DESIGN
意図を整理してから、
画面をつくる。
企画書では「働きやすい実態が求職者に伝わっていない」を課題に設定。数字と社員の声を軸にする方針をまとめました。
ムードボードでは、信頼・誠実・挑戦・チームワークをキーワードに、配色・書体・写真の方向性を整理しています。
架空案件の企画です。資料内の数値目標は達成実績ではありません。
AIによるコード生成を活用し、表示確認と修正指示を重ねて調整しました。
デモサイトを見る ↗
