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

UIボタン

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

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

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


アイコンとは?


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


ボタンとは?


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




ボタン構成全パターン

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

一覧

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


今回の方針


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

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

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


現時点の候補一覧


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

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

一覧

 閲覧数:138 投稿日: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 テキストのアウトライン化 / 書式 - アウトラインを作成 29
9 リンクを新しいタブで開く/IE 29
10 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い 29
11 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 28
12 ダウンロードしたモックアップベクター素材の感想を書いてみる予定のエントリー 28
13 モバイルデザイン9 / トップページリスト表示 28
14 「属性」「プロパティ」「アトリビュート」の違い 28
15 探している「HTML5エディタ」 28
16 Firefox7 「このサイトのパスワードを保存しますか?」を非表示にする(案) 27
17 良い感じのWebデザインを発見したら、その場で確認後、このエントリーへ追記していく 27
18 PhotoshopCS3 で、テキストをアウトライン 27
19 ボタン候補 26
20 「Google Chrome」のリリースノート(更新履歴)は公開されている 25
2021/7/24 19:07 更新
週間人気ページランキング / 7-17 → 7-23
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 53
2 血の色 / #b30000 / #360800 / #ff0000 | 色 26
3 Design 0 23
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 17
5 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 15
6 HSLとHSVの違い | 色変換(色) 14
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 13
8 「bgcolor」「background-color」「background」の違い | CSS 12
8 「CSSキーフレームアニメーション」実行後のCSS設定 | アニメーション 12
9 RGBの種類 / ビットカラー | RGB(色) 11
10 画面キャプチャ | Chrome 拡張機能(ブラウザ) 9
11 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 8
11 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 8
12 16進数カラーコード / 2進数 7
12 コズミックブルーが何色か分からない | 色 7
13 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 6
2021/7/24 1:01 更新