プラットフォームが提供できる機能への返答として、最初に開発されたモバイルサイトは「創造」よりも「折衷案」によって生み出されたものでした。しかし、機能性に富んだ現在のデバイスは、ユーザーを惹きつけるだけでなく、エクスペリエンスのユーザビリティを向上させる、視覚的に魅力的なデザインを作成する機会を与えてくれます。しかしながらこのような機会に伴い、新たな課題も発生しています。
「パート1：情報アーキテクチャ編」では、物性やスペック的な観点や、いつ、どこで、どのように私たちが使用するのかにおいて、モバイルとデスクトップがどのように異なるのか、そしてこれらのデバイスに対する私たちの考えや態度について見てきました。その後、「パート2：インタラクション編」の記事においては、構造や機能を開発する際にこれらの相違が与える影響について考察してきました。この2つの記事は、スマートフォンやタブレットに対する良いデザインの基礎的な情報を提供したのです。今日は、ビジュアルデザインソリューションと、美しくて使いやすいアプリケーションの開発に必要な、ベストなデザインの実践方法について考察し、3回にわたるモバイルのためのデザイン研究を締めくくろうと思います。
はじめに、モバイルデバイスの物理的制約を解決するデザインとそれに付随するベストプラクティスについて見ていきます。その後、ビジュアルデザインを用いてモバイルサイトやアプリケーションのコンテンツをサポートする、コミュニケーションのためのデザインについて考察します。
物理的制約を解決するデザイン
モバイルやタブレットの形状やタッチスクリーンのインターフェースによって、考慮すべきユーザビリティの問題があります。デスクトップユーザーはより広い画面でコンテンツを閲覧したり、また詳細情報を手に入れるために様々な機能を使用することができますが、モバイルユーザーはより小さい画面に集中して、デスクトップとは異なる方法でインタラクションを行っていく必要があります。モバイルデバイスの設計や特定のインタラクション様式を考慮すれば、直感的なモバイルエクスペリエンスを生み出すことができます。
使いやすいレイアウト
モバイルの画面は限られたスペースしかないため、コンテンツやインタラクションを最良の形で表示するためには、独自の制約が存在します。特に、レイアウトは合理化及び集中化させる必要があります。
・レイアウトの構成 – デザインにしっかりとした基盤を構築するには、限られたスペースを最大限活用する方法を考えなければなりません。グリッドシステムは、次のような働きをしてくれるので、デザイナーにとって非常に有効です：均等間隔の縦線による構成は、コンテンツを整理するグリッドの役割を果たします。グリッド内の空間は均等に区切られているので、ボタンや見出し、画像などを効率的かつ容易に配置することが可能となります。これらの要素をグリッドに合わせて配置することでユーザーを誘導し、同時にわかりやすく美しいビジュアル要素を構築することができます。
・スクロール／スワイプするためのスペース – ユーザーが意図しない操作ミスを起こすことなくコンテンツを自由に閲覧でき、かつ意図しないアイテムを起動させずにスクロールできるようにすることは、デザイン上必須となります。すなわち、ユーザーが要素間を容易に移動しながら閲覧できるように、要素間のスペースを十分にとらなければなりません。
ユーザーに優しいインタラクション
モバイルデバイスにおけるタッチスクリーン・インターフェースでは、インタラクションを促進するようなビジュアルデザインを取り入れる必要があります。つまり、各要素のサイズや配置は使いやすさを考慮し、動作間の重要性や相関性を認識しなければなりません。
・ボタンのヒット領域 – 「パート2：インタラクション編」でも述べたように、適切なサイズや配置に基づいたボタンは、ユーザーに対して機能性を保証します。理想としては、標準的な画面では44pxから57pxの間、ピクセル密度の高い画面は88pxから114pxのサイズが良いでしょう。このような適切なサイズのボタンを配置することによって十分なスペースが確保でき、平均的な大きさの指先で容易にボタンを操作することができます。
・認識可能で「届く」コントロール – 関連するインタラクティブ要素が容易に手の届く範囲にあることで、ユーザーは迅速にこれらの要素を移動して操作することができます。これによって、インタラクションに対するユーザーの混乱を回避する助けとなり、また複雑な処理を迅速に行うことが可能となります。
コミュニケーションのためのデザイン
物理的な制約は、私たちが直面しているモバイルデザインにおける問題の半分でしかありません。もう半分の問題は、情報の伝達に関することです。「モバイルファースト」という哲学は、モバイルユーザーは、デスクトップユーザーがサイトから得ることができる価値と、同じものを受け取ることできなければならないということを思い出させてくれます。このことを念頭に置いて、モバイル上のコミュニケーションデザインは、全てのデザイナーが伝えたい情報を取り扱う手段に影響を与えるのです。
コミュニケーションを円滑にするためには、私たちが理解している情報を最大限有効に活用する必要があります。人間の脳は活字よりも視覚的情報を迅速に認識するので、ビジュアルや画像を使用することは、円滑なコミュニケーションの促進に非常に有効なのです。優れたビジュアルスタイルは付加価値を与え、コンテンツやインタラクションの目的達成をサポートし、そして(モバイル・デスクトップ両方の)全体的なユーザーエクスペリエンスを向上させてくれるのです。
バーティカルリズム
コミュニケーションの円滑を図るために最初に思いつくのは、バーティカルリズム（ウェブページのマージンや行間を整え、読み手に対して「縦のリズム」を整えるという考え方）の活用です。情報アーキテクチャはコンテンツの理にかなった流れを生み出しますが、ビジュアルデザインはコンテンツを視覚的に階層に分けて整理することで、更なる明瞭性を生み出してくれます。コンテンツのセクションに適したサイズやスペースは、コンテンツの流れに合ったコミュニケーションをサポートする、優れたバーティカルリズムを実現します。
先ほどお話しした縦軸のグリッドシステムに加えて、ベースライングリッドもコンテンツの読解や理解を促進するため、優れたバーティカルリズムを作り出すことができます。ベースライングリッドは、ラインの高さに沿った構成を作成します。これによって、行間や文字サイズだけでなく、コンテンツ間のスペースを規定する明確な水平の罫線を作成することができます。この罫線に沿ってデザインすることで、テキストが読みやすくなり、かつユーザーはセクションや機能の相違を明確に認識することができます。ベースライングリッドをHTMLやCSSで正確に作成することは難しいですが、デザインの作業工程において、サイズやスペースを決定する際に有益な手引きとなるでしょう。
色使い
色はコミュニケーションにとって非常に有効なツールであり、コンテンツやインタラクションをサポートするために様々な方法で取り入れることができます。
・トーンやスタイルを伝える - デザインにおける色使いは主観的であり、個人の経験や文化に左右されます。しかし、特定のトーンや影を利用することで、伝えようとしている情報の全体的な印象を与えるのに役立ちます。大胆かつ鮮やかな色は楽しい雰囲気を生み出し、逆に暗いトーンの色は上品な雰囲気を、灰色がかった柔らかい色合いはヴィンテージな感じを生み出します。色に関する理論をより深く理解することで、デザインの対象に適した色を選択するのに役立ちます。
・セクション間の相違 – 色はコンテンツの各要素を際立たせたり、要素の関係性を示したり、またコンテンツがどのように区切られているかといったコンテンツの構成をサポートするのに利用することができます。
・静的要素とインタラクティブな機能性の相違 – コントラストをはっきりさせることで、目的の相違やコンテンツと機能性の関係性を伝えることに役立ちます。ニュートラルな色と鮮やかな色を組み合わせたり、また全く対照的な色を使用することで、特定の要素をユーザーに強調することができます。デザインを通して、静的、アクティブな要素、及びアクティブでない要素ごとに統一した色を使用することで、コンテンツと機能の相違をよりはっきりと示すことが可能となります。
・コミュニケーション状況を変化させる – ユーザーがある要素とのやり取りを行った後に、メッセージや注意書き、エラーなどを強調させるために色を上手に活用することができます。例えば、多くのサイトは長くて読むのに時間のかかるテキストの代わりに、アクションの成功を示すメッセージには緑色、エラーメッセージには赤色を使用して表示しています。このように統一した色使いを活用することで、新しい情報を迅速に伝えることができ、デザインのユーザビリティの向上を図ることができるのです。
メタファーを使用する
最後に、メタファーはビジュアルデザインによるコミュニケーションにとって、非常に強力なソリューションとなります。メタファーは、ユーザーがすでに馴染みのある要素やビジュアルオブジェクトを連想させることで、コンテンツや機能をユーザーが迅速に理解できるようサポートします。スキューモーフィズムはデジタル空間において最もビジュアルメタファーを使用しており、インターフェース要素が現実世界の物体を模倣したリアルな物体に見えるようにデザインされています。また、このようなスキューモーフィズムを使用したデザインはWindows 8やiOS7で悪評を得たため、使用が敬遠されてしまっていますが、これらのオペレーションシステムやモバイルサイト、アプリは削除のアイコンにゴミ箱、ウェブカメラのアイコンにカメラ、メールのアイコンには封筒といった、よりシンプルなメタファーをユーザーインターフェースで使用を続けています。
メッセージやテーマの伝達をサポートするために、メタファーを様々な方法で活用することができます。
・根本的なテーマを表現する – メタファーは1つのデザイン要素という枠を超えて、デザインや機能の重要なテーマとなることができます。Flipboardのアプリ内で、ページをめくるようなページの移行は、ユーザーのインタラクションにおいて必須となる要素であり、この動作が迅速に行えることが、このアプリの成功の一因となっています。このようなメタファーの使用は、コンテンツのコンセプトを迅速にユーザーに伝えることができ、またアプリに独自の価値を与えてくれます。
・ボタンとインタラクション – ボタンのデザインにシンプルなスキューモーフィズムを取り入れることで、現実世界のインタラクティブ要素を容易に再現することができ、また機能性をはっきりと示すことができます。企業や様式のガイドラインに合わせるためによりフラットなスタイルが必要な場合は、静的要素と色やスタイルで差別化を図ることで効果的な要素となることができます。Wunderlistはリアリティ溢れるスタイルのボタンを活用しています。
・イコノグラフィー – アイコンは限られた画面スペースにおいても、複雑なコンセプトをユーザーに迅速に伝えることができるので、モバイルデザインにとって非常に便利な要素です。ビジュアルメタファーをアイコン、特に削除やウェブカメラ、メールといったオンラインの標準的なアイコンに使用すると、ラベルなどを付けなくても一目で理解できるようになります。シンプルでありながらコンテンツをはっきりと伝えるアイコンを作成することは決して容易ではありませんが、アイコンがデザインの明瞭性に与える影響について、理解を深めることが大切です。
モバイルの未来
今回のシリーズで述べたように、モバイルの制約や基準についてしっかりと理解することは、全てのモバイルデザイナーにとって有益なことです。そして、一度これらのことを理解し自分のものにすれば、私たちはもっと素晴らしくユニークなものを生み出すためにガイドラインを超え、既存のルールを破ることができるのです。これらのことと、常にユーザーのことを考慮に入れることで、機能性と芸術性のバランスがとれた理想的なデザインを生み出すことを可能にするのです。
モバイルのためのデザインは、わくわくするような困難と大きなチャンスをもたらしてくれます。テクノロジーの急速な発展とユーザーのコンテキストの絶え間ない変化は、現在私たちが抱えている制約が、数年後には存在していない可能性があることを示しています。革新的な思考と創造性によって、私たちはこのような困難に対処するための新しい方法を生み出し、目の前にあるデザインにおける問題を解決してくれる画期的で美しく、そして便利なソリューションを発見することができるでしょう。
