製品ナビゲーションの統一：Build Awesomeへの移行とトラッキング規則の標準化

Web Awesomeのドキュメントサイトにおける製品ナビゲーションが、Font Awesomeの設計決定に合わせて更新されました。EleventyからBuild Awesomeへの差し替えと、トラッキング属性の命名規則統一により、製品ファミリー全体の一貫性が向上しています。

背景

#4981における設計とリリースの決定を受け、ドキュメントサイトの製品ナビゲーションの同期が必要になりました。このPRは、Font Awesomeリポジトリでの議論に基づく変更をWeb Awesomeのドキュメントに反映するものです。

製品ナビゲーションは、ユーザーがWeb Awesome、Font Awesome、その他の関連製品間を移動するための主要なインターフェースです。製品ラインナップの変更や表現方法の統一は、エコシステム全体のユーザー体験に影響します。

技術的な変更

製品ナビゲーションの更新は、3つの主要な要素で構成されています。

製品リンクの差し替え

EleventyへのリンクがBuild Awesomeに置き換えられました。nav-products.njkとnav-products-drawer.njkの両方で同様の変更が行われています。

変更前:

<a href="https://eleventy.dev" class="product product-eleventy" aria-label="Eleventy" data-track-event="navigation:product_link_click" data-track-destination="eleventy" data-track-context="products_nav" id="product-eleventy">
  <wa-icon src="/assets/images/logo-eleventy-icon.svg" class="logo-icon logo-eleventy"></wa-icon>
</a>
<wa-tooltip for="product-eleventy">Eleventy</wa-tooltip>

変更後:

<a href="https://www.kickstarter.com/projects/fontawesome/build-awesome" class="product product-build-awesome" aria-label="Build Awesome" data-track-event="navigation:product_link_click" data-track-destination="build_awesome" data-track-context="products_nav" id="product-build-awesome">
  <wa-icon src="/assets/images/logo-build-awesome-icon.svg" class="logo-icon logo-build-awesome"></wa-icon>
</a>
<wa-tooltip for="product-build-awesome">Build Awesome</wa-tooltip>

リンク先がKickstarterプロジェクトページになっており、Build Awesomeがクラウドファンディング段階にある製品であることを示しています。

トラッキングデータの命名規則統一

data-track-destination属性の値が、ハイフン区切りからアンダースコア区切りに変更されました。

<!-- 変更前 -->
data-track-destination="font-awesome"
data-track-destination="eleventy"
data-track-destination="podcast-awesome"
data-track-destination="blog-awesome"

<!-- 変更後 -->
data-track-destination="font_awesome"
data-track-destination="build_awesome"
data-track-destination="podcast_awesome"
data-track-destination="blog_awesome"

この変更により、トラッキングデータにおける製品識別子の表記が統一されました。data-track-contextやdata-track-eventの形式は維持されています。

アイコンバリアントの統一

二次製品（Podcast AwesomeとBlog Awesome）のアイコンが、regularバリアントからsolidバリアントに変更されました。

<!-- Podcast Awesome -->
<wa-icon name="podcast" family="classic" variant="solid" label="Podcast Awesome"></wa-icon>

<!-- Blog Awesome -->
<wa-icon name="newspaper" family="classic" variant="solid" label="Blog Awesome"></wa-icon>

主要製品（Web Awesome、Font Awesome、Build Awesome）がカスタムロゴを使用しているのに対し、二次製品はFont Awesomeのアイコンを使用しています。バリアントの変更により、ナビゲーション内でのアイコン表現が統一されました。

CSS変数とクラス名の更新

スタイル定義もBuild Awesomeに合わせて更新されました。

/* 変更前 */
--brand-eleventy-green: #00a776;
.logo-eleventy {
  color: var(--brand-eleventy-green);
}

/* 変更後 */
--brand-build-awesome-green: #00a776;
.logo-build-awesome {
  color: var(--brand-build-awesome-green);
}

ブランドカラー（#00a776）は維持されており、命名のみが更新されています。SVGファイル名もlogo-eleventy-icon.svgからlogo-build-awesome-icon.svgに変更され、ファイル内のクラス名も対応して更新されました。

設計判断

製品ナビゲーションの更新とトラッキングデータの標準化が同時に実施されました。

製品ナビゲーションからEleventyが削除され、新たにBuild Awesomeが追加されました。この変更は、#4981で議論された設計決定を反映したものです。

トラッキング属性の命名規則は、ハイフン区切りからアンダースコア区切りに統一されました。data-track-destinationの値のみが更新され、他のトラッキング属性（data-track-context、data-track-event）の形式は維持されています。この変更は、アナリティクスシステムにおける製品識別子の表記を統一するものです。

アイコンバリアントの変更は、regular から solid への統一です。主要製品のカスタムロゴと二次製品のアイコンとの視覚的な整合性を調整する変更と考えられます。

まとめ

本PRは、Font Awesomeエコシステムにおける製品ナビゲーションの更新と、トラッキングデータの標準化を実現する変更です。Build Awesomeの追加により製品ラインナップが更新され、アンダースコア命名規則の採用によりトラッキング属性の表記が統一されています。アイコン表現の統一は、これらの変更と並行して実施された視覚的調整です。