プロポーション

このことを念頭に置いて、UI デザインで比率を使用することは可能です。

UI デザインにおける測定単位

デジタル製品の測定単位として、「ピクセル」という用語が最も頻繁に使用されているのを聞いたことがあると思います。 2010 年に Apple 社が Retina ディスプレイを発表するまで、これは一般に受け入れられていました。

Retinaディスプレイは、ディスプレイの 1 平方インチあたり 2 倍のピクセル数を詰め込むことにより、「サイズ」についての考え方が変わりました。 Retina と非 Retina の間の要素のサイズは同じに見えますが、その要素を構成するピクセルの総数は大きく異なります。 たとえば、通常のディスプレイで 48px の高さのボタンは、ピクセル密度により、Retina ディスプレイでは 96px の高さになります。 幸いなことに、HPD 画面は通常、標準の 1 倍の画素密度ディスプレイよりも 1 平方インチあたり何画素多いかによって定義されます。

たとえば、ほとんどのスクリーンは、1 倍、2 倍、または 3 倍のピクセル密度を持つものとして説明することができます。 しかし、混乱を避けるために、多くのデザイナーは、画面のピクセル密度に関係なくサイズを表す「ポイント」または「pt」という用語を使用することを好みます。

このレッスンの残りの部分では、デザインの要素間の関係を表す測定単位として、「pt」と「px」という用語を互換的に使用します。

The 8pt Grid System

イラストレーター、フォトショップ、スケッチ、XD、Figma などのデザイン ソフトウェアで作業する場合、デザイナーがグリッドまたは列を使用してデザイン作業を支援することは非常によくあることです。 このコースで説明するデザインの原則の多くは、グリッドまたは列の助けを借りて達成することができるので、それらがデザイナーのツールボックスの人気のあるツールであることは驚くことではありません。 この戦略は 8pt Grid System として知られています。

8pt Grid System は、Google の Material Design 仕様によって初めて導入されたものです。 幸いなことに、それはかなり簡単に理解できます。 基本的には、8 x 8 pt の正方形で構成されるグリッドを使用したいのです。 このグリッドの上でデザインを行う場合、すべての要素がグリッドにスナップするようにします。

これにより、要素は常に8で割り切れる寸法になります。このようにデザインすることで、要素の比率を保ちながら、デザイン全体に縦のリズム感を持たせることが容易になります。

• 最も一般的な画面寸法は 8 で割り切れるため、大半のデバイスでデザインが非常に鮮明かつ明確になります（分割ピクセルがない）。 これにより、開発者はグリッド システムに忠実でありながら、REM 単位で Web ページ上の要素を拡大縮小できます。

全体として、グリッドに他の数とは対照的に 8 ポイントを使用する利点が多くあります。 しかし、より適している場合は、10pt や 12pt などの数字を使用できます。

Why Not 4 Points?

The Google Material Design spec DOES recommend using 4pt for “Smaller components, such as iconography and typography.”. しかし、大半の UI 要素は 8pt システムで処理できるため、まずは 8pt を使うのが一般的です。

The Golden Ratio

8pt GridSystem は UI デザインにおいて明らかに有利ですが、「UI デザインの比率」で Google 検索すると、黄金比に関する結果がフロントページにいっぱい出てくることでしょう。

黄金比は 1:1.618 で、数学と美学の交差点であると信じられています。 多くのデザイナーはグリッド システムを完全に無視し、代わりに黄金比で比率を作成することに賛成しています。

黄金比が、グーテンベルク聖書から現代のロゴ デザイン、自然界の現象まで、すべてに使用されてきたという例はたくさんあります。 しかし、黄金比の美しさは単なる神話だと考える人もいます。

ともかく、多くの人が黄金比に魅了されていることは否定できないので、このレッスンで言及する価値は確かにあります。

UI デザインでの黄金比の使用

このコースのレッスン 4 で、UI の特定のセクションで 3 から 4 レベルの階層以上のデザインがないはずだと説明しました。 これを念頭に置いて、次の簡単な手順に従って、デザインに黄金比を適用できます。

長方形の高さを定義し、その数値に 1.618 を掛けて幅を求めます。 これは「黄金長方形」を作成します。

上の例では、開始時の数値は 350pt ですが、好きな数値を使用できます。 各正方形は新しい小さい黄金長方形になります。

異なるサイズの3～4個の正方形ができるまで、黄金長方形を分割しつづけます。

各正方形のサイズを「プレースホルダー」として使用し、レイアウトを分割して、デザインにおける階層を伝えるのに役立ちます。

全体として、美しくて均整のとれたデザインに仕上がりました。 Prototypr.io のこの例を見てみましょう。

制約から始める

さて、UI デザインで比率を確立するための方法をいくつか取り上げましたが、いくつかの素晴らしい出発点について説明しましょう。

Mobile First Design

「モバイル ファースト」という言葉は、Luke Wroblewski が彼の同じタイトルの本の中で作ったものです。 この用語は、UI に十分なスペースがあるからといって、より多くのものを詰め込もうとする衝動に対抗する方法として、デザイナーの間で人気を博しました。

最初にモバイル デザインに焦点を当てることにより、デザイナーはモバイル デバイスの制約を回避し、本当に重要なものに焦点を当てる必要があります。 その結果、UI の主な目的が注目の的となり、ユーザーのエクスペリエンスはデバイス間で一貫性を保ちます。

フォント サイズ

前述のように、Web 上の本文のデフォルトのフォント サイズは、ほとんどの主要ブラウザーで 16px です。 これより小さいと、Apple 社のモバイル デバイスで予期しないズーム動作が発生することがあります。

Google Material の Design 仕様に従い、Bootstrap のフォント サイズのスタイル ガイドなどの 4pt 単位のサイズを選択することにより、比率を考慮しながらこれらのフォント サイズを定義することが可能です。

注意: 黄金比によってフォント サイズを増加させることは、各フォント サイズ間の差があまりにも大きくなるため、推奨されません。 たとえば、基本のフォント サイズ 16 から始めて、各見出しレベルに 1.618 を乗算すると、H1 の見出しは 177.4 pts になり、読みやすさでは非常に困難となります。 この特定のケースでは、指、親指、カーソル、およびスタイラス ペンに言及しています。

指と親指は、カーソルやスタイラス ペンに比べて幅が広く、精度も低くなります。 このことを念頭に置いて、ボタン、入力、アイコン、その他のタッチ ポイントのサイズを、これらの制限を考慮して慎重に選択することが重要です。

Google の Material Design では、モバイルでのタッチ ポイントのサイズは、縦 48pt 以上、横 48pt 以下、間隔は 8pt 以上と推奨されています。 この特性にもかかわらず、コンテンツの最小および最大の幅を定義することは良い習慣です。

最小のコンテンツ幅は、デザインがサポートする最小の画面幅によって決定されることがあります。 ほとんどのデザイナーがサポートする最小の画面解像度は、幅 320px (1X でのこと) です。 ただし、実際のユーザーデータを入手できる場合は、それに基づいて最小幅を選択する必要があります。 Google Analytics は、この種のデータを探すのに良い場所です。

コンテンツの幅は、与えられたのと同じだけ画面を埋めることができますが、一般に、コンテンツが 1 行あたり 52 文字以上になるようにすることは推奨されません。 これは、コンテンツの最大幅は、通常のフォントサイズで実際の本文を使用し、この範囲に収まる快適なコンテンツ幅を見つけることによって決定できることを示唆しています。

結論

結論として、プロポーションは有用なデザイン原則である。 静的な要素と流動的な要素を組み合わせても、8pt グリッド システム、黄金比、または別の方法を使用することで、均整のとれた UI を実現できます。 要素の寸法を定義する際には、デバイス、フォントサイズ、ボタンサイズ、コンテンツ幅などの制約条件から始めるのが一般的です。 基本的なサイズが決まれば、それに応じて要素を拡大縮小するのがはるかに容易になります。

次のレッスン
設計の原則。

前のレッスン
デザインの原則：ホワイトスペース。

Feedback

How can be improved this lesson? 以下にフィードバックをお願いします！