リンクボタンはなぜ生まれるか
リンクボタンって何者？ 出身は？ 恋人は？ 調べてみた！
経緯
そもそもリンクボタンってよくないみたいな話聞いたな
出典が無い文言は全てygkn.iconの考察、感想です
ほんまかどうかはわかりません
最後に「知らんけど」を補完してください
新情報、出典お待ちしてます
リンクボタンとは？
ここでの定義
<a class="button">ボタンみたいなリンク</a>
見た目はボタン、中身はリンク
リンクボタンはあまり良くない
なぜ？: リンクとボタンを区別して使いたい時があるのに、見分けがつかないから
@sukoyakarizumu: 全盲の人に「〜のリンクをクリックして」と案内するか、「〜のボタンをクリックして」と案内するか、注意している。相手がリンクジャンプ・ボタンジャンプどちらを使うかが変わるから。事前にDOMを調べることすらある。 リンクとボタンが区別できるビジュアルにしてほしい。
リンクをコピーしたい、別タブで開きたい時とか
リンクだと気づかなかったら別ウィンドウ、別タブで開けるという選択肢に気づかない
「このボタンを押したら開くであろう情報を別タブで開きたい…でもこれはボタンなのか？ リンクなのか？」
別タブ、ウィンドウで開く機能がNotion、Slack などのデスクトップアプリでもわざわざ実装されてるってことは 使われていて便利ってことだよね
そもそもリンクとボタンってちゃうものやん？
意味、役割から考える
それぞれの目的（考察、要裏付け）
リンクの目的は参照先リソースへのアクセス（結果としてURL が変わったりダウンロードされたりする） (href Hypertext Reference で定義)
ラベルは参照先のリソース名（名詞）や「…を見る」
例：記事やユーザーの名前、詳細を見る
ボタンの目的はクリックをトリガーしてコマンドを実行する (onClickで定義)
汎用的？
ボタンは「それしかない時」の UI
ラベルは動詞「…する」or 名詞化した動詞（主語はユーザー）
例：フォロー、削除、ログイン
画面上のボタンやリンクの役割は、ユーザーを次のアクションへと導くことです。
そもそもそれぞれの UI の起源って…？
ボタンは物理ボタンでしょ
リンクは WWW の起源であったな
というか現代のUI デザインにおいて起源とかを持ち出すのは正しいのか
知ると自分の中での納得感はあるけど、起源を知らない人から見た意味は？
キーボード操作のみのPCとタッチデバイス、さらには Vision Pro のような空間コンピューティングでは操作性は全然違うし
でも歴史的経緯から標準やデファクトになった UI がその経緯から離れても有効であったりするよね
例えばコピペの Ctrl or ⌘ + C, V は QWERTY で隣同士だからだけど、 QWERTY 配列自体タイプライターのハンマーが起源
とは言っても歴史的経緯が本当に合理的かを考え続けるのも大事
キーボードの例で言うとタイプライターから離れて考えられた Dovrak 配列とか
挙動から考える
@securecat: そもそもリンクは押せません。ボタンのようなスタイルをすることで押せるようになるのは、それはボタンというスタイルがそうさせているだけです。ちなみに振る舞いの列挙からcursorプロパティの言及が抜けてますよ。 / “リンクとボタンを｢押せる｣だけでデザインしない” https://t.co/0mkY9O4c45 そういえば何でボタンって UA スタイルシートで cursor: default なんだ…？
参考
↑この Medium の記事が一番量が多い & いろんなところから参照されてそう
関連記事にそもそもリンクボタンについて記述されてるのもあった
この記事が一番納得感あるかも
OS アプリのボタンはデフォルトカーソル
マジじゃん！？！？！？？！！？（気づかなかった…）
リンクボタンの例を探す
Java ダウンロードページ
あなたと JAVA じゃなくなったのちょっと悲しい
Twitter
https://gyazo.com/6408e2fae0ec2312b54756ed93893bac
お、ちょうど良いところにリンクボタンあるやん！
https://gyazo.com/0c233820a5334e1453cc732c1cb607e8
なんか同じボタン 2 つない？
意味、機能が違う！
サイドバー下部のもの：クリックするとツイート作成モーダルに遷移する
ツイートを入力する UI の中のもの：クリックすると入力された文章がツイートされる
SmartHR Design System
リンク（a要素）をボタンのように見せるためのコンポーネントですが、どうしようもないときだけ使います。 アクションボタンとして表現したい場合は、素直にButtonを使いましょう。
注意書きがある！ やっぱり SmartHR すごいな〜
でも「どうしようもないとき」って何…？
どうしても使いたいってこと？ どういう時にどうしても使いたくなる？
人はなぜリンクボタンを使いたがるのか（考察）
CTA のため？
目立つし
SEOのため？
リンクが多かったらSEO的に有利そう？
最終目的であるアクションを実行するために必要なリンク
例えば：リンクボタン「○○する」（推測）
「ここに○○するための画面への動線が必要だな…」
○○するための画面へ（リンク）
「この文言だと『○○する』と言う最終目的が薄れてしまう…。文言を削ろう」
○○する（リンク）
「文言が動詞になったしリンクよりボタンの見た目の方が自然だな」
「でもこれはURLを遷移するからリンクだし、実用的にもリンクURLをコピーしたり別ウィンドウで開た方が便利だからリンクとしてマークアップしよう」
○○する（リンクボタン） 爆誕！
リンクボタンがあかんのはわかった、じゃあどうすんの
リンクにする
Apple の CTA とかはリンクのデザイン（「購入」リンク）
https://gyazo.com/d2502927bbb91e6c11d8de2fde7088d0
でも全てではなさそう（「購入」リンクボタン）
https://gyazo.com/0efc667c5c81cd7fb5d7b28add35f53e
ボタンの見た目を持ったまま、リンクだということがわかりやすいようにする
どうやって？
見た目で工夫する
確実っぽいけど案は無いです
リンクのUIデザインとしての要素（下線、青文字）を持ってきても合わん気がするし
矢印や > を表示するとリンクっぽいかも
文脈や文言で工夫する
文言がリンクっぽい（名詞や「…を見る」）もの
でも「もっと見る」ボタンでアコーディオンやモーダルのトリガーだったりする時もあるよね
アクションを起こすのに画面遷移が必要そうなもの
「ここにツイートするってボタンがあるけど本文を入力してもないし、このボタンを押すと入力画面に遷移しそうだな」
「ここに購入するってボタンがあるけど支払い情報を入力してもないし、このボタンを押すと入力画面に遷移しそうだな」
でもこれはない（悪化する）
URL遷移するのに button タグを使う
例
<button onClick={() => {location.href = "link"}}>link を開く</button>
<button onClick={() => {window.open("link")}}>link を開く</button>
リンクのセマンティックや便利な機能を全部失う
逆に、コマンドの実行に a タグを使う
例
<a href="javascript:void(0)" onClick={なんかする}>なんかする</a>
<a href="javascript:なんかする()">なんかする</a>
お、リンクがある！ 別タブで開いたろ！ と思って開いたら謎の白い画面を見ることに