見出し画像

Study Report 18 / 『レイアウトの考慮事項』

1day1study

どうもJBです。

今回は、「レイアウトの考慮事項」についてです。

前回の「デザインのヒント」の続きになります。
「デザインのヒント」をもっと細分化して理解したいと思ったので、今回は前回の①コンテンツの表示形態のところをもう少し詳しくみていきましょう。

レイアウトに関する一般的な考慮事項

プライマリコンテンツがデフォルトのサイズでクリアであることを確認する。※プライマリとは、主要なという意味
:基本的には、サイズなどを変更しない限り、ズームや水平スクロールを避けるように設計する。垂直方向のスクロールが望ましい。WEBマンガなどで水平スクロールをよくみる気がする。

アプリ全体で一貫した外観を維持する。
:WEBサイトなどでデザインやレイアウト(特にヘッダーやフッターなど)が著しく変化していると、ユーザーの操作性が低下するのと同様にアプリでの外見の一貫性も重要である。

視覚的な重みとバランスを使用して、重要性を伝える。
:プライオリティが高いものは、大きく表示したり、人間の視覚効果(左上から右下へ視線が流れる)を利用して左上に配置したりすることで重要性を強調する。

配置を使用して、スキャンを容易にし、組織と階層を伝達する。
余白と配置方法で、要素の境目をはっきりさせて、グループを理解しやすいようにする。

可能であれば、縦向きと横向きの両方をサポートする。
:様々な見方の期待に応える。

アートボード – 2


テキストサイズの変更に備える。

アートボード – 3


インタラクティブな要素に十分なタッチターゲットを提供する。
:最小タップ領域は44pt×44pt  ↓上が✖︎ 下が⭕️

アートボード – 1


複数のデバイスでアプリをプレビューする。


アートボード – 4


大きなデバイスでテキストを表示する時に読みやすさのマージンを適用する。
:怪お的な読書体験を意識するため、短めに設定する。


学び

今回はレイアウトについて学びましたが、時代が進むにつれてデバイスが多種多様なサイズで出てくる中でレイアウトを決めるのはとても難しい作業です。
対象とするユーザーの使用するデバイスを意識して作ることが必要だと感じました。いまの時代だとiPhoneX以上のデバイスが多いのかな?

レイアウトはデザイン的な要素というよりは操作性や可読性を重視することがUI/UXのデザインと言えるでしょう。
ユーザーの使用状況を想定し、想定したデバイスの使い方でどのようなレイアウトが使いやすいのかを考えることが良いデザインにつながるのだと思います。


まとめ

良いレイアウトはユーザーの使用状態を想定できるかによって変わってくる。


以上

最後まで読んでいただきありがとうございました。

詳細はこちら↓

拝見記事
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

この記事が気に入ったらサポートをしてみませんか?