「ボタン」と「テキストリンク」の使い分け

UIボタン

目次一覧

 状態:試行錯誤履歴  閲覧数:1,585  投稿日:2019-10-02  更新日:2019-10-02
問題発生 / 検索してみたが / デフォルトボタンの方が分かりやすい?

デフォルトボタン使用有無について他サイト調査


問題発生 / 検索してみたが / デフォルトボタンの方が分かりやすい?

 閲覧数:545 投稿日:2019-10-02 更新日:2019-10-02

問題発生


作成中のWebサイトにおいて、「ボタン」「リンク」に統一感がない
・ユーザー定義ボタン
・デフォルトボタン
・テキストリンク

見た目に一貫性がない
もちろんインタラクションにも一貫性がない

サイト制作者がそう感じているのなら
アクセスしてくるユーザーは猶更そう感じるかも

生じた疑問
・「ボタン」と「テキストリンク」はどう使い分けるの?
・これまで「疑問にすら思わなかった」こと自体が問題かも

検索してみたが


期待したような「納得する情報」は見つからなかった

仕方がないので
プロジェクト単位で、決め打ちしていく
P46

デフォルトボタンの方が分かりやすい?


フォーム送信ボタン1つだけなら良いが
・確認してみたら、デフォルトボタン使用箇所はたくさんあった
・これ全部変更するの?
・もしかすると、デフォルトボタンの方がユーザーには分かりやすくない?
投稿する
ファイルを選択
選択キャンセル
アップロードする
チェックしたファイルを削除する


デフォルトボタン使用有無について他サイト調査

 閲覧数:552 投稿日:2019-10-02 更新日:2020-03-17

デフォルトボタン使用有無について他サイト調査


note
・デフォルトボタンは未使用
・「投稿」ボタンHTML
<button data-type="primary" data-size="small" data-width="fit" data-disable-focus="false" type="button" data-v-45107202="" class="a-button m-iconButton" data-v-764ea036="" data-v-0efa98cc=""><div class="a-button__inner" data-v-764ea036=""><span class="m-iconButton__labelWithIcon" data-v-45107202=""><i aria-label="create" class="a-icon a-icon--create a-icon--size_small" data-v-40f71bea="" data-v-45107202=""></i></span> <span data-v-45107202="">投稿</span></div></button>
・「画像を追加」ボタンHTML(意味合い的には「ファイルを選択」ボタンに該当)
<div data-v-764ea036="" class="a-button__inner"><span data-v-45107202="" class="m-iconButton__labelWithIcon"><i data-v-40f71bea="" data-v-45107202="" aria-label="image" class="a-icon a-icon--image a-icon--size_small"></i></span> <span data-v-45107202="">画像を追加</span></div>

Qiita
・デフォルトボタンは未使用
・「投稿する」ボタンHTML
<a class="st-Header_postButton mr-2 px-2" href="/drafts/new"><span class="fa fa-fw fa-pencil-square-o mr-1"></span>投稿する</a>


ボタン一覧
ボタン候補
ボタン候補2 / 「ボタン」エリア外で「テキスト」表示しても良いの?



ボタン候補2 / 「ボタン」エリア外で「テキスト」表示しても良いの?



類似度ページランキング
順位 ページタイトル抜粋
1 「ボタン」と「テキストリンク」の使い分け 85
2 ボタン候補2 / 「ボタン」エリア外で「テキスト」表示しても良いの? 44
3 スキップリンク 37
4 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 33
5 「属性」「プロパティ」「アトリビュート」の違い 33
6 画像の上にテキスト表示 32
7 「使用できるソケットを待機しています」はクライアント側の問題? 31
8 UIテキスト仕様調査「ログイン」 / 2018/2/17 29
9 画像編集系ソフトウェアの分類。ラスタ、ベクタだけではなく 29
10 リンクを新しいタブで開く/IE 29
11 リストタグではない、リスト内画像の縦位置調整 29
12 UIテキスト仕様 29
13 「リキッド」とか「グリッド」とか 28
14 お使いのコンピュータ ネットワークから通常と異なるトラフィックが検出されました 27
15 ストリートビューが使いにくくなった 27
16 「ヴィンテージ」画像フィルタ実行例 27
17 「クリエイティブ・コモンズ・ライセンス」以外の画像素材サービス「ライセンス規約」 27
18 いい感じのロゴを見つけたら、そのサイトへのリンクを張っていくページ 26
19 自分の環境でスプライト画像を作成したい 26
20 マウスオーバーで「リンク画像」拡大表示をCSSで実装 26
2025/4/30 21:41 更新
週間人気ページランキング / 4-23 → 4-29
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 13
2 Inkscape | ソフトウェア 12
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 12
3 ツールチップが表示されないときー 10
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 6
5 ログイン 4
5 「Create Link」代替拡張機能を探した結果は、「CopyTabTitleUrl」でした。 | CopyTabTitleUrl(Chrome 拡張機能) 4
5 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 4
5 RGB ⇔ Lab | 色変換(色) 4
6 Design 0 3
6 効果を打ち消すスタイルシート | CSS 3
6 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
6 他サイト調査(HTML) カテゴリー 3
6 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 3
7 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 2
7 気が付いたこと 2
7 別方法 2
7 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
7 「bgcolor」「background-color」「background」の違い | CSS 2
2025/4/30 1:01 更新