内容を変えずに、縦型と横型の名刺をつくる

レスポンシブ対応では、画面が狭くなるたびに情報を消したくなる。しかし、端末によって自己紹介の内容が変わるのは不自然だ。このサイトでは、3ページの構成と掲載内容を共通にし、向きに応じて読み方だけを変えている。

縦は流れ、横は対比

スマートフォンの縦位置では、名前、言葉、肩書きを上から順に読む。カードは安全領域を除く画面の大部分を使い、縦型名刺のように見せる。

横位置とPCでは、同じ情報を左右へ分ける。名前と肩書き、キャッチコピーと連絡先のように、関係する情報を対比させると、横長の余白が意味を持つ。書体もゴシックから明朝へ寄せ、向きが変わったことを視覚でも伝える。

幅だけを見ない

スマートフォンの横位置は、ブラウザのアドレスバーによって想像以上に低く、横長になる。widthだけでPCと同じ扱いにすると、上下が窮屈になりやすい。orientation、高さ、アスペクト比を組み合わせ、特に高さ360px前後で内容が収まるかを見ることが重要になる。