Web系の自作プロダクト紹介や技術解説では、
「技術ロゴ＋簡単な説明文」という構成がよく使われます。
たとえば次のような場面です。
- 自作プロダクトの発表会（パワポ）
- 社内向けの技術共有資料
- OSS の概要ページ
視覚的に分かりやすく、初見の人にも伝わりやすい反面、
ロゴ素材の管理が意外と面倒です。
ロゴ管理の地味につらいところ
技術スタックのロゴを並べようとすると、次のような点で手が止まりがちです。
- ロゴ画像をどこに置くか（自前ホスティングが必要）
- 著作権や利用条件の確認
- ロゴ更新時の差し替え対応
- SVG / PNG のサイズ調整
特に Wiki や README を継続的に更新する場合、
このあたりの運用コストが積み重なっていきます。
GitHub Wiki に書くと意外と捗る
そこでおすすめなのが、GitHub Wiki を前提に技術スタック解説を書く方法です。
GitHub Wiki は、
- Markdown がそのまま使える
- 外部画像 URL を問題なく表示できる
- リポジトリと紐づいていて管理しやすい
といった特徴があり、
「ロゴは外部に任せて、文章だけを書く」運用がしやすくなります。
skillicons.dev を使う
技術ロゴ用途として便利なのが skillicons.dev です。
- URL パラメータだけで技術ロゴ画像を生成
- サイズが揃ったアイコンをそのまま使える
- 自分で画像を管理する必要がない
例（pnpm のロゴ）
Markdown に貼るだけで、
それなりに見栄えのする技術ロゴが手に入ります。
skillicons に存在しないロゴは直リンクで補う
すべてのツールが skillicons に用意されているわけではありません。
その場合は、公式リポジトリなどに置かれているロゴを直接参照します。
例（Volta のロゴ）
<img src="https://github.com/volta-cli/volta/raw/main/volta.png?raw=true" width="48" />
-
<img>タグを使えばサイズ調整が可能（skilliconsに合わせるなら48px）
この方法のメリット
このやり方にすると、次の点で負担が減ります。
- ロゴ画像を自前でホスティングしなくてよい
- ロゴ更新を追いかけなくてよい
- 公式配布物へのリンクなので、著作権まわりの不安が減る
- Markdown だけで完結する
完全に問題がなくなるわけではありませんが、
技術スタック解説ページの運用コストはかなり下がると思います（n=1）。
実際の使用例
実際にこの構成で運用している GitHub Wiki です。
- 見出し → ロゴ → 説明文、の順で構成
- ロゴは skillicons + 公式リソース直リンク
- 文章を直すだけでページ更新ができる
なんかいい感じの方法見つけたから共有したかっただけ。