コンテンツへスキップ
JA/EN
お問い合わせ→

WEB / LANDING PAGE

キャリアイベントのLP・告知・ビジュアル制作

キャリアイベントの認知から参加検討までをつなぐ制作事例。LPの設計・実装に加え、イベントロゴと告知ビジュアルを共通の表現で展開し、開催形式・プログラム・日程・申込への入口を整理しました。

キャリアイベント：PC・タブレット・スマートフォンのレスポンシブモックアップ。
イベントLPのレスポンシブモックアップ。
分野
採用 / キャリアイベント
制作内容
イベントLP設計・実装 / イベントロゴ / 告知ビジュアル
制作ツール
HTML / CSS / JavaScript / 保存HTMLデータ

制作の目的

イベントを知る段階から、内容を理解し参加を検討する段階まで、情報と見た目のつながりを整えること。単独のLP制作だけでなく、ロゴ、告知画像、開催情報、プログラム紹介と申込への入口を、一つのイベントとして認識できるように組み立てました。

画面と操作のつながり

告知画像でイベント名・開催形式・日程を伝え、LPではNews、Concept、Contents、Time Table、Sponsorsの順に情報を整理しています。日程・時間帯ごとのタブで講演内容を切り替え、参加を検討するための情報を段階的に確認できる構成です。オレンジの筆致、ロゴ、写真と配色を各媒体で共有し、Entryの入口を導入・コンテンツ・時間割の周辺に配置しています。

制作資料

ワイヤーフレームで導入、説明、講演カード、時間割、会場案内の配置を検討し、ビジュアルデザインとHTML/CSS/JavaScriptの実装資料へ展開しています。保存HTMLではオンライン開催のお知らせ、セクションへの移動、日程・時間帯別のタブ構造、画面幅に応じたナビゲーションを確認できます。対面開催を想定した初期ワイヤーフレームとオンライン開催案内は、同じ最終画面として扱わず制作段階を区別しています。

制作物

イベントロゴの白文字・濃色文字バリエーション、1080×1080pxの告知ビジュアル、LP全体のワイヤーフレーム、ビジュアルデザイン、レスポンシブ表示を想定したHTML/CSS/JavaScript、講演・交流コンテンツの紹介、時間割とスポンサー情報、参加申込への入口。

制作画面・設計資料

イベント告知用の正方形ビジュアル
告知用の1080×1080pxビジュアル。イベント名、開催形式、日程とメッセージを一枚にまとめ、LPと共通する写真・配色・ロゴで認知のつながりをつくっています。
キャリアイベントの濃色文字ロゴ
明るい背景で使用する濃色文字のロゴ。オレンジの筆致と開催年を組み合わせ、告知画像とLPに共通するイベントの識別要素を整えています。
キャリアイベントの白文字ロゴ
暗い背景で使用する白文字のロゴ。白い文字を確認できるよう、この資料では暗い背景上に表示しています。
キャリアイベントのLPデザイン全体
LPの全体デザイン案。オンライン開催のお知らせ、コンセプト、講演・交流コンテンツ、時間割、スポンサーと参加申込への入口を一連の画面で整理しています。登壇者などの表示は当時の制作資料です。
キャリアイベントの全体ワイヤーフレーム
構成を検討した段階のワイヤーフレーム。東京・京都の会場案内を含み、後のオンライン開催案内とは段階が異なります。レイアウト検討の資料として、デザイン案と区別して掲載しています。

過去に携わった制作事例です。 掲載内容は当時の制作資料に基づきます。保存HTMLには仮の登壇者情報と未接続のEntryリンクが含まれるため、申込受付システムの稼働実績や最終公開仕様を示すものではありません。告知・参加検討を支える制作範囲を紹介しており、申込数、参加率、広告運用や改善率などの成果は掲載していません。

RELATED SERVICE

Web・UI/UXの設計について

情報設計、画面構成、ユーザー導線から、Webサイト・LP制作まで。

Web制作・改善のサービスを見る

WebサイトやUIの課題を相談する

制作したい内容や現在の課題を、お聞かせください。

お問い合わせ

ほかの制作事例

制作実績一覧へ戻る