ボタンUI探索紀
様々なボタンのUIデザインを探して、勉強したいMijinko_SD.icon
個人projectに作ってもいいような内容だけれど、ツッコミなども欲しいので井戸端に書く
+1はるひ.icon*5wogikaze.icon*3
nomadoor.iconさんの登場が待たれる
スマホのUIデザインの大体の流れnomadoor.icon
みんなスマホ初めてだろうし、どれがボタンなのか分からないだろうなあ
現実のボタンと同じような見た目にしよう！
スキューモフィズム
ボタンUI#63b81a157838e3000006d681
ボタンUI#63b828477838e300003278dc
そろそろ慣れてきた頃だし、四角の上に文字が書いてあればOKじゃない？
フラットデザイン
ボタンUI#63b8b98ee2dacc0000d8f09f
流石にやりすぎたので影つけて浮いてる感じにします
マテリアルデザイン
凸凹が滑らかに繋がってるデザイン面白そう
ニューモフィズム
見にくいなぁ
マテリアルデザインに回帰
マテリアルデザインってもうちょっとシンプルにできそう
影の代わりにグレーの輪郭をつけるボタンデザイン
/work4ai
用語めっちゃ助かるMijinko_SD.icon
https://gyazo.com/530bd62a174d72e7aa87c521c630ed9d
Windowsでよく見かけるボタンMijinko_SD.icon
Windows 11になってからデザインが大きく変わった
.NETを使用しているソフトウェアのボタンデザインは大体こんな感じになっている
昔（Windows 10より前）だと、ボタンに影がついていた
現実にある物理ボタンに沿ったようなデザイン
https://gyazo.com/96ddd1bcf9aff55d065737afda1971ee
Windows 8のスタート画面
流行りのフラットデザインを例にもれずWindowsも採用した
とても不評だった
https://gyazo.com/c65dd7e3d72520c5e745fcd8e7df3fcf
Windows 11のスタートメニューのアプリMijinko_SD.icon
Windowsに限らず、最近のスマホやパソコンのアプリランチャーは大体こんなデザインな気がする
スマホと違う点
アイコンを押すタイプのボタンというよりは、グリッドを押すタイプのボタンという感じがする
アイコン周りの余白が大きい
グリッドをマウスホバーすると、そのグリッドの領域に色がつくようになっている
https://gyazo.com/340ab8f2d9e514c9a6f99c1693f9f1db
PCはマウスホバーのアニメーションを入れておけば押せるかどうか確認できるから多少シンプルでいいというのはありますねnomadoor.icon
逆にスマホは見ただけで押せそうなデザインにしないといけない
フラットデザインとかはそうじゃないけど…
スマホでホバーに似たような仕組みはあるだろうかはるひ.icon
「タップと思いきやスワイプでした」というような時にホバー的な振る舞いをするな
タップをやめてフリップ入力みたいに選択肢がでれば面白そうnomadoor.icon
https://gyazo.com/f6e347c0e3e62a93c154f409bb290d75
AndroidのApexランチャー内のボタンMijinko_SD.icon
アプリアイコンが丸く、それ自体がボタンとしての役目を果たしている
https://gyazo.com/0a06ccc6e1c23849d8e91d6db9e858c7
Windows 11のスタートメニューのすべてのアプリのボタンMijinko_SD.icon
https://gyazo.com/3d992e27675a58bb0d8dc27b8f94ca9b
TwitterのいいねとかのボタンMijinko_SD.icon
アイコンがそのままボタンになっている
テキストが無いので非常にコンパクト
ボタン幅を小さくできるので、スマホのような横幅が小さな環境でも横並びで表示させることができる
つまり、場所を選ばない
横幅の割に、ボタン幅は小さめかもしれない
このアイコンボタンはアイコンを慎重に選ばないと初見で全く意味がわからないので注意しているwogikaze.icon
例えばwindows11の設定
押すと色が点く
https://gyazo.com/b026c9100389461a7d926950a41f8c96 https://gyazo.com/d411ef809a7f8bde4ed40d6797bab3d9
何かが実行されたというのがわかりやすい
https://gyazo.com/31f9cdc7cb00602e2608d7f84d8a2efe
Youtubeの動画の真下にあるボタン
チャンネル登録ボタンだけ白背景で、やたらと目立っている
TwitterやInstagramのフォローボタンもだいたいこんな感じ
未登録の状態と、登録済みの状態で色が反転する
Twitterはいきなり未登録の色と登録済みの色を逆にしたことでユーザーの困惑を買った
Twitter、フォローボタンの色を変更も「見づらい」と不評　白いボタンの意味が真逆に - ITmedia NEWS
上記のボタンとは違って、最初からボタン領域の背景色が塗られている
ボタンをマウスホバーすると、下に詳細文が出る
https://gyazo.com/59be52178cc2bd15b23ef81df2f6d756
場所や形がはっきりして大きめなので押しやすいMijinko_SD.icon
よく使うボタンや直感的に押すようなボタンでこういうUIなのはありがたく感じる
https://gyazo.com/279851a0c90ef9fc46305fefde0ea117
Scrapboxのページカード
付箋を模したようなデザインになっている
ピン留めされていると右上の端が折り畳まれる
https://gyazo.com/fc05a2d3891b9ec584436e82a78d6900
狙っているのか偶然なのかはわからないけれど、Gyazoのデザインも似たようなものになっている
https://gyazo.com/38462fc0bd479dd57da6aed9192b022c
余白が大きい
Gyazo、なんかださいと思うはるひ.icon
ダサいというか、古いデザインからあんまり更新していないんだと思うMijinko_SD.icon
どんなデザインであっても、流石に何年も前の慣例に沿ったデザインだとしょぼく感じる
それはダサいということでははるひ.icon
ダサいという表現は否定してないっすねMijinko_SD.icon
そっかはるひ.icon
https://gyazo.com/a9be74bbc19d7c6ffa07c5f96850e1ec
Twitterの探索ページのタブのデザイン
一定間隔の空白を空けながら文字が並んでいるだけのシンプルなデザイン
選ばれているタブのボタンは色がはっきりしていて下線が引かれている
ごく一般的なタブのデザインだと思うMijinko_SD.icon
https://gyazo.com/510c54bee2dce34d300ade32c189ced6
出典：ニンテンドー3DS『大合奏!バンドブラザーズP』DL販売およびネットワークサービス終了へ。手厚いサポートが続けられてきた音楽ゲーム - AUTOMATON
バンブラPのボタンデザイン
めちゃくちゃ盛り上がっていて押しごたえのありそうなデザイン
個人的に結構好きMijinko_SD.icon
同じくはるひ.icon
押したときのカチっていう音も良かった気がする。昔のラジカセにあるような押し込むボタンをイメージしている？shoya140.icon
ボタンを押したときのアニメーションと音がすごく「ボタンを押している」感じがして好きだった45Nuyagawa.icon
そもそも、ゲームのUIデザインは、アプリのUIデザインとは方向性が違うので、あんまり比較できるものでも無い気がするけれど
https://www.youtube.com/watch?v=0Va3ue6Qk-0
バンブラPの時代はスキューモーフィズムが流行ってたはるひ.icon
それっぽい流れはゲームにも来てた
今はゲームでももうちょっとフラットなのが好まれる傾向がある
マリオパーティ スーパースターズはスラッとし過ぎてて好きじゃないなって思ったMijinko_SD.icon
前述の「アプリのUIデザイン」に寄りすぎていてゲームっぽさがまるで無い
https://gyazo.com/66704d89a35a1d69bb047703f0a6f9f4
最近流行りのトグルスイッチ
丸の中や背景色が塗られている部分に文字が書かれているパターンも稀に見かける
Windows 11では横に説明文がある
https://gyazo.com/1ab2ff22b637f1d19125cd401b6f91da
トグルスイッチ自体を押さなくとも、左側の文字の部分を押しても反応するので、当たり判定はかなり広めに取られている
これを見てわかること
押すと丸の位置が横になるので、2段階に切り替えられるということがわかる
有効になると色が点くので、現在有効になっているかどうかというのもわかる
もし仮に文字で「有効」と書いたボタンを作ると、今の状態が有効なのか、押したら有効になるのかがわからなくなる問題があるが、このデザインはその問題をクリアしている
普通に考えたら現在が有効では
TwitterのFollow ↔ Followingみたいなのはは今どっちだ？ってなりますよねぇnomadoor.icon
それなwogikaze.icon
マイクのミュートもshoya140.icon
参考はるひ.icon
トグルボタン(ON/OFFボタン)を使いやすくデザインする7つのポイント - Workship MAGAZINE(ワークシップマガジン)
トグルスイッチの誤用をやめよう | UX MILK
トグルスイッチのガイドライン – U-Site
https://gyazo.com/60e844e80c36ee064a444debee210e8c
https://gyazo.com/5c3c780bf105857910ddce0c316af2f6
古来からある文章内リンク
青いところをクリックすることで別の場所に飛ぶことができる
前提知識が無いとボタンだとはわかりにくそうMijinko_SD.icon
Windowsだとマウスホバーすることでカーソルが👆に変化するが、スマホでそういうのは無い
ハイパーリンクは文章中で青くなってるから異質なものだとわかるというわけかなはるひ.icon
揃えてあったり、時刻であったりとそもそも異質なものが青くてもその色はあまり意味を表さない
「文中で色がついていたらボタンの可能性がある」はわりとあるかもMijinko_SD.icon
青リンク、赤リンク
現実世界のボタンらしからぬ見た目なのに押せそうに見えるボタンはどう実現できるだろう？mgn901.icon
同質なものが並んでいると押せそうに見える？
押したくなるような文字が並んでいると、押せるように感じる？Mijinko_SD.icon
逆にボタンっぽいけどボタンじゃないデザインを探してみようかなMijinko_SD.icon
90歳になる祖母がスマホに変えたが、どこをタップすれば良いのかわかってないはるひ.icon
https://gyazo.com/96f69073e4532f7213f3291994ee2476
祖母のは泥なのでちょっと違うが
ボタンではなく文章中の「開始」を押して通話を試みており、全然できなくてキレてたw
文章中にボタンを仕込んでおくと文章を読みながらすぐその機能にアクセスできて便利な側面があるかもしれないけれど、誤反応することも多くて実際はかなり不便になる気がするMijinko_SD.icon
むしろ我々が青いところがなんとなくボタンに見えるバイアスに汚染されているのだ…nomadoor.icon
https://gyazo.com/f18a7b77ab0888a7768b5e6f792620e1
このロゴもボタン（困惑）Mijinko_SD.icon
左上（または上部中央）にあるロゴは、押すとトップページに戻るという慣例がある
この他に、アイコンを押すとそのユーザー（またはチャンネル等）のトップページに飛ぶという慣例もある
https://gyazo.com/b978b2c8938324ea089fc89b7be93250
左上のアイコン（またはユーザー名）はクリックできる
自分のアイコンを押した際は、そのユーザーの設定項目が出現することもある
https://gyazo.com/468d3b0e39618eafc77bde1c19821d56
ページ上に一つしかない かつ ボタンらしからぬ見た目をしていると押されないことがある。mgn901.icon
「そこボタンなの？」と言われたり、そのボタン以外の手段がある場合は遠回りされたりする。
https://gyazo.com/d7dee3f95a943a63f93d93268af409d3
Chromeのタブのデザイン
元々アクティブではないタブにも外枠があったが、アップデートでデザインが変更され区切り線のみになった
古のMaterial Design
https://gori.me/uploads/2016/03/Google-Chrome-Design-Renewal.jpg
すき45Nuyagawa.iconwogikaze.icon
Twitterのタブのように区切り線が無いデザインもあるが、区切り線があるとボタンの領域がどこまでなのかがひと目でわかる
逆に区切り線が多すぎるとうるさくなるので、適材適所なのだろう
ブックマークバーに区切り線は存在しない
https://gyazo.com/e618890ef74dba5b7874a6ca33330fcb
https://gyazo.com/3278653571d0d77ce8c9c136c3005650https://gyazo.com/1a0c3d153ea6303bc15f5799f6bf893b
Windowsの電卓アプリ
ボタンの枠が表示されている
現実の電卓に寄せているのだろうか？Mijinko_SD.icon
余白はかなり狭い
枠が表示されている割には、上記のWindowsのスタートメニューと同じぐらいの当たり判定の広さを持っている
https://gyazo.com/e4fba8c0f750b8ec6d6c19972faafec8
火災報知器
ボタン史上一番押したいmtane0412.icon
これいっぺん押してみたいなはるひ.icon45Nuyagawa.icon
小学生か中学生の頃に押しときゃ良かった
まあ今やってもいいか
あかんわ、捕まるかもしれない
https://www.city.niihama.lg.jp/site/syoubou/5902.html
よかねえよwwogikaze.icon
自分で買って押しましょうMijinko_SD.icon
機器収容箱(P型2級) ニッタン(NITTAN) 防災システム用 【通販モノタロウ】
！！！！！！はるひ.icon
一度押すとカバー部分は破損する感じの作りなのかな？inajob.icon
この動画の物だと元に戻せるみたいですねnomadoor.icon
https://www.youtube.com/watch?v=Qz6ibn556co&ab_channel=%E8%87%AA%E7%81%AB%E5%A0%B1%E5%A5%BD%E3%81%8D%E3%81%AE%E4%B8%AD%E5%AD%A6%E7%94%9F
https://gyazo.com/1abc8c01a5d2ac38d02df7c888567afa
Windows 11のクイックスタートのボタン
どのアイコンをマウスホバーしても見た目は変わらないが、実は右クリックした時のメニューの項目がアイコンごとに違う
https://gyazo.com/e00cda65203601cce84aefeb3148d799
https://gyazo.com/144ccf7ba9dfc1dc9e277506b797a31a
普通に初見殺しMijinko_SD.icon
10からのアップグレードで来た人は大丈夫なはずbsahd.icon
脱線するかもだけど、押してもいいボタンと簡単に押してはいけないボタンはUIで区別されるべきだと思うshoya140.icon
+1Mijinko_SD.icon
理想を言えば、すべてが押してもいいか、undoへの動線が明確であってほしい
@rakusai: 小学生の子供にChromebookを渡したところ、どうやったら使いこなせるようになるか聞かれたので、とりあえず全部のボタンを押してみたらと伝えたら、本当にその通りにしていて結果的に親のアカウントがブロックされてしまったw
これ好きshoya140.icon
はるひ.iconの祖母の話に戻るが、適当なところを触って仕事中の人に電話がかかったりしてしまうので家族に教えた最低限の箇所以外押すなと言われているらしいはるひ.icon
フェイルセーフとかフールプルーフみたいな概念がITには足りなさすぎるnomadoor.icon
バックアップは最低限のフェイルセーフであると信じたいbsahd.icon
web上で少しでも装飾されているもののほとんどはクリックできることに気づいたnomadoor.icon
探索記ではなく探索紀？
「紀」の方が楽しそうな気がしたのでそうしましたMijinko_SD.icon
紀行文の「紀」のイメージがするcFQ2f7LRuLYP.icon
Tailwind CSSを使って様々なボタン(button)を作成する方法
Tailwind CSS
ボタンじゃないけれどMijinko_SD.icon
@nerds_feed: This makes me feel old
https://gyazo.com/6c1e140cb7b3fbcb81ce98f2480bc849
#スクロールバー
歩行者用押しボタン
https://gyazo.com/8b73a648a5a00ffbe07c481e2fcc3384
通勤時、自動車の交通量が多い時には押してる。車が見えないときは押さずHiro Aki.icon
画像を持ってくるために軽く調べて他の形もあることを知る
https://www.keishicho.metro.tokyo.lg.jp/kotsu/jikoboshi/koreisha/accessibility.html