通常契約案件 webサイト制作 UI/UXデザイングラフィックディレクションその他

IT企業イベント用ロゴ＋LP＋イベントツール＋動画制作

Client グリー株式会社

Date 2024.12.13

依頼内容

グリー株式会社様の「GREE Tech Conference 2024」のイベントで使用の、ロゴ、LP、アタック動画、さらに今年はイベント会場で使用される各種ツール類を制作いたしました。
今年のイベントテーマは「Hackpackers」
「Hackpackers」は「Backpackers」をもじった造語ということで、
グリーグループのローカルな文化や技術チャレンジに触れ、カンファレンス会場での偶然の出会いや発見を楽しんで欲しい、そういう思いを込めて名付けたテーマと伺いました。
（Backpackers：観光地だけでなく、ローカルな文化や生活に触れ、旅先での偶然の出会いや発見を楽しむことを目的とした旅人を指します。）
冒険心を持って、自由にアイデアを探求しにこのイベントにたくさんの方が足を運んでいただけることを期待し、まずはイベントテーマ「Hackpackers」を元に、ロゴの制作から着手いたしました。

ロゴデザイン

社内デザインチームで「Hackpackers」をそれぞれメンバーごとにロゴに落とし込み、案だしを行いました。全部で9案のご提案をいたしました。

その中の【G案】
イラスト：地図をモチーフに「発見」「出会いによって無限に広がる世界」を表現
文字：AB-megadot9 RegulaとLatoを選定
カラー：アウトドアブランドのようなナチュラルな色合いで、「旅」の雰囲気を表現

に決定いただきました。

クライアントさまからはイベント時のマップや動画で活かしたいとのご要望から、「飛行機」「船」「列車」「車」などのイラストパーツの作成もご依頼いただきました。

こちらのロゴを元にLP制作、アタック動画、各種イベントツール類へと展開いたしました。

UI/デザイン（LP）

基本的には2023年度の構成に準じていますが、ロゴの世界観を表現するよう努めました。また今年はイベント会場にてブース展示が行われるため、新しくブース紹介を行う「Exhibition」コンテンツを追加しています。

＜メインビジュアル＞
今回は例年と異なり、現地でブース巡りが行えるため、地図をモチーフにしたメインビジュアルが採用されました。
また、ページを訪問すると表示されるアニメーションも工夫しています。まず、大陸や飛行機をフェードで表示、次にロゴの８の字が描かれ、ピンがまばらに出現することで、ゲームタイトル画面のような演出にし、現地でブースを探索する冒険心を掻き立てるものになっています。

＜コンテンツ＞
前述した通り、今年は新しくブース一覧を掲載する「Exhibition」を追加しています。ここは各ブースの位置関係と出展名、展示概要を紹介するエリアです。
スマートフォン版では、一覧が長くなると、ページ下部の情報を見たいユーザーにとって不便となるため、およそスマホ１画面程度の長さで一覧を切り、スクロールで続きの出展概要が閲覧できるUIにしています。

＜タイムテーブル＞
タイムテーブルの構成は昨年と同じですが、一部利便性を改善したり、あしらいを今年のテーマに沿ってアレンジしています。まず、利便性向上のため、各セッションのテキストサイズを調整しました。
昨年は「Track」のテキストサイズが開始時間より大きいものでしたが、今年は「何時に開始するか」を重視し、開始時間を大きく、Track名を小さくする形に変更しました。より配信を楽しみにしている方にとって見やすい表示になったかと思います。

また、スマートフォン版のみ表示されるTrack選択のタブは吹き出しにすることで、いま何を選択しているかをわかりやすくしました。

そして、セッション一覧はイベント1番の目玉です。あしらいはテーマに沿って格子柄と波線を用いたマップ風のデザインにしました。Trackとセッションの色は、ベージュがベースカラーの世界観に合うように自然界にある色から選んでいます。赤・黄土色・緑色を各Trackの色にし、どのTrackにも属さない配信にはセカンダリーカラーの紺色を使用することで、サイト全体の配色バランスを調整しました。

＜SNS画像＞
LP内のセッション詳細ページのリンクをSNSでシェアすると表示されるカードです。
今年はLPだけではなく、後述の発表スライドでもチームのようにTrackごとに色分けをしています。そのため、SNS画像でもTrackごとに色を分けることにいたしました。

アタック動画

決定したイベントロゴやLPデザインをベースに、今回のテーマである「Hackpackers」に沿った20秒程度の動画制作をご依頼いただきました。

①絵コンテ作成
まずは「旅人」や「出会い」「発見」といった今回のテーマに関わるキーワードが伝わるような動画内容にするため、紙芝居式の絵コンテと指定されたBGMに合わせた動画版絵コンテを制作いたしました。

【絵コンテ-静止画】

【絵コンテ-動画】

こちらで大まかな方向性はFIXしたので、続いて清書とアニメーション付けの作業に進行いたしました。

②清書・アニメーション最終稿作成
アニメーションを作成する際に注意していたのは、指定されたBGMにそれぞれのオブジェクトの動きをしっかりと合わせ、視覚的に気持ちよく情報が入ってくるようにすることでした。また今回のテーマである「旅先で新しい何かを発見できるかもしれないワクワク」を表現するために、全体の動きを元気で明るい印象に仕上げました。
初稿で大まかなOKはいただいたので、最終的に軽微な調整を行いFIXしたのが以下の動画になります。

【アニメーション-最終稿】

イベントMAP

今年は「Hackpackers」というテーマから想起される「旅」をイメージした会場MAPもご要望いただきました。イベントロゴをモチーフとしつつ、イベントの世界観を踏襲したMAPを制作いたしました。

世界地図をモチーフにし、会場全体をデフォルメされた架空の大陸で表現しています。RPGゲームに登場するMAPのようなトーンによって、「出会いを探求するワクワク感」を表現いたしました。

世界観を優先したデザインではありますが、部屋の位置関係などは実際のイベント会場内とほぼ同一にしております。また、トイレや非常階段の表示もきちんと入れることで、会場案内用のMAPとして実際に活用できるよう制作いたしました。