MD-Blog_Web Creative

毎月1回、MONSTER DIVEのクリエイターたちが集まって開催されている勉強会『Creator's Lab』。
今回のお題は【Designing Mobile First】でした。
Mobile Firstな思考が、正直あまり得意とは言えないディレクターであるワタクシも、これは勉強のチャンス！！とばかりに潜入（見学）してきました。

モバイルデザインではなくモバイルファースト

モバイルファーストなデザインは、モバイルのみに特化するのではなく、PC端末のこともちゃんと考えて〜の、で、モバイル優先でデザインすることが大切なのです。
PCファーストで考えると、例えばモバイルでは存在しない「hover」の表現を考えてしまい、後から『はっ！しまった！』なんてことがあったりなかったり。。。

ちなみに、「PCファースト」ってあまり言わないので、この表現てどうなんだろう？と検索してみたら、表示された検索結果はほとんど「モバイルファースト」。
関連検索キーワードで「PCファーストビュー」とか出てきちゃって、「で、で、ですよね。。。でも、ちっが〜〜〜〜うっ！」となってしまいました。でもそれぐらい、今や「モバイルファースト」が重要ってことですね。

モバイルファーストデザインの基本

異なる制作フロー

これまでのWeb制作は、ページのデザインをJPGで提出し、レイアウトから装飾まで、一通りデザインが確定してからコーディング・オーサリングへと進行する流れが一般的でしたが、モバイルファーストデザインにおいては、単純に制作工程の順番ではなく、UI・UXが重要となるため、デザイン制作と平行して画像パーツの作成、コーディングやオーサリングの業務を行っていきます。

モバイルファーストデザインの考え方とは

レイアウト設計 ＝ コンテンツ設計である

スマートフォンの表示領域に適した設計やコンテンツの優先度付けである取捨選択など、引き算ではなく足し算で、マルチデバイスに対応しましょう。

ページデザインは、既製品から「選ぶ」

スマートフォンユーザーは、「ブラウザ」と「（いわゆる）アプリ」の境目がありません。社会で標準化されているアプリのUI思想を踏襲するという意識で、レイアウトデザインの段階では悩まずに。以降の工程にきちんと時間をかけましょう。

アートワークとUIデザインを分離する

一口にデザインと言っても、ページデザインとしての「（UI）デザイン」と、表示される各要素の「（グラフィック）デザイン」は、完全に別物です。
UIとコンテンツが分離されていれば、デバイス毎でレイアウトが変動しても、Webページとしてのクオリティが保たれるはず、という思考です。

個性豊かなクリエイターたちの注目ポイント

MONSTER DIVEのCreator's Labでは、毎回課題を学んだ後に、ハッカソン的な実践タイムを設けています。
今回の課題は、いまご覧いただいているこのMD-BLOGをモバイルファーストリデザインするなら、どう作る？というテーマで、各々がデザインを行い、考え方を共有しました。

Labを終えて、モバイルファーストでサイト制作を行う際に気をつけることや、今回の課題の感想をクリエイターたちにコメントしてもらいました。
コメントからは、クリエイター各々の立場によってそれぞれの視点でチャレンジしたことが分かりますね！

• from Yuji Ushida

「モバイルファーストデザインを行う上で重要なことは、余計な情報を排除して、より分かりやすい構成に。見た目的には、アイコンの造りをどうするか等、より直感的にすることも大事！」

• from スズキリュウスケ

「PCと違ってブラウザの種類やバージョンによる縛りが少ないため、自由度が高いですが、端末サイズの多様化が進んでいるので、そこに配慮したコーディングが大切！」

• from mio.satoh

「スマートフォン向けサイトの制作は、単にインターフェイスの最適化ではなく、情報自体の最適化を意識して取り組みました。PCとスマートフォンではユーザーの環境も、そのページにたどり着くまでのストーリーも全く違うので、線図のまま作るだけのWebデザイナーではなく、そんな背景までイメージできるクリエイターになりたいところです（むつかしいですね）。」

ユーザーが迷うことなくサイト内を回遊するため、モバイルという限られたサイズの画面の中で、見せる・隠す・出す・削ることを考えて、見た目キレイなだけではない、使い勝手もキレイなコンテンツ設計が必要ですね。
イチユーザーとして考えて、でも自分の感性だけに頼らないことが大切です。

まとめ

サイトを使う人みんなが使いやすいUI・UXって難しい...、というか、無理かも！？ですが、でも、可能な限りたくさんの方に楽しい・使いやすいと思っていただけるモノを創りたいですね。
そんな考えや想いに、クリエイター・ディレクターなどの垣根はないはず。
『100%の期待に120%の成果で応え続ける』MONSTERたちは、より高みのモノヅクリを目指し続けるのです。

次回は見学ではなく、実践も参加したいな〜。時間は作るモノだから、ガンバロウっと。