用途に合わせてボタンをリンクを完全に使い分ける

Jan 30, 2023

HTMLタグには、ボタン要素をマークアップするためのbuttonタグと、ハイパーリンク要素をマークアップするためのaタグが存在します。

エンジニアはマークアップを行う場合、用途に合わせて適切なタグを選択してマークアップを行います。

デザインデータを見てると、大体「ボタン」と「テキストリンク」という形でデザインが分けて作られていることが多いと思います。

この時、「ボタン」がbuttonタグ、「テキストリンク」がaタグで綺麗に分けてマークアップできるような形でデザインデータが作成されていれば何の問題もないのですが、時折これはどうやらテキストリンクではなくボタンだなというケースがあります。

もちろん密にコミュニケーションをとり、用途の確認を行いデザインデータとコードの不一致を解消できれば良いのですが、コミュニケーションコストが高いと、良しなにエンジニアが最適化を行なってしまうケースがあります。

デザインデータとコードが一致していない状態は、運用性の低下になるため直ちに改善することをお勧めします。

デザイナーとエンジニアが共通言語を持ってコミュニケーションを取れる状態を目指して、今回ボタンとテキストリンクの使い分け方について紹介します。

見た目で判別しない

こちらの2つの要素はそれぞれボタン、それともテキストリンクでしょうか？

答えは、「まだ、わからない。判断できない」となります。

しかし、どうやら見た目の情報だけで、左がテキストリンク、右がボタンと判断してしまう方がいます。（ちなみにどちらもMaterial-UIのボタンコンポーネントです）

見た目で要素を分類するのは非常に危険で、後に課題となる事態を巻き起こすかもしれません。

具体的には、目が見えない人にとって視覚的な情報は全く意味を持ちません。

要素は見た目ではなく、必ず用途に合わせて分類するようにしましょう。

それではbuttonタグとaタグの用途について見ていきましょう。

buttonタグは、MDNに以下の通り書かれています。

要素はクリックできるボタンを表し、フォームや、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。

aタグは、MDNに以下の通り書かれています。

href属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。

buttonタグは、当たり前だろというような内容しか書かれていないと感じるかもしれませんが、ここで重要なのは、buttonタグに対しaタグは用途が大変限られているということです。

クリックできる要素を表すbuttonタグと、ハイパーリンクを作成するaタグ。

つまり、先ほど見た左側のような輪郭を持たない要素であっても、ハイパーリンク以外の用途でaタグは利用できないということになります。

さらにいうと、クリック可能な要素に対しては、基本的にbuttonタグが使われるということになります。

今回は、buttonタグとaタグの使い分けについて紹介しました。デザイナーがHTMLタグの知識を持つことで圧倒的にコミュニケーション解像度、デザインシステム作成状態がアップするはずです。

今回はボトムアップ的な事例についてでしたが、エンジニアとして隣接する職域のスキルを学ぶのはメリットが多いはずです。

私自身も気を引き締めて学んでいきたいと思います。

今後も非エンジニア向けに今回のような情報を提供していきたいと思います。

先日はデジタルデトックスに伊豆まで行ってまいりました。

途中は熱海に寄って、来宮神社で参拝してきました。自然の中というのはすごく気持ちが落ち着きますね。