ドキュメントページにアンカーリンクを追加し、ボタンスタイリングを改善

2026年02月11日 11:27 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2055

Web Awesomeのサポートページが、セクション見出しへのアンカーリンクとボタンの視覚的改善により、ナビゲーション性とデザイン一貫性を向上させました。これにより、外部リソースからの直接リンクが可能になり、ユーザー体験が改善されます。

背景

サポートページの各セクション（GitHub、Discord、Email）には data-no-anchor 属性が設定されており、見出しへの直接リンクができない状態でした。webawesome-app#297 と webawesome-pro#142 では、これらのセクションへの直接リンクを提供する必要があり、アンカー機能の有効化が求められていました。

同時に、ボタンコンポーネントのスタイリングは明示的な appearance="filled" 指定とアイコンの欠如により、視覚的階層性が不明瞭でした。

技術的な変更

アンカーリンクの有効化 により、セクション見出しが直接リンク可能になりました。

変更前:

<h2 class="anchor-heading wa-cluster wa-gap-xs" data-no-anchor>
  <wa-icon name="github" family="brands" style="font-size: 2ch;"></wa-icon>
  GitHub
</h2>

変更後:

<h2 class="anchor-heading">
  <wa-icon name="github" family="brands"></wa-icon>
  GitHub
</h2>

data-no-anchor 属性の削除により、ドキュメントシステムが自動的に各見出しにアンカーリンクを生成するようになります。これにより /docs/resources/support#github のような直接リンクが機能します。

ボタンスタイリングの改善 では、アイコンの追加とappearance属性の最適化が行われました。

変更前:

<wa-button href="..." appearance="filled">
  Request a Feature
</wa-button>

変更後:

<wa-button href="...">
  <wa-icon slot="start" variant="regular" name="lightbulb-on"></wa-icon>
  Request a Feature
</wa-button>

ボタンには以下の変更が適用されています：

slot="start" でアイコンをテキストの前に配置
appearance="filled" をデフォルトの「accent」スタイルに変更
機能を視覚的に表現するアイコン（lightbulb-on、bug）を追加

見出し内のアイコン配置を統一するため、カスタムCSSが追加されました：

h2.anchor-heading wa-icon {
  margin-inline-end: var(--wa-space-xs);
}

このスタイルは、見出し内の <wa-icon> とテキストの間に一貫した間隔を提供します。インラインスタイル（style="font-size: 2ch;"）とユーティリティクラス（wa-cluster wa-gap-xs）を削除し、CSS変数による統一的なスペーシングに置き換えています。

設計判断

見出しマークアップの簡素化 により、スタイリングロジックをCSSに集約する方針が採用されました。

インラインスタイルとユーティリティクラスを削除し、セマンティックなクラス名（anchor-heading）とカスタムCSSの組み合わせに統一しています。これにより、スタイルの変更が一箇所で管理でき、ドキュメント全体の一貫性が保たれます。

ボタンのappearance属性 については、明示的な filled 指定をデフォルト動作に委ねる判断がされました。Web Awesomeのデザインシステムでは、appearance 属性を省略した場合に「accent」スタイルが適用されます。これにより、プライマリアクションボタンの視覚的優先度を保ちながら、マークアップの冗長性を削減しています。

本PRは、外部からの直接リンク要件に応えつつ、デザインシステムの原則に沿ったマークアップの整理を実現した変更です。アンカーリンクの有効化により、サポートページの特定セクションへの参照が可能になり、関連プロジェクトとの統合が円滑になります。