なぜたすきフクロウの絵を 3 枚に分けたのか — 汎用・チャット・SNS で構図を変えた設計
「1 枚で全部いけるよね」と思っていた、最初の自分へ
マスコット制定の翌日、私は素朴に 「1 枚の元画像から、全部の派生画像を切り出せばいい」 と思っていました。ロゴも favicon も OG 画像もチャットアイコンも、たすきフクロウ 1 枚で済むはず、と。
実装に入って、その思い込みが崩れました。
汎用ロゴに最適な構図でチャット FAB を作ると、 「ここを押すと話せる」が直感的に伝わらない 。SNS のプロフィールに使うと、円形クロップで盾の意味が見切れて消えてしまう。 1 枚を全文脈に流用しようとした瞬間、どの用途でも 70 点止まりになる——これが、自分で手を動かして初めて分かったことでした。
そこから方針を変えました。 構図を分ける。 3 つの元画像を持つ。 たすきフクロウは、汎用・チャット・SNS の 3 枚を、 1254×1254 PNG で持っています。
| ファイル | 用途 | サイズ |
|---|---|---|
mascot-owl-source.png | 汎用（ロゴ / favicon / OG） | 1254×1254 |
mascot-owl-chat-source.png | チャット意味検索専用 | 1254×1254 |
mascot-owl-sns-source.png | 会社公式 SNS プロフィール | 1254×1254 |
3 つを使い分けることで、 文脈に応じた最適な見え方 を作っています。今日は補章 M-2 として、なぜ 1 つに統一せず 3 つに分けたのか、その細部を書きます。
なぜ 1 つに統一しなかったか
「1 つの元画像から全派生を作る」のが、シンプルな運用ではあります。
それを 3 つに分けた理由は、 用途ごとに最適な構図が違う からです。
汎用（ヘッダロゴ / favicon）
- 小さく表示される
- ブランドアイコンとして識別性が重要
- ドキュメントを抱える構図（たすきばのアイデンティティ）
チャット（FAB / アシスタントアバター）
- 「話しかけられる存在」を直感的に伝えたい
- 吹き出しの輪郭で囲む構図
- たすき帯のミントカラーで「応答中」を視覚化
SNS プロフィール
- 円形クロップされる（X / LinkedIn 等の表示仕様）
- 顔のクローズアップが視認性高い
- 背景バリアは見切れる前提
これらを 1 枚で兼ねようとすると、 どの用途でも中途半端 になります。専用構図を 3 つ用意することで、各文脈で最適化されます。
これは、 A-3 の “整った UI” で書いた「同じ役割のボタンは同じ位置・同じ色・同じラベル」と、表裏一体の発想です。 「同じ役割なら同じ顔。違う役割なら違う顔。」 ——その境界を、しっかり引いておきます。
汎用バージョンの構図
mascot-owl-source.png
| 要素 | 意味 |
|---|---|
| 濃紺ベース | 信頼・落ち着き・夜の見守り |
| 羽でドキュメントを抱える構図 | 「知見を守る」「次の判断に渡す（= たすき）」 |
| 胸元の盾 + 鍵穴 | セキュリティ・権限管理・テナント分離 |
| 背景の円形バリア（薄青） | 守護・安全な領域 |
——たすきばの 設計思想を 1 枚に集約 した構図です。
派生画像：
| 派生ファイル | 用途 |
|---|---|
public/mascot-owl.png（512） | ヘッダロゴ |
src/app/icon.png（256） | favicon |
src/app/apple-icon.png（180） | apple-touch-icon |
public/og-image.png（1200×630） | SNS シェア用 OG 画像 |
チャットバージョンの構図
mascot-owl-chat-source.png
| 要素 | 意味 |
|---|---|
| 吹き出しの輪郭にフクロウを内包 | 「チャットの相手 = たすきフクロウ」を一瞬で伝える |
| ミントのたすき帯 | サービス名「たすきば」と「世代間でたすきを渡す」象徴の継承 |
| 小さな盾（チェック付き） | チャット越境・テナント漏れに対する安全性を視覚化 |
| 青系の配色統一 | 汎用バージョンと同じ色相で連続感を維持 |
派生画像：
| 派生ファイル | 用途 |
|---|---|
public/mascot-owl-chat.png（256） | チャット FAB + アシスタントアバター |
なぜチャット専用の構図が必要か
通常のロゴだと、
- 静的なシンボル感が強く、対話性が伝わらない
- 「ここを押すと何が起きるか」が直感的でない
吹き出しの輪郭にフクロウを入れることで、
- 「チャット = 対話」が一目で分かる
- 押せるボタンであることが明確
- 「話す相手はフクロウ」というキャラクター性が立ち上がる
——UI 上の役割が違えば、ビジュアルも変える。 これは、 B-4 で書いた “UI = API 認可一致” と同じく、 「UI が嘘をつかない」設計の延長 です。
SNS バージョンの構図
mascot-owl-sns-source.png
会社公式 SNS（X / LinkedIn / Facebook）のプロフィール画像用。 コード参照なし で、人間が手動でアップロードします。
特徴：
- 円形クロップされる前提で、中央寄りの構図
- 顔のクローズアップ
- 背景バリアは見切れる前提でデザイン
派生画像は 生成しません 。SNS 用は、元画像をそのまま手動アップロードする運用です。
派生画像の使い分け表
| 派生ファイル | 用途 | 元画像 |
|---|---|---|
public/mascot-owl.png（512） | ヘッダロゴ | 汎用 |
src/app/icon.png（256） | favicon | 汎用 |
src/app/apple-icon.png（180） | apple-touch-icon | 汎用 |
public/og-image.png（1200×630） | OG 画像 | 汎用 |
public/mascot-owl-chat.png（256） | チャット FAB / アバター | チャット |
5 つの派生画像で、ロゴ / アイコン / OG / FAB を全部カバーします。
推奨される使い方
たすきフクロウを画面に置く際の、推奨パターン。
ヘッダ左上のロゴ
- デスクトップ: 「アイコン + たすきば」併記
- モバイル: アイコンのみ
- 使用画像:
public/mascot-owl.png
favicon / apple-touch-icon
- Next.js の
src/app/icon.png/src/app/apple-icon.png規約で 自動配信 - 開発者は配置だけして、Next.js が
<head>のlinkタグを自動生成
OG 画像（SNS シェア）
public/og-image.png- 左にロゴ + 右にサービス名・タグライン
チャット意味検索の FAB
- 全画面右下の常時表示ボタン
- 使用画像:
public/mascot-owl-chat.png aria-labelは 「たすきフクロウに相談する」 で固定
SNS 公式アカウント
- X / LinkedIn / Facebook の会社公式アカウント
- 人間が手動アップロード（リポジトリ参照なし）
避けるべき使い方
たすきフクロウを使うとき、以下のパターンは 避けます 。
1. 過度なデフォルメ / アニメ化
法人導入時の信頼感を損ねます。 「カワイイ」 に振ると、業務 SaaS としての硬さが薄れます。
2. 背景色とのコントラスト不足
濃紺マスコットを濃色背景に置かない（視認性低下）。 明るい背景か、薄青 / 白系の背景に乗せる。
3. 権限・セキュリティと無関係なメタファでの使用
「エンタメ性」「軽さ」のみを訴求するシーンには使いません。 フクロウの 守護メタファ とズレるためです。
4. 不安・警告系の文脈
エラー表示 / 警告ダイアログ等には使いません。 守護のメタファに反します。エラーには別アイコン（例: AlertCircle）を推奨。
コピーの方向性
マーケコピー / サービス紹介で「たすきフクロウ」を出す際は、 次の 3 文脈 に揃えます。
- 「夜でも見守る」（常時稼働・継続的監視）
- 「知見を守る」（データ保全・ナレッジ蓄積）
- 「必要なときに示す」（提案エンジン・判断支援）
マスコットのコピーが分散すると、ブランドイメージがブレます。 3 文脈に絞る ことで、ユーザの印象に残りやすくなります。
まとめ
| 元画像 | 用途 | 派生画像数 |
|---|---|---|
| 汎用 | ロゴ / favicon / OG | 4 |
| チャット | FAB / アバター | 1 |
| SNS | 会社公式 SNS | 0（手動） |
用途ごとに最適構図を分け、 5 派生画像を自動生成 + 1 元画像を手動アップロード で運用します。 ブランド一貫性を保ちながら、文脈別の最適化を両立 させる設計です。
次回は連載前半の最後、 6 ヶ月で SaaS を立ち上げた振り返り を書きます。 個人開発で SaaS を作りたい人への、現実的な工数感の参考になればうれしいです。
関連記事
- マスコット選定の 4 候補比較 — なぜ「たすきフクロウ」が選ばれたか — 連載第 18 回・マスコット選定
- 公式マスコット「たすきフクロウ」誕生記 — 知恵・記憶・守護の象徴 — マスコットの 3 つの象徴
- ユーザに主導権を返す UI — “ゲートキーパー” を作らない設計 — 「UI が嘘をつかない」発想
たすきば について
たすきフクロウは、 プロダクトページ や記事内の挿絵など、各文脈で異なる顔を見せます。