あけおめリンク

リンク

開発リポジトリ

https://github.com/diawel/akeome-link

https://github.com/diawel/akeome-link-cms

公開環境

https://akeo.me/

製品概要

背景(製品開発のきっかけ、課題等）

あけおめLINE、誰に送っていますか？

SNSの普及に伴い、若者を中心に年賀状を出す人が減少しています。これにより、「郵便受けを開けたときのワクワク感」や「一人ひとりのオリジナリティ」といった年賀状ならではの文化が薄れている現状があります。

近年、年賀状の代わりに一般的になっているあけおめLINEでは、疎遠になった人には送りにくかったり、写真や近況を伝える機会が減ってしまったりと、昔の年賀状が持っていた温かさや楽しさが失われていると感じる方も多いのではないでしょうか。

この課題の解決策として、年賀状のオンライン交換サービスを制作しました。

製品説明（具体的な製品の説明）

「あけおめリンク」ではスマホで簡単にオリジナルの年賀状を作成し、SNSでシェアすることで、あの頃のワクワク感を取り戻すことができます。このサービスでは、送りたい相手に向けてオリジナルの年賀状をデザインし、X（旧Twitter）やLINEなどのSNSを通じて気軽に共有することができます。受け取った相手は、共有されたリンクをクリックするだけで年賀状を受け取り、保存したり、必要に応じて印刷することも可能です。

あけおめLINEと比べて、「あけおめリンク」なら画像でオリジナリティを表現できたり、大人数にも一括で送ることができ、さらに印刷して手元に残すこともできるというメリットがあります。新しい形で、もっと楽しく新年の挨拶を送りませんか？

機能

送る側...サービス上でオリジナルの年賀状を作成し、SNSを通じて簡単に共有できます。

受け取る側...XやLINEなどの共有リンクをクリックすることで、相手からの年賀状を受け取り、保存し、必要に応じてネットプリントによる印刷も可能です。

UI（未実装内容を含む完成分）

特長

1. ステッカーや写真で簡単にオリジナル年賀状作成

自分の写真を自由に追加したり、豊富なステッカーから選んでデザインにアクセントを加えることができます。現在10種類のステッカーがあり、今後も続々と追加予定です。 また、「おみくじステッカー」という受け取った相手に運勢がランダムに表示される、遊び心満載の機能も搭載しています。5つの運勢から、何が出るかお楽しみに…！

2. 好きなSNSでリンクを共有

完成した年賀状は、リンクのコピー、X（旧Twitter）、LINEで共有したり、画像として保存するなど、好みの方法で友達や家族とシェアできます。自分のスタイルに合わせて、好きな形でシェアが可能です。

3. ネットプリントによる印刷も可能

受け取った年賀状は、デジタル保存だけでなく、ネットプリントで手軽に印刷も可能です。印刷を選ぶと、QRコードが表示され、簡単にプリントできます。デジタルでもリアルでも、年賀状を楽しんでもらえます。

4. 受け取った人もサービスを使いたくなる工夫

SNSでの拡散を意識した設計で、年賀状を受け取った人が「自分も作ってみたい！」と思える仕組みをデザインしました。年賀状を見る際に「年賀状を作ってみる」ボタンが目立つ位置に配置され、スムーズにログインして制作に取り掛かれます。

解決出来ること

従来の「あけおめLINE」と比べて、このサービスでは、画像やステッカーを使ってオリジナル性を持たせることができ、より個性的で心に残る新年の挨拶を作成できます。また、大人数に向けて一括で簡単に共有できる点や、ネットプリント機能を活用して手元に印刷して保存できる点も魅力です。

SNSが普及した現代において、このサービスは年賀状の「特別感」と、SNS共有の「手軽さ」を融合させ、新しい形の年賀状体験を提供することで、失われつつある年賀状文化の良さを再発見しつつ、より楽しく新年の挨拶が送れる新しい方法を実現します。

今後の展望

Release 0〜3（Hack Dayまで）で実装しきれていないデザインの反映、Release 4〜6の実装を行います。

Release 4

• 年賀状に配達前状態（1月1日以前にリンクを開いた場合）を追加
• 速達設定を追加
• 受け取り予約・ポストの追加（1月1日以前に受け取ったリンクから年明けに年賀状の受け取りを予約）

Release 5

• 受け取り人数、受け取り予約人数カウント機能
• 受け取り予約人数に基づく、ステッカー解放機能
• 未公開の年賀状に使われた画像を見えなくする

Release 6

• 下書き機能
• 編集機能強化（画像の透過、背景色の変更）
• PCレイアウト追加
• 一括印刷機能
• TOPページにサービス紹介内容を追加 リリース計画

注力したこと（こだわり等）

• vercel-ogによる動的OGP画像の作成

  • 共有すること、 共有されることへのユーザー体験を良くするために、シェアした際のOGP画像を動的に作成するように実装しました。

• Opsまで見通したシステム設計

  • ユーザーにとって価値のあるプロダクトを届けるために、近年流行しているDevOpsという考えは、短期間で価値を生み出す必要のあるハッカソンにおいても有効と考えました。
  • コードベースでスキーマを管理できるヘッドレスCMSを軸にバックエンドを構築し、アカウントやメディアファイルの入り組んだバックエンドを、最小限の労力で実装しました。
  • ステッカーの追加などもGUIで簡単に行えるなど、サービスとして実運用する際に必要となる可能性の高い機能を、追加の労力なしに実現しています。 　

• デザインワークに基づいたサービス開発

  • ペルソナ、エンパシーマップ、アイディアシート、ストーリーボード、カスタマージャーニーマップの作成に取り組みました。これにより、ユーザーの課題を的確に把握し、その解決策を効果的に選定できるよう努めました。

• エンジニアとデザイナーの連携

  • チーム内でNotionを活用し、詳細設計やリリース計画を一元管理することで、誰でもわかりやすく情報を共有できる環境を整え、作業のスムーズな進行を実現しました。また、ペーパープロトタイプを作成することでエンジニアとデザイナーの認識をそろえた上でUIの作り込みを行いました。

開発技術

活用した技術

API・データ

• ネットワークプリントサービス

フレームワーク・ライブラリ・モジュール

• Next.js
• React
• vanilla-extract
• Strapi

インフラ

• Google Cloud
  • SQL
  • Cloud Run
  • Cloud Build
  • Cloud Storage
  • VPC
• Vercel

構成図

ハッカソンで開発した独自機能・技術

• バーチャルな年賀状を交換し、受け取った人が印刷する機能

  • 年賀状を印刷された状態で送る多くのサービスとは異なり、バーチャルな年賀状のまま送り、受け取った人が、必要に応じて印刷する
  • 実物が欲しい場合にも、誰でもコンビニで簡単に印刷できる、ネットワークプリントサービスを採用した
  • https://github.com/diawel/akeome-link/blob/develop/src/utils/print.ts

• おみくじステッカー機能

  • 個人チャットで一人一人違う年賀状を作って共有することもできる一方、SNSで配られていると「自分に届いた特別感」が薄れてしまう
    • 既存のスクラッチ年賀状やシールを剥がす年賀状の体験を参考に、おみくじステッカー機能で, 受け取った年賀状を「自分だけの年賀状」にすることができる
  • 今後のアイデア
    • 一定枚数以上シェアをすると追加で他のステッカーも解放し、シェアすることへのインセンティブとして活用
    • 印刷後に初めて中身が見えるような機能を実装し、ネットワークプリント事業者と共同でマネタイズする
  • diawel/akeome-link#28