デザインスタイルとは

デザインスタイルは、色・書体・余白・角・線・影・面の作り方を一つの規則に揃えて、画面が読者にどんな態度で語るかを決める選択です。UIスタイル、ビジュアルスタイルとも呼びます。

ひと目で#

• 揃えるのは部品ではなく、画面全体の規則である。 余白の刻み、文字の対比、色の役割、線の太さ、影の段まで、同じ判断が通っている状態を指します
• 制作の現場では UIスタイル、ビジュアルスタイル とも呼びます。指しているものは同じなので、この資料ではいちばん通りのよい デザインスタイル に揃えます
• ミニマリズムやフラットデザインなどの名前は、その規則一式の呼び方です。流行の名前ではなく、読者が期待している態度に合う規則を1つ選ぶ。決め方はデザインスタイルの選び方にあります

同じ内容でも、通す規則が違えば読者に届く態度は変わります。下は同じ架空の珈琲店を20のデザインスタイルで組んだ実例です。違うのは色、書体、角、線、影、面、段組だけです。部品の見本帳ではなく、規則が画面全体へ通った状態を見ます。

使い分け#

間違えやすいところ#

図を大きく見る

図の中身を文字で読む

• ✕ 部品だけ借りて混ぜる　○ 1つのデザインスタイルの規則で通す
• 部品ごとに、従っている規則が違う　例: スイススタイルなら格子と左揃え
• 半透明の板と大きな角丸
• グラスモーフィズムの規則
• 太い枠とずらした影
• ネオブルータリズムの規則
• 広く残した余白　ミニマリズムの規則
• 直すたびに、別の規則とぶつかる
• 強調は1色、角丸も影もなし
• どの部品も、同じ規則で説明できる

• ✕見た目の部品だけをまねるデザインスタイルは組み立ての規則。部品を借りても揃わない
• ✕複数のデザインスタイルを混ぜるどちらの規則にも従わない画面になる
• ✕流行を理由に選ぶ数年で古びる。読者の期待から選ぶ
• ✕ニューモーフィズムやグラスモーフィズムを全面に使う境界が読めず、コントラストが取れない
• ✕ダークUI で長文を読ませる白地より読み疲れる。行間を広げ、字数を減らす
• ✕名前だけで発注する「フラットで」では合意にならない。図で示す

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

例として、リニューアルの打ち合わせで「今っぽく、モダンに」と言われ、前任者はグラデーションと角丸と半透明のカードを一度に足していました。どのデザインスタイルの規則にも従っていないので、部分を直すほど寄せ集めに近づきます。やり直しは、デザインスタイルを1つ名指しするところからです。上の実画面のとおり、載せる情報が同じでも態度はデザインスタイルで決まります。発注者とは名前ではなく画面で合意し（「フラットで」は合意になりません）、決めたら禁止も一緒に決めます。スイスなら角丸・影・グラデーションが禁止リストに入ります。

確認する#

• 画面のどの部品も、選んだ1つのデザインスタイルの規則で説明できる
• そのデザインスタイルの「弱いところ」が、この案件に当たらないと言える
• 禁止に決めた装飾が、1か所も残っていない

使えるパターン#

• 深色パネル

このページで扱う語#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品は見た目を決めるにまとめてある。逆引きには全188件。

デザインスタイルを比べる#

候補が2つに絞れて決めきれないときに。左右にデザインスタイルを選ぶと、上の実例と同じ実物サンプルが2枚並び、同じ場所を横に見比べられます。下の表には、書体・角・線・影・面・形・段組の7項目で両方の規則が並びます。選んだ組はこのページの URL に残るので、そのまま人に渡せます。

選び替えは JavaScript で動きます。無効の場合は、上の2枚と表が既定の組（スイススタイルとネオブルータリズム）のまま読めます。

出典#

• Interaction Design Foundation「What is User Interface (UI) Design?」
• Material Design 3

関連#

• デザインスタイルの選び方位置から決める
• ブランドの構成態度を先に決める
• コントラストと色覚デザインスタイルより先に守る線
• AI Slopを避ける既定の見た目から離す
• 実物のデザインシステム実物で見比べる