🦊

高校生が可愛い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で実現しました
この作成方法については以下の記事で詳細に解説しているので、気になった方は見てみてください！

(実際のフィードバック画面)