FRONTEND CONFERENCE OKINAWA 2023

Creative Direction

neccoのデザイナーがそれぞれデザイン案を制作。社内コンペからサイトができました

フロントエンドカンファレンス沖縄2023のイベントサイトのデザインと実装をneccoで担当しました。本サイトのデザインは、neccoでまれに開催する全デザイナーが参加する社内コンペ「ブレイキングデザイン」から生まれました。今回はご依頼いただいた株式会社Re:Buildさんからも1名コンペに参加いただき、Re:Buildの皆さんの投票でデザインが決定しました。

決定した案を制作したデザイナーがさらにブラッシュアップを行い、メインビジュアルから下のセクションをあわせてデザインしています。

沖縄で開催されるイベントにふさわしくなるよう、楽しくにぎやかな様子を鮮やかで美しい海をモチーフに制作。キービジュアルをベースにしたデザインを、イベントグッズにも展開しました。

Design

「沖縄で開催されるフロントエンドのお祭り」をテーマにした、当日が楽しみになるデザイン

デザインのコンセプトは「沖縄で開催されるフロントエンドのお祭り」とし、見た人が「参加したい！」と直感的に感じられるようなデザインを目指しました。背景の青に映えるカラフルなサンゴやウミガメなどのイラストを用い、沖縄らしさ、お祭りの華やかさを表現しています。

ウェブサイトでは、スクロールに応じてジンベエザメやクマノミなど、沖縄の海の生き物が続々と登場するデザインを作成しました。エンジニアさんによる自然なアニメーションの実装も加わり、静止画以上に生命力が感じられる、楽しいウェブサイトになりました。

バナースタンド、Tシャツ、オンライン配信画面のデザインなども制作を担当し、イベント前はもちろん、当日の会場・配信も楽しんでいただけるようなデザインを作成しました。

Development

STUDIOのアニメーション機能を活用し、ゆったりとした動きを演出

STUDIOの「出現時アニメーション」機能を利用し、ページ全体に、海底からフワっと泡が立つような、ゆったりとした動きを持たせました。また、可愛らしくも荘厳な海の生きものたちにもアクセント的な動きを持たせて、彼らのおもてなし力を借りています。
出現時アニメーションの特徴として、アニメーションが数秒間の一度きりの再生になります。このため、動きを持たせつつも、落ち着いて内容を閲覧できるランディングページに仕上がりました。
コンテンツ部のPCデザイン実装時はFigma to STUDIOプラグインを利用し、デザインをそのままSTUDIOに反映できました。

ほとんどの実装はノーコードで実現できましたが、STUDIO単独では実現できない、ページ全体へのザラついた画像表現や、上下のスクロールに追従してヘッダーが出たり消えたりするような表現には、カスタムコード機能を利用しました。
ノーコードのスピード感と、カスタムコードの自由度を組み合わせた、ハイブリッドな実装になりました。

見たまま編集がSTUDIOの魅力ではありますが、更新用マニュアルも作成して、さらに安心して運用できるページに仕上げました。

Client Voice

イベントのイメージに近いデザインで、
参加者の方にも好評でした

まず納期がタイトな中でサイト制作を引き受けて頂き感謝しております。
今回はお忙しい中、コンペ形式で複数のデザイン案を出して頂き、よりイベントのイメージ(沖縄、IT、海など)に近しいデザインを選べたと思います。
また、イベントのTシャツやスタンドバナーも作成して頂き参加者の方にもとても好評でした。
またイベントを開催する際にはご相談させてください！

フロントエンドカンファレンス実行委員長
鈴木 孝之