ARTICLES

周囲との関係について思いを巡らす | 非エンジニアのための SPA / PWA 的世界におけるコンポーネントデザイン入門 (3)

2019-05-02

非エンジニアのための SPA 的世界におけるコンポーネントデザイン入門 の第3回目です。

前回、前々回と、コンポーネントデザインをする上でチェックしておきたい 4 つの観点のうち、1つ目の「コンテキスト」について書いてきました。

デザイン対象のコンポーネントがユーザーにどのような文脈で使われるかについて思いを巡らすことは、コンポーネントデザインにおいて最も大事なことだと思っているため、コンテキストについてページを割いています。また、ここで言うコンポーネントは、単純なテキストとリンクのみで構成されるようなシンプルなタイプではなく、デザインについて考慮漏れが発生してしまうような複雑な UI コンポーネントを対象としています。

以前書いた 4 つの観点について、もう一度コンパクトに整理しなおしてみます。

  • コンテキスト (そのコンポーネントが求められている文脈)
  • ステート (どんな状態を持つコンポーネントか)
  • データ (そのコンポーネントにやってくる情報、そのコンポーネントが出力する情報)
  • アクション (コンポーネントが周囲に与える影響)

さて、コンテキストについて思いを巡らす時に、そのコンポーネントが使われる時の周囲の画面要素との関係という点についても考慮しておきましょうという話を今回はしていきます。

コンポーネントの周辺との関係について思いを巡らそう

通常、Web アプリケーションにおいて、周囲との関係なしに存在するコンポーネントというのはあまり存在しません。例えば、Google のトップページのように検索フォームしかないようなページであれば別です。

Google のトップページ

ただし、よく見てみると、検索窓しかないような印象のある Google のトップページにおいても、いくつかのコンポーネントで構成されていることがわかります。また、コンポーネントが画面の中心に配置されるというページとの関係である時点で、周囲と大いに関係していると言えます。

メインエリアで大きく標準の状態で使われるコンポーネントでも、サイドエリアにおいては小さく使われたり、折りたためられていて必要に応じて表示されたりと、機能面のみを見てもいろいろと種類があることが想定できます。

また、コンポーネントの機能が同じでも、配置する場所によって表示スタイルが異なるコンポーネントも考えられます。例えば、背景色が違うため、ラベルの配色も変える必要がある、などです。

コンポーネントのデザインに慣れていない場合、デザインするコンポーネントをサイドエリアでしか使われないコンポーネントと限定して、はじめからデザインが最適化されたコンポーネントというのを考えてしまいがちです。

局所的なコンポーネントは、用途が局所的であるがゆえに、そのコンポーネントにおける一般的な用途やユーザーのアクションを見落としてしまいがちなのです。

つまり、あるべき姿であるどこにでも配置可能なデフォルトのスタイルを持ったコンポーネントと、配置した場所に最適化されたデザインのコンポーネントは分けて考えましょうということになります。新しいコンポーネントをデザインする際の流れは、以下のようにすることで考慮漏れが起きにくいと考えています。

  • どこにでも配置可能な一般的なコンポーネントとしてデザインし、観点の洗い出しを行う
  • そのコンポーネントが必要とされる場所に向けたデザイン最適化をする

そのコンポーネントが必要とされる場所に向けた最適化をする についてもう少し説明をします。

前述の例で説明をすると、サイドエリアで使う場合、不要な機能や省略したい機能などがあるかもしれません。しかし、その省略した状態を最初からデザインをしてしまうと、フル機能の状態を考えるときに統一感が取れなくなってしまうということが起きます。

実際、SPA / PWA において、シンプルな構成にしてあるものを複雑にするよりも、複雑な構成のものを簡略化する方が楽なことが多いです。現時点で必要なコンポーネントをデザインするのではなく、そのコンポーネントは一般的にどう使われることが妥当なものなのか、過不足ない機能を持つ場合どういう形態が良いのかという発想を常に持つようにしましょう。

デザイナーの方は古くから CI (コーポレートアイデンティティ) 的な制作物のバリエーション作成、ルール作成に気を使ってきたことと思います。例えば、Dropbox のロゴは、基本的な利用スタイルがまず定められており、そのバリエーションの範囲が規定されています。

コンポーネントのデザインについても同様です。ジェネラルな用途においての考慮すべき観点の洗い出しを行い、続いてそのバリエーションとなる局所的な用途という流れでデザインをしてみてください。

更に続けます。


ARTICLES


    AUTHOR

    原 一浩 の顔写真

    (はら) 一浩(かずひろ)

    カンソクインダストリーズ代表 / グレーティブ合同会社代表

    1998年に独立し、同年、ウェブデザイン専門のメールメディア DesignWedgeの発行を開始。Webデザイン業の傍ら、海外のWebデザインに関する情報発信を行う。
    雑誌への寄稿多数。主な著書に『はじめてのフロントエンド開発』『プロセスオブウェブデザイン』、『Play framework徹底入門』、『ウェブデザインコーディネートカタログ』など。自社製のWebデザインのクロール&キャプチャシステムvaqumをベースに、様々なリサーチを行っている。Web 検定プロジェクトメンバー

    著作一覧はこちら