Indie Calの画面デザイン

Indie Cal

下北沢・渋谷のライブハウスのスケジュールをまとめるWebアプリ

Role
Planning, UI design
/ Front-end, Back-end
When
2026.10~
Type
Side project(遊びで制作)

仕事ではなく、遊びで作ったものです

「こんなのあったら便利じゃない?」から勝手に作り始めた、下北沢・渋谷のライブハウス8会場のスケジュールをまとめて見られるWebアプリです。企画からデザイン、実装、公開まで、全部ひとりで楽しみながら作りました。

ライブハウスの情報は会場ごとのサイトに散らばっていて、「今夜どこかで何かやってないかな」と思っても、何サイトも見て回る必要がありました。その手間をなくして、気になったライブを友達にシェアするところまでを一続きにすることを目指しています。

各会場のスケジュールは毎日自動で集め、手で追加・修正した情報と安全に合わせる仕組みにしています。データの取得に失敗したときは前日の情報を残すなど、一人でも運用し続けられることを大事にしました。

「今夜」から始まる画面

最初に全部のライブを並べると、数が多すぎて選べなくなってしまいました。そこで、開いてすぐ目に入るのは「今夜のライブ」だけにして、気になったら日付やジャンルで広げていく流れにしています。

よく使うジャンル・エリア・日付の絞り込みは画面上部に常に出しておき、カレンダーに切り替えても同じ条件のまま見られるようにしました。

今夜のライブ、カレンダー、参戦リストの画面

PCではひと月を一望できるカレンダー

PCでは、1日ずつのマスに時間と会場の色、タイトルを並べ、ひと月の予定を一度に見渡せるようにしました。自分が「♥」をつけたライブはマスの上に出てくるので、予定の確認にも使えます。

PCのカレンダー画面

♥ひとつで参戦リストとシェア画像に

はじめは「気になる」と「参戦」の2つのボタンを用意していましたが、迷わせてしまうので、なじみのある♥ひとつにまとめました。

♥をつけたライブは参戦リストに集まり、そのままインスタのストーリーズに載せられる9:16の画像になります。URLを送ったときに表示されるOGP画像もあわせてデザインしました。

ストーリーズ用のシェア画像とOGP画像
Back to TOP