ブルータリズムWebデザインとは？あえて崩す表現の意図

ブルータリズムとは、装飾を意図的に排し、素材やしくみをそのまま見せるWebデザインの表現です。既定のままの書体、飾らない罫線、余白の少ない詰まった配置、強い色の対比などが特徴になります。

整えられたサイトが並ぶなかで目を引くことは確かです。ただしこの表現には代償があります。読みやすさと、初訪問での信頼感を犠牲にすることです。そして最大の弱点は、意図した「崩し」なのか、単に作りが雑なのかを、訪問者が区別できないことにあります。

この記事では、成立する条件、企業サイトで採用してよい範囲、崩す場合の線引き、そして採用を見送るべき場面を整理します。

ブルータリズムとは何か

もとは建築の用語で、コンクリートを塗装せずそのまま見せる様式を指します。Webに持ち込まれた際も考え方は同じで、仕上げの工程をあえて省き、素の状態を見せます。

重要なのは、これが「整える技術が無い状態」とは別物として設計されている点です。どこを崩し、どこを崩さないかが決まっているからこそ表現として成立します。この判断が無いまま真似ると、ただ完成度の低いサイトになります。

なぜ崩すのか、その意図

理由は主に3つあります。いずれも「他と違って見えること」に価値がある場面で機能します。

• 整ったサイトが並ぶなかで、記憶に残りやすくする
• 作り手の姿勢や価値観を、言葉ではなく見た目で示す
• 整えられた表現に対する不信感を持つ層に、率直さとして受け取ってもらう

3番目は見落とされがちですが、実務では意味があります。過度に整えられたサイトは、業種によっては「よく見せようとしている」と受け取られます。この警戒感を下げる手段として、あえて飾らない見せ方が選ばれることがあります。

ただしこれが機能するのは、訪問者がその文脈を読み取れる場合に限られます。読み取れなければ、率直さではなく準備不足として伝わります。

企業サイトで成立する条件と、しない条件

採用可否は好みではなく、訪問者がどういう状態でそのサイトに来るかで決まります。

多くの企業サイトは下半分に該当します。初めて訪れた人が数秒で信頼できるかを判断し、他社と比べ、必要な情報を探す。この条件が揃っている場合、崩す表現は不利にしか働きません。

企業サイトで何を基準にデザインを決めるかはコーポレートサイトのデザインは何で決まるか｜トレンドを追う前に固めることで整理しています。信頼感を作る要素そのものについては会社案内サイトで信頼感を作る方法｜見た目より先に埋めるべき情報を参照してください。

崩す場合でも、崩してはいけない箇所がある

採用を決めた場合も、全面に適用するものではありません。操作と判断に関わる部分は、崩す対象から外してください。

特にフォームと申込み導線は例外なく崩さないでください。ここでの不便さは、表現として受け取られず、単に使えないサイトという評価になります。フォームの設計は入力フォームの離脱率を改善するデザインの工夫で扱っています。

配色についても線があります。強い対比自体は表現の一部ですが、文字と背景の明度差が不足すると、環境によっては読めなくなります。判断の基準は配色のコントラスト比の基準｜WCAGの数値と、実務での使い方にまとめています。

ミニマルデザインとの違い

どちらも要素を減らしますが、減らす目的が逆です。

失敗したときの見え方の差が、採用リスクの差になります。ミニマルの失敗は「説明が足りない」で済み、情報を足せば回復します。ブルータリズムの失敗は「この会社は雑だ」という評価につながり、回復には作り直しが必要になります。

情報量を減らす判断そのものについてはミニマルなWebデザインが成立する条件｜情報を減らして成果が上がる場合と、下がる場合で扱っています。

採用するなら、期限と撤去の条件を決めておく

見た目の流行には寿命があります。入れる時点で、いつ見直すかを決めておいてください。

1. 適用範囲を決める（全面か、特定のページのみか）
2. 崩さない箇所を明文化する（フォーム、申込み導線、注意書き）
3. 見直しの時期を決める（企画の終了時、サイト改修時など）
4. 撤去したときに通常の体裁へ戻せるよう、指定を1か所にまとめる

実務では、採用範囲を特定のページに限定する方法が現実的です。採用サイト、企画ページ、キャンペーンの告知など、目的が1つで期限があるページであれば、条件が揃いやすくなります。企業サイト全体に適用するより、リスクを抑えたまま効果を得られます。

トレンド表現を採用するかどうかの一般的な判断基準は最新Webデザイントレンドの取り入れ方｜採用する基準と見送る基準を、デザイン要素をどの順で決めるかはWebデザインの構成要素はどの順で決めるか｜好みの議論にしないための順序を参照してください。

よくある失敗

整える技術が無いまま真似る

どこを崩すかの判断が無いと、単に完成度の低いサイトになります。崩さない箇所を先に決めてから着手してください。

企業サイト全体に適用する

初訪問で信頼を判断される場面では不利にしか働きません。特定のページに限定してください。

フォームや申込み導線まで崩す

表現としては受け取られず、使えないサイトという評価になります。操作に関わる箇所は通常どおり作ってください。

文字が読めない配色にする

強い対比と、明度差の不足は別物です。対比を効かせつつ、文字は読める範囲に収めてください。

撤去の方法を決めずに導入する

流行が過ぎたときに作り直しが必要になります。指定を1か所にまとめ、戻せる形にしておいてください。

社内の好みだけで決める

判断材料は訪問者がどういう状態で来るかです。既存顧客が多いのか、初訪問が多いのかを確認してから決めてください。

よくある質問

SEOに不利になりますか

表現そのものが評価を下げることはありません。ただし見出しの構造が崩れていたり、文字を画像にしていたり、読みにくさで離脱が増えたりすると、間接的に影響します。構造と可読性を保ったまま見た目だけを崩すのであれば、問題にはなりません。

採用サイトに使うのはどうですか

条件次第で成立します。応募者に対して社風を示す手段になり、目的も1つに絞られているためです。ただし応募フォームは崩さないでください。応募の手前で離脱すると、表現の効果を測ることすらできなくなります。

アクセシビリティの観点では問題がありますか

崩し方によります。文字サイズを固定する、コントラストを確保しない、操作の順序を乱すといった作りは問題になります。逆に、見出しの構造と操作の順序を保ち、文字が読める配色にしていれば、装飾が少ないぶん扱いやすい場合もあります。

スマートフォンでも成立しますか

画面が狭いぶん、詰まった配置の影響が大きく出ます。パソコンで成立していても、そのまま縮小すると読めなくなることがあります。狭い画面では余白と文字サイズを通常どおりに戻す判断も含めて設計してください。

流行はいつまで続きますか

時期を断定することはできません。ただし判断材料としては、流行の残り期間より「外すときにいくらかかるか」を見るほうが確実です。指定が1か所にまとまっていて低コストで戻せるなら、流行の寿命は大きな論点になりません。

まとめ

ブルータリズムは、装飾を意図的に排して素材をそのまま見せる表現です。整ったサイトが並ぶなかで記憶に残り、作り手の姿勢を見た目で示す手段になります。ただしこの効果と引き換えに、読みやすさと初訪問での信頼感を差し出すことになります。

最大の弱点は、意図した崩しなのか作りが雑なだけなのかを、訪問者が区別できないことです。したがって成立するのは、既に名前が知られている、作り手自身が商品である、情報量が少なく目的が1つ、訪問者が文脈を共有している、といった条件が揃う場合に限られます。初訪問で信頼を判断され、他社と比較され、多くの情報から目的の項目を探させる必要がある一般的な企業サイトでは、不利にしか働きません。

採用する場合も全面には適用しないでください。印象を作る箇所は崩してよい一方、本文の可読性、入力フォーム、申込み導線、注意書きは通常どおり作ります。ここでの不便さは表現として受け取られず、使えないサイトという評価に直結します。現実的な運用としては、採用サイトや期限のある企画ページなど、目的が1つに絞られたページに限定するのが安全です。あわせて、指定を1か所にまとめて低コストで戻せる形にしておけば、流行の寿命そのものは大きな論点ではなくなります。

当社ではデザイン制作において、表現の狙いと事業上の目的を突き合わせたうえで設計しています。企業サイト全体のご相談はホームページ制作をご覧ください。