Portfolio｜Designer Risa Ono

ランチ交流会LP

概要: 専門学校テラハウスICA (職業訓練校)の就職活動イベントである、ランチ交流会のLPサイト
URL: ランチ交流会
制作目的: 専門学校テラハウスICAの訓練生にランチ交流会への気軽な参加を促す。
厚生労働省の監査御担当者・企業採用御担当者への同イベントの概要周知。
ターゲット: 【メインターゲット】
専門学校テラハウスICA (職業訓練校)のWeb・IT系企業への就職を希望する訓練生・卒業生。第2新卒でボリュームゾーンの20代後半。
【サブターゲット】
厚生労働省の監査御担当者、ランチ交流会への参加を検討する企業採用御担当者。
チーム体制: 5名(ディレクター：1名、デザイナー：2名、コーダー兼ライター：2名)
担当範囲: ライティング / コーディング
レスポンシブ: スマートフォン / タブレット / PC
使用ツール・言語: Illustrator / Dreamweaver / HTML / CSS
制作期間: 約１週間

新しい未来に向かう訓練生を想像させる、メイン画像×2

↓

転職活動への悩みを挙げて、共感と不安を煽る

↓

ランチ交流会参加の提案・概要説明

↓

参加すべき理由を説明

↓

参加の流れをチャート解説

↓

よくある質問と回答で、不安・疑問点を払拭

↓

クロージング
＝ランチ交流会詳細ページへジャンプ）

親しみやすい印象を出すため、丸ゴシック体のWebフォント：Rounded M+ １c (M PLUS Rounded 1c)を読み込み、文字色は濃灰色を使用。

スマートフォンの小さい画面でも文字が読みやすいよう、左右両端20pxずつパディング(隙間)を付けました。

画面いっぱいにタイトルと説明文の配置から、画像の上下に収まるようにしました。

文字アイコン3列 →1列にすることで、各理由の要点がテンポよく印象に残るようにしました。

通し番号/見出し＋文章 / 写真の横並び

↓

通し番号＋見出し / 文章 /の順に折り返して、先に文章がくることで、必要情報がすぐに分かるようにしました。

横並びから、画面サイズが小さくなるにつれて折り返し、最終的に縦並びになるようにしました。

参加意思を左右する重要箇所の為、チーム全員でブレーンストーミング形式で案を出し合いました。

→この箇所は、簡潔に言い切る事が大切だと思い、
既出案「沢山の優良企業が参加されています。お話だけでも聞いて行かれていませんか？」の前半部分を、
体言止め（名詞で終わる形）で「優良企業多数参加中」にアレンジする提案をした所、採用となりました。

＊チーム内で各人思い付いた意見を遠慮なく発言していく事と、0→1生み出す事と同じ位、他者の意見を尊重して1→10にする事も、より良い案を生み出す上で大切であると痛感しました。

デザイン担当者が選定に難航した為、チーム全員で検索・選定。

→私は、転職活動で明るい未来に向かって駆け出す前向きさを想像させる、左下の画像を選定。協議の結果、採用となりました。
Slickを利用して、2枚の画像が経時で切り替わる＋3つのアピールポイント×キャッチフレーズロゴを重ねることでユーザーの目を惹き付け、真下のナビゲーションへの動線を作りました。

※御依頼者側で更新作業を行うとの事で、画像のカスタマイズが可能である点を訴求。

メイン画像：画像の縦横比が変わる為、使用画像を<picture>を利用して切り替えました。
アピールポイント3つ×キャッチフレーズロゴ：
横並びをやめて、縦並びにしました。
ナビゲーション：スマートフォン時、ハンバーガーメニューに切り替えて縦並びにしました。

→デザイン担当者と連携を取り、デザインカンプと実機での見え方を確認しながら、サイズ感・各項目同士の余白を調整しました。