SwapSkillsでモバイルを意識したWebコミュニケーションの講演をしました

7月2日、野村カンファレンスプラザ日本橋にて SwapSkills doubbble01 というセミナーが開催されました。7 人のスピーカーから、概念的なところからコーディング、UI設計、パフォーマンスという様々な側面からモバイス向けの Web サイト制作の今を検証しました。私は 「Mobile First:モバイルファースト」が意味する今後のWebコミュニケーションデザイン という題名で話をしました。技術的な話は少なめで、今私たちはどのような人たちに向けてサイトを作っているのか、そして彼等のニーズに応えるには何が課題なのかという話をしました。

最近、国内でも耳にするようになった「モバイルファースト」という言葉。これは元 eBay / Yahoo! のデザイナー Luke Wroblewski が提唱した と言われています。モバイル機器を使う人の割合が圧倒的に高くなるということ、そしてそこでの体験は非常にフォーカスされた環境にあることから Web サイトのエッセンス（本当に必要なもの）を選択して表示させなくてはならない。こうしたことからモバイルを最初に意識して作るのはどうだろうかというのが Wroblewski 氏が考える「モバイルファースト」の基本的な考え方です。

今セッションでは、なぜ今「モバイルファースト」なのか、元々「モバイルファースト」のように見える日本では何が必要とされているのか、技術を取り込むだけでは解決することが出来ない「モバイルファースト」の課題について話をしました。

見た目を同じにすることを『対応』と呼ぶべきなのか

今でも Android のフラングメンテーションで頭を悩ましている方がいると思いますが、今後どんどん違う大きさ、バージョンのデバイスが出てきます。ちょっとした見た目の違いだけでなく、使える機能も差異が出てきます。こうした中、特定のデバイスに向けてページ制作し、URL で振り分けるのも限界がありますし、振り分けることでコンテンツの共有や拡散も難しくなります。たとえ「Android 2.3 以上」とバージョンで切ったとしてもスクリーンサイズは様々なので、それでも対応は無限大に広がります。そこで、Responsive Design のような考え方が生まれて来たわけですが、これを仕事で導入するためには すべてのブラウザで同じ見た目に出来ない という Web デザインにおける基本を押さえておかなければ難しいのではないでしょうか。

２年前 Progressive Enhancementに関する調査をしたところ、Progressive Enhancement の考え方自体には賛同できるものの、仕事には導入できないだろうと応えた方が半数を超えてしました。今はまた違う反応になるかもしれませんが、Progressive Enhancement という基本を押さえていないと、Responsive Design の実現は難しいでしょうし、結果的に「全スマホで同じ見た目で」という注文に対応しなければならない状況が生まれてしまいます。今後「対応する」という意味も見た目を同じにすることも含めて話をするべきなのかは考えなくてはいけませんね。

コンテンツファースト

モバイルファーストは情報の取捨選択に役立つひとつの考え方ですが、モバイル向けサイトを最初に作りましょうと唱えているわけではないと考えています。PC 向けの Web サイト制作から「コンテンツが重要である」とは言われてきています。しかし、スクリーンサイズも広く、様々なタイプのコンテンツを入れやすい環境であるが故に何が最も重要なコンテンツなのかが見え難くなる場合があります。モバイルという限られたネットワーク帯域と小さなスクリーンサイズでは、コンテンツの取捨選択が必須です。今まである程度平等に扱うことができたコンテンツもプライオリティを決め、中には省略が必要なものも出て来るでしょう。

元々必要とされていた、コンテンツのプライオリティ決めやコンパクト化も、モバイルを意識することで必須になりますし、ある程度コンテンツをモジュール化させることで、様々な環境に応じたコンテンツ配信も可能になります。コンテンツファーストということは、制作過程においてもコンテンツを起点した制作プロセスへのニーズへより一層高まるのではないでしょうか。これも Progressive Enhancement と同様、考え方のシフトが必要になる場合があります。

基本の基本だと考える方もいると思いますが、だからこそ忘れてはならないですし、とても難しい部分ということもあります。これが先述した技術を取り込むだけでは解決することが出来ない「モバイルファースト」の課題であり、ここをどう解決するかで技術の活かされ方も変わるのではないかと考えています。

余談になりますが、モバイル関連の話をもう少し聞きたいという方は 4 月に行った 谷拓樹さんとの対談 はおもしろいと思います。

今回のスライド

毎回、内容よりプレゼンのほうが注目されるほうなのですが、今回も例外ではなかったですね。今回は全スライドを手描きにしたということもあり、ますます注目されたのかもしれません。絵を描くのは苦手ではないので、スラスラ出来たのですが、そのあとスキャン、切り抜き、アニメーションに相当の時間がかかりました。正直、予想していたより時間がかかってしまったので次回するかどうか悩んでしまいますね。

手描きであったことと、視覚効果を工夫したこもあり、「これは何で作ったのですか？」という質問をいくつかいただきましたが、Keynote を使っているだけです。マジックムーブという機能を１度使いましたが、それ以外は基本的な機能ばかり。スライドのエフェクトも「押し出し」１つしか使っていないのでシンプルですね。機会があれば、スライドの見せ方についての記事を書くのも良さそうです。