要素のデザインからコンポーネントのデザインへ | 非エンジニアのための SPA / PWA 的世界におけるコンポーネントデザイン入門 (1)

本コラムは、主に Photoshop や Illustrator などでユーザーインターフェースのデザインを一枚絵として作成し、フロントエンドエンジニアやプログラマ・コーダーに渡すというワークフローが前提となっている方々に向けて書いています。また、本コラムが従来のワークフローを否定するわけはなく、今後のスムーズなコミュニケーションのための参考にしてもらえればいいという意図を持っています。

という前書きを書いた上で、「非エンジニアのための SPA / PWA 的世界におけるコンポーネントデザイン入門」というのを始めてみます。Web デザイナー向けというわけではなく、非エンジニアと銘をうっているのは、デザインの意思決定をする方々においても新しい観点を追加することにより、よりよい評価を行えるであろうと思っています。GUI や Flash に関わってきた方は普通と感じるかもしれません。

さて、コンテキスト共有のために、ちょっとだけ今までの Web デザインの歴史的な経緯について触れてみます。

印刷物のデザインから HTML を出力する CMS に至るデザイン観点の変化

印刷物における要素デザインと Web の要素デザインで大きく異なる部分の一つに、Web においては、文言の長さが可変になることや、文言自体のフォントサイズが異なったりすることが運用過程もしくはユーザー側の閲覧環境においてありえるということでした。

フォントサイズはともかく、文言が長くて折り返しされることを想定されていないデザインは、CMS などで編集が行われて当初の想定文言よりも長くなったりすると破綻するなどが起きます。

そのため、特に CMS がふつうに使われる時代になった時点で、多くの Web デザイナーが文言の長さを可変になることを前提に考えるようになりました。

また、ユーザー操作における側面も印刷物のデザインとは異なります。

リンク一つとってみても hover 時、active 時、訪問済みなどユーザー操作によって様々なユーザーインターフェースの状態があります。リンクは Web ブラウザ標準の技術ですが、制作者側で作られたデザインにおいてもユーザーインターフェースの状態は存在します。

例えば、Bootstrap などでも提供されるタブ型のユーザーインターフェースは、状態を持ったユーザーインターフェースのいい例でしょう。

文言の長さやコンポーネントの状態を考慮したコンポーネントデザインを行えるようになった次の段階として、SPA / PWA 世界におけるコンポーネントについての観点を持ってデザインを行ってみてはいかがでしょうか。よりコミュニケーションがスムーズに、よりユーザーインターフェースについて深く考えるようになると思います。

要素のデザインからコンポーネントのデザインへ

SPA / PWA では、というより SPA / PWA に限ったことではありませんが、特に SPA / PWA において顕著なので SPA / PWA 的世界ではとして話を進めますが、SPA / PWA におけるコンポーネントは、大きく分けると以下の 4 つに分類されると考えています。

• 外部からの影響も内部状態も持たない純粋なコンポーネント
• 外部からの影響を持つコンポーネント
• 内部状態を持つコンポーネント
• 外部からの影響も内部状態も持つコンポーネント

それぞれについては、おいおい解説をしていきますが、その前に、今回は考え方の例を挙げます。

例えば、以下のボタンはラベルがテキストのボタンです。

このボタンには 2 つの状態があります。

一つは保存可能状態であるため保存を促すボタンの状態、そしてもう一つは、保存済みであり、現在は保存をする必要がないため disabled になった状態です。また、いつ保存したかをわかりやすくするために最終保存時刻を表示しています。

従来の方法であれば、上記 2 つの状態をデザインするということでデザインフェイズは終わりだと思います。確かにビジュアルの確認としては、これで表示状態の確認は終了ということでいいでしょう。要素はデザインできている状態となりました。

ただ、これだけだとコンポーネントとして実装する上で考えないといけないことが残ってしまいます。考えないといけないことが残っているということは、仕様まで落ちていなくて、フロントエンジニアによる仕様調整と、デザイナーへの追加の修正が発生してしまいます。そのワークフローでもいいという方もいると思いますが、デザイナー的な思考では全体を把握した上でデザインしたものと、後から拡張していったものでは、前者のほうが統一感がとれるのは言うまでもないでしょう。以下に観点を挙げてみます。

• どういうときに保存済みになるのか、どういう使われ方をするのか (コンテキスト)
• 状態は「保存する」「保存済み」の 2 点のみか (状態 : ステート)
• 文言や時間といったデータは外部から与えられるものか、そうでないのか (外部からの影響 : データ)
• 状態変化や外部に影響を与えるのはどう言う時か (アクション)

次回以降、上記についてそれぞれ確認していきます。
続きます。