TOPDAY Atelierを公開しました

現在運営している3つのサービス

公開時点では、次の3つのWebサービスを企画・開発・運営しています。

Events Calendar

公開当初は、好きなチームや大会の予定をGoogleカレンダーやAppleカレンダーで継続購読できるサービスとして始めました。現在は、編集部が選んだスポーツ、花火、音楽、展覧会などを、開催日と独自のガイド記事から探せるメディアへ転換しています。

ふたり音

2つの音の関係を聴き分ける、ブラウザ上の相対音感トレーニングです。単音を個別に覚えるのではなく、音と音の距離を捉える練習ができます。

キキナオシ

Apple Musicにある新しいリマスターや別バージョンの候補を探し、知っている音源をあらためて聴き比べるきっかけをつくるサービスです。

分野はスポーツ、音感トレーニング、音楽探索と異なりますが、どれも自分自身が欲しいと思ったものを、長く使える形にするところから始まっています。

サイトの技術構成

サイトはNext.js 15のApp Router、React 19、TypeScriptで実装しました。コンテンツはStatic Exportで静的ファイルとして生成しています。

生成したファイルは非公開のAmazon S3バケットへ配置し、Amazon CloudFrontから配信します。独自ドメイン topday.jp のDNSはAmazon Route 53で管理しています。www.topday.jp へのアクセスはCloudFront Functionで正規URLへ301リダイレクトし、S3はCloudFront経由でのみ参照できる構成にしました。

静的サイトを選んだ理由は、現在のサイトが活動紹介と各サービスへの案内を中心としており、サーバー側で動的に処理する必要がないためです。構成を小さく保ちながら、高速かつ安定して配信できます。

公開に合わせて整えたもの

独自ドメインへの切り替えに合わせ、HTTPS証明書、DNS、メール、アクセス解析、検索向けの設定を一通り整えました。

• AWS Certificate ManagerによるHTTPS配信
• お名前.comからRoute 53へのネームサーバー切り替え
• Google Workspaceによる contact@topday.jp の運用
• MX、SPF、DKIM、DMARCとメール送受信の確認
• Google Analytics 4の導入とリアルタイム計測
• Google Search Consoleの所有権確認とsitemap送信
• canonical URL、OGP、favicon、robots.txt、sitemap.xmlの設定
• プライバシーポリシーと404ページの用意

DNSの切り替え後はGoogle Public DNS、Cloudflare DNS、自宅Wi-Fi、モバイル回線から確認しました。Webサイトだけでなく、メールの送受信やHTTPS証明書、外部リンクも含めて確認しています。

公開後に行った改善

GA4では、3サービスへのリンクを押したときの service_link_click と、問い合わせリンクを押したときの contact_click を計測できるようにしました。ページビューだけでなく、サイトが案内役として機能しているかを確認するためです。

表示面では、PRODUCTS見出しのラベルが重なる問題を修正し、サービスカードのリンク領域を広げました。リンク文字だけでなくカード下部全体を押せるようにし、PCでもスマートフォンでも操作しやすくしています。

XではTOPDAY Atelierのアカウントを開設し、初回の紹介投稿からサイトへリンクしました。OGP画像、タイトル、説明が表示されることを確認し、サイトのフッターにもXへの導線を追加しています。

主要ブラウザでの確認中には、スマートフォン版フッターのXリンクが画面右側にはみ出す問題を見つけ、レイアウトを修正しました。また、ヒーロー下部に置いていた装飾的なスクロール案内は、既存の導線と役割が重複していたため削除しました。

これから

まずは3つのサービスを継続して運営し、実際の使われ方や届いた声をもとに改善を重ねます。Journalでは、サービスをつくった理由、開発中に考えたこと、公開後に分かったことを記録していく予定です。

Xでも更新や改善を発信します。大きな計画を先に掲げるよりも、小さく公開し、自分でも使い、長く育てる。その積み重ねをTOPDAY Atelierの活動として残していきます。