曾经、高山の頂上に一人の僧侶が隠れ住んでいました。山の頂からは美しい海が遠くに見えます。しかし、僧侶の小石屋や小石屋への道からは海が見えません。ただし、小石屋の前には中庭があり、その周りは厚い石の壁で囲まれています。誰かが僧侶の小石屋に行くと、彼は中庭の壁の門を通り抜けてこの中庭に入り、そして斜めに横切って小石屋の大きな扉に到着します。中庭の遠い側には、壁に狭い亀裂があります。それは非常に狭く、小石屋の扉に斜めに向かっています。誰かが中庭を横切り、壁の亀裂に合わせて立つと、一瞬で海が見えます。しかし、すぐに彼は屋内に入り、その景色はすぐに消えてしまいます。
遠くの海の景色は一瞬で現れますが、人の心には長く残ります。この景色を見た人は、忘れることはできません。その魅力は永遠に失われることはありません。
この効果を実現するための秘訣は何でしょうか?
もしも毎日見ることができる美しい景色があるとしたら、それがどれだけ一目でわかりやすく、魅力的であっても、人はすぐに飽きてしまいます。徐々に、それは建物の一部となり、壁紙のようになってしまいます。部屋の中の人々は、その景色が特別な感動を与えるものではないと感じるようになるでしょう。
ですから、景色を一望できる大きな窓を設計しないでください。それは景色を損なうだけです。窓を移行空間(廊下、玄関、入り口、階段など)に配置してください。そうすることで、人々が窓に近づいたり窓の前を通ると、遠くの景色をちらりと見ることができ、深い印象を残すことができます。
上記の例は、アレクサンダーが「建築パターン言語」で提案した「禅宗の景観」パターンの一例です。そして、もしあなたが中国の庭園に注意を払ったことがあるならば、このパターンが庭園デザインで広く使用されていることに気付くでしょう(別の名前や表現で)。
「禅宗の景観」の例は、私たちがよく知っているデザインパターンの一つを非常に具体的に示しています。では、デザインパターンとは具体的に何でしょうか?
デザインパターン:デザインに関する洞察#
デザインパターンの最初の概念は建築設計の分野から来ています。有名な建築理論家であるアレクサンダーは、1977 年に「建築パターン言語」という本を出版しました。この本では、彼は一連の建築の特徴を精確に定義し、都市、近隣、住宅、庭園、部屋に関する 253 のパターンを提供しました。アレクサンダーは、住民に幸福感をもたらす建築デザインのエッセンスを抽出し、「デザインパターン」と呼ばれるこれらのデザインアプローチを提案しました。
デザインパターンの概念は時間とともに受け入れられるようになりました。1996 年頃、Coram、Tidwell などがユーザー中心のインターフェースデザインパターン言語を提案し、デザインパターンの概念を人間とコンピュータのインタラクションの領域に正式に導入しました。その中でも有名なのは、Tidwell の「共通の基盤」(Common Ground)というデザインパターン言語で、後に私たちがよく知っている「インターフェースデザイン」(Designing Interfaces)として進化しました。
デザインパターンの発展は速かったですが、その概念や定義についてはさまざまな意見があり、この言葉にはさまざまな要素が含まれる可能性があると考えられています。Dearden Andy などの学術論文「HCI におけるパターン言語:批判的なレビュー」では、デザインパターンについての多くの研究や定義をまとめ、いくつかの重要な観点を抽出しました。以下に、いくつかのキーポイントをまとめました:
上記のデザインパターンの概念定義の研究からわかるように、異なる学者はパターンの定義について異なる理解を持っています。これにはパターンの構築(パターンの構造)、アーティファクト(デザインドキュメント、開発ツール)、メディア(共通言語)、ナレッジキャリア(ナレッジレコーディングツール)などの要素が含まれています。
私たち UX デザイナーとしては、デザインパターンの具体的な定義について深く関心を持つ必要はありませんが、上記の研究と議論を通じて、デザインパターンについて基本的な理解を持つことができます。
個人的に私にとって最も響いた説明は、「デザインパターンはデザインに関する洞察です」というものです。なぜなら、デザインパターンをデザインガイドライン、特殊なドキュメント形式、または汎用のソリューションとして定義することは、デザインパターンの特徴を説明しているだけであり、デザインパターンの輝きの本質は、デザインに対する深い洞察を含んでいるからです。
デザインパターンの必要性#
デザインパターンの必要性について語る前に、現在のインタラクションデザインが直面している問題について話しましょう。
● デザインの合理性と品質の問題。私たちはデザインプロセスで、製品側からの要求を受けることがよくあります。時にはその要求に以前触れたこともなく、競合他社のデザインでも見たことがない場合、それをどのようにより専門的にデザインすることができるでしょうか?プロダクトマネージャーに私のデザインが合理的であることを説得するにはどうすればよいでしょうか?
● デザイン経験の蓄積。コンポーネント化、標準化されたデザインアプローチがますます普及していますが、まだ多くのデザイナーが困惑しています。例えば、どのようなコンテンツがコンポーネント化されるべきか / されるべきであるかを知らない場合があります。多くの機能が複雑すぎて、コンポーネント化することはできないように見えますが、実際には多くのビジネスシナリオで必要です。たとえば、ドラッグアンドドロップのインタラクションデザインなどです。さらに、コンポーネント化に適さない多くのデザイン経験がありますが、これらの経験をどのように沈殿させて蓄積するべきでしょうか?これらのデザイン経験をすべて規範として扱うと、さまざまな問題が発生します。たとえば、どのような経験が規範と呼ばれるべきか?デザインの規範の境界は無限に広がる可能性があり、これは非常に合理的ではありません。
このような時に、デザインパターンが非常に有用なツールであることに気付くでしょう。
システマティックなデザインアプローチによるデザイン品質の向上#
デザインパターンは、多くのデザイン経験の中での精華部分です。それらは問題をどのように解決するかだけでなく、なぜそのデザインが特定の状況に適しているのかも説明しています。
例えば、「ディープリンク」(Deep Links)というデザインパターンを取り上げましょう。「ディープリンク」とは、特定の状態を含むリンクのことです。ユーザーがそのリンクを使用して読み込むと、プログラムは期待されるアプリケーションの状態を復元します。
たとえば、YouTube の共有リンクでは、開始時間のオプションを選択することができます。これにより、そのリンクを開くと、ビデオの再生時間が自動的に 51 秒に設定されます。
なぜ「ディープリンク」が良いパターンなのでしょうか?なぜなら、「ディープリンク」はユーザーにアプリケーションの状態を直接開く方法を提供し、時間とエネルギーを節約するからです。それは通常のウェブサイトの特定のコンテンツに直接リンクする「ディープリンク」や、ブログ記事へのパーマリンクのようなものと同じような振る舞いをします。このパターンにより、共有が非常に便利になります。ディープリンクは、WeChat、Weibo、記事などを通じて共有することができます。ここまで来ると、皆さんは Taobao のリンク、Alipay のパスワード付きの赤包などに馴染みがあると思いますが、これらはすべて「ディープリンク」のパターンを使用しています。
デザインパターンは、デザイナーに非常に豊富なデザインの弾薬庫を提供します。たとえば、特定のページ要素のレイアウトを行う必要がある場合、情報ブロックの 5 つのパターンから選択することができます。リストのデザインを行う場合、7 つのリスト関連のデザインパターンから要件に合ったパターンを見つけることができます。このような巨大な弾薬庫があることで、私たちは常に体系的な感覚を持ちながらデザインを行い、高いデザイン品質を実現することができます。
デザイン経験の蓄積#
デザインパターンは、デザイン経験を蓄積するための非常に優れた方法です。デザインパターンの標準的な構造に従って、以下の 5 つの要素が含まれます:
● What 何か;
● When いつ使うべきか;
● Why なぜそのパターンがこのようになっているのか;
● How どのように使うか;
● Example 具体的な例;
これら 5 つの要素の説明により、関連するシナリオでの巧妙なデザインソリューションが明確に示されます。これがデザインパターンです(具体的な例については省略します)。どのような領域やテーマでも、抽象的なデザイン経験でも、このような構造で記録し、価値のあるデザイン資産を作成することができます。
「鸭子书」は、Tidewell が数十年にわたって蓄積したデザイン経験から抽出した多くのデザインパターンを蓄積しています。昨年(2020 年)には第 3 版が出版され、Tidwell は非常に古い例を最新のものにすべて置き換え、macOS、Chrome、Slack、Spotify、Pinterest などを含む最新の例を追加しました。また、Microsoft の Fluent Design などのデザインシステムの紹介や、デザインのトレンド研究も追加されました。
(第 2 版)の例は 2010 年以前のデザイン例であり、現代のインタラクションデザインの発展に追いついていませんでした。一方、(第 3 版)の例は近年の最新バージョンにすべて置き換えられており、非常に参考になります。
さらに、この本には多くのデザインパターンが含まれているため、もはや書籍の形式で提供することは適していません。線形で検索できない書籍形式では、デザインパターンライブラリの最大の価値を引き出すことはできません。
大きな木は、小さな種から生まれ、高い塔は、積み重ねられた土から生まれる。