ボタン定義を揺るがす事態が発生
状態:確認中
閲覧数:2,406
投稿日:2017-01-09
更新日:2017-01-10
iPoneの「テキスト」は「アイコン」下に表示されている
・「box-shadow の ボタン hover エフェクト」で「テキスト」表示させようとして初めて気が付く
・それこそ前提が崩れる話
・「ボタン」の定義って何？
現時点の疑問
・「ボタン」エリア内に「テキスト」を配置しなくて良いの？
・「ボタン」ではなく「アイコン」だからOK？
・「ボタン」と「アイコン」の違いは？
アイコンタクトの略称
・一目見ただけでそれがなんであるかがわかる図解の役割をしている
・そのためデフォルメされたものであったりと、デザイン要素が問われる
ダイアログやウインドウ上に表示されているスイッチのこと
・「はい」「いいえ」「次へ」などの文字が埋め込まれている長方形のブロック
・またボタンにはＵＲＬも埋め込まれており、ボタンをクリックすると別のページへ遷移する
・「box-shadow の ボタン hover エフェクト」で「テキスト」表示させようとして初めて気が付く
・それこそ前提が崩れる話
・「ボタン」の定義って何？
現時点の疑問
・「ボタン」エリア内に「テキスト」を配置しなくて良いの？
・「ボタン」ではなく「アイコン」だからOK？
・「ボタン」と「アイコン」の違いは？
アイコンとは？
アイコンタクトの略称
・一目見ただけでそれがなんであるかがわかる図解の役割をしている
・そのためデフォルメされたものであったりと、デザイン要素が問われる
ボタンとは？
ダイアログやウインドウ上に表示されているスイッチのこと
・「はい」「いいえ」「次へ」などの文字が埋め込まれている長方形のブロック
・またボタンにはＵＲＬも埋め込まれており、ボタンをクリックすると別のページへ遷移する
ボタン構成全パターン
一覧
| - | 画像 | CSS | SVG |
|---|---|---|---|
| テキスト◯アイコン◯ | ◯ | ◯ | ◯ |
| テキスト◯アイコン× | ◯ | ◯ | ◯ |
| テキスト×アイコン◯ | ◯ | ◯ | ◯ |
| テキスト×アイコン× | ◯ | ◯ | ◯ |
今回の方針
画像未使用
・レスポンシブ対応するため
テキスト必須
・ないと分かりづらい
候補一覧
| - | CSS | SVG |
|---|---|---|
| テキスト◯アイコン◯ | A | B |
| テキスト◯アイコン× | C | D |
現時点の候補一覧
A.CSSテキストアイコン
・iPhoneアイコン風ボタン … 一部PNG画像使用
C.CSSテキスト
・マテリアルデザイン Hover & Click エフェクト
一覧
アイコン単独設置
あり得ない
・テキストをどう配置するか検討
「アイコン」＋「テキスト」の組み合わせ
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