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

UI ＞ ボタン

ボタン定義を揺るがす事態が発生

　状態:確認中 　閲覧数:1,388 　投稿日:2017-01-09 　更新日:2017-01-10
iPoneの「テキスト」は「アイコン」下に表示されている
・「box-shadow の ボタン hover エフェクト」で「テキスト」表示させようとして初めて気が付く
・それこそ前提が崩れる話
・「ボタン」の定義って何？

現時点の疑問
・「ボタン」エリア内に「テキスト」を配置しなくて良いの？
・「ボタン」ではなく「アイコン」だからOK？
・「ボタン」と「アイコン」の違いは？

アイコンとは？


アイコンタクトの略称
・一目見ただけでそれがなんであるかがわかる図解の役割をしている
・そのためデフォルメされたものであったりと、デザイン要素が問われる

ボタンとは？


ダイアログやウインドウ上に表示されているスイッチのこと
・「はい」「いいえ」「次へ」などの文字が埋め込まれている長方形のブロック
・またボタンにはＵＲＬも埋め込まれており、ボタンをクリックすると別のページへ遷移する




ボタン構成全パターン

　閲覧数:380　投稿日:2017-01-10　更新日:2017-01-10　

一覧

- 画像 CSS SVG
テキスト◯アイコン◯ ◯ ◯ ◯
テキスト◯アイコン× ◯ ◯ ◯
テキスト×アイコン◯ ◯ ◯ ◯
テキスト×アイコン× ◯ ◯ ◯
フォントアイコン使用有無

今回の方針


画像未使用
・レスポンシブ対応するため

テキスト必須
・ないと分かりづらい

候補一覧
- CSS SVG
テキスト◯アイコン◯ A B
テキスト◯アイコン× C D
フォントアイコン使用有無

現時点の候補一覧


A.CSSテキストアイコン
・iPhoneアイコン風ボタン … 一部PNG画像使用　

C.CSSテキスト
・マテリアルデザイン Hover & Click エフェクト

一覧

　閲覧数:347　投稿日:2017-01-10　更新日:2017-01-19　

アイコン単独設置


あり得ない
・テキストをどう配置するか検討

「アイコン」＋「テキスト」の組み合わせ


iPhoneアイコン風ボタン
・ブラッシュアップ
・他のアイコンへも適用可能か、試してみる

jQuery pop menu
・組み込み可能か、試してみる

設置済


・iPhoneアイコン風ボタン
・iOSのアイコン … テキストなし。サイズ変更難しい。実際に使いこなすのは難しいかも
・iPhone.js … アイコン内のグラフィックスもpx指定されているため、応用が効きにくいと思われ
・iOS 7アイコン … アイコン内のグラフィックスもpx指定されているため、応用が効きにくいと思われ
・シンプルなCSSのiPhone

未設置


png画像使用
・正方形アイコン
・IOS icons
・Creating the iOS Icon Jiggle / Wobble Effect in CSS … デザインは良い

Pure CSS
・正方形アイコン
・Single Element Fancy iOS icon … 1例のみ
・CSS3 Animated Icons … 最強内容だが、応用が難しい
・iOS Icons … 4例

これから確認



Accordion link
・Forms within buttons


ボタン候補

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



類似度ページランキング
順位 ページタイトル抜粋 ％
1 「ボタン」と「テキストリンク」の使い分け 44
2 「使用できるソケットを待機しています」はクライアント側の問題？ 34
3 UIテキスト仕様調査「ログイン」 ／ 2018/2/17 32
4 画像の上にテキスト表示 31
5 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 30
6 マウスオーバーで「リンク画像」拡大表示をCSSで実装 30
7 UIテキスト仕様調査「新規登録」 ／ 2018/2/16 29
8 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い 29
9 リンクを新しいタブで開く／IE 29
10 テキストのアウトライン化 ／ 書式 - アウトラインを作成 29
11 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 28
12 ダウンロードしたモックアップベクター素材の感想を書いてみる予定のエントリー 28
13 モバイルデザイン9 ／ トップページリスト表示 28
14 「属性」「プロパティ」「アトリビュート」の違い 28
15 探している「HTML5エディタ」 28
16 Firefox7 「このサイトのパスワードを保存しますか？」を非表示にする(案) 27
17 PhotoshopCS3 で、テキストをアウトライン 27
18 良い感じのWebデザインを発見したら、その場で確認後、このエントリーへ追記していく 27
19 ボタン候補 26
20 「Google Chrome」のリリースノート（更新履歴）は公開されている 25
2023/12/03 15:45 更新
週間人気ページランキング ／ 11-26 → 12-2
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 33
2 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 23
3 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 22
4 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 19
5 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 17
5 鉄道会社毎のカラーコード | カラーコード(色) 17
6 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 16
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 14
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
10 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 12
10 「東京都」のカラーコード取得は難しい | カラーコード(色) 12
11 RGBの種類 ／ ビットカラー | RGB(色) 11
11 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 11
12 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 10
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 10
13 16進数カラーコード ／ 2進数 9
14 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する | CSS 8
15 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 7
15 「bgcolor」「background-color」「background」の違い | CSS 7
2023/12/3 1:01 更新