画像共有型サイトのトーン&マナー研究(1)

画像共有型サイトのトーン&マナー研究(1)
2012年10月15日
TEXT:小川 浩(シリアルアントレプレナー)

このコラムにおいて幾度となくこのテーマに取り組んでいるのだが、世界中のWebサイトのデザイナーは画像共有型のトーン&マナーを無視できなくなっている。

ひと昔前であればPCの画面はどんどん大きく、そして高彩度になっていたから、より広いキャンバスでの自由なクリエイティブに存分に腕を振るったクリエイターが多かったことだろう。しかし、徐々にウルトラブックから現在のタブレットの普及、そしてスマートフォン市場の急拡大によって、いつのまにか一般的なネットユーザーが見ている画面はどんどん小さくなった。たしかにiPhone5が今までより少し大き目の画面を採用したが、それでももはやPC全盛時代のような“大きなキャンバス”を前提にしたデザインを行うことは許されなくなった。Webデザインは巨大な壁画を描くような具合ではなく、まるでマッチ箱にイラストを描くような感覚になってきている。もちろん、米粒やシャープペンシルに細工してアートをつくるのとは違う。あれはアートであって、その技術を見せつけるための工夫だが、Webデザインは小さな画面でも見たり使ったりするうえでのストレスをユーザーに与えてはならないからだ。大は小を兼ねるという言葉は、ことコンピューティングのUIづくりには当たらない。

巨大ポータルのWebデザインは、まるで総合ディスカウントストアのドン・キホーテのように、大きなスペースにこれでもかとばかりに情報を詰め込んでいる。ドン・キホーテはあえてジャングルのように歩きづらく一見どこになりがあるかわからないような構造にしているが、あのトーン&マナーが成功するのは、相当に大きな売り場スペースがを確保しているからこそであり、狭い領域に詰め込んだ場合は逆効果になる。スマートフォンを中心とした狭くて小さな画面上でのコンピューティングは、人差し指や親指でクリックしやすい大きさだが、同時に視覚的にほかの情報を隠しきらない程度の小ささ、という“ちょうど良い”“適度な”サイズ感のアイコンと、そのアイコンを際立たせるための、やはりちょうど良い余白が重要になっているのだ。

ちなみにWindows 8は、この発想をUIの根底において設計されたOSだと思う。ただし、大は小を兼ねないのと同じように、小も大を兼ねない。デスクトップを操作するうえでは、やや不適格なUIであるかのように思える。

さて、こうしたデザイン制作上の力点が変わることで、Webのコンテンツの中心は画像になってきている。アイコンとしての役割とコンパクトながらに多くの情報を持たせることができる画像は、直感的にクリックを誘発する最上のコンテンツだ。情報をユーザーに届けるメディアとしてWebを考えた場合、企業のWeb制作担当やオンラインメディア戦略の責任者は、以前よりはるかにコンパクトな画面で、あまりページ遷移をしない、というユーザー行動を鑑みたうえで、どうやったら前より見やすく使いやすい操作感を生み出せるかを考えなければならない。あまり情報を詰め込まず、画像を軸に、シンプルだがエレガントなトーン&マナーをつくる。

いったいどうやればよいのか? その問いと回答を、しばらくみなさんと考察していきたい。


Windows 8のスタート画面




【お知らせ】MdN Design Interactiveのコラムも読める無料iPhoneアプリ「MdN News Reader」を公開しました、ぜひご利用ください。
MdN News Reader
URL:http://www.mdn.co.jp/di/newstopics/17571/


■著者の最近の記事
モバイルインターネットにアジャストせよ
iOS6で見えてきた画像中心型Webへの変化(後編)
iOS6で見えてきた画像中心型Webへの変化(前編)
Android陣営がiPhone5に追いつけない理由
クローンサービスの挑戦を受けるiPhone5
Apple対Samsungの訴訟合戦後にやってくるもの
プライドを捨ててHTML5へのコミットメントを下げたFacebook
さまよえるWebOSチームはAndroidに再度勝負を挑めるか?





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

MdN DIのトップぺージ