【個人開発】学生イベントのホームページ開発で気づいたこと

4回生の夏〜秋にかけてある学生イベントの宣伝、予約の受付を目的としたホームページを作成しました。
この記事ではその中での経験を振り返りたいと思います。

つまずいた点や気づいたことがたくさんあったので、今後同じような開発をする人に少しでもお役に立てればと思います。

<h1>自己紹介</h1>
こんな人が開発したというお話です。ご参考までに。

<ul>
    <li>
    文系学部4回生
    </li>
    <li>
    2回生のとき興味でプログラミングを始める
    </li>
    <li>
    個人開発でアプリを数個作った
    </li>
    <li>
    普段はフロントエンドを触ることが多い
    </li>
</ul>
<h1>背景</h1>
大学の授業の一環で、子どもを対象とした異文化体験イベントを開催することになりました。
<br>
<br>
その活動が始まったのが4月。そこから具体的なイベント内容を練って、日程と会場を決定、体験ブースの準備をして11月に本番という流れです。
<br>
<br>
そして、ここにもう一つ<b>広報活動</b>という重要な作業がありました。
<br>
このイベントは地域貢献目的なので利益は必要ありませんでしたが、それでも開催する以上は来てもらわないと意味がありませんね。


<ul>
    <li>
    興味を持った人がイベントの詳細を見られるようにしたい
    </li>
    <li>
    定員のあるブースや開催コストの大きいブースは予約を受け付けられるようにしたい（予算が多くないので、、泣）
    </li>
</ul>
でした。
<br>
<br>
<br>
あわよくばエンジニアとして何か経験を活かせないかな、とか思っていた私は予約フォームを兼ねたホームページを提案し、色々と相談した結果、開発を担当させてもらうことになりました。（もちろん他の作業もそれまで通りやっていましたよ）


<h1>制作物</h1>
<h5>ランディングページ</h5>

![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1188685/aaf5b487-8151-52f8-ac8a-4984d3c2ca97.gif)![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1188685/63f1bde9-5fd8-9047-78f8-e07d1e2b6166.gif)

<h5>予約ページ</h5>

![Screen Shot 2022-12-09 at 18.24.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1188685/2baaf899-07c4-8ec7-d30b-2c684811267c.png)![Screen Shot 2022-12-09 at 18.24.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1188685/06d02f9a-414d-db86-99ac-d1ad8bf2fffb.png)

予約が完了するとメールが送られる

![Screen Shot 2022-12-09 at 18.32.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1188685/44ecd991-8c82-699b-cf69-a304917c3151.png)


<h1>使用した技術</h1>
後日追記します。

<h1>反省点と気づいたこと</h1>
<ul>
    <li>
    <b>ターゲットをよく考えて開発する</b>
        <ul>
            <li>
            一番大事です。
            </li>
            <li>
            特にデザイン面は今回の大きな反省点です。個人開発とは違って、ただ自分の思う「オシャレ」なデザインを見せつける場ではないです。自己満足的なデザインから抜け出せない形になってしまいました。
            </li>
            <li>
            「子ども向けのポップな感じを残しつつ大人が見やすいシンプルなもの」を意識したが、逆に整い過ぎていて（商業的すぎる？）学生イベントならではの身近さを感じられない、親しみを持ちづらいものになってしまいました。
            </li>
           <li>
            何が求められているかをエゴ抜きで考えるのは難しい。
            </li>
        </ul>
    </li>
    <li>
    <b>優先順位を明確にする</b>
        <ul>
            <li>
            組織の一部としてやる以上優先順位をつけて作らないとみんなに迷惑をかけます。
            </li>
            <li>
            予約フォームの実装が求められているのに、過剰なレスポンシブ対応で公開を遅らせてしまったりしました、、
            </li>
           <li>
            何が求められているかをエゴ抜きで考えるのは難しい。
            </li>
        </ul>
    </li>
    <li>
    <b>作業の締め切りを早めに設定する</b>
         <ul>
            <li>
            最初から完璧な見積もりを立てるのは難しいので遅れが生じても問題ないような計画にするべきでした。
            </li>
            <li>
            急な変更や機能追加の要望が出てきたりします。修正とかも。
            </li>
            <li>
            純粋な開発以外にやるべきことが次から次へと出てきます。ロゴの使用申請で数日待ったり、各体験ブース担当のメンバーにブース紹介文を募ったり、公開にあたって各所から許可待ち、、などやはり自分の都合では進められない場面が多かったです。
            </li>
           <li>
            何気に画像探しにすごく時間がかかりました。デザインの時点で使う画像を決め切っておいた方がいいです。
            </li>
        </ul>
    </li>
    <li>
    <b>あれこれ付け足さない、必要最低限（MVP）を心がける</b>
         <ul>
            <li>
            今回特に反省しています。MVP(Minimal Viable Product)については散々聞いていましたが、どこか他人事でした。。
            </li>
            <li>
            十分必要最低限に削ぎ落としたつもりでしたが、「ホームページとして公開する以上恥ずかしくないものを作らないと」という思いが捨てきれませんでした。
            </li>
            <li>
            その結果、公開前にいやあれも、と付け足しを繰り返し、予定よりも1ヶ月程度遅い後悔となりました。
            </li>
            <li>
            本当にこれだけでいいの？という時点で公開してしまう方が良かったと思います。そこから相談して付け足していく感じで。
            </li>
        </ul>
    </li>
</ul>
<br><br>
個人的な一番の学びは、<b>普段の個人開発から上記の点を心がけていないと、必要な時にいきなり実践できない</b>ということですかね。正直今回の反省点のほとんどが普段から「そんなの当たり前やん」と思いつつ、個人開発ではそこまで気にしなくてもいいやと蔑ろにしていたものした。必要に迫られればできるものだと思っていましたが、やはり日常的な実践が必要ですね。

<h1>ホームページに「集客効果」はあったのか？</h1>
予約フォームとしての役割はしっかりと全うしたこのホームページですが、果たして集客面で効果はあったのでしょうか？
<br><br>
結果的には、<b>効果はあったが他の宣伝方法との相乗効果で、手間を考えると効果は薄い</b>といった感じでした。
（効果の薄さはホームページの内容やクオリティのせいでもありますが、、笑）
<br><br>
まず相乗効果という部分。　チラシやSNS → ホームページ → 予約　という流れがある程度成功し、より多くの人に知ってもらうことができました。
<br><br>
特にチラシからホームページへのコンバージョン率は単純計算で5％超え（驚異的）で、<b>チラシで興味を持ってくれた多くの人に対して更なる情報を提供することができました。この点だけでも効果はあったと言えます。</b>
（ただ裏を返せば、ホームページは見てもらうためにもうひと広告必要になります。詳しくは後述します）
<br><br>
が、労力と効果を考えると断然チラシの方がコスパが良かったです。私は開発をしたくてホームページを提案し、他の広報活動に加えて時間外で勝手に作っていたので良かったですが、時間が限られていたらチラシ／SNSを選んでいたと思います。<b>実際来場者はチラシきっかけが大半でした。</b>


<h1>ベストな宣伝方法を考える</h1>
イベントを終えてみると、宣伝媒体を決める時点で集客勝負の半分ぐらい決まってたのでは？と思います。
マーケティングのプロでもなんでもありませんが、個人的に感じたことを書きます。
<h3>イベント規模から考える</h3>
大規模でない限り、そもそも<b>ホームページは本当に必要なのかどうか</b>は最初に考えた方がいいかもしれません。
<br><br>
大体の小規模イベント、特に単発開催のものは<b>まず存在を認知してもらうことが何より大事</b>であり、そこが最も優先して取り組まなければならない部分だからです。
<br>ホームページはどうしても受動的なので、まず何かでイベントの存在を知り、そこで興味を持ってくれた人が見てくれます。
<br><br>
ホームページは参加者、関係者からの信頼獲得や、イベントに実際に行く決断をさせるような詳細情報を与えるのには魅力的だと思いますが、そこに誘導するためにはまずチラシやSNSなどで「存在を知ってもらう」広報活動が必須です。それをホームページ開発と両立できる余裕があるかを考えるべきです。
<br><br>
そういった意味で、小規模イベントには要らない場合も多いのかな、と率直に感じました。

<br>逆にいうと、既に認知されているイベント、例えば大学の学祭などはホームページでの集客効果が高いと思います。

<h3>ターゲットの性質から考える</h3>
ターゲット層となる人の目につく可能性が一番高いのはどこで、どのような情報が最も効果がありそうかに基づいて宣伝方法を選ぶのも手だと思います。
<br><br>
今回のイベントの場合来て欲しいのは子ども（特に地域の小学生）で、であればその親御さんがメインのターゲット層です。この「会場付近の小学校に通う子供がいる人」に効果的な宣伝方法を考えた結果、
<br>
チラシ／フリーペーパーとSNSで宣伝 → そこからホームページに誘導
<br>
という形になりました。
<br><br>
SNSだけでも全国の多くの人に見てもらうことができ有効な宣伝手段だと思いますが、<b>ある地域の人に確実に宣伝するには未だチラシや張り紙が最強</b>だと感じました。渡せさえすれば絶対に狙った層に見てもらえるので小規模イベントでは特に効果大です。実際当日来てくれた方も「チラシ見たよ〜」という人が圧倒的に多かったです。
<br><br>
ホームページについては、小さな子どもを連れていくイベントなので信頼性が必要ではないかという点<del>（と作りたいという私の熱望）</del>から選びました。
<br>
ランディングページから予約へのコンバージョン率が低かったことを踏まえると、集客効果自体は正直コスパが悪かったと言えそうですが、
<br>活動にあたり学生の立場から外部組織に協力を依頼したり後援、取材をお願いする機会が多かったため、結果的にはそこでの信頼確保には役立ったかも（？）


<br><br>
学生イベントだと
ちなみに、ホームページを作る場合、改めて<b>ターゲットとなる人がページを訪問する場面をしっかり想定してデザインするべき</b>だと感じました。

今回はデザイン段階からモバイルファーストで作りました。
その理由として、ターゲット層の性別や年齢層的にスマホが多そうだったというのに加え、
今回使った宣伝方法のうちチラシが最も効果があると予想していたので、ホームページへもチラシに載っているQRコードからの流入が多そうと踏んでいたのです。（やったね！）
<br>
<h5>ホームページへの流入経路の割合</h5>

![Screen Shot 2022-12-09 at 22.12.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1188685/64366829-e846-2260-79d4-e560ccc5fcd3.png)

<i>Direct：直接来た人
Organic Search：（広告じゃない）検索結果から来た人
Organic Social：（広告じゃない）SNSから来た人
Referral：他ページのリンクから来た人
</i>

今回の場合Direct（直アクセス）は基本的にQRコード経由と考えられるので、チラシで興味を持ってくれた人が多いことが分かります。
<br>
<h5>端末タイプによるホームページ閲覧の割合</h5>

![Screen Shot 2022-12-10 at 1.17.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1188685/929da2a5-f589-6344-962b-1448f5fa96c5.png)

そして、結果的にモバイル端末からの訪問が多い結果となりました。上記2つのグラフから仮説どおり、
「チラシからのサイト訪問が多く、それはスマホでのQR読み込みによるもの」
だったと推定できます。


<h1>終わりに</h1>
記事を最後まで読んでくださった方の中には「会社で開発する上で当たり前のことばっかりやん！！」と思った方もいるかもしれませんが、本当にその通りで職業エンジニアとして働き始めるにあたって必要なことを学ぶ良い機会でした。自分の仕事を開発だけに制限せず、柔軟に対応できる良いエンジニアを目指したいですね。