Zennサイトのボタンとテキストのリンクの定義明確化と開発効率の向上

Zenn のボタンの機能・役割の再定義を試みました。 目標は「ボタン」に関するコンポーネントの適切な使用法を明確に定義することで、エンジニアが画面を実装する際に迷わずにそれらを選択できるようになることです。 「ボタン」 における課題 Zennにおけるボタンは大きく分けて２種類の外観があります。 テキストの外観のボタン テキストとそれを囲む矩形の外観のボタン テキストとそれを囲む矩形の外観のボタンの見た目は、ステレオタイプのボタンのイメージかもしれません。 一方で、テキストの外観のボタンはメトロUIやフラットデザインの登場と共に一般に普及したと考えることができます。 主な課題は、これら二つの外観のボタンをどのように使い分けるべきか判然としないことです。 ソースコード上の分類を確認 Zenn では、上記の２種類のボタンは下記のコンポーネントで表現可能です。 テキストの外観のボタン Button