マテリアル3 エクスプレッシブとは
引用元:https://news.ycombinator.com/item?id=43975352
UX目線だとMaterialのGoogle UX teamの努力はすごいな、ドキュメントとかツールとかさ。でもこの記事はPepsi Logoみたいで怪しい雰囲気。
でかい送信ボタンは確かに見つけやすいけど画面スペース取るし、すぐ慣れると邪魔になる。
M3のドキュメントサイトですらモバイルだと使いにくくて、タブがデカすぎて画面に収まらないんだ。
Appleなんてデザインについてこんなマーケティングしないのにね。製品で語らせる感じ。
あとさ、Appleは変なこと(macOS設定は除くけど)はしないし、ほとんどのデザイン変更はそんなに影響ないんだ。
機能とかレイアウトはほぼ同じで、見た目が変わるだけって感じ。俺は2006年からMacの使い方は全然変わってないよ。
Windowsなんてその間に5回もUIがガラッと変わったもんね。
ios 18 photos appは?
それはやりすぎだったんだよ。iOS 18 Photos appは全然使いやすくなったと思うな。経験あるユーザー向けに、もっと速くて見た目も良くなるようにちゃんと考えてデザインされてるよ。
密度も上がって、ちょっとスクロールするだけでたくさんのコレクションや機能にアクセスできるし、カスタマイズもできるから欲しいものにすぐたどり着ける。
これは理にかなってるよ、Photos appなんて初めて使うアプリじゃないし、iPhoneユーザーはみんな毎日使うんだから、みんな経験者なんだもん。
確かにね、最近のAppleもアプリとかでちょっとおかしくなってる部分はあるかも。
でも少なくともOS本体はまだ劇的に変わってないから、そこはまだマシかな。
Settings appみたいに、Photos appもSwiftで書き直したからだと思うよ。
iOS 18 Photos appにはいくつか問題がある。
構造がタブからスクロール主体の”モノUI”になったのは退化って感じる人もいる。
一番酷いのはパフォーマンスの低下で、スクロールやズームが常にカクカクするんだ。明らかな改悪だよ。
あと写真追加でタイムライン全体がズレてカクつくのもおかしい。開発者が実際に使ってないんじゃないか?
Appleの看板アプリでこのレベルの品質はマジでゴミ。
書き直しで「optimizing system performance」とか言って同期を止めるのをやめさせてくれるようになることを願うよ。
充電中に何時間もロックしてたのに写真がアップロードされてないのを見つけるたびに、いつも「Optimizing System Performance」のせいなんだ。
冗談かよ。
そうなんだよ。俺も一番イラつくことの一つだ。
高いネット代払ってるのに、さっき撮った写真たった10枚がクラウドにアップロードされてMacのPhotosライブラリで見れるようになるまで何時間も待つとかありえない。
全くもう。
Appleがデザインについてこんなマーケティングしない、って言うけど、Jony Iveをめちゃくちゃ崇拝する時代があったのをハッキリ覚えてるぞ。
あれはAppleのPR/マーケティングが仕組んだもんだと思うね。
多分、もう今はやってない、って言うのが正確なんじゃない?
でもさ、一番大事な”反抗心”っていう属性が30パーセントも増えたんだって!
”1000個くらい属性聞いて、たまたま上がったお気に入りのだけ採用しました”って感じ丸出しだね。統計的に有意じゃないのにさ。
この製品”バカ”だって思った人いる?Alan?Lisa?Josh?Yana?Katy?
あと誰かこれに”イラっと”した?Alan?Lisa?Josh?Yana?Katy?
そして誰かこの製品”ダメダメだ”って感じた?Alan?Lisa?Josh?Yana?Katy?
https://www.youtube.com/watch?v=tVq1wgIN62E
Pepsi、Tropicana、Windows Phoneとかみたいだね。デザイナーとかUXリサーチャーが自分たちの殻に閉じこもってる感じ。
>でもこの記事、”Pepsi Logo”っぽい雰囲気すごくあるね。
めちゃくちゃ成功したからみんな今でも話してるの?もうあのロゴ使ってないのに?
成功したから話してるんじゃなくて、デザイン文書がヤバすぎたからだと思うんだよね:https://www.goldennumber.net/wp-content/uploads/pepsi-arnell…
あれは相当な労力かけて、まさにこれを達成したんだね:https://www.utne.com/arts/new-pepsi-logo-is-a-joke/
うわーマジか。俺みたいにあの文書見たことなかった人へ:これ見る前に座った方がいいかも。
PEPSI LOGO:脳に無限の砂糖を紡ぎ出す四次元の渦、宇宙の調和と揃った色、ブランドの不死のために時空を曲げる企業。RED AND BLUE:二元対立、昼夜の二重性、意識の幻想を養う永遠の飲み物サイクル。MARKETING TEAMS:立方体の時間歪みに囚われ、球体の欺瞞の中で消費者の現実をスクリプト化—象限を知るのはPepsiだけ。
ブランディングの目的って、覚えてもらうこと以外に何がある?うまくいったじゃん!
会社の売上とかじゃなくてさ、ブランディングが“記憶に残る”ってことの話してるんだよ。
UIデザインを批判したい人がいて、一番最初に思い浮かぶのが「あのPepsiの引力思い出すわ!」ってなる。これは永遠に語り継がれるよ。
マーケティングの目的が単に“記憶に残る”ことだって思ってるんだろ。でも違うよ。良い感じで記憶されるか、少なくとも売上につながるように記憶されることだ。
このキャンペーンは笑いものとして永遠に残る。それは狙いじゃなかったはず。
たとえそれが悪評側だとしても(正直そうは思わないけど)、マーケティングとかブランドデザインに詳しい一部の人たちがそう連想するだけってのは、大成功とは呼べないと思うな。Pepsiみたいな大企業なら、人口の大部分が共通の連想を持つべきでしょ、一部の人がレアな連想するんじゃなくて。
悪名高いことと成功してることは別だよ。
Material Design v1はすごかった。実装も理解も使うのもシンプルで、余計な手間もなく、コンテンツ第一のアプローチだった。
『“クリーン”で“退屈”なデザインを超えて、感情的に人々と繋がるインターフェースを作ろう』?
俺はウェブサイトやアプリに感情的に繋がってほしくないんだよ。スマホやPCをオンにして、やりたいことをアプリで済ませて、すぐにオフにして現実世界に戻りたい。
要は、注意を最大限に引きつけるためのデザインだろ、なんて呼ぶか知らんけど。製品に少しでも長く目を向けさせて、利益を増やすため。
…まあ建前は「デライトフルな体験を作る」ってことだけどね。
俺も最近、精神的に変わってきたのかな。コンピューターやソフトウェアには、仕事終わらせてさっさと現実に戻ってほしいんだよ。画面とにらめっこして過ごした時間、もったいなかったなって悲しくなる。いつかこの意見が一般的になるのかな。
用事を終えたら、スマホをポケットに戻したり、PCをオフにしたりする方が、良いんだよ。
俺も全く同じ感じ。昔はポケットコンピューター持つのが夢だった。今はもうネットで人生ほぼ完結できる人もいるし、他の人もそうしてる。
人(はそう思ってる)はそこで社会的ニーズ満たしたり、飯買ったり、仕事したり、相手見つけたり、何でもやってる。で、若い世代の多くは(?)この傾向続いてほしいみたいだ。
君の代わりに話すわけじゃないけど、ここにいる俺たちはユニークな層だと思うんだ。片足は“古い世界”にあってそれを経験し、今は“新しい世界”を見てる。
生まれた時から基本的にスマホが手にあって、それが自分の人生の大きな部分だって見てたら、こういう変化も受け入れやすいと思うよ。だって、彼らにとってスマホは自分自身の一部、全体像の一部、ファッションの一部だから。
記事ありがとう!同じような考えの人がいっぱいいるって分かってホッとするよ。二つの世界があるって話は本当にその通りだと思う。俺のスマホはほとんどポケットに入れっぱなしで、必要な時だけ取り出す感じ。でも毎日見るのは、忙しい通りとか、犬の散歩中とか、ベビーカー押しながらとか、ジムのマシンとかでスマホ見てる人たち。特に晴れた珍しい日でも、スマホの明るさ設定しか変わらないのを見ると、なんか変な気分になるんだよね。
ああ、俺もスマホはポケットに入れとくただのアクセサリーだよ。必要な時だけ、例えば時間見たり電話したりね。たまに持って行かないことすらある。別に理由はないんだけど。ちょうど30になったところだよ。
もっとコメントを表示(1)
みんなの気持ちわかるけどさ、ここで読んで書いたりするのってノートPCからやってるの?俺はデスクトップブラウザからは絶対来ないな、スマホだけ。
>Material Design v1
あれは最悪だったと思うな。少なくとも相互運用性の観点からはね。確かに、ノートアプリでモバイルデバイス上の丸い巨大なフローティング”+”ボタンは新しいノートを追加するCTAとしては良いけど、それより大きい画面(iPadとか)だとダメだ。あれを使ってるアプリやウェブサイトは「まだ作業中、後でデザインするよ」って感じだったけど、”後で”なんてなくて、あれで完成で、ただただ醜かった。
>確かに、ノートアプリでモバイルデバイス上の丸い巨大なフローティング”+”ボタンは新しいノートを追加するCTAとしては良いけど
いや、良くないね。だって実際のコンテンツの上に浮いてるんだから、ユーザーはその下のコンテンツを見たり操作したりできないじゃん。もちろん、誰もフローティングボタンの下にコンテンツが隠れないようにUIを丁寧にデザインしたりしないしね。
>みんなの気持ちわかるけどさ、ここで読んで書いたりするのってノートPCからやってるの?俺はデスクトップブラウザからは絶対来ないな、スマホだけ。
俺はやってるよ。仮想キーボードは嫌いだし、スマホでのタイピングはめちゃくちゃイライラする。コピペの操作も全然ダメだし。仕事中なんてスマホ見もしない、必要なメッセージはMacから返信してる。数行以上のやり取りが必要なことは全部ノートPCからだね。スマホの仮想キーボードでちゃんと話し合うなんて、ユーザーにとって最悪な体験だと思うよ。
>スマホの仮想キーボードでちゃんと話し合うなんて、ユーザーにとって最悪な体験だと思うよ。
同感だよ。Redditをスクロールしてるとき、コメント追加したいなーって思うことよくあるんだけど、スマホで何パラグラフも”打たなきゃ”って考えると、結局やめちゃうんだよね。まあ、俺は明らかに年寄り側だし、若い世代はそんなに抵抗ないってのはわかるけどさ。
>いや、良くないね。だって実際のコンテンツの上に浮いてるんだから、ユーザーはその下のコンテンツを見たり操作したりできないじゃん。
1. 画面そんなに狭いの?FABって普通、スクロール可能な全幅リストアイテムの上に使うもんだけど。
2. デザインシステム使ってるからって、アプリの作者がUXの責任から解放されるわけじゃないんだよ。UIが可能な限りうまく機能するようにする、みたいなね。
スクロールできるものの下部分を何かフローティングUI要素が隠すって、すごくよくあることだよ。スクロールで回避できないんだよね、だって問題の部分が画面に出てたら、それは一番下にあるんだから。Mobile Safariですら時々これをやらかしてるんだ。下にあるURLバーがページの一番下を隠しちゃうことがあって、上に引っ張ると一時的に見えるけど、指を離すとすぐコンテンツが戻っちゃうんだよ。
うん、まさに俺の経験だね。スマホで何パラグラフも書くなんて無理だよ。分からないけど、ちょうど30になったから、もう年寄りって思われるのかな?でも絶対オールドスクールではあるね!派手なものは何もなくて、ただVoid Linuxにi3、XTermとか。手に入るといいなと思ってるもの分かる?あのキーボード付きのBlackberry(たぶんKeyOneかな?)。まだあんなの生産されてるのかなって思うよ。
Googleが画面に釘付けにしようとする広告会社だって話をしてるんでしょ?
アプリとかに感情的なつながりとか求めてないんだよね。パッと使って目的達成したらすぐ終わりたい。B2BのSaaS作ってるけど、みんな使いたくないアプリだから、とにかく効率とスピード最優先で作ってるよ。UIもみんな配置覚えちゃってるから変えないようにしてる。MaterialUIは使ってるけど、GoogleがM3のウェブ実装ちゃんとやってくれたら良いのにね。
MDv1は結構好きだけど、フローティングボタンだけはマジで嫌い。邪魔になるだけだし、重要なアクションはそんなにないでしょ。ツールバーに入れればいいのに。
若い参加者がM3 Expressiveをめっちゃ気に入ったってとこに同じ反応したわ。若い人って「きれいなくだらないもの」にすぐ食いつく傾向あるんじゃないの?結局このデザイン変更って意味ないんじゃね?
ほら見て、「最近の人はデバイスをツールじゃなくて自分の一部みたいに見てるんだ」ってさ。俺たちはただ彼らのニーズに応えてるだけだよ。慈善事業だね。マジで。/s
Material design v1のせいで、情報密度がクソ低くて、余白ばっかりになったんだよ。昔のGmailとかAdwordsと今のを比べてみろよ。マジで退化してる。Appleも似たようなもんで、デスクトップとスマホのUIを混ぜようとして劣化させてる。今のUX/UIは史上最悪の時代だよ。
これさ、CSSでheightを100%じゃなくてdvhかsvhにすれば解決できるんだよ。
マテリアル3マジ無理。感情レベルで繋がりすぎて、スマホ投げ捨ててpostmarketOSサポートしてるやつに買い換えたいくらい。マジ嫌い、この新しいデザイン。超無駄だし、理由もなく画面の重要な情報奪うし。全部丸くしてiOSパクろうと必死だけど、ヘタクソすぎだろ。
画面の右下に意味不明なのがフワフワ浮いてる(無駄なチャットアシスタントとかね)のに慣れすぎて、脳みそがそういうの無視するように鍛えられちゃったよ。
記事からの引用だよ。
「なんでこんなアプリ全部似てんの?」
「Material Designのせいじゃん、もう笑」
ってさ。
完全に同意しないわけじゃないんだ。この考え方って、Brutalist architectureみたいな事務所に繋がっちゃう。そこで働く人の魂を吸い取る感じ。人ってアプリの中で”生活”したり”働く”んだから、そうしてる間は生きてるって感じるべきじゃん。(まあ、この新しいマテリアルスタイルがそれを実現する方法だとは思わないけどね…)
感情的なデザインをみんなが求めてるってフリしないといけないんだよ。だって、そうしないと仕事続けられないだろ? Material Designってアップデートするたびに、なんかデタラメな改良が必要なんだもん。
うわー、これマジでクソ醜いな。美大生の美意識の研究思い出すわ。勉強始める前は普通の人と同じ感覚なのに、授業進むと変わるんだ。”Skeuomorphism”っての知ると、急に全部フラットで区別つかなくしなきゃダメ!みたいになる。
Christopher Alexanderの”Notes on the Synthesis of Form”で、晩年の建築学校のやらかしはこれが原因だって言ってるんだ。彼はこれを職人技が”self-conscious”になるって呼んでる。つまり、建築家の仕事は住む場所を作るんじゃなくて、建築家としてあること。それって他の建築家と”競争”するってことなんだ。みんなが認める形の1000番目作ってもコンペには勝てない。勝つには他の建築家のセンスの限界を押し広げなきゃいけないんだけど、そのセンスって普通の人の感覚からもうかけ離れてるんだよね。だから結果として出てくるもののほとんどはマジでゴミ。
同意。これってデザイナーが他のデザイナーにカッコつけて見せてるだけって感じだね。ありがたいことに主流にならなかったDropboxの2017年のデザインシステムにめっちゃ似てるんだよ — https://www.awwwards.com/inspiration/dropbox-design-system
実際はあんまりフラットじゃなくて、アフォーダンス(でもスキューモーフィックじゃない)が増えたと思うな。要するに「フラットにしすぎたから、ボタンをデカく派手にしてまた見えるようにしようぜ」って感じ。二歩後退してからの一歩前進ってとこだね。
どこから来たか比較してみる価値はあるよ<https://m1.material.io/v3>ね。v1はアフォーダンスひどかったから、反動でフラットになったんだけど、<https://m1.material.io/v3>はv1よりさらにフラットだね。
公平に見ると、成熟した好みって違うことが多いんだ。良いとか悪いとかじゃなくて、単に違うだけ。例えば、古い赤ワインをたくさん飲む人は、その味がわかるようになるじゃん。平均から離れるけど、かなりの人たちが特定の好みを持つのは止められないんだよ(コーヒーみたいにね)。長くテックデバイス使ってるユーザーとして、君の好みも特定の方向に引っ張られてるはずだよ、平均的なユーザーを装っててもさ。ちなみに、俺はAndroid大好きだけど、今のデザインの方向性は正直あんまり好きじゃないんだよね。(あとさ、スキューモーフィズムについて調べてみるといいかも。マテリアルはほぼ意図的にスキューモーフィックじゃないからさ。)
一長一短だな。<https://m3.material.io/blog/building-with-m3-expressive>見ると、ガイドライン的にはオブジェクトのグループ化やコントラスト、フォントなど役立つ点が多い。良いアニメーションも良い。公式ガイドラインとしてあるのは助かるね。でも、やっぱフラットデザインだからクリックできるか分かりにくい。カラーパレットもパステルで変なコントラスト、マジで醜い。何もないよりマシで一歩前進かもしれんけど、M3Eは正直微妙ってとこだな。
>クリックできるか伝わらないって話だけど、トグルや無効状態もそう。スマホはホバーないからどれが触れるか試行錯誤だね。>カラーパレットも変なコントラストでマジ醜い。パーティーポスターみたい。これってデジタルマーケティング系で、オプションよりコンテンツに注目させてる感じ。思考を減らし理想の操作を強調してるんだ。単純な製品にはいいけど、(ポスターじゃない)アプリには向いてないと思うな。
>トグルや無効状態。スマホはホバーないから試行錯誤だって話だけど。トグルスイッチってスマホUIから来たので個人的にマジ最悪だよ。PCでマウスキーボードあるのに見ると腹立つわ。普通のチェックボックスで十分だったじゃん、昔からあるしオンオフ分かりやすいのに。どっちがオンオフか誰が分かる?みんな実装違うんだし。
>シンプルなチェックボックスで十分だったんじゃん<br>シンプルさは見る人によるよ.若い人にどっちがシンプルか聞いてみたら?チェックボックスはフォームに紐付いてて、送信するまで何も起きないけど、トグルスイッチはすぐ起動するんだ.<br>>どっちの色や向きがオンかオフか?<br>色がついてる状態(緑か青)が有効って意味.スイッチのノブは常に右だよ.紛らわしいデザインも見たことあるけど、それは珍しいね.
もっとコメントを表示(2)
言いたいことはわかるけど、結局どれも同じだよ:色つき/彩度が高いのがオン、白/グレーがオフ.
とはいえ、Material v2は色をめっちゃ彩度落としたけどね.俺のスマホだと技術的には少し紫だけど、基本的には薄いグレーがオンで、濃いグレーがオフに見えるんだ.https://i.imgur.com/QiCEguh.png
これマジでいらないね.なんでこんなことするんだろ?強い色を使えばいいじゃん.
確かにそうだけど、まだUXは改善できることがあるよ.ほとんどのトグルは空白部分に”On”とか”Off”って文字を入れて状態を示すテキストにできるし、物理的な電気のスイッチみたいに縦型にするのもありかもね.
iOSだと、I/Oラベルをアクセシビリティ機能として追加して状態を示せるよ.
>このスタイルはオプション(何ができるか)よりコンテンツ(提供されるもの)に注意を向けさせる<br>これ良いと思うな.アプリがやっと複数回使う前提で設計されるようになったってことだから.以前のデザインシステムは”最初の発見”を重視しすぎてて、常連ユーザーには邪魔だったんだ.使い方覚えたら、実際のコンテンツが画面の大半を占めるべきだよね.
シンプルな質問なんだけど:なんでそのページ、最新のChromeでHWアクセラレーション全部有効にして、パワフルなノートPCなのに、CPUを6コア以上も食うの?ChromeのタスクマネージャーだとCPU使用率600%超えだよ.4Kで最新のAAA gameを最高画質でプレイするよりCPU使ってるんだけど.
俺がリンクしたやつ?わかんない.FirefoxとUblock Originだとその点では問題なく動くけど、それでもサイドメニューがちゃんと表示されなかったり、JS consoleがエラー出てるよ.
>あれにリンクしたんだっけ?うんうん。でもちょっと違うんだよね-開くと半分以上は発生したんだけど、DevToolsで調べようとした時には一度も起きなかったんだ。最初はバックグラウンドで開いてた時にシステム全体が重くなったことで気づいたんだ。
Googleのアイコンが全部同じに見えるってミーム[0]になってるよね。UXエンジニアは追い出されたと思うな。[0]https://miro.medium.com/v2/resize:fit:1400/0*X5Zz-PxT8087KG2…
他に包括的なデザインシステムでおすすめある?エンジニアとしては、それがMD3の一番価値あるとこだと思うんだよね:Figmaキットとガイドライン。これのおかげで大量の仕事が省けるんだ。Materialみたいに包括的なのは他に見たことないな。Expressは進化的な更新みたいで、すぐに使えるものもあるけど、ほとんどMD3だね。俺にとって、もっと大きなエコシステムの一部として価値があるよ。
IBMのCarbonをチェックしてみて:https://carbondesignsystem.com/all-about-carbon/what-is-carb…
これより良い代替案は思いつかないな。それは良い質問で、すごく助かるだろうね!俺が過去(M3で)やったのは、ボタンに立体感出すとかデザインの微調整だった。デザイナーがいればうまくいったし、M2スタイルから来てたからやりやすかった。でも、使いやすさとかテスト結果だけでGoogleのガイドラインに異論唱えるのは大変だし、コンポーネントごとに違うから注意しないとデザインに一貫性なくなるかも。
以前のデザインに詳しくない人のために、https://m3.material.io/componentsの各コンポーネントには”Material v2との比較”セクションがあるよ。
一番大きな変更点は、全部丸くて紫色になったことみたいだね。もっと遊び心がある感じになったけど、プロフェッショナルさは減ったかな。追記:最近の色選びが気に入らないな。最初はGoogle Mapsのあのティール、今度は紫色。なんで?最初のMercedes A-Class(別名”Listerine”カラー[1][2])の色合いを真似しようとしてるの?[1]https://prestigeandperformancecar.com/wp-content/uploads/A97…[2]https://image.stern.de/31749130/t/Ag/v2/w1440/r0/-/01–artik…
遊び心があってプロフェッショナルじゃないって?それは意図的なんだよ。GoogleのUXリサーチによると、ユーザー(特に18歳から34歳)がもっとああいうのを求めてるらしいんだ。
あの車、運転できるiMacみたいに見えるね。
うわ、https://m3.material.io/componentsのページ60MBもあるんだ。