TwitterのデザインがFacebook化、とにかく画像推し

Twitterの新プロフィール画面

Twitterは、Web版のプロフィール画面の機能やデザインを大幅に変更することを正式に発表した。本日より一部のユーザ向けに適用され、数週間内に全ユーザへ順次ロールアウトされる。

現在、米オバマ大統領婦人であるMichelle Obama(@FLOTUS)らのプロフィール画面で変更点をチェックすることができる。

先日の写真複数アップロードとタグ付け機能の追加などに続き、ヘッダー画像の巨大化などでデザイン面でもFacebook化が進んだ印象だ。

機能面での変更点

  • (1)ツイートのフィルター機能
  • (2)ツイートのピン止め機能
  • (3)ベストツイート機能

Twitterの新プロフィール画面

(1)ツイートのフィルター機能

ツイートは、メンション(返信)を省略した「ツイート」と、省略しない「ツイートと返信」、画像と動画のみを閲覧できる「画像/動画」の3パターンによってフィルターできるようになった。

ただ、筆者が確認した限りでは、「ツイート」で省略されるのはツイートの最初に@ユーザー名となっているものだけのようだ。

(2)ツイートのピン止め機能

自分はどんなツイートをするユーザなのか端的に示したい。そのためのピン止め機能が登場だ。

ユーザは自ら、ツイート上部に特定のツイートを固定することができるようになった。

告知などにも使えるかもしれない。

(3)ベストツイート機能

ベストツイート機能により、人気のツイートはフォントが大きく表示されるようになった。人気の基準はユーザごとに異なるようだ。

デザイン面での変更点

パッと見た時に把握しやすいのはデザイン、レイアウトの変更だ。

  1. ツイートがカード形式に
  2. 全体的なレイアウトの変更
  3. 上部ヘッダー画像がより大きく
  4. プロフィールのアイコン画像がより大きく
  5. 最大4カラムレイアウトに
  6. 背景はグレーで統一か?

1. ツイートがカード形式に

外部のWebサイトにツイートが埋め込まれているのを見たことがあるだろう。あれと同じように、プロフィール画面でもツイートがカード形式に変更された。その他、画像や動画、フォロー、フォロワーなどもカード形式で表示される。フォロー、フォロワーはヘッダー画像も表示される。

Twitterの新プロフィール画面

2. 全体的なレイアウトの変更

上部に横長のヘッダー画像、左上にプロフィールのアイコン画像を配置し、アイコン画像の下にプロフィールのテキストなどが表示される。

ツイート、フォロー、フォロワー、お気に入り、リスト(その他のメニュー内に配置)の各メニューは、左サイドのトップからヘッダー画像下に移動し、横並びに。画像/動画のみを表示するメニューも別途新設された

おすすめユーザー、トレンドは基本的に右サイドが定位置に変わった。そのため、3カラム(列)以上のレイアウトが新プロフィール画面の基本となる。ただし、画面サイズが小さい場合は、おすすめユーザー、トレンドが左サイドに移動するので、2カラムになるケースもある。

3. 上部ヘッダー画像がより大きく

上部ヘッダー画像がより大きくなる。筆者が調べたところ、最大サイズは2560ピクセル×600ピクセル、見た目上の最小サイズは1024ピクセル×200ピクセルとなるもよう。縦横が等倍になっていない理由は、ヘッダー画像が奥側に配置されており、画面サイズが小さいと上下のメニュー部分の裏側に回るため。ブラウザのサイズを変更すると、ヘッダー画像が拡大・縮小する。

最大サイズには注意が必要だろう。画面サイズが大きいとヘッダー画像が引き伸ばされるので、アップロードした画像が小さいと粗い表示になってしまう。

4. プロフィールのアイコン画像がより大きく

プロフィールのアイコン画像が左上に大きく表示されるようになる。サイズは、73ピクセル四方から200ピクセル四方に変更。こちらもヘッダー画像同様に、アップロードする画像のサイズには気をつけたい。

画面を下にスクロールすると、小さいアイコン画像にアニメーションで変化する。

5. 最大4カラムレイアウトに

前述のとおり、プロフィール画面のトップでは3カラムレイアウトが原則となる。

画像/動画メニューでは、各ツイートが2列で表示される。従来、画像や動画のみが表示されていたが、ツイートのテキストなども含めてカードスタイルで表示されるように変更された。

Twitterの新プロフィール画面

フォロー、フォロワーのメニューでは、各ユーザーのカードが横に3つ並べて碁盤状に表示される。したがって、このケースでは4カラムレイアウトとなる。

6. 背景はグレーで統一か?

公式ブログで紹介されている米大統領夫人らのプロフィール画面を見る限りでは、ヘッダー以下のコンテンツ部分の背景色がグレーで統一されている。これまでのように画像などで自由に背景を変更できない可能性がある。

Twitterの新プロフィール画面

従来、背景画像などを使用していた場合は、ツイートの詳細画面に反映されている。

変更をどう見るか

デザイン変更のテストがなされていると報じられ、多くのユーザが気になったのは「情報の一覧性の維持」だったのではないだろうか。

その点、今回の変更でTwitterは、一覧性をギリギリ維持しつつ、画像を際立たせる方針を採用したように思える。

情報密度の低下は是か非か

ツイートのカード化やベストツイート機能は、画面におけるツイートの密度を低下させるものの、何とか一覧性を保っている。テキストさえ読めればいいと考えると改悪と受け取られるかもしれないが、Webサイトへの埋め込み機能も含めたユーザ体験の一体化という観点からは、統一感が向上したともいえる。

他方で、ヘッダー画像の巨大化はデザイン重視の感が強く、筆者としてはユーザ体験を阻害する可能性が高いように思える。画面サイズが大きいデスクトップPCを使用している場合、以前のレイアウトと比較して、ヘッダーメニューから最初のツイートまでの距離が200ピクセルほど遠くなった。画面サイズによって高さが変わる仕様であることが要因だ。

とは言うものの、ユーザーのツイートを順にスクロールして閲覧していく分には大きな問題はないかもしれない。情報の密度が低下した点をどう受け止めるかでユーザーの反応は分かれそうだ。

画像/動画、フォロー、フォロワー

画像/動画に関しては特に違和感はないだろう。

逆に、フォロー、フォロワーの画面には嫌悪感を示すユーザーが出てきそうだ。3カラム表示のため、視線の行き来が激しくなるためだ。

Pinterestに代表されるような3カラム以上のレイアウトは画像を眺めていくような場合に有効だと考える専門家が多い。テキストベースの情報を検索することにはあまり向かないのではないか。このことからTwitter社は、ユーザーがフォロー、フォロワーを眺めていく際にユーザ名や紹介文よりも画像を強調させたいと考えているのかもしれない。ヘッダー画像が表示される点とも合致する。

もっとも、デザインやUIの変更は、大抵の場合でユーザーの反発を招くもの。数週間後にユーザーがどのような反応を示しているかを注視すべきだろう。