UI表現っていうのかわからないので変な言葉になっちゃいましたが、画面上で、そのエレメントやコンテンツがどんな意味のものであるかを表すための表現のことを私はそう言ってます。

Facebookの複数写真投稿時のUI

FacebookのiPhoneアプリを使っていて、複数写真の添付された投稿を見ていると、投稿カード上にいくつかがレイアウトされているものと投稿からはみ出しているものとがあることに気付きます。

レイアウトされた複数の写真とはみ出した写真

実験してみたのですが、どうやら個人アカウントが投稿したものは画面内にレイアウトされ、Facebookページからのものははみ出したものになるようです。そのように使い分けられている理由はよくわからないです。いずれどちらかに合わせられるのかも。

はみ出したUI表現はスクロールが可能であることの暗示

このはみ出したUI表現は、はみ出した方向にスクロールできるものであるということを暗示しています。特にスマートフォンサイトやアプリなど画面の狭いデバイスに表示させるコンテンツに使われることが多いです。

App Store、Facebookの友達かものはみ出す表現

この表現を用いる理由は縦方向の占有面積を抑えて1画面に入るエレメントの量を増やすことが主であると考えられます。もっと見るのようなリンクを設置せず、そのページで完結するというところも良いですよね。

で、よく考えると普通のWebページのコンテンツだって、縦に伸びているコンテンツが下から見えているからこそ、下にスクロールするということに気付けるのではないかと思いました。普通Webページは下にスクロールするものだから当然のように思ってましたが、横スクロールが主ではない操作だから変わって見えているだけで、見切れさせる表現は普通に使っているわけです。

ヒーローヘッダーにおける工夫

と考えると、最近のWebデザインでよく見られるヒーローヘッダーのような、ファーストビューを画像のようにそれだけで完結しているように見えるエレメントで占有するやり方はなかなか工夫のしどころででしょう。

スクロールできるという表現がある場合

エリジウム- オフィシャルサイト

スクロールできる表現がない場合

Heck House

ブラウザーの縦サイズいっぱいの画像が敷かれたヘッダーはぱっと見ファーストビューで完結したサイトと区別がつかないですし、コンテンツがそれで完結しているように見えてしまうスクロールせずに離脱してしまうこともあるんじゃないかと思います。

PC版には矢印があり、スマートフォン版にはない

Reflection | UIデザイン会社Standard Incのブログ

例えば下向きの矢印を下部に設置したり、少しだけ下に続くコンテンツを見切れさせるなどでスクロールを促すことはできますよね。スマートフォンサイトの場合はほぼスクロールすることが前提となっていると思うので、あまり必要ないのかもしれません。

おわりに

画面デバイスの中には一つの投稿であったり、ヘッダー、サイドバーであったり、情報の分割やグループを示す枠があり、画面自体もそうした枠の一つだと思います。

以前[webデザイン]ブラウザーの中のセカイ ― デザインや世界観のレイヤーを認識するという記事を書いたのですが、この記事では枠という境界を作ることでその内側と外側で世界観を分割するという話しを書きました。境界を作ることはこういう効果も持っています。

わかりにくいレイアウトにせず、かつコンテンツを適切に見せるためにこの枠をうまく活用しようという話しでした。