STYLE PROFILE
ミニマリズム
Minimalism
不要な要素を減らし、少ない色と余白で必要な情報を際立たせるデザイン表現。
ミニマリズムの代表配色例
| 色 | 役割 | 比 | 文字に使う目安 |
|---|---|---|---|
#242A30 | 文字・線 | 13.25:1 | 本文の文字にも使える |
#647583 | 主色 | 4.35:1 | 大きな文字や図形なら使える |
比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。
ミニマリズムのプロンプト例
ミニマリズム風に、必要な要素に絞った簡潔な構成、余白を広く取る配置、色数や装飾を抑えた見せ方を取り入れてください。
ミニマリズムの主な視覚的特徴
- 必要な要素に絞った簡潔な構成
利用者の目的を支えない画像や線、装飾を省き、残った要素を目立たせます。画面の要素が多いほど、利用者が処理しなければならない情報も増えるためです。
- 余白を広く取る配置
要素を減らしてできた何もない空間（余白）を広く残します。多くのデザイナーは、利用者の注意を大切な内容へ向け、内容を読み取りやすくするための道具として余白を使います。
- 色数や装飾を抑えた見せ方
白・黒・灰色の濃淡か、1〜2色のアクセント色に絞り、影やグラデーションのような質感も省きます。アクセント色は、押せる部分など大事な要素を示すのに使われます。
ミニマリズムが向いている成果物
要素と色を絞って余白を確保し、事業、商品、作品そのものへ視線を集められる。
装飾を減らして情報のまとまりを余白で示し、数値や文章、手順を追いやすくできる。
名称と必要な情報に絞り、少ない色と余白で控えめな外観にまとめられる。
ミニマリズムとは
ここでのミニマリズムは、ウェブやUIのデザインの考え方です。2000年代初めに始まったウェブデザインの潮流で、美術や、人とコンピューターの関わりを扱う分野（HCI）の先行する動きから考え方を受け継いでいます。
利用者の作業を支えない要素や内容を取り除き、画面を簡潔にするのが基本の方針です。112のサイトの分析では、平面的な表現、限られた配色、少ないUI要素、広い余白、大胆な文字使いが主な特徴でした。混同されやすいフラットデザインが質感やアイコンを指すのに対し、ミニマリズムは内容・機能・配置の方針全体を指します。
源の1つは第二次世界大戦後の美術のミニマリズムで、建築家ミース・ファン・デル・ローエの言葉「Less is more」は、のちにウェブのミニマリズムの合言葉になりました。HCIでは、エドワード・タフトが1983年にデータインク比を示し、ヤコブ・ニールセンが使いやすさの10原則の1つに「美的で最小限のデザイン」を挙げました。
2000年代半ばから、広い余白や限られた配色がウェブに現れ、グーグルがその先駆けとされます。2010年のレスポンシブ・ウェブデザインの登場や、2013年のiOS 7の刷新が広まりを後押ししました。一方で、必要な内容まで削ると使いにくくなるとも指摘されています。
見分けるときは、次の点を確かめてみてください。
- 目的に関係のない飾りが省かれている
- 余白が広く取られている
- 色が白・黒・灰色の濃淡や、少数のアクセント色に絞られている
これらが揃っていると、ミニマリズムの特徴を持っていると言えるでしょう。
実例を見る
Google画像検索で「ミニマリズム」を見る（新しいタブで開きます）検索結果の画像はこの図鑑には保存しません。出典
- The Characteristics of Minimalism in Web Design（新しいタブで開きます）Nielsen Norman Group
- The Roots of Minimalism in Web Design（新しいタブで開きます）Nielsen Norman Group
- 10 Usability Heuristics for User Interface Design（新しいタブで開きます）Nielsen Norman Group
名称・説明・主な視覚的特徴と「ミニマリズムとは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集：小林 秀樹（セカヤサAIブログ）
