Twitterの最新アップデートに見る、抑えるべき2つ(+1)のウェブデザインのポイント

ウェブトレンドについてまとめている記事は多くありますが、今回はTwitterの最新アップデートに焦点を当ててウェブデザイントレンドについてまとめてみます。

なお、ここで言う最新アップデートは、1月13日(現地時間)に行われたデスクトップのTwitterに向けたフラットデザイン適用のアップデートです。

1. フラットデザイン

Twitterはスマートフォンアプリをフラットデザインに変更しました。そして最初に述べた通り、デスクトップのTwitterにもフラットデザインの適用を開始し、私の持っている個人用アカウントのひとつに適用されていました。

(Twitter デスクトップ)

フラットデザインの良い点をざっくりと言えば、シンプルなアイコンやタイポグラフィで分かりやすく、かつ空白を多く使用できるため見やすいということです。細かくポイントを上げると、以下のようになります。

  • アイコンや文字に、質感や影が無いようにする
  • グラデーションなど、余計なエフェクトを使わない
  • アイコンや絵による説明を多く使い、文字を極力削る
  • ページの目的など、情報伝達をシンプルにする
  • ひとつの要素ごとに、くっきりと見分けがつくようにする
  • グリッドを整理し、すっきりとしたレイアウトにする

ユーザビリティ(使いやすさ)と、アクセシビリティ(利用しやすさ)を両立させつつ、ページの読み込み速度などユーザーエクスペリエンスの面も強化するデザインとなっています。

2. 一貫したデザイン

前述の通り、モバイル・デスクトップの両方にフラットデザインが用いられています。これには、デザインに一貫性を持たせる意味があったと考えています。

上にあるデスクトップのデザインと、スマートフォンのデザインに用いられているアイコンはほぼ統一されています(文言は若干違いますね)。また、色合いも同様のものが使われているのが見て取れます。

(Twitter モバイル)

デザインに一貫性を持たせる意味は、『ウェブサイトを使っているときに戸惑わない』ようにすることにあります。

例えばウェブサイトのブログ一覧から気になる記事を発見し、それに移動した際、全く違うデザインのページに飛んだら不安になってしまいます。製品一覧から製品ページに飛んだ際も同様です。この不安感から離脱する人も少なくありません。また、ユーザビリティの面から見ても、1つのサイトに複数のデザインページがあるのは、あまり推奨されることではありません。1サイト、1デザインを心掛けましょう。

特に注意すべき点は、以下の4つです。

  • 企業ロゴの位置、グローバルナビなどのヘッダー
  • 企業情報やサイトマップを載せるフッター
  • 色
  • タイポグラフィ
  • 空白の使い方

例外として上げられるのは、情報を入力してもらってコンテンツを提供するランディングページと、PPC広告から訪れた人に向けたランディングページです。どちらも入力してもらうことに集中してもらうため、ホームに戻るボタンなど、気が別の方向に行ってしまう要素は取り除いておきましょう。

番外編・カードデザイン

最近のアップデートではありませんが、もう1つだけ抑えておきたいことがあります。

Twitterは2012年に『Twitter Card』と呼ばれる機能をリリースしました。この機能は、ツイート内にTwitter Cardに対応したサイトのコンテンツURLを入れることで、ツイートを開いた際にコンテンツが大きく表示されるというものです。具体的には、以下のように表示されます。

複数の調査結果によれば、Twitter Cardの導入によるトラフィックへの影響はポジティブのようです。詳しくは以下のブログを参照してみてください。

このカードデザインのポイントについて、CRMを提供するアメリカ企業『Intercom』が『Why card are the future on the web』という、優れたブログを書いています。この中の要点を整理すると、以下のようになります。

  • カードは昔から情報の伝達に役立っていた。17世紀のロンドンでは既に名刺としてビジネスの場で交換されていたし、現在でも自分の身分を証明するために免許証などが使われている。商業においても同様で、クーポンや会員カードとして活用されている。
  • 現実のカードのように、開いたり、折り畳んだり、並べたり、グループにしたり、様々な展開方法がある。飛び出すカードのように、写真や動画、音楽といったマルチメディアコンテンツを埋め込むなど、汎用性が非常に高い。
  • カードデザインはデスクトップ、スマートフォン、タブレットで、最適なサイズにできる。例えばモバイルデバイスならTwitterのタイムラインのように積み重ねることが可能で、タブレットも縦横どちらに変えてもカードを並び替えて最善の表示ができる。

多くのコンテンツを提供する際に、カードデザインは有効です。昨年の12月に公開されたGoogle Tipsが良い例で、1つ1つのコンテンツがカードになっており、読みたいコンテンツをクリックするとカードが開き、疑問への回答を読むことができます。コンテンツが重要となる、これからのウェブマーケティングにおいても、十分に有効となるデザインのひとつだと考えています。

Intercomのブログタイトルの通り、カードはウェブの将来を作るのかもしれません。

最後に

Twitterのアップデートから学ぶウェブデザインのトレンド、いかがでしたでしょうか？

  • フラットデザイン
  • 一貫したデザイン
  • カードデザイン

それぞれ見た目だけではなく、ユーザビリティとアクセシビリティの面で優れており、“ただのトレンドでしょ？”で済ませることはできません。

ソーシャルメディア(特にTwitter、Google+)やメディアサイト(Mashable!やTechcrunch)は流行と利便性の両面をすぐに対応してアップデートするため、ベンチマークしておくと改善ポイントを見つけやすくなるためオススメです。

(Photo: Twitter Bird Logo Sketch, New by Shawn Campbell)

  • f
  • t
  • p
  • h
  • l
  • n