モバイルオンリーの情報戦略を考える(2) - デザインってオモシロイ -MdN Design Interactive-
デザインってオモシロイ MdN Design Interactive

モバイルオンリーの情報戦略を考える(2)

  • 新規会員登録
  • ログイン管理
  • Twitter
  • facebook
  • はてなブックマーク
  • RSS

2021.3.4 THU

  • TOP
  • 特集
  • 連載
    • ALL
    • デザイン・アート
    • テクノロジー
    • コラム
    • インタビュー
    • レポート
    • インサイト
  • Tech
    • ALL
    • プログラミング
    • UI/UX
    • フレームワーク
    • Webアプリ
    • Webサービス
    • その他
  • ニュース
    • ALL
    • ニュース
    • 新製品
    • テクノロジー
    • アートイベント
    • モバイル
    • ネットで話題
  • ネット印刷
  • 求人情報
  • クリエイター登録
新規会員登録
ログイン管理
  • プレスリリース
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 広告掲載について
  • インプレスグループ
閉じる
  • TOP
  • ニュース -
  • モバイルオンリーの情報戦略を考える(2)
  • ALL
  • ニュース
  • 新製品
  • テクノロジー
  • アートイベント
  • モバイル
  • ネットで話題

コラム

2014.7.28 MON

モバイルオンリーの情報戦略を考える(2)

モバイルオンリーの情報戦略を考える(2)

2014年07月28日
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)からいただければ幸いだ。

起業家たちの肖像  http://entrepreneurs.dino.vc/
起業家たちの肖像
http://entrepreneurs.dino.vc/




■著者の最近の記事
モバイルオンリーの情報戦略を考える(1)
モバイルオンリー世代には「PCサイト≒ブラウン管TV」?
プラティシャーというムーブメントの本質
SEOに代わるSVOの時代(後編)
SEOに代わるSVOの時代(前編)
テスラに見るオープンソース時代のマーケティング
非シリコンバレーのスタートアップについて考えてみた
エディトリアルデザインの時代、再び



小川浩氏近影

[筆者プロフィール]
おがわ・ひろ●シリアルアントレプレナー。著書に『ビジネスブログブック』シリーズ(毎日コミュニケーションズ)、『Web2.0BOOK』(インプレス)、『仕事で使える!「Twitter」超入門』(青春出版社)、『ソーシャルメディアマーケティング』(ソフトバンククリエイティブ/共著)などがある。
twitter:http://www.twitter.com/ogawakazuhiro
facebook:http://www.facebook.com/ogawakazuhiro

twitter facebook このエントリーをはてなブックマークに追加 RSS

前の記事を読む

「怒ってなどいない!! 」怒り顔の猫・小雪 フォトコラム Day 32

「怒ってなどいない!! 」怒り顔の猫・小雪 フォトコラム Day 32

2014.7.25 FRI

次の記事を読む

MdN Design Interactive週間ランキング(7/20~7/26)

MdN Design Interactive週間ランキング(7/20~7/26)

2014.7.29 TUE

アクセスランキング

2.22-2.28

  • フェリシモ、飼育している気分になるほどリアルに再現した「いつでもそこに ハムスターケージポーチ」を発売
  • “一瞬の美しさ”をテーマに鳥にまつわる作品が集まった「鳥物語トリストーリー展 2021」
  • ヴィレヴァン、サメが襲いかかる瞬間を描いたデザインのマスクを発売
  • ドコモとKDDI(au)が「解約手続ページ」を非表示にする細工をしていたと総務省が発表
  • 福助、大人向けのデザインの靴下『ドラえもん』ソックスを発売
MdN BOOKS|デザインの本

デザイン求人情報

PICKUP

ワンプリント

Pick upコンテンツ

現在

  • 【お菓子連載・甘いときめき、小さな宝箱】第14回「efuca.」ネコ、イヌ、ヒト……、絵柄もぜんぶ“生地”でできた愛らしいクッキーが人気!
  • iPhoneでできる災害への備え!オフラインでも使える地図ほか/iPhone芸人・かじがや卓哉のiPhone豆知識
  • 知ってるようで知らない、PC盗難防止のセキュリティワイヤーの選び方・使い方とは?
  • 【オンラインセミナー・Webセミナー】未来を変えるデザイン デザインコンサルタントの仕事術/MdN × Bau-yaの教室
  • 【文房具連載・今月の文具コレクション】テレワーク下でも気分がアガる文房具

MdN公式Instagram

Instagramでは、デザイン関連本や本に関連した参加型コンテストについて発信しています。

page top
MdN
impress
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 会社概要
  • インプレスグループ
  • 広告掲載について
  • MdN デザインの本
  • MdN新書 新ジャーナリズム宣言。
  • MdNのデザイン求人情報
  • MdN DESIGNFONT STORE

Copyright © MdN Corporation,
an Impress Group company. All rights reserved.

page top
MdN
impress
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 会社概要
  • 広告掲載について
  • インプレスグループ
  • MdN デザインの本
  • MdN新書 新ジャーナリズム宣言。
  • MdNのデザイン求人情報
  • MdN DESIGNFONT STORE

Copyright © MdN Corporation,
an Impress Group company. All rights reserved.