近接・反復・スクロール【v12】

こんにちは。よろしくお願いします。今日は、整理して並べたものを繰り返すことで生まれる「向き」についてお話しします。

例えば、何百、何千といった大量の情報でも、同じ規則で並んでいれば、人間は理解しやすくなります。Webサイトやアプリで並べたものを繰り返し表示すると、そこに「向き」が生まれるんです。

本棚や食器棚のように、物理的なものは並べ方に決まった向きがありますよね。でも、Webサイトやアプリでは、縦でも横でも、画面の形によっては円形にでも、自由に並べる向きを作ることができます。

それは画面の形や並べる要素の形、そして要素に含まれるテキストの量など、複合的な要因から決まります。紙のデザインとは異なる、デジタルデバイス特有の考え方を理解することが大切ですね。

「近接」とは、関連する項目をまとめてグループ化することです。関連する要素を空間的に近づけることで、まとまったグループに見えるようになります。

その通りです。逆に、関連しないもの同士を近づけてはいけません。近接によって、ページ内の構造と意味をユーザーは直接的に把握できるようになります。

「反復」とは、整列や近接したもの同士が繰り返されることを指します。反復される要素は、文字の太さ、罫線、色、デザイン的な要素、特定のフォーマットなど様々です。ユーザーが視覚的に認識できるものであれば、何でも反復できます。

そうです。別の見方をすれば、反復は「一貫性」を維持する手法とも言えます。例えば、8ページのコンテンツがあるとします。見出しや文字の大きさ、色、ページ番号の位置などが全てのページで共通していれば、それらが同じコンテンツの一部であることが明確になります。

その通りです。反復によって全体の統一感を保つことができます。

反復を続けていくと、画面の末端に突き当たりますよね。そのため、画面を伸ばす、つまりスクロールする必要があります。ここで問題になるのが、縦と横、どちらにスクロールするのが自然かということです。

実は、スクロールの自然さは画面の形、要素の形、要素同士の隙間、そしてテキストの有無といった要因によって左右されます。それらが複合的に関わるので、絶対的な基準はありません。

画面が四角形である前提で、スクロールは画面の長い方向に向かうのが自然です。横長の画面なら横スクロール、縦長の画面なら縦スクロールが自然に感じられます。ユーザーの認知的な負担が少なく済むためです。

そうです。スクロールによる画面の変化量が少なくて済むので、ユーザーは違和感なく操作できます。

はい。要素が横長の場合は縦のスクロールに向き、縦長の場合は横のスクロールに向きます。より多くの要素を置ける方向にスクロールが向かうんです。

その通りです。本を平置きするなら縦に並べますよね。スクロールの向きも同じ考え方です。

はい。要素同士の隙間が広い方向にスクロールは向かいます。これは「近接」の原則によって、隙間の小さいもの同士が一つのブロックとして見えるためです。

その通りです。自然に感じられるスクロールの向きが生まれます。

これは、画面の端に要素がかかっていて、全てを見せずにわざと一部を見切れさせる手法です。これによって、そちらの方向にスクロールが続いているように見せることができます。

特に横スクロールを意図的に認知してもらいたいときに強い効果があります。縦スクロールでも同様です。

テキストは基本的に「左から右」に流れ、その後「上から下」に進みます。テキストがあると、この「上から下」の影響が強くなるので、スクロールは下方向へ進みやすくなります。

そうです。要素に添えるテキストが増えると、要素間の上下の隙間も広がり、縦方向のスクロールが自然になります。

その通りです。逆に縦スクロールを強めたいなら、テキストを添えると効果的です。

文字は左から右、上から下へと流れます。これは日本語や英語の場合ですね。コンテンツもこの文字の流れに従うので、情報は左から右、上から下へ続いていきます。

そうです。また、操作が画面に反映される場合も、左の操作が右に、上の操作が下に反映されると自然に感じられます。これは文字の流れに従う特性です。

アラビア語は右から左に文字が流れるので、情報の順序やナビゲーションの位置・優先度が左右で逆転します。例えば、Wikipediaの日本語版とアラビア語版を比較すると、ナビゲーションの位置が反転しているのが分かります。

その通りです。日本語ではナビゲーションは左や上が適切で、最終的なボタンは右や下がふさわしいのは、この文字の流れる方向の強制力に従って決まっています。