キャンドルナイトイベントのデザイン創作＆デジタル創作共創支援のご紹介(CandleNight@Shinjuku2024)

こんにちは！GxPのすぎもんです。
この記事は[グロースエクスパートナーズ Advent Calendar 2024](https://qiita.com/advent-calendar/2024/gxp) の25日目(最終日)の記事です。

毎年恒例！Candle Night＠Shinjukuイベントのデザイン創作＆デジタル創作共創支援チームが今年もAdvent Calendar 2024のトリを務めさせていただきます。

今年のプロダクトは、2024年版への画面デザイン刷新と昨年までのプロダクト状況を踏まえた見直し企画を行った上で、新たな機能開発及び改修を行いました。
また、キャンドルイベントのチラシ及びデジタルサイネージ用のデザイン創作を今年も行いました。
本記事では、
『2024年版オンラインプロダクト開発』と『2024年版チラシデザイン創作』について
各チームメンバーからの苦労話や所感などをお伝えできればと思います。

## **【チームメンバーと役割】**
- すぎもん：プロジェクトリード(内外関係者との各種調整協議、仕様調整、プロダクト全体の品質検証/FB)
- ヨネ：2024年企画素案検討
- オノ：2024年企画素案検討、デザイン担当(画面デザイン＋イベントチラシデザイン＋鑑賞モニターPOP装飾)
- Hanさん：デザイン担当(画面デザイン＋イベントチラシデザイン＋鑑賞モニターPOP装飾)
- キムさん：デザイン担当(画面デザイン＋イベントチラシデザイン＋鑑賞モニターPOP装飾)
- とみー：開発メンバー（開発チームリーダー）
- モニコ：開発メンバー（新機能開発）
- オクガワ：開発メンバー（機能改修１）
- ウメ：開発メンバー（機能改修２）
- のぶ：開発メンバー（機能改修３）

## **【目次】**
- **イントロ** 
    これまでのイベントのご紹介（written by すぎもん）
- **プロダクトの企画** 
    プロダクト素案企画について（written by ヨネ＆オノ）
    2024年プロダクト企画ワークショップ（written by オノ）
- **24年版のデザイン**
    イベントチラシ・鑑賞モニターPOP・プロダクトUIデザインについて（written by オノ＆韓＆金）
- **24年版 新機能開発**
    デジタルぬり絵機能の拡張『スタンプ機能』の開発（written by モニコ）
- **2024年の総括と2025年以降に向けて**
    2024年の総括と2025年以降に向けて（written by すぎもん）

# :candle:イントロ:candle:
- 2020年より「CandleNight @ Shinjuku Central Park」のイベント共創に参画し、オンライン側面からイベント盛り上げに協力させていただいている本取り組みも、今年で５回目となりました。
毎年、チームメンバーと協議し新しい機能を企画・開発して提供に至るまでの一連プロセスを継続出来ているのは、チームメンバー１人１人の「良いものを作りたい」「一緒にイベントを成功させて地域に貢献したい」という強い想いの賜物だと思っています。

 - これまでの歩みは以下にリンクをまとめておりますので、ぜひ合わせてご一読いただけますと幸いです。
 
:::note info
※これまでのキャンドルイベンプロダクト開発は下記をご参照ください
2020年12月 Candle Night @ Shinjuku Central Parkイベントへのプロダクト提供
[『新宿中央公園キャンドルナイトの塗り絵用投稿・鑑賞サイトについて』](https://qiita.com/rando-gxp/items/979a79371d79f08e7472)
2021年12月 Candle Night @ Shinjukuイベントへのプロダクト提供
[『2021年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku) ～canvasとの闘いを乗り越えて～』](https://qiita.com/guest-gxp/items/18ed57270aff82cfea80)
2022年12月 Candle Night @ Shinjukuイベントへのプロダクト提供
[『2022年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku)』](https://qiita.com/guest-gxp/items/ac5719b514db746d0e9f)
2023年12月 Candle Night @ Shinjukuイベントへのプロダクト提供
[『2023年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku)』](https://qiita.com/guest-gxp/items/6f980e5f7aa471e36bb1)
:::

### 今年のイベントプレスリリースのリンクとイベントチラシは以下に記載の内容となります。

- 小田急電鉄株式会社 ([プレスリリース](https://www.odakyu.jp/news/vdgv2e0000001o4b-att/vdgv2e0000001o4i.pdf))
- 京王電鉄株式会社 ([プレスリリース](https://www.keio.co.jp/news/update/news_release/news_release2024/pdf/nr20241119_candlenight.pdf))
- 西武鉄道株式会社 ([プレスリリース](https://www.seiburailway.jp/file.jsp?id=23339))
- 東京地下鉄株式会社 ([プレスリリース](https://www.tokyometro.jp/news/images_h/metroNews241119_g45.pdf))
- 東日本旅客鉄道株式会社 ([プレスリリース](https://www.jreast.co.jp/press/2024/20241119_ho03.pdf))
- グロースエクスパートナーズ株式会社 ([プレスリリース](https://www.gxp-group.co.jp/cms/sites/default/files/2024-12/20241126_press_ghd.pdf))

(イベントチラシ表面)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/6781d5f9-2349-a344-4edd-bbe98e616141.png)

(イベントチラシ裏面)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/2bccafd9-9b5b-8952-d404-f5dfc9eb4558.png)

### 2024年 現地イベント会場の様子

(東会場)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/c761aeff-49eb-e551-9a5f-01926b2379b2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/ef406388-d7f4-633d-e416-05c6c9ca0aa1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/8f92f645-3a01-201a-f502-8bd6752271fb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/68ef48da-80e0-635f-6bb9-4a4d61bd84d7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/a37cccdd-3e3b-a2b5-3aa4-287ac6dfd138.png)

(西会場)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/27d2e7bf-c004-3eec-7782-36f62ce5b85e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/9693bd5c-6bb2-6a0b-bd52-2b795b230b2e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/ddb9e233-d730-969e-0bf7-23383ab3b51f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/47a8655e-16cb-b4d6-aa40-edb8ebd07c60.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/1daeeda7-21b9-3ac4-4579-a9f1171e6c97.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/8fb36efd-274a-2373-2fe3-b79b451abcc7.png)


【オンライン投稿されたぬり絵(デジタルキャンドル)もイベント会場を飾りました】
(東会場)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/b9ebde2c-e932-8479-e6e4-68cb4686edca.png)
(西会場)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/ca483215-e8f4-8ed4-ce11-02442802b15e.png)

# :candle:プロダクトの企画:candle:
2024年キャンドルナイトプロダクト開発に向けて、今年も企画素案をヨネさん＆オノさんに検討いただいた上、それを元にヨネさん＆オノさんが中心となってワークショップをリードしていただきました。
以下のパートは、そんなお二人に執筆いただきました。

### プロダクト素案企画について（written by ヨネ＆オノ）
キャンドルナイトは年々参加者は増えているものの、まだまだリアル中心のイベントという課題がありました。
なので今年は、オンラインのキャンドルナイトがどうしたら盛り上がるのかの施策をワークショップでみんなで案を出し合い、「アプリのUXの向上」「協賛の人たちに働きかけること」を今年の目標としました。

### 2024年プロダクト企画ワークショップ（written by オノ）

- 昨年開催した際のアンケート結果やイベント会場の様子などを踏まえて今年のキャンドルナイトオンラインプロダクトをよりよくするためのアイデア出し～企画まとめのワークショップを実施

ワークショップではプロダクトのUXを向上させるために、「ユーザーが使いたくなる仕組みを作る」「アプリの使用感の改善」「アプリの認知を度向上させる」の3つのテーマでメンバーで意見を出し合いました。 
![ゴールを設定する.jpg.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/6b96a1b9-8549-3419-4b29-8be0450da6f6.jpeg)

### 所感

私はワークショップを主催するのは初めての経験で、最初は何をテーマに話し合うべきなのか悩みましたが、アプリユーザーの満足度を上げるにはどうしたら良いか、また何について意見を集めるべきかを考え企画を立ててみました。
実際にワークショップを進めてみて、時間の使い方やファシリテーションがまだ上手くいかないと感じる時もありましたが、ヨネさんにサポートしていただきながらワークショップを進め、チームの皆さんとディスカッションすることができました。


# :candle:2024年版のデザイン:candle:
キャンドルナイトオンラインデジタルプロダクトは、一般のイベント参加者に向けより親しみをもっていただきたいので、デザイン担当メンバーとも一緒に企画・開発を行っています。
今年は、新メンバーのHanさん、キムさんも加わりイベントチラシやデジタルサイネージのデザインもGxPにて担当させていただきました。
以下のパートは、オノさんとキムさん、Hanさんに執筆をいただきました。
<br>
**オノ（デザインコンセプト、チラシ担当）:**

![スクリーンショット 2024-12-13 18.33.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/37d58fad-df5d-1fad-b8a3-b7e3b33f1678.png)

 - 今年のキャンドルナイトのコンセプトが「20年間続く街づくりの始まり、期待感」ということで、それに合うようなデザインコンセプトを考え、チラシをデザインしました。上にあるものが実際にデザインしたチラシです。

**チラシに込めた想い： **
老若男女全ての人々が想いを込めたキャンドルが新宿の街を彩っているデザイン。このイベントに参加することで、未来の新宿の街づくりにも繋がっていくことを表現しています。

当日のイベントはどんな人がいるでしょうか…？
親子、恋人、友達と来る人、ひとりで来る人、色々な人がいると思いますが、それぞれの楽しみ方でキャンドルナイトのイベントに参加する様子が伝わるようにイラストを描いています。

ではここからは、今回から初参加したキムさんにバトンタッチ↓
***
**キム（イベントチラシ、モニター飾りPOP担当））:**

イベントチラシ、POP担当したキムです。

**苦労したこと:**
 - 今回、「チラシの入稿データ作成」と「モニター飾り用POP」の制作を担当しました。

![image_720.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/4a6ecac3-f954-a0fe-98fa-79710edb3a74.png)

チラシデザイン案の提案では、会場の写真とイラストを組み合わせ、夜空の雰囲気を表現したデザイン案を提案しました。その後、採用されたデザインの入稿データを作成しました。
 - 入稿データをA4、A3、A1の各サイズに合わせて調整を行いました。サイズごとにパーツの大きさを調整する作業が難しく感じられる場面もありましたが、それぞれのサイズに最適化されたレイアウトに仕上げました。また、デザイン全体のバランスを維持しながら視認性を高めるため、細部にも注意を払って調整を行いました。
 - モニター飾りPOPにおいては、最初に全体の構想を考え、チラシのパーツをどのように組み合わせれば雰囲気を引き出せるかを考えました。最終的には「キャンドルナイト舞踏会」のようなイメージを基にデザインを進めました。ただし、パーツが多くなりすぎてしまったため、ハレパネをカットする作業に時間がかかりましたが、制作過程自体はとても楽しかったです。

**所感:**
- 今回のようなイベント制作に携わるのは初めての経験でしたが、年末らしい温かい雰囲気の中でデザイン作業を進めることができ、とても楽しいものでした。普段はFigmaを中心に作業しているため、Illustratorを使用したチラシやPOP制作は新鮮で、とても良い学びの機会となりました。

ではここからは、Hanさんにバトンタッチ↓
***
**Han  (アプリUIデザイン、デジタルサイネージデザイン担当):**

アプリUIデザイン、デジタルサイネージデザイン担当した韓です。

![スクリーンショット 2024-12-13 18.30.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/b89a331a-39c6-2f6f-22f9-f61613a5688c.png)

**苦労したこと:**
 - 今回の小田急キャンドルナイトアプリのデザイン制作は、初めて一つのページ全体を担当する経験でした。デザインを進める中で、実装の可能性を考慮しながら進める必要があり、バランスを取るのが難しかったです。それまで実装のことを深く意識したことがなかったので、デザインが開発にどんな影響を与えるのかを理解するのに時間がかかりました。
 - キャンドルナイトの持つ温かさや幻想的な雰囲気をデザインに取り入れるために、配色やレイアウトにかなり悩みました。さらに、アイコンの制作にも力を入れ、全体の雰囲気に合うように細部まで気を配りました。

**所感:**
- 今回の経験を通して、デザインを考える上で実装を意識することの大切さを学びました。これまであまり考えていなかった技術的な制約や条件についても理解が深まり、新しい視点を得ることができたと思います。
細かい部分にこだわることで、デザインの完成度がさらに高まることも実感しました。これからはデザインと実装の両方を考えながら、より使いやすく、魅力的なアプリを作っていきたいと思います。
# :candle:24年版 新機能開発:candle:
続いて **デジタルぬり絵機能の拡張『スタンプ機能』の開発** について、当機能の開発を担当してくれたモニコさんに以下のパートの執筆をいただきました。

### 機能概要

塗り絵画面にスタンプ機能を追加しました。「スタンプ」ボタンを押下後、使いたいスタンプを選択、塗り絵台紙部分を押下することでスタンプを押すことができます。スタンプ画像はデザインチームに用意して頂きました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912430/9dc682ed-7da2-edcc-bbc0-6d7cc82fca83.png)


### 苦労したこと

特に苦労したのは当該機能の検証作業だったかなと思います。当初はJavaScriptのcanvasでどこまで機能実現できるか不明瞭だったこともあり、PowerPointの図形機能をベースにスタンプの追加・移動・拡大・縮小・削除などをかたっぱしから実装・検証していきました（あらかた実現はできそうでした）。canvasを本格的に触ったのは今回が初めてだったこともあり、模索しながら作業していたので一番苦労したかなと思います。結果的に実現できた機能をベースにチーム内でUI・UXの観点から必要な機能を選定して、現在の形に落ち着いたのでよかったです。

### 所感
これまで本格的にJavaScriptのcanvasを扱った経験があまりなかったので、今回の機能追加に伴い、いろいろ検証できたのは良い経験になりました。
また、ここ半年間くらいはインフラ・バックエンドメインの作業が実案件で多かったこともあり、久しぶりのフロントかつCSSのデザイン調整にも関われて良い刺激になったので良かったです。

# :candle:2024年の総括と2025年以降に向けて:candle:
- 2018年から始まったキャンドルナイトイベントは今回で７年目、我々グロースエクスパートナーズがイベント共創支援として参画させていただき、デジタルプロダクト提供をさせていただいてからは５年目を迎えました。
毎年チームのメンバーと共に本取り組みを”継続”出来ていることは意義深いと認識をしています。
この『CandleNight@Shinjuku』のイベントは、年々協力団体も増えているので、今後はより協力団体との関係性を強め一緒にイベントを創っていけるような枠組みを我々としてはオンラインの仕組みで支援出来ないかということを考えてみたいと思っています。
 - 2025年以降も、頼もしく心強いチームメンバーと一丸となって、更に新宿のまち・地域の盛り上がりに貢献できるようなサービス・プロダクトの企画開発が行えるよう精進して参りたいと思います。