Notionのカスタムアイコン・カバー画像をSVGとCSSで最適化する：社内Wikiのブランド統一とロード高速化ハック
チームのベロシティを低下させる最大の要因は、コードのスパゲッティ化だけではありません。ドキュメントのサイロ化、そして情報の検索性・視認性の低下こそが、開発者の認知的負荷（Cognitive Load）をじわじわと蝕み、アジャイルな意思決定を阻害します。
我々が愛用する「Notion」は、強力なコラボレーションツールである一方、自由度が高すぎるがゆえに、運用ルールが未整備だと一瞬で「ゴミ溜めのようなWiki」と化します。特に、「重すぎるカバー画像によるページ表示の遅延」や「ダークモード/ライトモード混在によるアイコンの視認性崩壊」は、エンジニアのUXを著しく低下させます。
本記事では、テックリードとしてチームの生産性を極限まで高めるために、SVGとCSSを駆使したNotionのビジュアル最適化ハック、およびそれを支える自動化ワークフローと厳選されたプロのツール群を徹底解説します。
—
1. 認知負荷とレンダリング速度のトレードオフ：Notion運用における「ビジュアル」の課題
なぜ、Notionのアイコンやカバー画像にこだわる必要があるのでしょうか？
理由は2つあります。「認知摩擦の極小化」と「LCP（Largest Contentful Paint）の最適化」です。
課題①：無秩序な画像アップロードによる「ページ読み込みの重篤化」
多くの非エンジニア（あるいはズボラなエンジニア）は、Unsplashの高解像度画像（数MB）や、スマホで撮ったPNG/JPEGをそのままカバー画像やアイコンに設定します。
Notionの内部レンダラーはこれらをリサイズしますが、それでも初期読み込み時に大きなネットワークオーバーヘッドが発生します。特に、数百のデータベース行をトグルやGalleryビューで展開した際、無最適化な画像はブラウザのメインスレッドをブロックし、スクロールの引っかかりを生み出します。
課題②：ライト/ダークモード混在による「視認性の崩壊」
エンジニアの多くはダークモードを好みますが、ビジネスサイドはライトモードを使っているケースが多々あります。
背景透過処理が不十分なPNGアイコンを使用すると、「ライトモードでは綺麗に見えるが、ダークモードにすると文字や輪郭が黒に溶けて何も見えない」という現象が発生します。これはドキュメントの検索性を致命的に下げます。
—
2. 解決策：SVGとCSSによる「ハイブリッド・スマートグラフィック」
この問題を根本から解決するのが、「CSSメディアクエリを内包した軽量SVG」の活用です。
SVG（Scalable Vector Graphics）はXMLベースのテキストデータであるため、ファイルサイズが数KBに収まるだけでなく、SVGの内部にCSSスタイルシートを埋め込むことで、ユーザーのOS/ブラウザ設定（ライト/ダークモード）を検知して動的にカラーを変更することが可能です。
【実践】ライト/ダークモード自動追従型SVGアイコンのコード
以下のコードは、Notionのカスタムアイコンとしてそのまま使用できる、完全レスポンシブかつダーク/ライトモード両対応のSVGコードテンプレートです。
このアプローチの強み
1. 圧倒的軽量化: わずか1KB未満。PNG画像（約50KB〜200KB）と比較して、99%以上のファイルサイズ削減。
2. 完全な動的追従: Notion側での設定変更は不要。1つのSVG URLで、ユーザー環境に合わせた最適なコントラスト比を自動維持します。
3. ベクター特性: 4Kモニターや高ピクセル密度のRetinaディスプレイで拡大しても、一切ボケずにエッジがシャープに保たれます。
—
3. チーム開発におけるアセット・パイプラインの構築
どれだけ優れた技術でも、チーム全員がこのSVGコードを手書きするのは不可能です。エンジニアリング組織としての強さは、「仕組み化（自動化）」にあります。
素材管理と配信のアーキテクチャ
SVGアセットをGitHubリポジトリで管理し、CI/CDで配信するフローを構築します。
[GitHub Repo: notion-assets]
│
├── assets/ (RAWのSVGをデザイナーや開発者がPR)
│
└── [GitHub Actions (SVGOによる最適化 & バリデーション)]
│
└── [AWS S3 / Cloudflare R2 (静的ホスティング)]
│
└── Notionの「カスタム」リンクから参照 (CDN経由)
自動化のキモ：`svgo.config.js` の設計
GitHub Actions内で、SVGから不要なメタデータ（IllustratorやFigmaのゴミデータ）を削除しつつ、埋め込んだ `