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

UIボタン

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

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

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


アイコンとは?


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


ボタンとは?


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




ボタン構成全パターン

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

一覧

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


今回の方針


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

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

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


現時点の候補一覧


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

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

一覧

 閲覧数:264 投稿日: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 リンクを新しいタブで開く/IE 29
9 テキストのアウトライン化 / 書式 - アウトラインを作成 29
10 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い 29
11 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 28
12 ダウンロードしたモックアップベクター素材の感想を書いてみる予定のエントリー 28
13 「属性」「プロパティ」「アトリビュート」の違い 28
14 モバイルデザイン9 / トップページリスト表示 28
15 探している「HTML5エディタ」 28
16 Firefox7 「このサイトのパスワードを保存しますか?」を非表示にする(案) 27
17 良い感じのWebデザインを発見したら、その場で確認後、このエントリーへ追記していく 27
18 PhotoshopCS3 で、テキストをアウトライン 27
19 ボタン候補 26
20 「Google Chrome」のリリースノート(更新履歴)は公開されている 25
2022/10/03 22:49 更新
週間人気ページランキング / 9-26 → 10-2
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 71
2 16進数カラーコード / 2進数 37
3 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 26
4 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 19
5 「bgcolor」「background-color」「background」の違い | CSS 16
6 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
7 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 14
7 Design 0 14
8 RGBの種類 / ビットカラー | RGB(色) 12
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 11
10 「属性」「プロパティ」「アトリビュート」の違い | CSS 9
10 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 9
11 rem | 単位(CSS) 8
11 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
11 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 8
11 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 8
11 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
12 カラーコード / 色コード | カラーコード(色) 7
13 パッケージ化されてない拡張機能 | Chrome 拡張機能 6
2022/10/3 1:01 更新