# Mole のアイコンを細かく作り直した話
> Mole のアイコンをシステムアイコンから Phosphor をもとにしたセットに替えた記録。アイコンライブラリの選び方、プロダクトの中で並べて見る理由、小さな工夫、揃え方と大きさについて。
Published: 2026-09-30
プロダクトのアイコンを刷新するときに気をつけたいこと、磨けるところについて、気軽に話してみたいと思います。
今朝、Mole のアイコンを細かく作り直しました。これまではシステムのアイコンを使っていて、シンプルなプロダクトならそれで十分だと思っていましたが、よく見ると少し味気なく、個性が足りないと感じていました。
各組の左がこれまでのシステムアイコン、右が Phosphor のアイコンライブラリをもとに手を加えたアイコンです。
## どのアイコンライブラリを選ぶか
調べてみて、アプリのアイコンに向いていそうなのは Remix Icon と Phosphor Icons の 2 つでした。Web を書いていたころは Remix をよく使っていて、シンプルで扱いやすいのですが、アプリに置くとどうもしっくりこなかったので、Phosphor に切り替えました。こちらは表情があってとても良く、だいたい 70% はそのまま使えました。残りの 30% は Opus 5.5 に SVG を書かせて自分で描き、全体の統一感をそろえています。
## 必ずプロダクトの中で並べて見る
上の比較図だけでは、違いはあまり伝わらないかもしれません。実際のプロダクトに入れてみないと分からないことが多く、私は同じモジュールに並ぶアイコンの組み合わせも考えます。一つずつ見ればどれも良いのに、並べるとちぐはぐになることもあります。目や鼻の一つひとつは整っているのに、顔として見るとしっくりこないのと同じです。だからアイコンを替えるときは、必ず実際のプロダクトの中で、まとめて見てください。そこで初めてうまくいきます。
## 小さな工夫がプロダクトに命を与える
次に、私はずっと、作るプロダクトには生きている感じ、魂のようなものがあってほしいと思っています。自分の考えを通さずに AI Coding で出てきた、冷たいビルド成果物のようなものではなく。アイコンのような小さなディテールは、そこに命を吹き込むいい入り口になります。たとえば「画面オン維持」にはコーヒーカップを使いました。Caffeine の比喩で、Mac がコーヒーを飲んで眠れなくなるような感覚です。「Mole について」は普通なら丸で囲んだ i ですが、ここは hello だと考えて、手を振るアイコンにしました。「Doctor」も普通はトラブルシューティングの記号を使うところを聴診器にして、問題をお医者さんに診てもらうような感じにしています。こうした小さな工夫はプロダクトの中にたくさん入れられて、全体がずっと楽しくなります。
## 揃える、大きさ、中央に置く
最後に、良いデザインはほとんどの場合、揃っていること、整っていること、メリハリがあることから離れられません。アイコンと内容、上下のモジュールが、人の目で見たときに揃っていて、大きさがそろい、さらに上下中央に並んで見えるようにするには、一つずつ見て調整するしかありません。文字とアイコンの位置合わせや、もともと縦位置がそろっていない中国語と英字をどう合わせるかも含めて、いくらでも磨き込めて、とても面白いところです。
今回の例をいくつか挙げます。バッテリーは最初、残量に関係なく同じ空の枠で描いていたので、満充電なのに空に見えていました。今は 4 分の 1 ずつ塗りつぶすようにしています。メニューのアイコンは最初システムアイコンのサイズに合わせていて、並べると大きく太く見えたので、14.3pt から 12.5pt に下げ、それでも少し大きく、最終的に 11pt にしました。幅で揃えたアイコンと長辺で揃えたアイコンが混ざっていたせいで、縦長のほうきやサインアウトの矢印は大きく、横長の虫や折れ線は小さく見えていたので、幅と高さの平均で大きさをそろえ、長辺に上限を設ける方式に変えました。これから追加するアイコンも自動的にこのルールに従います。もう一つ、ツイート用に作った比較画像では、タイトルの Mole に中国語の明朝系フォントを使っていて、英字が隣の中国語より 4pt 高く出ていたので、そこだけ少し下げてようやく一直線に並びました。
同じ 14 個のアイコン。左は幅または長辺で揃えたもの、右は見た目の大きさをそろえたもの。スマートフォンでは上下に並びます。
## ユーザーの声を聞いて、もう一度
記事を公開したあと、ユーザーから少しずつ声が届きました。自分では気に入っていたアイコンの中にも、見た目がいまひとつだったり、なじみがなかったりするものがありました。「アップデートを確認」はダウンロードのアイコンだったのでダウンロードと読まれ、GPU の小さな立方体はグラフィックカードに見えず、圧縮ファイルのアイコンは意味が伝わらず、二本重ねたメモリもメモリらしくありませんでした。「画面を拭く」のスポンジと「Mole について」の手を振るアイコンが好きではないという声もありました。
こういうときは、一人で良いと思い込むより、ユーザーと少し話すほうがずっと確かです。そこでこれらをみんなの提案に沿ってもう一度作り直しました。アップデートの確認は時計回りの矢印に、GPU はファンが二つのグラフィックカードに、圧縮ファイルは収納ボックスに、オーディオは音符からヘッドホンに変えました。「画面を拭く」は最初のシステムアイコンのブラシの意味に戻し、「Mole について」は結局いちばん正統な ⓘ に戻して、列全体の線の太さに合わせて描き直しました。メモリもチップに戻っています。いくつかは途中で三回変わりました。
同じ画面の一部を並べて比べています。各行は左から、システムアイコン、最初の版、現在の姿です。
## AI が浮かせた時間は、磨き込みに使う
一見ムダに見えるこういう作業が、実は私の好きなことです。AI は優れたコードや及第点の美意識を大きく押し上げてくれて、人はもう口を動かすだけでいいように見えます。でも私はむしろ逆で、ここでの人の役割はもっと大きくなったと思っています。AI が節約してくれた時間は、ちょうどプロダクトを磨くのに使えます。気づいてくれる 1% のユーザーが使っているときに、ときどき「すぐ分かる」「うわっ」「手品みたい」と感じてくれたら、それはとても価値があって面白いことです。それが、私が個人でプロダクトを作るのを面白いと思う理由なのかもしれません。
---
Canonical HTML page: https://mole.fit/ja/blog/mole-icon-refresh
Blog index for agents: https://mole.fit/ja/blog/llms.txt
Site index for agents: https://mole.fit/llms.txt
