つの観点のうち、1つ目の「コンテキスト」について書いてきました。コンテキストを把握する要素のデザインからコンポーネントのデザインへデザイン対象のコンポーネントがユーザーにどのような文脈で使われるかについて思いを巡らすことは、コンポーネントデザインにおいて最も大事なことだと思っているため、コンテキストについてページを割いています。コンポーネントを対象としています。つの観点について、もう一度コンパクトに整理しなおしてみます。(コンポーネントが周囲に与える影響)さて、コンテキストについて思いを巡らす時に、そのコンポーネントが使われる時の周囲の画面要素との関係という点についても考慮しておきましょうという話を今回はしていきます。アプリケーションにおいて、周囲との関係なしに存在するコンポーネントというのはあまり存在しません。トップページのように検索フォームしかないようなページであれば別です。トップページにおいても、いくつかのコンポーネントで構成されていることがわかります。コンポーネントが画面の中心に配置されるというページとの関係である時点で、周囲と大いに関係していると言えます。メインエリアで大きく標準の状態で使われるコンポーネントでも、サイドエリアにおいては小さく使われたり、折りたためられていて必要に応じて表示されたりと、機能面のみを見てもいろいろと種類があることが想定できます。コンポーネントの機能が同じでも、配置する場所によって表示スタイルが異なるコンポーネントも考えられます。背景色が違うため、ラベルの配色も変える必要がある、などです。コンポーネントのデザインに慣れていない場合、デザインするコンポーネントをサイドエリアでしか使われないコンポーネントと限定して、はじめからデザインが最適化されたコンポーネントというのを考えてしまいがちです。局所的なコンポーネントは、用途が局所的であるがゆえに、そのコンポーネントにおける一般的な用途やユーザーのアクションを見落としてしまいがちなのです。あるべき姿であるどこにでも配置可能なデフォルトのスタイルを持ったコンポーネントと、配置した場所に最適化されたデザインのコンポーネントは分けて考えましょうということになります。新しいコンポーネントをデザインする際の流れは、以下のようにすることで考慮漏れが起きにくいと考えています。ついてもう少し説明をします。前述の例で説明をすると、サイドエリアで使う場合、不要な機能や省略したい機能などがあるかもしれません。その省略した状態を最初からデザインをしてしまうと、フル機能の状態を考えるときに統一感が取れなくなってしまうということが起きます。おいて、シンプルな構成にしてあるものを複雑にするよりも、複雑な構成のものを簡略化する方が楽なことが多いです。現時点で必要なコンポーネントをデザインするのではなく、そのコンポーネントは一般的にどう使われることが妥当なものなのか、過不足ない機能を持つ場合どういう形態が良いのかという発想を常に持つようにしましょう。的な制作物のバリエーション作成、ルール作成に気を使ってきたことと思います。ロゴは、基本的な利用スタイルがまず定められており、そのバリエーションの範囲が規定されています。Dropboxコンポーネントのデザインについても同様です。ジェネラルな用途においての考慮すべき観点の洗い出しを行い、続いてそのバリエーションとなる局所的な用途という流れでデザインをしてみてください。DesignWedgeの発行を開始。Webデザイン業の傍ら、海外のWebデザインに関する情報発信を行う。framework徹底入門』、『ウェブデザインコーディネートカタログ』など。自社製のWebデザインのクロール&キャプチャシステムvaqumをベースに、様々なリサーチを行っている。検定プロジェクトメンバー。KANSOCK.INDUSTRIES。