あけおめリンク

リンク

開発リポジトリ

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

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

公開環境

https://akeo.me/

動画

製品概要

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

SNSの普及に伴い、あけおめラインは新年の挨拶として浸透しており、みなさんもお友達やご家族に送られていると思います。 ですが、あけおめラインは、このように年賀状に比べて簡素なものになってしまっている人も多いと思います。

これらの問題を解決すべく、年賀状✖️Techをテーマに、若者をターゲットとした新しい「あけおめ体験」を提供するサービスを開発しました。

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

「あけおめリンク」はスマホで簡単にオリジナルの年賀状を作成し、好みのSNSでシェアすることができるサービスです。

シェアされたリンクから年賀状を受け取ることができ保存したり、必要に応じて印刷することも可能です。

これらのシェア機能を若者をターゲットとしたSNSの繋がりの上で行うことで新しい「あけおめ体験」を提供します。

機能

• Googleアカウントでのログイン
• 年賀状作成
  • 作成した年賀状一覧表示
  • 背景編集
  • 写真追加
  • ステッカー
    • おみくじステッカー
  • テキスト入力
  • タイトル・作者名設定
    • 作者名自動設定
  • 通常配達・速達
  • 下書き保存
  • 複製して作成
  • 削除
• 年賀状共有
  • X共有
  • LINE共有
  • 共有QRコード作成
  • 年賀状を画像保存
  • 共有URLのコピー
  • 動的OGP
• 年賀状受け取り
  • 受け取った年賀状一覧表示
  • 年賀状枚数の称号
  • 年賀状ネットプリント印刷
  • 受取予約
  • 受取ポスト
    • 届いた年賀状一覧表示
    • 配達待ち年賀状一覧表示

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

特長

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

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

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

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

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

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

4. ログイン不要で年賀状の受取が可能

SNSで他の人が共有しているリンクからサービスを使い始めるというタッチポイントも想定しているため、ログイン不要で年賀状を受け取れることを可能にすることで、サービスを使い始めるときの障壁を可能な限り下げています。

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

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

解決出来ること

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

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

今後の展望

• 編集機能強化（画像の透過など）
  • 年賀状のオリジナリティを最大化する
• PCレイアウト追加
  • スマホでの利便性も残しつつ、よりじっくりサービスを使ってもらう
• アチーブメント機能強化
  • 一定枚数以上シェアをすると追加で他のステッカーも解放し、シェアすることへのインセンティブとして活用、ネットワークプリント事業者と共同でマネタイズ

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

• 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