インタフェースに秩序を与えるということ
こんにちは。グッドパッチ エンジニアのnoriです。
この記事はGoodpatch Design Advent Calendar 2020 16日目の投稿です。
0. はじめに
私が日々、エンジニアとしてデザインへと向き合う際、私の根幹には常に「秩序を与える」という行為の存在があります。
デザインに秩序を与えるということは、デザインにルールや制約を設けて自由を奪う行為であるとも捉えることができますが、今回は何故秩序を与える必要があるのかについて理解を深められたらと思います。
「1. デザインと秩序」では、デザインにおいて「秩序を与える」という行為がどのような意味を表すのかについて、優れた秩序を持つデザインを例に考察を行います。
「2. インタフェースと秩序」では、ソフトフェアのインタフェースに「秩序を与える」という行為について、私の考えと前章の考察を元にお伝えできればと思います。
1. デザインと秩序
はじめに、秩序を与えるという行為が持つ意味や役割について、優れた秩序を持つグラフィックデザインやパッケージデザインを例に紹介します。
① グリッドシステム
デザインを秩序立てて構築する手法として有名な物に、ヨゼフ・ミューラー゠ブロックマンが確立した「グリッドシステム」があります。
グリッドシステムは、デザイン対象へ配置したグリッドに沿ってテキストや図版類を配置するレイアウト手法です。当初はグラフィックデザインのための手法でしたが、今日は多くのインタフェースデザインにまで取り入られる程広く普及しています。
ブロックマンはグリッドシステムを単なるレイアウト手法ではなく、彼自身を含めたグリッドシステムを扱うデザイナーの社会における振る舞いや在り方をデザインに反映する手法、言わば表現と理念を包括した美学としてグリッドシステムを確立しました。
氏の美学とは、デザインという行為が主観や感情ではなく客観性・論理性・中立性を優先されるべきであり、デザインが構成的であるという物でした。
主観的ではなく客観的であるということは、デザインを行う「私」の先に「貴方（クライアント・ターゲット・共創者等）」の存在があり、最終的には社会へ意識を向ける必要があります。
デザインが「私」の手を離れた後の未来に対する想像力を膨らませ、「貴方」へ正しく伝達し・解釈されることを目的に置くからこそ、グリッドに沿った上で秩序立ててテキストや図版類を配置し、そこで引き立つタイポグラフィ（≒メッセージング）の在り方もデザインする必要性が生まれます。
また、共創者や技術者によってデザインが正しく運用されることを目的に置くからこそ、タイポグラフィや色彩に秩序を設け、システム化する必要性も生まれます。
故にグリッドシステムは単なる表現手法ではなく、社会に対する理念を表明する手法であると言えるのでしょう。
デザインに秩序を与えるということは、グリッドシステムを扱うことと同様に客観性を持った上で、デザインが社会における目的を果たすために正しく機能するように、デザイン自身をシステムとして扱うことではないでしょうか。
② 無印良品 ワールド・タグシステム / 食品パッケージ
今年の11月にリニューアルされた無印良品の「ワールド・タグシステム」と「食品パッケージ」のデザインは表現もさることながら、社会に対する意思表示やデザイン運用の観点からも非常に高いレベルで秩序化が行われているデザインではないでしょうか。
こちらのワールド・タグシステムは、無印良品で取り扱う約7000品の多種多様な商品のタグデザインです。これだけの品目を対象とするデザインでありがらも、多言語や多形状への対応も行っています。また、商品の概要であり無印良品のアイデンティティに相当する「理由(わけ)」を伝えるスタイルはリニューアル前から引き継がれています。
このデザインは対象者へ正しく伝達し・解釈されることを目的にテキストや図版を配置することは勿論、商品のメッセージングやタイポグラフィ及び色彩設計、運用ルールまで丁寧に秩序化が行われています。
無印良品の商品のアイデンティティである「理由(わけ)」を中心に構成されたこれらの秩序は、無印良品が社会とどのように接続するかという意思や、利用者への姿勢、無印良品が有する価値の所在を表明したものであると言えるでしょう。
また、運用ルールまで制定されているのは無印良品が自身の商品価値を正しく理解し、未来においても社会へのその姿勢が不変であることを表明していると言えるでしょう。そして、デザイナーではない人でも運用できるということは、未来に渡って無印良品の価値を広く普及することに寄与することでもあります。
デザインに秩序を与えるということは、デザインを一意的ではなく体系立てて扱う（システム化する）のみならず、秩序自体が社会やデザインの利用者に対する意思や姿勢を表明する物として機能するようにデザインを扱うことであり、今日現在だけではなく未来に向けてデザインを扱うことではないでしょうか。
グリッドシステムと無印良品の例を踏まえると、デザインに「秩序を与える」という行為は以下の3点にまとめることができます。
デザインを一意的ではなく体系立てたシステムとして扱うこと
社会やデザインの利用者に対する意思や姿勢を表明するということ
今日現在だけではなく未来に向けてデザインをするということ
2. インタフェースと秩序
続いて、ソフトフェアのインタフェースに「秩序を与える」という行為について、前章の考察と私の考えを元にお伝えできればと思います。
① インタフェースデザインの特殊性と秩序の必要性
初めに、ソフトウェアはグラフィックデザインやパッケージデザインとは異なる特性があります。
1つ目は物理制約が存在しないという点です。人間が論理建てて認知し、言語化できる対象であれば基本的にどのような物でも作ることができます。
2つ目は完成することがないという点です。ソフトウェアは変化する市場の要求に合わせて要件を修正しながら、改良を重ね続ける必要があります。
これらの特性を前にしても計画や設計をせずにインタフェースへ追加改修を続けると、簡単に無秩序な要素で溢れて腐敗が進んでゆきます。
この記事を読んで下さっている方の中にも、同じような見た目のボタンが乱立したり、既存のボタンに新しいスタイルを加えるのが困難になってしまう現象を経験したことがある方はそれなりにいらっしゃるのではないでしょうか。
このように、似たような要素が頻出してメンテナンス性が低下したり、既存のインタフェースに新たな情報を付け加えることが難しくなってしまうケースは、ソフトウェアの世界では往々にして存在します。
そのような中でも刻々と変化する要求へ対応するために改修は継続して実施されますが、これが広範囲で無秩序が蔓延し、改修不能になった瞬間にソフトウェアは寿命を迎えます。ソフトウェアをフルスクラッチでフルリニューアルする機会が発生するのは大まかにこのような原因あってのことではないでしょうか。
これらの背景から、ソフトウェアのインタフェースはグラフィックデザインやインダストリアルデザインなどに比べてより厳密な秩序が必要となります。
② インタフェースに秩序を与えるということ
それでは、インタフェースにはどのように秩序を与えて行くとよいでしょうか。
インタフェースに秩序を与える際に重視するポイントは、1章でまとめたデザインに秩序を与える行為を表す3点と変わりません。
1つ目のポイントは「デザインを一意的ではなく体系立てたシステムとして扱うこと」です。
これはインタフェースデザインが部分最適と同時に全体最適を達成する必要があるということを表します。
例えば以下の画像のようなボタン一つとっても、focusかつhover（状態）、Submit（ラベル）、Primary（スタイル）、ラベルの左にPlaneアイコン（アイコンとその位置）という情報を持っています。ここでは表現しきれませんが、複数サイズが存在するのであればMedium（サイズ）という情報を持つこともできます。スクリーンリーダーへの対応も踏まえるとDisplay用のラベルだけではなく読み上げ用のラベル（aria-label）が必要になるケースも存在します。
「全体最適を達成する」というのは、これらの情報（状態）がどのように変化した場合にも耐えうるデザインルールを構築することを意味し、この行為もインタフェースに秩序を与える例の一つです。
2つ目のポイントは「社会やデザインの利用者に対する意思や姿勢を表明するということ」です。
これはプロダクトの目指す方向性を中心にインタフェースとその秩序を構成し、利用者への姿勢や思いをプロダクトに反映することを指します。この行為は利用者へ敬意を示し、一意の体験を提供することに繋がるのではないでしょうか。
私は普段アクセシビリティに力を入れて取り組んでいるのですが、この行為にはプロダクトへのアクセシビリティを向上させるという主目的があると同時に、私自身がプロダクトを通して対象者へ敬意を払い、存在を肯定していることを表明する意味合いがあります。
また、アクセシビリティ対応のみならず、色彩やタイポグラフィなどの表現や、不可触なオブジェクトモデル、プロダクトの倫理観や拡張性を通して意思や姿勢を表明することも可能でしょう。
これらの姿勢がより強固な秩序を形作り、やがてはプロダクトの品質向上に寄与するのではないでしょうか。
3つ目のポイントは「今日現在だけではなく未来に向けてデザインをするということ」です。
インタフェースを未来に向けてデザインするということは、対象の拡張性の担保や、依存関係を減らして捨てやすくすることなどを指します。これらはデザインの保守性を高めることに寄与します。
特にインタフェースは様々な手によって形作られる物であるため、デザインから属人性（主観性）を排除することは必要条件です。
一個人の意見としては、インタフェースデザインのゴールはデザイナーやエンジニアがプロジェクトに不在でも、コンポーネントを組み合わせて価値仮設の反証が可能な状態であるべきだと思います。これこそがロールの依存さえも排除した究極に属人性が存在しない状態であり、常にこの未来の実現を目指して業務に務めています。
これらの3点は秩序に厳密性をもたらし、無秩序の排除とインタフェースの更なる発展に大きく寄与するでしょう。
3. おわりに
ここまでお付き合いいただき誠にありがとうございました。以上、「デザインと秩序」「インタフェースと秩序」についてご紹介しました。フィードバックやコメントなどがあれば喜んで頂戴したいと思います！
冒頭でも紹介したグリッドシステムを提唱したブロックマンは、グリッドシステムを扱うということについて以下のように述べています。
グリッドを秩序あるシステムとして使用することは、デザイナーが自身の仕事を構造的に未来へ向けて考えていることを示す証であり、自身の精神的態度を意味するものです。
これはデザイナーの仕事が、明確に分かりやすく・数学的思考・客観性・機能性・審美性を備えなければないという職業倫理を表明するものでもあります。
この執筆作業を通して、改めてブロックマンのデザインに対する姿勢に敬意を抱き、私自身の職業に対しても誇りを感じたと同時に、私も常に社会と自身の関係について問い続け、未来に向けたデザインの姿勢を絶やさず、そしてデザインに秩序を与え続けたいと強く感じました。
この記事があなたの心にまた新たな火を灯すことを祈って。
ありがとうございました。
この記事が気に入ったらサポートをしてみませんか？