UXデザインの普遍的な原理 Part 2: 言葉とタイポグラフィ（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo

連載

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

絶え間なく変化する環境の中に身を置いて、UXデザイナーとしてすべてを把握し続けることは困難です。これは大きな挑戦です。一方、基本的なデザイン原理の理解は、時代遅れになることはなく、仕事を続ける上でずっと役に立ち続けるでしょう。『UXデザインの普遍的な原理』シリーズの第2部では、言葉とタイポグラフィについてお話しします。

言葉とタイポグラフィ

視覚的な文法を十分に理解したら、デザインするものの基礎をなす「骨組み」を考えることが重要です。この骨組みは、大抵の場合、タイポグラフィで表現された言葉を指します。言葉とタイポグラフィは、ペアとして使用される非常に重要な要素で、他の形態のコンテンツ、図、写真、動画などで補完されます。

言葉、つまり私たちが何かを伝えるために選ぶ一連の単語には重要な役割があり、デザイナーとしては十分に考慮することが肝要です。新しいプロジェクトに着手するときは、デザインを裏打ちする言語の定義から始めるべきです。それは、やがてユーザーの視点を形成するでしょう。まず、伝えたいメッセージを自問してみましょう。そこから、メッセージを伝えるために適切な単語を見つけ出します。

社外のクライアントにサービスを提供していても、社内デザイナーとして関係者と作業していても、デジタル製品を構築していても、言葉の役割は重要です。新規にプロジェクトの作業に着手する前には、時間をとって、関係者とメッセージの定義を行うべきです。私は、次のような一連の質問を用いて、クライアントの主要なメッセージを明確にしています。

これらの質問に対する答えがはっきりすれば、プロジェクトの土台となる言葉の定義に進むことができます。選ぶ言葉は、デザインを形成するものであり、マクロコピーとマイクロコピーの両方の観点から考慮されていることが大切です。

マクロコピーとマイクロコピー

マクロコピーでは、言葉は、トーンとメッセージを決める手がかりになり、ブランドの個性の確立と強化という役割も持ちます。一方、マイクロコピーでは、言葉でインタラクションを助けて改善することで、機能的な要件を満たします。マクロとマイクロの両レベルにおいて、言葉を、デザインプロセスの一環として適切に扱えば、ユーザー体験を改善して、ユーザーに満足感を与えられます。

Hiut Denimのマクロコピー (左) はブランドのストーリーを「Do One Thing Well（あるひとつの仕事が得意）」と「We make the best jeans we can.（私たちはできる最高のジーンズをつくる）」と表現している。同社のマイクロコピー (右) は、ユーザーが目標 (正しいジーンズを買うこと) を達成できるようにすることを重視しながら、ブランドの特徴を「Our regular cut is a true classic…（私たちのレギュラーカットは実にクラシックで…）」と「If you wear turn-ups, buy the next size up…（ターンアップするなら1サイズ上を購入…）」で伝えている。

マクロコピーを定義する方法の1つに「ブランド辞書」の作成があります。ブランド辞書は、対象となるブランドを定義する単語を集めたものです。辞書を作ると、プロジェクト全体で使用する単語が、明確で簡潔で一貫性のあるものになるため、混乱を減らすことができます。

2つの自動車ブランド、スマートとメルセデスの例を見てみましょう。スマートのブランド辞書には、「敏捷さ」、「目立つ」、「活動的」、「楽しい」、「フレンドリー」などが挙げられるかもしれません。メルセデスのブランド辞書であれば、「緻密」、「高級」、「スタイリッシュ」、「高度な技術」、「効率的」のようなものになるでしょう。メルセデスとスマートは同じ親会社が所有していますが、それぞれまったく異なる顧客をターゲットとしているため、ブランド辞書もまったく異なるものになります。

まずマクロコピーを定義して、次に機能的なマイクロコピー、つまりインタラクションの助けになる言葉、に焦点を移します。マイクロコピーはブランド価値を反映したものにはなりますが、それ以上にプロジェクトごとに一貫していることがほとんどです。たとえば、「カートに追加」の意味は誰もがわかっていることなので、独自の言い回しを考え出してユーザーを混乱させるべきではないでしょう。

今後、言葉はよりその重要さを増すことになりそうです。アマゾンのEcho、グーグルのHome、そしてアップルのHomePodといった音声インターフェイスは言葉に大きく依存しており、私たちはこういった「目に見えないインターフェイス」に対してデザインしていくようになるでしょう。ジョン・マエダは、2017 Design in Tech Reportに、文章力をUXの「ユニコーンスキル」であると掲載しています。これは、言葉を素材として考えることの重要性を主張する、ニコール・フェントンの言葉を借りたものです。

とはいえ、言語は半分の要素に過ぎず、選ばれた言葉の持つ意味を増幅するためのタイポグラフィも非常に重要な役割を持ちます。

タイポグラフィ

「タイポグラフィのバイブル」として広く受け入れられている『The Elements of Typographic Style』の著者ロバート・ブリングハースト は、「タイポグラフィは、人間の言葉に、あせない視覚形態を与える技術である」と述べています。別の言い方をすれば、タイポグラフィは言葉に着せる服、ということです。私たちが、正装したり、カジュアルな格好をしたりできるのと同様に、選択するタイポグラフィによって、作り出された言葉に対するユーザーの解釈は根本的に変わります。

言葉に大きく依存しているメディアを扱うのであれば、当然、タイポグラフィの理解は重要です。この点について、デジタル製品スタジオiAのオリバー・リーチェンスタインは、次のように述べています。
「Web上の情報の95%が文章で記述されているのであれば、Webデザイナーは十分なトレーニングを受けて、書かれた情報を整形するための主要な原理、つまりタイポグラフィを学ぶべきと考えるのが論理的だ」

言葉をマクロとマイクロのレベルで捕らえたのと同じように、タイポグラフィも2つのレベルで扱いましょう。マクロのレベルでは、ページ全体の構造とタイポグラフィの階層を考慮した書体を使ったデザイン、マイクロレベルでは、レディングやスペーシングなど、細部を考慮したデザインが必要です。

Oak StudioのWebサイト (左) は、スケール (および単純な2色パレット) を使ってタイポグラフィの階層を明確に示し、ページ内の構造をわかりやすくしている。Brandtpunt (右) は、太字の発行番号 (259、260など) でページにメリハリをつけるなど、タイポグラフィを活かした細部のデザインにこだわりを見せている。

もちろん、タイポグラフィを装飾のための効果として使用することもできますが、より重要なのは、タイポグラフィがUXの改善に使用できるということです。言葉を明確に決めたら、そこにタイポグラフィをどのように使用できるかを考えることが重要です。

Typekit Practiceには、レッスン、リファレンス、さらにはライブラリといった、タイポグラフィの基礎を広い範囲で取り上げた素晴らしいリソースが数多く用意されています。Typekit Practiceのレッスンには、 本文テキストに使用する書体の選択方法、OpenTypeの機能に関するアドバイス、そして私のお気に入りでもある、人目を引く強調体 (em要素) でのシェードの使用に関する素晴らしいレッスンなどが含まれます。

タイポグラフィに関するリソースは、他にも多数オンラインとオフラインで提供されています。Hoefler and Co.のDiscover.typographyは、豊富な情報を得ることができるWebベースのリソースです。また、Typewolfも、インスピレーション、ガイド、およびリソースを、オンラインで提供しています。エレン・ラプトンの『Thinking with Type』も、あらゆるタイポグラフィに関わることについての優れた入門書として絶対に読んでおきたい一冊です。最後に、前述したブリングハーストの書籍は、誇りあるデザイナーであれば本棚の最高の場所に収めておくべきでしょう。

言葉とタイポグラフィの事例

言葉とタイポグラフィの組み合わせは、単なる足し算以上のものとなり、ユーザー体験を強化します。両方の要素を、デザインプロセスに欠くことのできないパーツと捉えることが重要です。

できるならば、コンテンツデザイナーとタイポグラファーの助けをチームに借りることが望ましいでしょう。ですが、皆もが理想のかなう世界に住んでいるわけではありません。現実の世界では、言語とタイポグラフィの理解を確実に深める努力をして、デザインを大きく改善することになるでしょう。

私たちが学びに使えるコンテンツ主導のWebサイトは、さまざまなものがあります。そのいくつか分解してみれば、言語とタイポグラフィをどのように利用すれば、印象に残るユーザー体験を生み出せるかを理解できるでしょう。

GOV.UK (左) には、的確に選択された言葉の力を表している「言葉ファースト」のWebサイトの好例。フリーランスのデジタル製品デザイナー、ラケシュ・クリシュナンのポートフォリオサイト (右) では、上手に選択された書体の潜在的な力を引き出している。

GOV.UK

GOV.UKは、言葉とコンテンツを最優先にしたWebサイトのすばらしい例です。D&ADブラックペンシル賞を受賞した同Webサイトは「政府のための唯一のドメイン」になるというその公約が称賛されています。D&ADが述べたように、このWebサイトは、情報もサービスも、政府のニーズではなく、利用者のニーズを重視して書き改められており、「より単純でわかりやすく、より素早くアクセスできる」ようになっています。

デザイナーとして、コンテンツデザインの重要性を強調したGOV.UKのアプローチからは、多くの事を学べます。このアプローチは、サラ・リチャーズ率いるGOV.UKチームが最優先事項として位置付けたものです。英国政府のデザイン原則に従ったデザインでは、次の項目が重視されています。

Rakesh

使用する言葉と同じくらい書体選びは重要です。ラケシュ・クリシュナンのポートフォリオサイト「Rakesh」は、ミニマルなカラーパレットと、力強い一方で抑制されたタイポグラフィを組み合わせた、素晴らしいサイトです。このタイポグラフィ重視のアプローチからは、次のようなレッスンを学ぶことができます。

Webにある情報の大半が文字で構成されているのであれば、言葉とタイポグラフィの理解なくしてユーザー体験を改善することはできません。デザイナーとしての役割は、できる限り明確に伝えることと、こういった原理の理解を深めることで、それによって、デザインを大幅に強化することができるのです。

ヒントとテクニック

次は、『普遍的なUXデザインの原則』の第3部「ナラティブデザイン」に続きます。

この記事はUniversal Principles of User Experience Design: Language and Typography (Part Two)（著者:Christopher Murphy）の抄訳です