いま,見ておきたいウェブサイト

第137回 2016年特別編 2015年の特徴,2016年の展望

この記事を読むのに必要な時間:およそ 3 分

だいぶ日が過ぎてしまいましたが,みなさま,新年あけましておめでとうございます。

Lançamento - Website, What a Wonderful World!を運営しているLançamento(ランサメント)です。

『いま,見ておきたいウェブサイト』では,2015年も国内外のウェブサイトやウェブサービス,アプリなどを紹介しながら解説してきました。2016年の初回は「特別編」と題して,2015年に登場したウェブサイトやウェブサービスの周辺環境・特徴などを振り返りながら,2016年への展望を語っていきたいと思います。

特徴その1 モバイルデバイス生み出した,デザインの変化

2015年は,ウェブサイトへのアクセスがモバイルデバイス中心となったことを感じさせる年でした。ほとんどのウェブサイトは,「レスポンシブWebデザイン」を基本にして,モバイルデバイスへの対応が当たり前になってきました。

こうした流れは,素早くモバイルデバイスに対応させる,「レスポンシブWebデザイン」を実現するHTMLテンプレートやBootstrapなどのCSSフレームワークの利用が促進されるという変化を生み出します。その結果として,制作されたウェブサイトのどれもが,一定レベルで,モバイルデバイスへ対応できるようになったのです。

その一方,HTMLテンプレートやCSSフレームワークの使用によって,コンテンツの内容や配置,構成する素材やビジュアルの似通った,どこかで見たようなウェブサイトが増加している現実があります。

こうした環境下で,2015年は他のウェブサイトとの個別化を図るための方法として,ウェブサイト上での表現方法や構成している要素の質の向上が目立ちました。

代表的な表現方法のひとつとしては,「小さな動き(アニメーション)」を実装するウェブサイトが多数登場してきたことが挙げられます。

図1 スイスの高級時計財団,Fondation de la Haute Horlogerie(FHH)による,2015年の高級時計の新モデルとトレンドを紹介したNew Models and Trends in Fine Watchmaking』。さりげないアニメーションがウェブサイトの世界観を引き立てている

図1 スイスの高級時計財団,Fondation de la Haute Horlogerie(FHH)による,2015年の高級時計の新モデルとトレンドを紹介した『New Models and Trends in Fine Watchmaking』。さりげないアニメーションがウェブサイトの世界観を引き立てている

credit:Virtua

画面全体を使った大きな動き,マウスに対応した派手なインタラクションといった,つい数年前まで主流だった「Adobe Flash」を利用した大きな動きとは異なり,あくまでもユーザーがコンテンツを見る場面で邪魔をしない,または,ユーザーの理解や判断の手助けをするような,気の利いた小さな動きが注目を集めました。

図2 『Le Printemps du Polar
テレビ局Artéの「春の探偵小説」特集の特設サイト。タイポグラフィーによって,ウェブサイトの質が高まる好例のひとつ

図2 『Le Printemps du Polar』テレビ局Artéの「春の探偵小説」特集の特設サイト。タイポグラフィーによって,ウェブサイトの質が高まる好例のひとつ

credits:Benjamin Guedj, Jean-Christophe Suzanne

また,ユーザーの目にはっきりと見える要素としては,「タイポグラフィー」も注目されました。シンプルですが,文字の使い方ひとつで,ウェブサイトの印象を大きく変えてしまう効果を持つタイポグラフィーの使用だけでなく,その質の高さも重要性を増してきました。

図3 「カード型デザイン」を採用している,オーディオメーカーBang & Olufsenのオンラインストア『B&O PLAY』

図3 「カード型デザイン」を採用している,オーディオメーカーBan

2015年を代表するウェブサイトの表現方法・要素としては,これ以外にも,カードのようにコンテンツをグリッドに沿って並べる「カード型デザイン」,背景に大きな画像や動画を使う「ヒーローヘッダー(ページ最上部のヘッダ)」,ハンバーガーメニューなど「モバイルサイトルールのPC版ウェブサイトへの導入」なども挙げられるでしょう。

ウェブサイトの均一化,無個性化によって,ウェブサイトを構成するコンテンツはもちろんのこと,それらを構成する レイアウトやUI,パーツや画像・動画といった,さまざまな構成物の質が,より重要性を増してきた一年でした。

特徴その2 そして「ニュース」からすべてが始まる

モバイルデバイスの普及にともない,ウェブサービスによる,ユーザーの空き時間の取り合いが激しくなっています。特に2015年は,SNSを中心とした,大手新聞社や出版社のニュース配信サービスに注目が集まりました。

Facebookによるニュース配信サービス「Instant Articles」,Snapchatによる「Discover」はもちろん,Appleによる「News」アプリの提供やTwitterによる「Moments」,LINEによる「アカウントメディアプラットフォーム」も,こうした流れを受けています。

図4 Facebookによるニュース配信サービス「Instant Articles」には,日本の新聞社も参加するなど,世界的な広がりを見せている

図4 Facebookによるニュース配信サービス「Instant Articles」には,日本の新聞社も参加するなど,世界的な広がりを見せている

どのサービスも「ニュース記事に素早くアクセスできる」ことをメリットにしています。もちろん,その根底には「ユーザーが空き時間のすべてを,自らのサービス上で過ごして欲しい」というウェブサービス,SNS側の意図が見え隠れします。

図5 Safariの広告ブロックとともに登場した,Appleの「News」アプリ

図5 Safariの広告ブロックとともに登場した,Appleの「News」アプリ

さまざまなコンテンツの中で,なぜ「ニュース配信」がウェブサービスやSNSで始まったのか。それには,新聞社や出版社などのコンテンツホルダー側の環境が大きく変化したからではないでしょうか。

自ら運営するサービスにユーザーを引きこむことで収入を得るという,「ページビュー中心の収入源」だけでは,もはや新聞社や出版社の経営は限界に来ています。そのため,新しい安定的な収入源が必要となってきます。

その新たな収入源として目をつけたのが,誰もが利用しているウェブサービス(アプリ)やSNSへの記事提供です。記事の提供は,サービスやSNSにおけるユーザーの滞在時間を伸ばします。記事を提供する側には,安定した収入がもたらされます。そして,ユーザーは広告ブロックをせずとも,快適にニュースを楽しめるという,実にうまい仕組みです。

最近では,タイムライン上で「Periscope」のライブ配信を始めたTwitter,同じく「Facebook Live」を始めたFacebookなど,SNS周辺で「動画」を取り入れる動きが活発です。ユーザーにも,コンテンツ提供側にも得になる「新たな収入源獲得への試み」は,貪欲に,今も続けられています。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。

コメント

コメントの記入