2次元の画面上のUIを計画するWebデザインでも、時に3次元的な表現が必要になります。この記事では3次元の表現方法や、3次元スタイルを使いどきコンポーネント）について記載します。
はじめに3次元の情報を与える表現方法についてです。
重なり（レイヤー）
重なりも3次元の表現の1つで、上の画像のように重なり合う要素は境界が明確でないと重なっていることが表現できません。
影（ドロップシャドウ）
影の落とし方（X・Yオフセットやぼかし）によって、要素がどれだけ浮いているかを表現することができます。
パララックス（視差効果）
いくら歩いても月の位置が変わらない（ように見える）のと同じく、主体の移動に対して遠くのものは位置の変化が少なく、近くのものは変化が大きく感じる効果がパララックスです。
これを再現することで、Webページでもあたかも3次元（奥行き）があるように見せかけることができます。Webページにおけるパララックス表現は、スクロールに応じた表現をすることが多いです。
iPhoneのホーム画面でも、壁紙とアプリアイコンの位置関係を擬似的に表現するためにパララックス（視差効果）が利用できます。
3次元スタイルのつかいどき
ビジネス的な理由が及ばない限り、「なんとなくかっこいい！」という理由だけで3次元のスタイルは使うべきではありません。デザインは性質をあらわすべきであり過度な装飾は使う人の理解を妨げます。奥行きに関する情報が不要な場面は、2次元スタイルを適用したデザインにとどめるべきです。
3次元スタイルをつかうべきなのは、コンポーネントを立体的に配置している場合です。サイト上部に固定されたナビゲーションバーやフロートボタンなど、レイヤー分けされたコンポーネント配置している場合に有効です。
AppleのWebサイトでは、ナビバーを手前側に配置し画面上部に固定しています。イメージとしては下図のような配置ですね。
固定フロートボタンの場合も同様にレイヤー分けされ表現されます。Twitterのツイートボタンもフロートボタンですが、かすかにドロップシャドウが適用されています。
他にもモーダルやスナックバー、トーストなどのコンポーネントも、画面手前に配置されるので3次元のスタイルを適用するのが一般的です。
この記事の 最終更新：2022.9.25