モバイルオンリーの情報戦略を考える(2)
モバイルオンリーの情報戦略を考える(2)
2014年07月28日
TEXT:小川 浩(シリアルアントレプレナー)
前回の記事はこちら>モバイルオンリーの情報戦略を考える(1)
僕が考えた、モバイルオンリー向けの情報デザインのサンプルを用意した。まずはこちらのサイトをご覧いただきたい。
■起業家たちの肖像
http://entrepreneurs.dino.vc/
まず、レスポンシブWebデザインは外せない。レスポンシブWebデザインとは、どんなデバイスの画面サイズでも最適な閲覧を実現する手法だ。これにより、PC・モバイルあらゆる環境で快適に情報取得ができる。
さらに、タブレットやスマートフォンのように狭い画面では、立体感のあるデザインはうるさく感じるので、フラットデザインを採用している。フラットデザインではグリッドを意識し、カラフルな単色とタイポグラフィを用いるのが通常だが、ここではあえて色を徹底的に使わず、画像を中心にしている。
画像を中心とするため、グリッドをさらに進めたタイルデザインと呼ばれる画像を矩形に並べ、タイトルやテキストをその上に浮かして表示する手法にした。代表的なWebサイトとしては、米Yahoo!のYahoo! Food(https://www.yahoo.com/food)がある。
TEXT:小川 浩(シリアルアントレプレナー)
前回の記事はこちら>モバイルオンリーの情報戦略を考える(1)
僕が考えた、モバイルオンリー向けの情報デザインのサンプルを用意した。まずはこちらのサイトをご覧いただきたい。
■起業家たちの肖像
http://entrepreneurs.dino.vc/
まず、レスポンシブWebデザインは外せない。レスポンシブWebデザインとは、どんなデバイスの画面サイズでも最適な閲覧を実現する手法だ。これにより、PC・モバイルあらゆる環境で快適に情報取得ができる。
さらに、タブレットやスマートフォンのように狭い画面では、立体感のあるデザインはうるさく感じるので、フラットデザインを採用している。フラットデザインではグリッドを意識し、カラフルな単色とタイポグラフィを用いるのが通常だが、ここではあえて色を徹底的に使わず、画像を中心にしている。
画像を中心とするため、グリッドをさらに進めたタイルデザインと呼ばれる画像を矩形に並べ、タイトルやテキストをその上に浮かして表示する手法にした。代表的なWebサイトとしては、米Yahoo!のYahoo! Food(https://www.yahoo.com/food)がある。
これらフラットデザインやグリッドデザイン、さらにタイルデザインなどの潮流は、Pinterestの成功やWindows 8が採用したことで世界的に広まったといえるだろう。
そして、個々のコンテンツをクリックすると情報が展開するが、ここはすべてシングルカラムによる表示としている。大方のPCが横長の画面であったために、これまで多くのWebサイトがマルチカラムでより多くの情報を一覧させようとしてきた。しかし、モバイルオンリー世代には、縦長のスマートフォン画面のほうが慣れており、その感覚に合わせるにはシングルカラムのほうが好ましいのだ。
また、今回のサンプルサイトのように、画像を画面いっぱいに広げるインパクト勝負のつくりも増えている。これは、Twitter共同創業者のエヴァン・ウイリアムズがつくった新プロジェクトMedium.comでも採用されている方法だ。
ページ下には大きめのソーシャルボタンを配置している。これはバズフィードなどのバイラルメディアや、ハフィントンポストで採用されている。現代のメディアの多くはSEOよりSMO(ソーシャルメディア最適化。僕は一歩進めてソーシャル・モバイル最適化とよんでいる)を考慮しているからだ。
最近「メディアのフロントページはSNSだ」という言葉が流行している。意味するところは、メディアのフロントページに訪れる人は少なく、まずソーシャルメディア上で拡散された個々の記事をクリックすることでやってくる。だからこそ、拡散を促進するためのソーシャルボタンは目立たせる必要があるし、開かれたページにインパクトをもたせることは重要なのだ。
このような手法を用いて作成したサンプルサイト(http://entrepreneurs.dino.vc/)について、もしご意見があれば、http://entrepreneurs.dino.vc/wf/_contactもしくはFacebookページ(https://www.facebook.com/entrepreneurs.dino)からいただければ幸いだ。
そして、個々のコンテンツをクリックすると情報が展開するが、ここはすべてシングルカラムによる表示としている。大方のPCが横長の画面であったために、これまで多くのWebサイトがマルチカラムでより多くの情報を一覧させようとしてきた。しかし、モバイルオンリー世代には、縦長のスマートフォン画面のほうが慣れており、その感覚に合わせるにはシングルカラムのほうが好ましいのだ。
また、今回のサンプルサイトのように、画像を画面いっぱいに広げるインパクト勝負のつくりも増えている。これは、Twitter共同創業者のエヴァン・ウイリアムズがつくった新プロジェクトMedium.comでも採用されている方法だ。
ページ下には大きめのソーシャルボタンを配置している。これはバズフィードなどのバイラルメディアや、ハフィントンポストで採用されている。現代のメディアの多くはSEOよりSMO(ソーシャルメディア最適化。僕は一歩進めてソーシャル・モバイル最適化とよんでいる)を考慮しているからだ。
最近「メディアのフロントページはSNSだ」という言葉が流行している。意味するところは、メディアのフロントページに訪れる人は少なく、まずソーシャルメディア上で拡散された個々の記事をクリックすることでやってくる。だからこそ、拡散を促進するためのソーシャルボタンは目立たせる必要があるし、開かれたページにインパクトをもたせることは重要なのだ。
このような手法を用いて作成したサンプルサイト(http://entrepreneurs.dino.vc/)について、もしご意見があれば、http://entrepreneurs.dino.vc/wf/_contactもしくはFacebookページ(https://www.facebook.com/entrepreneurs.dino)からいただければ幸いだ。
■著者の最近の記事
モバイルオンリーの情報戦略を考える(1)
モバイルオンリー世代には「PCサイト≒ブラウン管TV」?
プラティシャーというムーブメントの本質
SEOに代わるSVOの時代(後編)
SEOに代わるSVOの時代(前編)
テスラに見るオープンソース時代のマーケティング
非シリコンバレーのスタートアップについて考えてみた
エディトリアルデザインの時代、再び
[筆者プロフィール]
おがわ・ひろ●シリアルアントレプレナー。著書に『ビジネスブログブック』シリーズ(毎日コミュニケーションズ)、『Web2.0BOOK』(インプレス)、『仕事で使える!「Twitter」超入門』(青春出版社)、『ソーシャルメディアマーケティング』(ソフトバンククリエイティブ/共著)などがある。
twitter:http://www.twitter.com/ogawakazuhiro
facebook:http://www.facebook.com/ogawakazuhiro