Webデザインのスタイル12選と選び方
スイス・スタイルの情報設計から、初期ウェブ、フラットデザイン、グラスモーフィズム、ウェブ・ブルータリズムまで。Webで使える視覚言語を系統と用途で選ぶガイド。
このガイドの選定基準
Web上で識別できる視覚文法があり、出典または系譜をたどれ、近い項目との差を説明できるものだけを選んだ。いま流行している見た目の羅列ではなく、辞典を使うための入口である。 独立項目にする5条件
スタイルと分けているもの
レスポンシブ・ウェブデザインとダークモードは重要だが、前者は設計法、後者は配色モードである。さまざまな様式へ適用できるため、独立したスタイルではなく補助用語として分けている。
補助用語で確認する: レスポンシブ・ウェブデザイン / ダークモード
表面より先に、情報の構造を決める
階層、反復性、一覧性が主な課題ならここから選ぶ。違いは、グリッドやインターフェースの仕組みをどこまで表に見せるかにある。
001
042
032
フラットデザイン / ベクターミニマリズム
Flat Design / Vector Minimalism / 2010s–
情報を単純な面と色へ還元し、画面や媒体を越えて扱いやすくする。
見分ける特徴: 均一な面 / 単純図形 / 少ない影 / 明快な色
074
コーポレート・メンフィス
Corporate Memphis / mid-2010s–
単純化した人物、幾何学、柔らかな色で、デジタルサービスを安全で親しみやすく説明する。
見分ける特徴: 誇張した人体比率 / 平面色 / 幾何学植物 / 白い背景
奥行き・素材感・インターフェースの表面
操作部品やパネルに素材の比喩を与える系統。写実性、透過、柔らかさをどこまで許しても明快さを失わないかで選ぶ。
024
スキューモーフィズム
Skeuomorphism / 2000s–2010s
現実の素材や道具の手がかりを借り、未知の操作を理解しやすくする。原理の名なので、Aquaもブラシドメタルもこの原理を特定の製品で実装した姿にあたる。
見分ける特徴: 革・金属・紙 / 立体的な影 / 現実の比喩 / 細かな質感
026
025
073
フルティガー・エアロ
Frutiger Aero / mid-2000s–early 2010s
光沢のあるデジタル技術を、青空・水・草・泡と結び、親しみやすい未来として見せる。同じ光沢でも、Aquaが部品の質感であるのに対し、こちらは壁紙と広告の世界観を指す。
見分ける特徴: 青空と草 / 透明な泡 / 光沢UI / ヒューマニスト書体
ウェブ固有の文化から選ぶ
ウェブ固有の技術的制約、共同体、反動から生まれた系統。媒体らしさを磨き消さず、あえて見せたいときに使う。
021
023
008
ウェブ・ブルータリズム
Web Brutalism / 2014–
ブラウザの既定表示をそのまま画面に出し、整えられたテンプレートの見た目を拒む。HTMLの素の構造が、そのまま様式になる。
見分ける特徴: ブラウザ既定の見出しとリンク / 下線つきの青いリンク / 極端な文字サイズの落差 / 装飾のない罫と余白
031