UXデザインの普遍的な原理 Part 1: 視覚的な文法（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

常に変化を続ける業界で働くデザイナーにとって、仕事の土台となる、時代を超えて通用するデザイン原理を理解することは重要です。この『UXデザインの普遍的な原理』シリーズの第1部では、いくつかの普遍的なUXの原理を成り立たせている基盤について考察します。

時代の波に流されることのない、デザインの核心に存在する原理には、次の項目があります。

総合的にこれらの原理が組み合わさって、優れた体験を編み出すしっかりとした基盤が形成されます。もちろん、心理学、人類学、経済学といったほかの原理の理解を更に重ねることができます。その上でデザイン作業が行われるのですが、作り出される体験を支えているのはコアにあるこれらの原理です。

新しい技術が発想され、発明されて、かつて解決したことのないデザインの問題を解決することが、ますます求められるようになっています。それでも、ありがたいことに、過去の普遍的な原理は現在でも通用しています。これらの基本原理を身につければ、時の試練に耐え、デザイナーとして際立てるスキルを獲得できるでしょう。

ランス・ワイマンの象徴的な1968年メキシコシティーオリンピックのロゴ (左) のようなアナログデザインであれ、様々な場所で目にするアップルiOSのActivityブランド (右) のようなデジタルデザインであれ、デザインの基本原則は、時代に左右されず一貫している。

もちろん、UXデザインの普遍的な原理は、範囲が広く複雑で、記事数本だけで完全に説明するのは困難でしょう。でも落ち着いてください。各記事の後半に、いくつかの事例とヒントやテクニックを記載しています。この3本のシリーズは正しい方向を知るための短い入門書として使うとよいでしょう。

では、『UXデザインの普遍的な原理』の第1部: 視覚的な文法、を始めることにしましょう。

視覚的な文法

効果的にデザインするには、ビジュアルコミュニケーションの基盤である視覚的な文法を理解することが重要です。グラフィックデザインの歴史にルーツを持つこの原理は、今日でも有効なデザインの基本要素で、私たちがつくる体験の中心に存在しています。

ところで、「視覚的な文法」とは一体なんでしょう？簡単に言うなら、私たちが視覚的に作成するものすべてです。ユーザーインターフェイス (UI) の要素であろうと、ずっと複雑な要素の組み合わせであろうと、点と線と平面という3つの基本要素の連なりで構成されています。こうした要素を組み合わせることで、アイコン、コンポーネント、イラスト、図表、そしてパターンなど、あらゆるものを作成できます。

デザイナーは、端的にいうと、点と線と平面という基本的な要素の「文法」を使って作業をしているのです。こうした要素は、広く影響を与えたバウハウスで、20世紀はじめに定義されたものです。今日でもデザインの中心にあるものですが、綿密に教えられることはほとんどありません。

点は空間の位置を示す。2つの点を繋げると、線ができる。連続する複数の点を繋げて塗ると平面ができる。これらがビジュアルデザインの基本要素。根本的なレベルでどのようにこれらが作用するのかを学ぶことは、デザイナーとしてのスキルを向上させる。

基本要素（点と線と面）

UXは比較的年月の浅い分野ではありますが、グラフィックデザインの世界から豊かな財産を引き継いでおり、そこから学ぶことが可能です。これからの解説を読めば、どんなデザインも、解体すれば、点と線と平面から作成されていることを理解できるでしょう。

ベルファスト美術学校では、3年間にわたるプログラムの最初の6週間で視覚的な文法の語彙を徹底して習得します。そこでは、映画『ベスト・キッド』のミヤギのように、原理の理解を深めることが重視されます。「習うより慣れろ」、もしくはミヤギが繰り返し強調した「とにかく手を繰り返し動かせ」といったところでしょうか。

まず点、次に線、そして平面というように、一度に1つの要素に集中できるように学生を仕向けることで、基盤となる視覚的な文法の理解を習得させています。これは、バウハウス、ウルム、およびバーゼルという世界を代表するデザイン学校まで遡る、十分に試された学習方法です。

時間と忍耐力が必要となる行為ですが、デザイナーとして向上したければ、時間をとって、点、線、平面だけを使った一連の演習を実施するべきです。そうすることで、視覚的な文法のより深い理解が身につくでしょう。ロチェスター工科大学では、最初の一歩にぴったりのすばらしい短期コースが提供されています。

基本要素の組み合わせ

これら1つずつの要素を使って達成できることを理解したら、次は、これらを組み合わせる考え方へと学生たちを導いています。この時までに、制約の中でデザインすることの重要性と、そこに存在する機会の素晴らしさに気づいている様子を目にすることができます。

シンプルさと制約に集中しながら、インターフェイスから不要な要素を削り落とすやり方を学べば、認知的負荷を軽減し、満足度の高いユーザーを増やすことへとつながります。これは、誰にとっても有益です。無駄のない基本となるコンポーネントを定義して組み合わせれば、それぞれのプロジェクトに使える、視覚的な語彙の基盤となります。

点、線、および平面はデザインの基礎である。これらの要素を組み合わせることで、多様なコンポーネントを作成できる。1. 点のみを使用してデータをプロットしたチャート。2. 点と線を組み合わせたスライダー。3. 平面で構成されたフォームフィールド。4. 要素を組み合わせたときに可能になる表現。

こうした基盤が数百年もの間グラフィックデザインを支え、今日のUXの視覚的なレイヤーの屋台骨を形成しています。しかし、この本質的な要素を習得するために十分な時間を費やした人は多くありません。

ミヤギが言うように、練習の繰り返しはやがて力になります。点と線と平面を組み合わせて、そこに色を加えれば、どんなUIコンポーネントでも必要に応じてつくれることに気づくでしょう。

経験の豊富なデザイナーは、最低限の手段を講じて快適なユーザー体験を生み出すことができます。アントワーヌ・ド・サン＝テグジュペリが次のように述べています。「完璧がついに達成されるのは、何も加えるものがなくなった時ではなく、何も削るものがなくなった時である」

視覚的な文法の事例

視覚的な文法を習得すると、シンプルさの本質とも言えるこの基盤が、ユーザーインターフェイスのコンポーネントから、全体的な体験のデザインまで、デザイナーとしてのすべての仕事を支えていることが明確にわかります。訓練された目は、複雑なインターフェイスを解体し、どのように組み立てられているのかを見抜き、それから学ぶことができます。

Webでもネイティブアプリでも、ミニマルで無駄のない視覚的な文法を使用して構築された、豊かでで取り込まれるような体験の例は数多くあります。それらを少し解体するだけで、複雑なインターフェイスを、点と線と平面という基本要素を使って作成する方法が見えてきます。

ジョシュ・ワースの「If the Moon Were Only 1 Pixel」という作品 (左) は、最低限の視覚的な文法を使って、簡潔で美しいアイデアが創作できることを実証した傑作。同様に、LunarのOnetime (右) には限定された視覚的な文法が使用されている。

If the Moon Were Only 1 Pixel

ジョシュ・ワースの美しいWebサイト「If the Moon Were Only 1 Pixel（もし月がたった1ピクセルだったら）」は、最も単純なビジュアル要素の理解と美しいアイデアの組み合わせの可能性を示した、極めて優れた例です。その成果は、とても素晴らしくて印象的なUXです。

ジョシュ・ワースはこれを「うんざりするほど緻密な太陽系の縮尺模型」と表現していますが、私は「単純な中でも最も単純な、点と線と平面という基本要素を上手に活用した傑作」と呼んでいます。横にスクロールすると、我らが誇り高き太陽系を眺めることができます。

「If the Moon Were Only 1 Pixel」は、視覚的な文法の基本的な要素を慎重に使用した見事な例で、ミニマルな要素とある程度の制約により引き込まれるような体験を作り出せることを実証しています。

Onetime

もう1つの優れた例は、Lunarのタイムゾーンアプリ「Onetime」です。タイムゾーンアプリと言えば数知れずありますが、Lunarのアプリはミニマルで美しい仕上がりです、注意深く見ると、点と線と平面がふんだんに使用され、すべてがUXに貢献していることが分かります。

一般的なタイムゾーンアプリのインターフェイスは過剰に複雑であるのに対し、Onetimeは簡潔さに主眼を置いています。その結果、「どの場所も一目で簡単に時間を確認できる」アプリに仕上げられています。

シンプルさは、多くの場合、時を越えて有効です。視覚的な文法の基本要素、点、線、平面について時間をかけて学ぶうちに、色すら無くとも多くのことを達成できることに気づくでしょう。

ヒントとテクニック

次は、『UXデザインの普遍的な原理』の第2部「言葉とタイポグラフィ」に続きます。

この記事はUniversal Principles of User Experience Design（著者:Christopher Murphy）の抄訳です