ブランドリフレッシュ — ミニマルデザインへ

本日、ミセバンAIのブランドアセットを全面刷新しました。アプリアイコン、ファビコン、ロゴマークのすべてを新しいデザインに切り替えています。

変更は視覚的なものだけですが、その背景にある考え方を共有します。

なぜ今、デザインを変えるのか

v1.0.0 リリースを経て、ミセバンAIは「作っているプロダクト」から「使われるプロダクト」に変わりました。ユーザーの手元にアプリが届くようになった今、第一印象を作るビジュアルに正面から向き合う必要があると判断しました。

旧デザインはシンプルな「M」文字アイコンでした。開発初期のプレースホルダーとして機能していましたが、ブラウザのタブに並んだとき、Finderのアイコン一覧に表示されたとき、十分な個性を持てていませんでした。

新しいデザインで重視したのは3点です：

視認性 — 16×16px のファビコンでも形が読み取れること
プロダクトとの整合性 — カメラエージェントというコアコンセプトが伝わること
モダンさ — Linear、Vercel、Raycast と並べたとき恥ずかしくないこと

新デザインのコンセプト: ビューファインダー

選んだシンボルは「ビューファインダー」です。カメラのファインダー越しに店舗を見守る — ミセバンAIのコアをそのまま記号化した形です。

64px

32px

16px

構成要素は3つだけです：

外側のリング — カメラのビューファインダー枠。インジゴ (#6366f1) の細いサークル
クロスヘア — ファインダーの照準線。シアン (#22d3ee) の細い4本線。小サイズでは省略
中心のドット — 焦点。インジゴで塗りつぶされた小円

サイズによって段階的に要素を削ぎ落とす設計にしました。16px ではリングとドットのみ、32px 以上でクロスヘアが現れます。どのサイズでも形が崩れません。

カラーパレット

#09090b
Background

#6366f1
Primary

#22d3ee
Accent

#fafafa
Text

ダーク背景はグラデーションなし、フラットな #09090b を採用しました。グロー、ベベル、ドロップシャドウは一切使いません。幾何学とカラーだけで成立するデザインが目標です。

実装の詳細

ファビコン (PNG)

従来はインラインSVGのデータURIでファビコンを指定していました。この方式はHTMLサイズを増やし、ブラウザによって表示が異なるという問題がありました。新実装では3サイズのPNGファイルを用意し、<link> タグで明示的に指定しています。

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">

PNGの生成はPython標準ライブラリ (struct、zlib、math) のみで実装しました。Pillow などの外部依存は一切なし。ピクセル単位でアンチエイリアスを計算し、各サイズで最適な品質を確保しています。

ファイル	サイズ	用途	デザイン要素
`favicon-16.png`	16×16 px	ブラウザタブ (小)	リング + ドット
`favicon-32.png`	32×32 px	ブラウザタブ (標準)	リング + ドット
`favicon-180.png`	180×180 px	Apple Touch Icon	リング + クロスヘア + ドット + 角丸

macOS アプリアイコン

macOS ネイティブアプリ (.app/.dmg) のアイコンも同じデザインコンセプトに統一しました。ビルドスクリプト内の Python ジェネレーターを書き直し、16px から 1024px まで全13サイズを自動生成します。macOS の角丸マスク（コーナーラジアス 22.37%）も適切に適用しています。

ロゴ SVG

アイコンマークとワードマークを組み合わせた横型ロゴも新たに作成しました。

「ミセバン」は白 (#fafafa)、「AI」はインジゴ (#6366f1) で色分けしています。フォントはシステムUIフォント（system-ui, -apple-system）を指定し、外部フォント依存なしで表示されます。

Before / After

Before

インラインSVG「M」文字
データURI形式

After

ビューファインダー型
PNG形式（全3サイズ）

今後のデザイン方針

今回のリフレッシュで確立したデザイントークンを、今後はプロダクト全体に一貫して適用していきます。

ダークファースト — ダッシュボードUIのダークモード対応を優先実装
幾何学ベース — アイコン・イラストはすべてシンプルな幾何学形状に統一
カラートークン固定 — Primary #6366f1、Accent #22d3ee をデザインシステムの根幹に
モーションは最小限 — アニメーションはフィードバック用途のみ。装飾的なアニメーションは禁止

「最もシンプルな解法が最も美しい」——この原則はコードだけでなくデザインにも等しく適用します。削除できる要素をひとつずつ削除していった先に残るものが、ブランドアイデンティティになります。

フィードバックや改善提案は GitHub Issues またはコンタクトフォームからどうぞ。

ミセバンAI を試してみる

新デザインのアイコンがブラウザタブに並んだら、ぜひ本体も使ってみてください。

ダウンロード → 無料アカウントを作成

ブランドリフレッシュ —ミニマルデザインへ