ボタンUI探索紀
+1はるひ.icon*5wogikaze.icon*3
nomadoor.iconさんの登場が待たれる
スマホのUIデザインの大体の流れnomadoor.icon
みんなスマホ初めてだろうし、どれがボタンなのか分からないだろうなあ
現実のボタンと同じような見た目にしよう！
そろそろ慣れてきた頃だし、四角の上に文字が書いてあればOKじゃない？
流石にやりすぎたので影つけて浮いてる感じにします
Fluent Designもあるよ!bsahd.icon
すりガラス効果が特徴
凸凹が滑らかに繋がってるデザイン面白そう
見にくいなぁ
マテリアルデザインってもうちょっとシンプルにできそう
影の代わりにグレーの輪郭をつけるボタンデザイン
用語めっちゃ助かるMijinko_SD.icon
https://gyazo.com/530bd62a174d72e7aa87c521c630ed9d
Windowsでよく見かけるボタンMijinko_SD.icon
.NETを使用しているソフトウェアのボタンデザインは大体こんな感じになっている https://gyazo.com/96ddd1bcf9aff55d065737afda1971ee
とても不評だった
https://gyazo.com/c65dd7e3d72520c5e745fcd8e7df3fcf
Windowsに限らず、最近のスマホやパソコンのアプリランチャーは大体こんなデザインな気がする
スマホと違う点
アイコンを押すタイプのボタンというよりは、グリッドを押すタイプのボタンという感じがする
アイコン周りの余白が大きい
グリッドをマウスホバーすると、そのグリッドの領域に色がつくようになっている
https://gyazo.com/340ab8f2d9e514c9a6f99c1693f9f1db
PCはマウスホバーのアニメーションを入れておけば押せるかどうか確認できるから多少シンプルでいいというのはありますねnomadoor.icon
逆にスマホは見ただけで押せそうなデザインにしないといけない
フラットデザインとかはそうじゃないけど…
スマホでホバーに似たような仕組みはあるだろうかはるひ.icon
「タップと思いきやスワイプでした」というような時にホバー的な振る舞いをするな
タップをやめてフリップ入力みたいに選択肢がでれば面白そうnomadoor.icon
https://gyazo.com/f6e347c0e3e62a93c154f409bb290d75
https://gyazo.com/0a06ccc6e1c23849d8e91d6db9e858c7
https://gyazo.com/3d992e27675a58bb0d8dc27b8f94ca9b
アイコンがそのままボタンになっている
テキストが無いので非常にコンパクト
ボタン幅を小さくできるので、スマホのような横幅が小さな環境でも横並びで表示させることができる
つまり、場所を選ばない
横幅の割に、ボタン幅は小さめかもしれない
このアイコンボタンはアイコンを慎重に選ばないと初見で全く意味がわからないので注意しているwogikaze.icon
例えばwindows11の設定
押すと色が点く
https://gyazo.com/b026c9100389461a7d926950a41f8c96 https://gyazo.com/d411ef809a7f8bde4ed40d6797bab3d9
何かが実行されたというのがわかりやすい
https://gyazo.com/31f9cdc7cb00602e2608d7f84d8a2efe
未登録の状態と、登録済みの状態で色が反転する
Twitterはいきなり未登録の色と登録済みの色を逆にしたことでユーザーの困惑を買った
上記のボタンとは違って、最初からボタン領域の背景色が塗られている
ボタンをマウスホバーすると、下に詳細文が出る
https://gyazo.com/59be52178cc2bd15b23ef81df2f6d756
場所や形がはっきりして大きめなので押しやすいMijinko_SD.icon
よく使うボタンや直感的に押すようなボタンでこういうUIなのはありがたく感じる
https://gyazo.com/279851a0c90ef9fc46305fefde0ea117
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
めちゃくちゃ盛り上がっていて押しごたえのありそうなデザイン
個人的に結構好きMijinko_SD.icon
同じくはるひ.icon
押したときのカチっていう音も良かった気がする。昔のラジカセにあるような押し込むボタンをイメージしている？shoya140.icon
ボタンを押したときのアニメーションと音がすごく「ボタンを押している」感じがして好きだった45Nuyagawa.icon
そもそも、ゲームのUIデザインは、アプリのUIデザインとは方向性が違うので、あんまり比較できるものでも無い気がするけれど
https://www.youtube.com/watch?v=0Va3ue6Qk-0
それっぽい流れはゲームにも来てた
今はゲームでももうちょっとフラットなのが好まれる傾向がある
前述の「アプリのUIデザイン」に寄りすぎていてゲームっぽさがまるで無い
https://gyazo.com/66704d89a35a1d69bb047703f0a6f9f4
丸の中や背景色が塗られている部分に文字が書かれているパターンも稀に見かける
Windows 11では横に説明文がある
https://gyazo.com/1ab2ff22b637f1d19125cd401b6f91da
トグルスイッチ自体を押さなくとも、左側の文字の部分を押しても反応するので、当たり判定はかなり広めに取られている
これを見てわかること
押すと丸の位置が横になるので、2段階に切り替えられるということがわかる
有効になると色が点くので、現在有効になっているかどうかというのもわかる
もし仮に文字で「有効」と書いたボタンを作ると、今の状態が有効なのか、押したら有効になるのかがわからなくなる問題があるが、このデザインはその問題をクリアしている
普通に考えたら現在が有効では
TwitterのFollow ↔ Followingみたいなのはは今どっちだ？ってなりますよねぇnomadoor.icon
それなwogikaze.icon
マイクのミュートもshoya140.icon
参考はるひ.icon
https://gyazo.com/60e844e80c36ee064a444debee210e8c
https://gyazo.com/5c3c780bf105857910ddce0c316af2f6
古来からある文章内リンク
青いところをクリックすることで別の場所に飛ぶことができる
前提知識が無いとボタンだとはわかりにくそうMijinko_SD.icon
Windowsだとマウスホバーすることでカーソルが👆に変化するが、スマホでそういうのは無い
ハイパーリンクは文章中で青くなってるから異質なものだとわかるというわけかなはるひ.icon
揃えてあったり、時刻であったりとそもそも異質なものが青くてもその色はあまり意味を表さない
「文中で色がついていたらボタンの可能性がある」はわりとあるかもMijinko_SD.icon
現実世界のボタンらしからぬ見た目なのに押せそうに見えるボタンはどう実現できるだろう？mgn901.icon
同質なものが並んでいると押せそうに見える？
押したくなるような文字が並んでいると、押せるように感じる？Mijinko_SD.icon
90歳になる祖母がスマホに変えたが、どこをタップすれば良いのかわかってないはるひ.icon
https://gyazo.com/96f69073e4532f7213f3291994ee2476
祖母のは泥なのでちょっと違うが
ボタンではなく文章中の「開始」を押して通話を試みており、全然できなくてキレてたw
文章中にボタンを仕込んでおくと文章を読みながらすぐその機能にアクセスできて便利な側面があるかもしれないけれど、誤反応することも多くて実際はかなり不便になる気がするMijinko_SD.icon
https://gyazo.com/f18a7b77ab0888a7768b5e6f792620e1
左上（または上部中央）にあるロゴは、押すとトップページに戻るという慣例がある
この他に、アイコンを押すとそのユーザー（またはチャンネル等）のトップページに飛ぶという慣例もある
https://gyazo.com/b978b2c8938324ea089fc89b7be93250
左上のアイコン（またはユーザー名）はクリックできる
ユーザー名の右の投稿時間は、投稿へのパーマリンクになっていることが多い
もっともわかりにくいので、Xは共有ボタンあったり
misskeyではこちらのリンクしかないのでリプライがやや見ずらいなど初見で戸惑ったwogikaze.icon ちなみに、画像/リンク除く投稿テキストもクリックでき、パーマリンクに移動するが、直接リンク要素にはなっていない模様
自分のアイコンを押した際は、そのユーザーの設定項目が出現することもある
https://gyazo.com/468d3b0e39618eafc77bde1c19821d56
ページ上に一つしかない かつ ボタンらしからぬ見た目をしていると押されないことがある。mgn901.icon
「そこボタンなの？」と言われたり、そのボタン以外の手段がある場合は遠回りされたりする。
https://gyazo.com/d7dee3f95a943a63f93d93268af409d3
元々アクティブではないタブにも外枠があったが、アップデートでデザインが変更され区切り線のみになった
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
ボタンの枠が表示されている
現実の電卓に寄せているのだろうか？Mijinko_SD.icon
余白はかなり狭い
枠が表示されている割には、上記のWindowsのスタートメニューと同じぐらいの当たり判定の広さを持っている
https://gyazo.com/e4fba8c0f750b8ec6d6c19972faafec8
ボタン史上一番押したいmtane0412.icon
これいっぺん押してみたいなはるひ.icon45Nuyagawa.icon
小学生か中学生の頃に押しときゃ良かった
まあ今やってもいいか
あかんわ、捕まるかもしれない
よかねえよwwogikaze.icon
自分で買って押しましょうMijinko_SD.icon
！！！！！！はるひ.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
どのアイコンをマウスホバーしても見た目は変わらないが、実は右クリックした時のメニューの項目がアイコンごとに違う
https://gyazo.com/e00cda65203601cce84aefeb3148d799
https://gyazo.com/144ccf7ba9dfc1dc9e277506b797a31a
10からのアップグレードで来た人はまあ...bsahd.icon
脱線するかもだけど、押してもいいボタンと簡単に押してはいけないボタンはUIで区別されるべきだと思うshoya140.icon
+1Mijinko_SD.icon
理想を言えば、すべてが押してもいいか、undoへの動線が明確であってほしい
@rakusai: 小学生の子供にChromebookを渡したところ、どうやったら使いこなせるようになるか聞かれたので、とりあえず全部のボタンを押してみたらと伝えたら、本当にその通りにしていて結果的に親のアカウントがブロックされてしまったw これ好きshoya140.icon
はるひ.iconの祖母の話に戻るが、適当なところを触って仕事中の人に電話がかかったりしてしまうので家族に教えた最低限の箇所以外押すなと言われているらしいはるひ.icon
バックアップは最低限のフェイルセーフであると信じたいbsahd.icon
web上で少しでも装飾されているもののほとんどはクリックできることに気づいたnomadoor.icon
探索記ではなく探索紀？
「紀」の方が楽しそうな気がしたのでそうしましたMijinko_SD.icon
紀行文の「紀」のイメージがするcFQ2f7LRuLYP.icon
ボタンじゃないけれどMijinko_SD.icon
https://gyazo.com/6c1e140cb7b3fbcb81ce98f2480bc849
https://gyazo.com/8b73a648a5a00ffbe07c481e2fcc3384
通勤時、自動車の交通量が多い時には押してる。車が見えないときは押さずHiro Aki.icon
画像を持ってくるために軽く調べて他の形もあることを知る
黄色い筐体の「歩行者用押ボタン」を機能させると、信号を変えることができます。
押さないと通れないんじゃない？wogikaze.icon
https://gyazo.com/0b00a68690c1e29a2a1718e4325c93f9
ずいぶんとフラットデザインになりましたなwogikaze.icon
家電はフラットデザインによる通信量の削減とかの恩恵受けられないだろ 軽い力で良いのは楽かもしれないけど
自動車はスイッチを直接見ないで操作することが多いから物理ボタンにする、という意味もあるので家電も同じようにしろとは言えないけれど、スマホのように一つのスペースでいろんな機能を持たせるならまだしも、1スペースで1機能しかないのならタッチにする意味ある？とは思う
記事にもあるように、価格の話が重要なんじゃないかなと想像Hiro Aki.icon
物理ボタンの原価を見てバチクッソ高いと知って、こりゃ物理ボタン廃止はしょうがないなと思ったことがあるため
たとえ１つのon/offであっても物理ボタンはヤバイぐらい高いから、大量生産しやすい形、基板上に配置されたスイッチ、フラットな姿の物が採用されやすいのは理解出来てしまう
ざっくりとしたイメージとしてボタンの権化たるパソコンのキーボードで考えてみる
ボタンとして考えたことなかったな、確かにボタンまみれだwogikaze.icon
メカニカル式のガチガチなスイッチ物がおおよそ100ボタン2万円として、安い基板とゴムでなんとかするメンブレンタイプは1000円とする
ただのon/offをするだけの機能で１つ200円弱と見ると、メカニカルキーボードってたっけぇと思う
メンブレン方式で、ちょっとﾑﾆｮっとするだけでも物理フィードバックを受けられるので十分だと思うけど、これでもタッチ方式よりコストだいぶかかるのかなnomadoor.icon
耐久性が無いか…
実際はイロイロ含まれてずれるけど、感覚的な話として20倍なわけで、製品開発の段階で誰かが「物理ボタンがいいっすよ」と言っても別の人が「でも原価が20倍するじゃん」と言ってきて、それでもボタンが採用される余地は家電の世界であるのかなという話
本当にタッチパネルかどうか情報検証ができていないので保留bsahd.icon
このボタン数だと中身はタクトスイッチだと思うけどなー
カード番号入力のUIで増減のボタンは初めて見た。
なんとこれ、1ずつ増減します()
https://gyazo.com/bba0ca9869eddd901f3bdb1acafe8c40
@lawliteqed 一方こちらは「生年月日を入力させるアンケートで月単位に遡っていくしかないUI」です。ご査収ください。 https://gyazo.com/de61a4a4b9b4a20429dba46ef912ebd8
多分同じ反論あると思うが、Androidのこの画面は上部の薄い「XXXX年」のところをタップすると年単位で移動できる。bsahd.icon
開発サイドは素直に普通のdate要素を使ってるだけ