【翻訳】デザインシステムにおけるモバイル／デスクトップ間スケーラビリティについて（Oriol Banus, UX Collective, 2022）

uxdesign.cc

デザインシステムにおけるモバイルとデスクトップデザインのスケーラビリティ

そもそもスケールとは何か？

マスタークラスによると - アートやデザインにおいて、スケールの原理は、1つのアート作品内の異なるビジュアルのサイズ関係を指すこともあります。

複数のプラットフォーム向けにデザインする場合、ユーザーが異なるコンポーネントと相互作用する際に最高の体験を得られるよう、ユーザーインターフェースに異なるスケールが必要になることがあります。

モバイル、タブレット、デスクトップなど、異なるプラットフォーム向けにデザインする場合、各ビューポート間の一貫性を保つために、スケーラブルなスタイルとコンポーネントを作成する必要があります。

モバイルとタブレットは同じスケールで、デスクトップは独自のスケールとなり、スケーリングは2つのサイズに絞られることになります。

モバイルのスケール：360pxから1279px
デスクトップのスケール：1280px以上

レスポンシブグリッドは通常最低4つのブレークポイントを持ちますが、これはモバイルとデスクトップのプラットフォームスケールです。

トップルール

ここでは、デザインシステムのスケーラビリティに関する標準やパターンを維持するためのルール集をご覧いただけます。

レスポンシブ・レイアウト

以前の記事「デザイナーのためのレスポンシブレイアウトグリッド」で説明したように、レイアウトとは基本的に、画面上に画像やテキスト、コンポーネントなど、あらかじめ決められたものを配置することを意味します。レイアウトでは、プラットフォームや画面サイズによらず一貫性を持たせるために、統一された要素や間隔を使用します。

デスクトップ用レイアウトには12列、モバイル用レイアウトには4列のカラムがあります。カラムは常に画面の中央に配置されます。

モバイル＝4カラム：モバイルの画面表示では4カラムです。カラムの幅は画面の大きさによって変化します。4カラムの幅は、グリッドの25％の幅に相当します。
デスクトップ＝12カラム：デスクトップ画面表示では、レスポンシブ・グリッドシステムで12カラムになります。カラムの幅は、グリッドのサイズによって変化します。12カラムの幅は、グリッドの8.33%の幅に相当します。

スペーシング

8pxのグリッドは、モバイルとデスクトップのスケールで同一です。最も有名なグリッドシステムは8pxです。偶数であれば、デザインの拡大縮小がより簡単になり、一貫性が保たれるからです。

スペースとは、2つのコンポーネント間、または画面の視点間の水平方向と垂直方向の距離のことです。すべてのスペースは8刻みで設定されています（8、16、24、32、40、48、...128）。スペーシングについて詳しくは、こちらの記事「デザイナーのためのスペーシングガイド」をご覧ください。

コンポーネントの比率

デスクトップのコンポーネントは、マウスやパッドで操作する小さなカーソルとのインタラクションであるため小さく、一方、モバイルのコンポーネントは、カーソルよりも大きな指とのインタラクションであるため大きくなっています。

推奨される縮尺は、縮尺比1:1.20または1:1.25です。これは、モバイルコンポーネントはデスクトップコンポーネントより約20％または25％大きく、デスクトップコンポーネントはモバイルコンポーネントより約20％または15％小さいことを意味します*1。

タイポグラフィー

コンポーネントの比率と同様に、タイポグラフィの比率も2つの異なるスケールで異なる場合があります。モバイルのタイポグラフィは、デスクトップのタイポグラフィよりも1:1.20または1:1.25大きくなり、レイアウトグリッドと整合するように、すべてのタイポは4pxまたは8pxの倍数に丸められることがあります。

例：24 * 1.20 =28,8 → 28pxに丸める

タイポグラフィのサイズを生成するには、基本サイズから各サイズに1.155を掛け、その結果を丸めて整数にすればよいでしょう。また、4pxや8pxの倍数で単純に文字サイズを作成するのも有名な手法です。

アイコングラフィー

さまざまなデバイスに対応するスケーラブルなアイコンセットをデザインすれば、製品の調和とバランスをより良くすることができます。モバイル用に2サイズ、デスクトップ用に2サイズを作成する方法もありますが、各スケールに対して1サイズのみ作成することも可能です。

たとえば...

モバイル用スケール：32px
デスクトップ用スケール： 20px

もう一つ例を挙げると…

モバイルスケール：24pxと32px
デスクトップ用スケール：16pxと20px

ボーダー

プロポーションは変化しますが、ボーダーはすべてのスケールでまったく同じままにすることができます。これはオプションで、美観のためにスケールによってボーダーのストロークを変えることもできますが、経験上、すべてのスケールとデバイスでボーダーが見える限り、これは重要ではありません。

デバイスごとのスケール

アンドロイド携帯やタブレット、iOS携帯やタブレットを使用している場合は、モバイルスケールを使用し、MacやWindowsコンピュータ用にデザインしている場合は、デスクトップスケールの基準に従います。

この表は、デバイスとスケールを区別するのに役立つかもしれません。

スピードと目的

モバイルとデスクトップ用にデザインをスケーリングするためのデザインシステムが用意されていると、UIデザインとドキュメント作成のスピードアップに役立ちます。

この目的は、あらゆるタイプのデバイスを使用しながら、ユーザーにとってよりスムーズなエクスペリエンスを実現することであることを忘れないでください。モバイルではタッチインタラクションを、デスクトップではカーソルベースのインタラクションを扱います。これらのインタラクションの領域は、タッチやクリックに十分な大きさでなければなりません。