Workship MAGAZINEの人気連載「健康で文化的なADHDフリーランスのお仕事ハック」が書籍化されました!
- ニュース
- 健康で文化的なADHDフリーランスのお仕事ハック
画面分割(スプリットレイアウト)のUIは、おもにユーザーに2つの選択肢を提示する際に用いられてきました。しかし、最近はよりクリエイティブなデザインも登場しています。
今回は、スプリットレイアウトを使った個性的なWebデザインの事例をご紹介します。
目次
一般的な方法でスプリットレイアウトを導入した事例。背景画像の色で画面を分割し、Webサイトの訪問者に2つの選択肢を提示しています。全体をまとめる役割を担っている、中央の丸いロゴが特徴的です。
See the Pen Website – Split Screen by Bridget Reed (@BridgetCReed) on CodePen.
スプリットレイアウトをうまく活かして、ユニークなトランジション効果を作り出しています。下スクロールすると画面が半分に分割され、次の画像が表示される仕組みです。画面分割を活用することで、上品さを感じるUIに仕上がっています。
See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.
画面の余剰スペースを活用しようとするデザイナーは、近年増えてきています。この事例では、スプリットレイアウトと静的サイドバーを組み合わせることで、魅力的なデザインを実現しています。小さな画面でも見栄えがいいのが特徴です。
See the Pen Split screen layout by Travis (@trhino) on CodePen.
ビフォーアフターに画面分割を使うのもトレンドのひとつです。この事例では、ユーザーが境界線を移動させられるスプリットレイアウトで、画像の違いを効果的に伝えています。JavaScriptの使いかたという技術的な面においても、興味深い事例です。
See the Pen Split-Screen UI by Envato Tuts+ (@tutsplus) on CodePen.
半分ずつ別の画像を表示するだけではなく、写真が交互に積み重なるようなユニークな演出が印象的な事例。150行以下のCSSのみで作られているため、読み込み時間もかかりません。
See the Pen Scrolling half by half pure #CSS by @Kseso by Kseso (@Kseso) on CodePen.
左側に配置された大胆なタイトルと紹介文、右側に配置された写真とコラムのコントラストは、紙の雑誌を思わせます。スマートな雰囲気のデザインです。
See the Pen Personal Profile // Keanu Reeves by Brian Haferkamp (@brianhaferkamp) on CodePen.
分割した画面のうち、片方に静的なブランドメッセージを配置し、もう片方をスクロール可能にするというデザイン。一般的なWebサイトとの差別化を図れます。
See the Pen by Luke Meyrick (@lukemeyrick) on CodePen.
画面分割を新たな次元に昇華した、とてもユニークなデザイン。画像を2次元的に入れ替えるのではなく、立体のように回転させて表示します。ガジェット的な雰囲気は、とくに技術系の会社におすすめです。
See the Pen Split 3D Carousel by Paul Noble (@paulnoble) on CodePen.
2つの選択肢の提示から、3Dのカルーセルまで、画面分割は発想次第でさまざまな使いかたができます。
既存の手法にとらわれず、自由な発想で活用してみましょう。
(執筆: Eric Karkovack 翻訳:Asuka Nakajima 編集:泉 提供元:speckyboy)
CodePenとは?使い方/埋め込み方法/ライセンス表記を画像付きで解説
Workship MAGAZINE
思わず見惚れるページ遷移アニメーション事例10選【CSS/JavaScript】
Workship MAGAZINE
簡単3ステップで視差効果スライダーを作ってみよう!【GSAP/CSS Grid/Flexbox】
Workship MAGAZINE