「分割スクリーンレイアウト」とは、フル画面のWebサイトが、縦に同じサイズで2つ（あるいはそれ以上）に分割されているレイアウトのことです。
分割スクリーンレイアウトは、非常に人気があって流行していますが、合理的かつ論理的な理由なしにとり入れてしまうとユーザー体験を損なうこともあるため、導入には少し勇気がいります。
とはいえ、正しく構成されていれば、サイトを閲覧するユーザー体験は抜群です。
Roman Kirichikによる分割スクリーンレイアウトのデザイン
なぜ分割スクリーンレイアウトを使うのか？
分割スクリーンレイアウトは、最小限のWebデザインで最も効果を発揮します。はっきりと縦方向に分割されたネガティブスペース（訳注：余白、コンテンツがない部分）は、サイト内の重要な部分としてユーザーの注目をグッと集められるからです。
分割スクリーンレイアウトのメリットは、ビジュアルが優れていることに加え、選択可能なオプションを隣り合わせに2つ配置するランディングページとして特に効果を発揮します。
分かりやすい例として、
- ログイン・登録フォーム
- 有料・無料購読
- 製品のカラーバリエーション紹介
があります。
分割スクリーンレイアウトの良い例とは？
分割スクリーンレイアウトの良い例をいくつか見て、それぞれのケースがなぜうまくいっているのかを分析してみましょう。分割スクリーンレイアウトはいろいろな目的で使われているため、そのメリットはサイトごとに異なります。つまり、Webサイトが何を目指しているかによるのです。
Cam Strobel
Webサイトをデザインする場合、すべてが必ずしも横向きである必要はありません。Cam Strobelのような最小限なデザインのWebサイトではスクリーンが2つに縦分割されていて、全コンテンツが「Above-the-fold（アバブ・ザ・フォールド）」仕様になっています。そのため、ユーザーがスクロールする必要がなくなります。
Studio Meta
幅いっぱいの「巨大ヘッダー」を使ったデザインはいまだによく使われていて、人気もあります。しかし、文字が読みにくくなるため、やたらに大きい画像を使う機会はまれです（普通は画像をぼかすか、カラーオーバーレイを入れなくてはなりません）。分割スクリーンレイアウトはこうした問題を解決してくれます。Studio Metaの例を見てみましょう。
画像とコンテンツを隣り合わせで配置することにより、よりカラフルで大胆な画像を使えます。また、画像がぼんやりとした印象になることも決してないので、より深い意味を持たせられます。
Bose
分割スクリーンレイアウトの構成は50:50でパーツが2つである必要はありません。例えば、Boseは分割スクリーンレイアウトのトレンドに極限まで挑戦していますが、小さなスクリーンへの適応は考慮していない様子です。見た目は美しいのですが、レスポンシブデザインには対応していないので、その対応は求められます。ただし、分割スクリーンレイアウトをモバイルなど小さなスクリーンに適応させる作業はとても難しいものです。
そうは言っても、Boseのレイアウトは異なる色を使うことで各々のアイテムをユニークに表現しています。エッジの効いた対角線風の形を組み合わせることにより、とても目をひくWebサイトに仕上がっています。
Filletの事例も、分割スクリーンレイアウトがいかに独特な特徴をWebサイトにもたらすかを教えてくれます。また、3つに縦分割されており、それぞれにはコンテンツが含まれておらず（アート作品が表示されています）、モバイルデバイスでも正常に表示されます。
分割スクリーンレイアウトで覚えておくべき3つのこと
Webサイトに分割スクリーンレイアウトの導入を検討しているなら、デザインするときに次の3点を頭に入れておきましょう。
1. モバイルフレンドリーであること
分割スクリーンレイアウトには、1つの「デメリット」があります。それは、あまりモバイルフレンドリーでないということ。分割したスクリーンをレスポンシブに、そして小さいスクリーン（横長表示のタブレットを除く）にも適応するのは難しいことです。ほぼ確実にスケールをもっと縮小する必要があり、通常よりもコーディング作業が増えます。そのため、必ずモバイル最適化を最優先にするようにしてください。
注意：上のBoseの例では2つではなく5つに分割されているため、モバイル画面には「まったく」フィットしていません。
2. 特に理由もないのにスクリーンを分割しないこと
Webサイトに分割スクリーンレイアウトが本当に必要なのかを考えなくてはなりません。分割スクリーンレイアウトは確かに人気で見た目も良いですが、それだけでは分割スクリーンレイアウトを導入する理由としては不十分です。
- 分割スクリーンレイアウトをレスポンシブ化するために、長時間の難度の高い作業をする価値はあるのか
- トレンドに敏感で分割スクリーンレイアウトを評価するユーザー層なのか、それともかえって困惑してしまうだけなのか
- 分割スクリーンレイアウトが正しく機能するのに必要なネガティブスペースは十分にあるか
- シンプルなレイアウトによる視点誘導の効果を差し置いてでも、分割をする必要があるのか
これらのうちどれか1つでも「NO」であった場合、分割スクリーンの導入はやめたほうが無難です。
3. ネガティブスペースを利用する
デスクトップではWebサイトは横向きに表示されますが、分割スクリーンレイアウトを使うとメインの表示域の中でそれぞれのパーツが若干縦向き表示になります。
この特製をいかして、新しいコンテンツの表現方法を探し出すチャンスは数多くあると言えます。自分のクリエイティブ力を試すチャンスですね！
まとめ
分割スクリーンレイアウトは魅力的ですが、事例からも分かるように、そのメリットはWebサイトの目的によって異なります。分割した各カラムの特色をはっきりさせるために使うこともできれば、全幅表示域を必要としない最小限のデザインのWebサイトにおいて全パーツを「above-the-fold」に収めるというもっとシンプルな理由で使用できます。
（原文：How to Design a Daring but Effective Split-Screen Layout）
［翻訳：加藤由佳］
［編集：Livit］
