はじめに

初めまして、きよと申します。
こちらは、先日(2024/4/2)にリリースしたWebサービス「ChariLog」の紹介記事となります。初めての記事執筆なので拙い点も多いかと思いますが、その点何卒ご了承ください。

もしよろしければ最後までご覧ください！

サービス概要

自慢のカスタムや友人とのツーリングなどの思い出を写真・カスタムパーツ(アイテム)と共に発信できる、 自転車というツールに特化した投稿サービスです。

自転車の楽しさを共有できる友人づくりに多少苦労した経験があったため
=> アメリカやヨーロッパ圏などではBMXやロードレース等を中心とした自転車競技がメジャースポーツとして発展しているものの、日本においては健康志向の中年層がメインに利用するマイナースポーツに留まっているのが現状です。
特に10~20代の若年層の利用者人口は少なく、私自身趣味である自転車の楽しさを共有できる友人づくりに多少苦労した経験がありました。
SNSの投稿を見ても詳細なカスタムパーツ等を確認できないことが多いため
=> 自転車は非常にカスタム性が高く、持ち主の個性が強く出る乗り物ですが、XやFacebookに投稿された画像等を見ても、どんなメーカーのどのようなパーツ/アイテムを使ってカスタムしているのかを分かりづらいと感じる時がありました。

そこで、自転車という共通の趣味を持った友人を作りたい方のニーズ、カスタムアイテムを見てみたい方のニーズを満たせるような、自転車に特化した投稿サービスを考案しました。

1. ログ投稿ページ

ログ投稿	ログ投稿

2. ログ詳細ページ

ログ詳細	ログ詳細

3. 各投稿一覧ページ

ログ一覧（ホーム）	いいね一覧	マイページ（ユーザー詳細）

1. 投稿がログ投稿ページ内で完結するように実装
アイテム登録に関して、サービス開発当初は各ユーザーにアイテムを登録してもらい、投稿時にその登録したアイテムの中から選択して紐付ける方法を想定しておりました。

しかし、その方法では未登録のアイテムを投稿に紐付けたい場合、アイテム検索=>アイテム登録=>ログ投稿というプロセスを踏む必要があるため、UXの観点からも投稿ページで全て完結するように実装する方が良いと考えました。

そこで、下記のようにモーダル表示=>検索=>楽天APIから情報取得=>「選択」ボタン押下でデータセット=>投稿という流れにすることで投稿ページ内にて完結するように実装しました。

また、Google Map APIを利用したルート登録に関しても、以下のように画面遷移を伴わず、ログ投稿ページ内で完結するように実装しております。

2. UIを意識したレスポンシブ対応
これはあくまで私個人の考え方 / 性格になりますが、私は何かを買う時、どのアプリを利用するかを選択する時など、まず第一に使いやすさや機能性に目を向けて考えてしまいます。

そのため、きっと同じような視点でサービスを選択する人も多いかと思い、どのデバイスからアクセスしてもコンテンツが崩れないよう、かつ使いやすいようなサービスになるよう、特にレスポンシブ対応には意識して開発を進めました。下記は一例になります。

スマートフォン等の小さなデバイスの場合、主要な機能へ遷移可能なナビゲーションフッターが表示
PC等の大きなデバイスの場合、主要な機能へ遷移可能なナビゲーションサイドバーが表示（スマートフォン等の場合、フッターから遷移可能なコンテンツがサイドバーから非表示となり、サイドバーを表示するためのトグルボタンがヘッダー内に表示）
タブレット等の中サイズの画面以下では、ヘッダー部分に各ページに応じたタイトルと前のページに戻るための戻るボタンが表示

初めての個人開発で何度も壁にぶつかり挫けそうにもなりましたが、スクールのサポートもあり、無事サービスをリリースすることができました。

足りない知識をキャッチアップしながら開発すること、頭の中で描いた想像を形にしていくことは知識の乏しい私にとって難しいことでしたが、その反面開発の楽しさと多くの学びを実感できたように感じております。

今後は利用者の方からいただいたフィードバック等を基に、更なるサービス向上に努めてまいりたいと思います。最後までご覧いただき誠にありがとうございました。