Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

グロースエクスパートナーズAdvent Calendar 2023

Day 25
@guest-gxp(（ゲスト） グロースエクスパートナーズ株式会社)inグロースエクスパートナーズ株式会社

2023年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku)

Last updated at Posted at 2023-12-25

こんにちは！GxPのすぎもんです。
この記事はグロースエクスパートナーズ Advent Calendar 2023 の25日目(最終日)の記事です。

毎年恒例！Candle Night＠Shinjukuイベントのオンラインプロダクトチームが今年もAdvent Calendar 2023のトリを務めさせていただきます。

今年のプロダクトは、2023年版への画面デザイン刷新と新たに機能開発を行いました。
本記事では、
今年開発のプロダクト機能についての紹介や開発メンバーからの苦労話などをお伝えできればと思います。

【チームメンバーと役割】

  • すぎもん：プロマネ(内外関係者との各種調整協議、仕様調整、プロダクト全体の検証/FB)
  • ヨネ：デザイン担当(画面デザイン＋イベントチラシデザイン＋鑑賞モニターPOP装飾)
  • オノ：デザイン担当(画面デザイン＋イベントチラシデザイン＋鑑賞モニターPOP装飾)
  • とみー：開発メンバー（開発チームリーダー）
  • オクガワ：開発メンバー（企画ファシリテーション）
  • モニコ：開発メンバー（新機能開発１）
  • ウメ：開発メンバー（新機能開発２）
  • のぶ：開発メンバー（新機能開発３）
    ※オノさん、モニコさん、ウメさん、のぶさんは今年参画の新メンバー

【目次】

  • イントロ
    これまでのイベントのご紹介（written by すぎもん）
  • プロダクトの企画
    プロダクト企画ワークショップについて（written by オクガワ）
  • 23年版のデザイン
    イベントチラシ・鑑賞モニターPOP・プロダクトUIデザインについて（written by ヨネ＆オノ）
  • 23年版 新機能開発１
    デジタルプロダクトからSNS「X」への連携機能（written by モニコ）
  • 23年版 新機能開発２
    みんなの想い事鑑賞機能（written by ウメ）
  • 23年版 新機能開発３
    自分だけのデジタルキャンドル閲覧機能（written by トミー＆のぶ）
  • 2023年の総括と2024年以降に向けて
    2023年の総括と2024年以降に向けて（written by すぎもん）

:candle:イントロ:candle:

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

  • これまでの歩みは以下にリンクをまとめておりますので、ぜひ合わせてご一読いただけますと幸いです。

※これまでのキャンドルイベンプロダクト開発は下記をご参照ください
2020年12月 Candle Night @ Shinjuku Central Parkイベントへのプロダクト提供
『新宿中央公園キャンドルナイトの塗り絵用投稿・鑑賞サイトについて』
2021年12月 Candle Night @ Shinjukuイベントへのプロダクト提供
『2021年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku) ～canvasとの闘いを乗り越えて～』
2022年12月 Candle Night @ Shinjukuイベントへのプロダクト提供
『2022年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku)』

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

(イベントチラシ表面)
cn2023表.png

(イベントチラシ裏面)
cn2023裏.png

2023年東会場の様子

IMG_1447.jpg
IMG_1449.jpg
IMG_1432.jpg

【オンライン投稿されたぬり絵(デジタルキャンドル)と想い事もイベント会場を飾りました】
IMG_1442.jpg

:candle:プロダクト企画ワークショップについて:candle:

2023年キャンドルナイトプロダクト開発に向けて、新規コンテンツ案のワークショップを実施しました。
ワークショップのファシリテーション・とりまとめは、オクガワさんが中心となりチームをリードしていただきました。
以下のパートは、そんなオクガワさんに執筆いただきました。

ワークショップ内容

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

開催内容

事前

  • チームメンバーには、アンケート結果に目を通してもらい、今回のワークショップ内容を事前に共有

一日目

  • 20分　ボードに案出し。（主にアクションを出していただく予定）
    • 例：ライトを大量購入する。
  • 20分　全体を見ながら、深堀したいものや気になるものがあれば検討。
  • 20分　出た案に対して、グループピングをする。(改善、新規の催し、会場の改善etcの予定)

二日目

  • 10分　アイスブレイク。思い出し。
  • 20分　出ている案からやってみたいのをスタンプ等で募る。複数可
  • 30分　注目度が高かった案に対して、＋αの意見や案をやったことに対して幸せになるターゲット層などはどこにあるかなどを会話

所感

案出しフェーズでは、文章だけでなくイラストで表したり、他のメンバーの意見にプラスで案を発展させていったりと盛り上がりました。

ワークショップを開催するにあたって個人的に大切だなと思ったのは以下でした。

  • ワークショップでの決めたいことやゴールを明確にする
  • 意見を出しやすい環境や雰囲気を作る
  • 出た案のいいねポイントを見つけてマイナス発言はしない

ワークショップ経験がない私でしたが、経験者の意見や調べるなどして事前準備やプログラム等を決め、メンバーのノリの良さもあり、ゴールまで無事にたどり着けたのがよかったです。
ここで出た案は今回のキャンドルナイトでいくつか実際に採用されているので今年は大いに貢献できたと思います。

:candle:イベントチラシ・鑑賞モニターPOP・プロダクトUIデザインについて:candle:

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


ヨネ（デザインコンセプト、チラシ、サイネージ担当）:

  • 昨年までは学生の方が作ったチラシを元にWEBアプリのデザインをおこしていましたが、今年はデザインコンセプトのご提案から、チラシやサイネージのデザイン、WEBアプリの画面UI、現地で使うPOPまでデザイナーの方で担当させていただきました。

  • デザインコンセプトを考える前に、まずイベントの情報を整理するところからはじめました。いざ情報を付箋に書き出してみると、結構自分がふんわりと解釈していたことに気付き・・このプロジェクトに参加するようになって早3年たちますが、ちゃんと情報を深堀できてなかったことを反省…。

  • 一人じゃ迷うことも多かったので、その都度チームのみんなに「これはどういう意味で捉えてましたか？」「どういうイメージありましたか？」など、意見を聞きながら情報をまとめていきました。


（こんな感じでFigjamに付箋をペタペタ貼りながら情報をまとめていきました）

キャンドルナイト～チラシデザインについて①.png

（まとめた情報を元に、最終的にデザインに盛り込む要素を決定）

キャンドルナイト～チラシデザインについて②.png

  • チラシデザインは2案ご提案して、以下のコンセプトで作った１番のファミリー向けデザインが採用になりました。
  • ぬり絵を巻いたキャンドルを「人の多様性」の象徴として位置づけ、キャンドルたちが東西をつないで「輪」をかたどるレイアウトにすることで、人々の「和」をイメージさせるデザインです。こちらの案ではぬり絵の楽しさや、キラキラした人々の「希望」を表現しています。
  • 電車のモチーフは企業色を感じさせない程度にグランドコンセプトである「新宿想い線」の両側にいれています。コンセプトの左右にいれることで、毎年開催されるこのイベントの「過去」と「未来」をつなぐイメージも表現しています。

キャンドルナイト～チラシデザインについて③.png

  • GxPではあまりやることがない紙もののデザインですが、限られた紙面の中で情報をいかに分かりやすく過不足なく表現するかを考えるのは、WEBとはまた違った楽しさがありました。

ではここからは、今回から初参加したオノさんにバトンタッチ↓

オノ（WEBアプリ画面UI、POP担当）:

プロダクトの画面デザインを担当したオノです。
ヨネさんが作成されたチラシのイメージに合うように、Figmaを使って画面をデザインしました。

苦労したこと:

  • 最初に考えたデザインは時間が限られていたということもあり、去年使用した画面レイアウトを基本として考えたとてもシンプルなものでした。
  • こちらを見ていただいてアドバイスをいただいたところ、「もっと得意なやり方で楽しくやりたいようにやってみて」ということを言っていただきました。
  • もっと自由に…？どうしようと悩み始めてしまったので、まずは「クリスマスが近づくワクワク感」を個人的なテーマに据えてデザインをしてみよう！と決めました。
    チラシのデザインもあったので、そこからはイメージが固まるのが早かったです。

所感:

  • こういったイベント系のwebアプリのデザインは初めての経験でしたが、クリスマスが近づくワクワク感や、夜に輝くキャンドルのイメージでデザインを作成するのはとても楽しかったです！

:candle:デジタルプロダクトからSNS「X」への連携機能:candle:

続いて SNS「X」への連携機能 について、当機能の開発を担当してくれたモニコさんに以下のパートの執筆をいただきました。

  • 今回はX(旧Twitter)への投稿機能を実装しました。
  • SNS投稿自体は投稿ボタンに下記のリンクを設定することで実現しています。
-- PC用
http://twitter.com/intent/tweet?text=${投稿内容}

-- スマホ用
twitter://post?message=${投稿内容}
  • 画像の投稿に関してはXのOGP(Open Graph Protocol)の設定の1つであるTwitter Cardを利用して実現しています。
    OGPとは、TwitterやFacebookなどのSNSで記事などがシェアされた際、下記のようにHTMLのhead要素にmetaタグを仕込むことでアイキャッチ画像やタイトル、説明（ディスクリプション）などを表示させることができる仕組みです。
<meta name=”twitter:card” content=”Twitterカードの種類” />
<meta name=”twitter:site” content=”@ユーザー名” />
<meta name=”twitter:domain” content=”ドメイン名” />
<meta name=”twitter:title” content=”Webページのタイトル” />
<meta name=”twitter:description” content=”説明（ディスクリプション）” />
<meta name=”twitter:image” content=”アイキャッチ画像のURL” />

  • 当初はVueアプリで持っているHTMLのmetaタグ部分を動的に設定することで各投稿ごとに表示する画像の切り替えを行う想定だったのですが、XのクローラーがJavaScriptによる動的なHTMLの書き換えを検知してくれない、つまりアプリ上では画像の表示設定自体は変更できても受け取り手であるX上ではそれを検知できないという問題があることが判明しました。

  • 解決策としてはあらかじめアプリ側に持たせておいた静的なHTML、あるいは動的に生成したHTMLのURLを投稿時にX上に渡してあげる必要があるとのことです。

  • そこで、今回はバックエンド側で動的に生成したHTMLを返却するAPIを作成することでこの問題を解決しました（サーバサイドレンダリング）。処理フローは以下の通りです。

  1. フロントの投稿ボタンから登録APIを呼び出し、DBに投稿内容（コメント・画像など）を登録
  2. 登録APIは投稿内容のユニークキーとなるパラメータをフロントに返却し、フロントはX投稿画面に遷移
  3. X投稿画面の「Xシェアボタン」押下時に投稿内容にHTML取得APIのURL（ユニークキーのパラメータを含む）を埋め込んでXアプリに遷移
  4. Xアプリ上の投稿画面にてXがHTML取得APIを呼び出す
  5. HTML生成APIがユニークキーをもとにDBから画像URLを取得し、その値を埋め込んだHTMLをXアプリに返却

image.png

  • XはAPIを介してメタタグがすでに設定されているHTMLを読み込むだけなので、↓のように無事画像の動的な切り替えを実現することができました。

image.png

:candle:みんなの想い事鑑賞機能:candle:

想い事を流す部分のことを書く

続いて 今年新たに想い事 について、当機能の開発を担当してくれたウメさんに以下のパートの執筆をいただきました。

機能概要

皆さんが投稿した新宿への「想い事」をキャンドル閲覧画面の下部に「みんなの想い事」として流す機能を新たに実装しました。

スクリーンショット 2023-12-20 133539.png

苦労したこと

特に苦労したのは、メッセージを流すアニメーションのスピード調整でした。文字の長さやメッセージ量によってスピードが変わるため、適切なバランスを見つけるのが難しかったです。調整したといっても先ほどの要因でまだ多少スピードにブレがあるのでこれらに依存しないようなアニメーション設定を模索するのは今後の課題です。

所感

これまで主に企業向けのシステム開発に携わってきましたが、今回のように一般の方々が使うシステムの開発は初めてでした。普段の業務とは違うユーザー層へのアプローチは、とても新鮮で楽しかったです！!

:candle:自分だけのデジタルキャンドル閲覧機能:candle:

最後に デジタルキャンドル閲覧機能 について、当機能の開発を担当してくれたトミーさんとのぶさんに以下のパートの執筆をいただきました。

  • 今年は、自分の描いたぬり絵のキャンドルを確認できるようにしました。
    image.png

  • 仕組みは簡単で、ぬり絵投稿時に端末を識別できる情報を合わせて送るようにしています。

  • また「端末を識別できる情報」にはUUIDを使用しています。
    UUIDを発行してlocalStorageに保存 → ぬり絵投稿時にぬり絵とUUIDをバックエンドに送信という流れになっています。
    ただ、ブラウザがプライバシーモードの場合にlocalStorageが使えない問題が出てきました。
    ブラウザの仕様のためどうしようもないため、プライバシーモードでは動作しない旨を注意書きする形に落ち着きました。

続いて、のぶさんからも一言！

  • 1年目かつ参加してからリリースまであまり時間がない中での作業でしたが、自分のタスクを消化でき、無事にリリースを迎えられて良かったです。
    来年もまた新機能の開発などがあると思いますので、次はどんなことをするのか、今から楽しみです。

:candle:2023年の総括と2024年以降に向けて:candle:

  • 2018年から始まったキャンドルナイトイベントは今回で６年目、我々GxPがイベント共創参画させていただき、デジタルプロダクト提供をさせていただいてからは４年目を迎えました。
    毎年チームのメンバーと共に本取り組みを”継続”出来ていることは意義深いと認識をしています。
    他方、社会環境はWithコロナ時代からPostコロナ時代へとほぼ移り変わりを終えており、毎年開催されているキャンドルナイトイベントやオンラインプロダクトの果たすべき役割も根本的なアップデートを考えなければいけないという課題認識も強くなっていると感じています。
  • 2024年以降も、頼もしく心強いチームメンバーと一丸となって、更に新宿のまち・地域の盛り上がりに貢献できるようなサービス・プロダクトの企画開発が行えるよう精進して参りたいと思います。
4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?