こぶりーのこだわった所
個人ブログを見つけて、読んで、シェアするアプリ、 "こぶりー" を運用しています。
こぶりーを作っていてこだわっている所を紹介します。
データが肝
個人ブログを読むアプリですので、
個人ブログの データが肝 になってきます。
データが少ないと見に行こうとは思わないので、
データを集める仕組みづくりを徹底しました。
以下の記事にあるように、個人ブログを見つける仕組み作りを作っています。
一番うまくいっているのは、GitHub コード検索です。
"ブログ" などの単語を含むリポジトリを探索し、いくつかのプロセスを経てブログURLを発見します。
あとは、私の方で手動でチェックして良かったら登録するようにしています。
この仕組みを作って気づくことが多くて、
例えば 1つのハンドルネームで複数のブログサービス（はてな、note、Amebaなど）を利用していたり、
フィードURLが残念ながらなかった り、
フィードの中身がlocalhostとかundefinedだったりしています。
あと、AI で作ったサイトは一瞬で分かるなと残念ながら気づけるようになりました。
UIデザイン
今の AI にはUIデザインがｲﾏﾋﾄﾂというか、
感情に訴えかける（なんか良いなと思う気付けない良さ）部分は、人間のデザイン力が大事と思っています。
そのUIデザインを凝るためには、さまざまな気づかないぐらいの配慮 が大事です。
配色、余白、コピーライティング（ボイスアンドトーン）、あしらい、影、形、インタラクション、動線、視線、経験則、心理学、さまざまあります。
こぶりーのUI デザインは、何度も調整をしています。
個人ブログ記事は、1つの紙と捉えて長方形の角丸なしにしています。
視線として、まずサムネイルを見てタイトル、説明文、お気に入りやシェアのアクション、の順番にしています。
メタデータとして、エンゲージデータ（閲覧数など）やホスト名、公開日を下部においています。
うすく、格子状の背景を入れています。
記事に少し影をつけて押せる見た目にして、既読にしたら影を消して色を薄くして視線の注意から落とすようにしています。
角丸をつけて影をつけたボタンは、押せる意図を統一的にしています。
また 栞に少し広い影をつけていて、記事とのZ軸の高さがあるためです。
栞は現実世界での使い方を再現していて、
栞を記事カードに置いたらその位置に戻ってくれる機能です。
タイムラインで眺めていて、途中から再開したいからこう言う機能を用意しました。
全体の色は白黒をベースにしていて、
HeroUI の tailwind ベースな色を使っています。
初期の頃は #FFF な色を使われていて目がチカチカするので、
個人ブログライブラリー（こぶりー）の図書館っぽく落ち着いたトーンにしたく、
oklch の輝度を全体的に数%落としています。
何かコンテンツを追加する場合は、その分他の要素が圧迫されるため、
要素を省略するか配置を変えるなどで 減らすことを心がけています。
（でないと、画面が圧迫してごちゃごちゃしちゃうため）
その他
このアプリは PWA としてモバイルアプリとして提供していて、
私は自分のスマホにこぶりーをホーム画面に追加して、ワンタップで見れるようにしています。
いかにして読む体験を楽にするためにも、
できる限りタップ数を減らして、
スムーズに個人ブログ記事を何も考えずに眺めれるようにしています。
終わりに
ちょっとした休憩時間にこぶりーを眺める、そういう日常に自然に溶け込むアプリになれるように、
頑張っていきたいと思います。
-
s※ ログイン不要で投稿できます。
※ 同じブラウザから投稿を削除できます。
0
読み込み中...
関連する記事
タグ「個人開発」の記事
どうもみなさん、こんにちは。 個人ブログを読むアプリ、"こぶりー" を運営している silverbirder です。 https://kobliy.vercel.app こぶりーに、ランダム読みと記事検索の機能を追加しました ので簡単にご紹
2026年06月15日
以下で書いた通り、モバイルアプリを作っています。 https://silverbirder.github.io/blog/contents/20260419/ アプリ名は、"こぶりー" と仮の名前を決めました。 https://silver
2026年05月05日