🦊

高校生が可愛いURLブックマークサービスを個人開発をしてみた話

2023/05/27に公開
10

こんにちは!
17さい3年生の「ソテツ」です✨
去年に勉強を始めて、初めて一からQuickURLというサービスの個人開発ができたので紹介します!

どんなサービス?使い方は?

QuickURLは簡単に言うとURLをブックマークして、複数サイトをセットで開けるサイトです

頻繁にセットで使うURLを登録しておくことにより、ワンクリックで開封することができます
Googleでログインするだけで使用することができます✨

なぜこれを作ったのか?

最大の理由としては、「自分が既存の類似サービスを触ってみて使いにくいと感じたこと」です

既に拡張機能などで類義品はあるのですが、個人的に画面がみにくくて非常に使いにくかったです。また、使っていてどうもテンションが上がりませんでした

なので「僕と同じことを感じている人もいるのではないか」「分かりやすい画面で作ったら需要があるのではないか」と思ったのが作った理由です

こだわりポイント

理由とかぶりますが、QuickURLにおいてのこだわりポイントを書きます
ここに全て詰まっています

①見た目の見やすさ、わかりやすさ

カード型で作る!

カード型で作ることで一つ一つの塊がはっきりと見え使いやすくなります。特に複数のURLをまとめるというこのサービスにおいては、この方法は非常に適していると感じました
あと僕だけかもしれませんが、カード型にすることで一つ一つに愛着がわく感じがします🔥
カード型で作るにあたっての全体のレイアウトについてはTrelloを参考にさせてもらいました

アイキャッチ画像!

同じようなサイトもアイキャッチ画像があるだけで、格段に見やすくなるというのはZennのアイキャッチ機能から学びました
なのでアイコンを変更して表示できる機能を実装してみました。これは本当に大正解でした!
一気にかわいらしい雰囲気に仕上がりました
様々なアイコンがあるので試してみてください✨

画面を簡潔に、直感で使える!

画面全体において余計な機能や文字を書かないようにとにかく意識しました
最初はいろいろと機能を作ったりしていたのですが、冷静に考えるとただ分かりにくくなるだけだったので、現在では簡潔で本当に必要な機能のみを搭載しています
また、OPENボタンを大きく色を派手にしています✨

②まとめて開封もOK!単品で開封もOK!

本来このサービスを作りはじめる際のコンセプトとしては
「よくセットで使うURLをまとめて保存し、ワンクリックで全て開封したい」というものだったので、当然その機能はOPENボタンから使えます

しかし、いざプロトタイプで使っているとまとめて開くだけでなく単品で開きたいときもあることに気づきました。そのため機能を追加、現在ではカードのOPENボタンからの全体開封だけではなくURLにホバーすることで単品で開くこともできるようになっています

③URLの表示非表示

デフォルトではカードに登録されているURLも表示されるようになっているのですが、この設定を変更してURLを非表示にできます
これによってよりシンプルなデザインになるので、単品での開封をあまり行わない方はおすすめです!(設定はサイトのサイドバーから簡単に行えます)


技術面の話

ここまでで僕のQuickURLについての情熱を書きました!
ここからは実際の技術面について話をしていきます

使用した言語など

プログラミング言語としてはReact(JavaScript)+TypeScriptで、スタイリングにはChakraUI、データベースやホスティングにはFirebaseを使用しました

認証機能

QuickURLはGoogleアカウントでログインする仕様になっているのですが、これはFirebaseのAuthenticationで実装しました

データベースの構造

FirestoreDatabaseを使用
コレクションはusersというものが一つだけで、この中にそれぞれのuserさんの設定や保存したURLが格納されています

保存したURLについてはuserの中にlistsというサブコレクションを作り、このなかにドキュメントとして一つ一つのカードが格納されています

users (コレクション)
│
└── {ユーザーID} (ドキュメント)
    │
    ├── displayUrl (フィールド): boolean
    │
    └── lists (サブコレクション)
        │
        └── {カードID} (ドキュメント)
            │
            ├── name (フィールド): カードの名前
            ├── icon (フィールド): カードのアイコン
            ├── id (フィールド): カードのID
            ├── createdAt (フィールド): 作られた順番
	    └── list (フィールド): URLの配列

フィードバック機能

QuickURLではユーザーさんのご意見をいただくために、簡単にフィードバックを送れるフォームを作成しています。これはReact-hook-formとEmailJSで実現しました
この作成方法については以下の記事で詳細に解説しているので、気になった方は見てみてください!
https://zenn.dev/sotetu/articles/79a372a2d29c8e
(実際のフィードバック画面)

アイキャッチの選択

アイキャッチとなる絵文字を入力するのにあたって、ユーザーさんが自分で手打ちする形だと不便かなと思ったので、絵文字ピッカーを作成しました
それについて以下の方の記事を参考にしましたので気になった方は見てみてください!
https://zenn.dev/rinda_1994/articles/da1703518fced0
(QuickURLでは以下のように実装できました)

苦戦したポイント

勢いで開発に取り掛かったので途中で困ることがありました

カードのレイアウト

なんとなく作れるだろうと思っていたが意外に最難関だったのがカードのレイアウトです
必要な記述やボタンなどを全て入れたうえで不自然ではないレイアウトにするためにかなり試行錯誤しました

あーでもないこーでもないと試行錯誤している間に、結局カードのレイアウトだけで2時間くらいかかってしまいました…😇
(以下、戦いの痕跡↓)

ブラウザのセキュリティ上のブロック

このサイトはセットしている複数のURLをまとめて開くことができるという内容の物なのですが、これがブラウザのセキュリティに引っかかってしまうという問題がありました
大量にタブを開いたりする危険なURL対策だと思います

この対処法としてはユーザーさんに自分でQuickに許可を出してもらう必要があります。これは非常に簡単なのですが、説明がないと分かりにくいなと感じたので説明サイトを作りました

拡張機能としてアップすると許可の手順などもなく複数タブを開くことができるようになるらしいので、今後は勉強して拡張機能化させたいなとも考えています

まとめ

とにかく使ってみてください!拡散してください!
Twitterの影響力もないのでどうすれば人に知ってもらえるか模索している段階です!お力添えお願いします

フィードバックやアドバイスも絶賛募集中ですのでガンガンお願いします🙇🏻

現在17さいですがまだまだ勉強していって面白いサービスの個人開発をすることを目標に、日々精進しています。いつか沢山のユーザーを抱えるサービスを作ります

ここまで読んでいただき、本当にありがとうございました🔥

Discussion

tnktnk

素晴らしいチャレンジでデザインも素敵です。

ユーザー数を増やすためには、
URL保存サービスというよりもブックマークサービスと呼んだり、
サイト上でその内容を説明する文章があると良いと思います。できればLPが別であると良いと思いますよ。

なぜなら、私自身、このサービスが何なのかしばらく分からなかったからです。

Kenta SatoKenta Sato

貴重なご意見ありがとうございます!
ブックマークという表現を使いように変更させていただきました
また、本記事にサービスの概要のセクションを設けました

この後、QuickURL自体にもサービスの説明ページを作ります
ご協力に本当に感謝します

KumiKumi

フィードバック送らせていただきました!

Kenta SatoKenta Sato

確認しました
本当にありがとうございます!
今なんとか対処しようとしてます…!

neji_bitneji_bit

触ってみました!
フィードバックを送ったので、ご確認ください&わかりにくかったら、ここでお声がけください!

Kenta SatoKenta Sato

フィードバックありがとうございます!
CSSのデザインと及びカードの入れ替え機能については勉強して実装しようと思います

ご協力に感謝します!

KentaroxKondoKentaroxKondo

27歳で、私もプログラミングを独学中です。高校生の方で、これほどのものを作成できるのはすごいと思いました。大変モチベーションにつながります!
微力ながら、サービスの拡散を応援させていただきたいと思います🙌

みなと@Prologにハマってます!みなと@Prologにハマってます!

はじめまして、ソテツさん。
最近「あとで読む」サービスの『Pocket』の乗り換え先を探してたので…
ちょうど良いタイミングでした。

『QuickURL』を使ってみましたが、URLを入力する際にタイトルも入力しないといけないのがちょっとダルいなと。
類似サービスの『Instapaper』は、URLを入力するだけでタイトルも表示してくれるのでより素早い感じがしました…

Kenta SatoKenta Sato

名前入力の省略について検討してみます

ありがたいご意見ありがとうございます!
励みになります