”Setロゴマーク”
2021年8月12日  |  Column

TwitterのUI、何が、どうして変わったの?

Thumnails

 

 

みなさんこんにちは。駆け出しデザイナーの櫻田です。

 

TwitterのUI、変わりましたね。

みなさんのアカウントはもう変わってますか?また、UI変更にはもう慣れましたか?

Twitterは割と頻繁にUIや機能変更があり、その度に大きく話題になっていて、twitterユーザーのUIや機能への関心の高さが窺えます。(変わったことへの感情を共有しやすいからかもしれませんが)

 

今回のアップデートではフォローボタンの色の仕様が大きく変わったこともあり、混乱したユーザも少なくなかったようです。

 

TwitterがUIを変更。フォローボタンの意味が真逆に – Engadget 日本版

https://japanese.engadget.com/twitter-design-update-040013485.html

 

 

では、今回のUIアップデートで何が変わったのでしょうか?ひとつずつ見ていきましょう!

 

変わったこと

01|フォント

まず、実は英数字のフォントが変わっていました!「Chirp」というスイスのカスタムフォントメーカー、Grilli Type Foundryと共同開発したオリジナルフォントです。

 

Imperfect, by design

https://blog.twitter.com/en_us/topics/company/2021/imperfect-by-design

 

02|ヘッダー

これまでTwitterのヘッダーといえば完全に不透明でしたが、今回のアップデートでは少し透明になっています。iOSなどでお馴染みの不透明度+ブラーでレイヤーを表現するUIになっていますね。

また、固定だったSpaceのアイコンが上にスクロールすると非表示になるように変更されています。これはFleetの機能終了による変更と思われます。

03|境界線

スレッド、アカウント切り替え画面、下書きなど至る所でこれまでにあった境界線が排除されています。

よりスッキリした印象になりましたが、下書きなど画像やアイコンが無い画面ではちょっとわかりづらいかも

04|全体的に丸くなった

アカウント変更画面や、Tweet並び替えボタンを押した時のモーダルなどの角丸が大きくなり、より丸くなっています。

丸っこくてかわいいのですが、アカウント切り替えボタンの余白の取り方がちょっと窮屈な気もしますね

05|フォローボタン

さて話題のフォローボタンです。

これまでのボタンは

 

・フォロー前:白塗り+青い線のボタンに青字

・フォロー中:青い塗りのボタンに白字

 

でしたが、変更後は

 

・フォロー前:白塗りのボタンに黒字

・フォロー中:黒塗りのボタンに白字

 

となっています。

 

たしかに、変更ごと変更前で配色が真逆になっており、ユーザが混乱するのも頷けます。

一方で、フォローボタンが背景色になったことにより、アイコンやツイートにより目がいくようになる効果もあるように思えます。

 

これらの5つの変更以外にも、字間や通知アイコンなど細々とした変更が加えられています。

ではこれらはなぜアップデートされたのでしょうか?

 

 

なぜ変わった?

日々twitterを使っている人々の中には、「私たちは使い慣れたtwitterに親しみを持っているのに、なぜ変更を加えるの?」と不満に思っている人もいるかもしれません。

なぜTwitterUIを変更するのか?その答えはTwitter Design(@TwitterDesignの以下のツイートにあります。

 

”何かこれまでと違うことに気づきましたか?

私たちはWeb/スマホ版でのtwitterの見え方に変更を加え、本日リリースしました。最初は少し変な感じがするかもしれませんが、このアップデートはよりアクセシブルに、ユニークに、そして私たちが話していることにフォーカスできるようにするものです。

もう少し詳しくみてみましょう!

 

 

なるほど。分かるようでわからない…

もう少し、このツイートを掘り下げて、UI変更の意図を推察してみましょう。

 

よりアクセシブルに

Webやアプリにおけるアクセシビリティとは、障害などの有無に関わらず全ての人がコンテンツを利用できるようにするという考え方です。

文字と背景のコントラストを高めることは、アクセシビリティの確保に効果的です。

 

そのため、今回のアップデートでも配色のコントラストを高める変更がされているようです。

また、今後行われるらしいTwitterのカラーパレット変更もアクセシビリティを意識したアップデートになると思われます。

 

よりユニークに

この変更は、Twitterのブランド戦略の一環ともいえます。

 

Twitterのブログによると、今回導入されたフォントはgrillitype社と共同開発されたオリジナルフォントで、アメリカンゴシックとヨーロッパのグロテスクスタイルをブレンドし、初期の木版画の癖を取り入れられています。

” Chirp strikes the balance between messy and sharp to amplify the fun and irreverence of a Tweet

(Chirpはツイートの楽しさとわいわい感を増すために乱雑さとシャープさのバランスを意識しています)”

Twitterのブログでは、フォントの他にもブランドアイデンティティを構築するグラフィックやムービーが公開されています。(ねこかわいい)

 

 

よりフォーカスするために

今回のアップデートは全体的に「ユーザの目線をツイートのみにフォーカスさせる」ことを目的にしているように見えます。

たとえば、コンテンツを区切る境界線を無くすことでテキストにフォーカスさせたり、色の利用を減らすことで写真や動画を邪魔しないようにする、といった目的が考えられます。

 

また、固定だったスペースのアイコンが非表示になるようになったのも、Twitterのメインコンテンツであるツイートにフォーカスさせるため、と考えられるでしょう。

さいごに

これまでもTwitterはUIや機能を幾度となく変更し、その度に一部のユーザが大きく反発するという構図が繰り広げられてきました。大きな反発があるように見える一方で、変更が戻されることはほとんどなく、結局はユーザが慣れるという流れもお決まりになってきました。

 

フォローボタンの変更等は「Instagramを意識しているのでは?」という声もありますが、本当にそうでしょうか?「ユーザにとって欲しい行動に高いコントラストをつける」と考えると、フォローするためのボタンがよりコントラストが高く設定されているのは自然なことに思えます。(それを急に変更することの可否は別として)

 

Twitter Designによると、今回の変更はアップデートの途中のようで、今後もUIは変更されていくようです。個人的には、新しいカラーパレットがどんな風になるのか気になっています(Twitter ブルーが変更される日は来るのか..?!)

 

今後の情報解禁とアップデートに注目ですね~!

 

 

 

 

 

おまけ

 

Twitter Designの一連のツイートをざっくり和訳してみました

 

 

これは本当に本当のおまけ

Twitter DesignのBio欄が遊び心(というかあるあるネタ?)で面白かった話