PC版TwitterのUIデザインで気づいた点をまとめました

世界の情報社会の一角を担っているTwitter

 

現代において、若者~中年層で使っていない人がいないと言われるほど成長を遂げたSNS。

その中でも、Twitter、Facebook、Instagram、そして動画プラットフォームであるYouTubeは群を抜いてユーザー数が多く人気です。

Twitterのサービスが開始されたのが2006年、まだ15年も経っていませんが、大手SNSは情報社会の中核になりつつあります。

また、webデザインの指標としてもこれらのSNSが模範とされることが多く、デザイナーはアップデートの際にデザインの変化に注目します。

そんなデザインリーダーである大手SNSが意識しているポイントをいくつかまとめたので、良かったら読んでみてください!

Twitterの特徴的なデザイン

TwitterのUIデザインに関しては、下記の方がSketchでトレースした感想を述べています。

【sketch】TwitterのUIトレースをして気がついた事|Masaki|note(ノート)

https://note.mu/masaki_45/n/n52ebf59138f9

Masakiさんがスマホ版のTwitterデザインをトレースした上で気づいたことを細かく述べているので、

私はPCディスプレイでのUIデザインについて気づいたことをいくつかまとめたいと思います!

その1:サイドバーのウィジェットにborder-radiusとbackground-colorが付与されている

PC版のTwitterトップ

PC版のTwitterだと、左のウィジェットにメニュー一覧、

右のウィジェットにおすすめのツイートとトレンドが配置されています。

特徴としては、右のウィジェットにborder-radius(角丸)が付与されており、背景がグレーになっている点です。

Firefoxで検証したところ、border-radiusの数値は14px

背景の色は16進数で#F5F8FA(R:245 G:248 B:250 )でした。

サイドバーを視覚的に分かりやすく区別するために角丸にする工夫はおもしろいと感じました。

ブログやメディアなどを運営している方は、自分のサイトのサイドバーに施したら良いかもしれません。

その2:TLのツイートが必ず途中で見切れるようになっている

スマホ・PC両方のデザインに当てはまりますが、TLを適当にスクロールした際に、

下画面がツイートブロック要素の途中で見切れるように設計されています。

これはまだ下にツイートがあることを瞬時にユーザーに認識させるため、意図的に行っている仕様です。

普段Twitterを使っている方は当たり前に感じるかもしれませんが、

デザインにおいて要素の途中であえて区切るという行為はとても高度な工夫であると感じます。

ちなみにInstagramやYouTubeにもこの工夫が施されています。

要素で区切ると一見綺麗なデザインになりますが、「綺麗なデザイン ≠ ユーザビリティを考えたデザイン」ということが分かりますね。

Twitter等のデザインリーダーをチェックすることは大切

いかがでしたか。

最新のWebデザインを学ぶ上で最も手っ取り早い方法がデザインリーダーのデザインをトレースしたり、CSSをチェックしたりすることです。

今回の記事がWebデザインを考える上で参考の一端になればと思います。

それでは!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です