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