ウェブ・ブルータリズム
Web Brutalism / 2014– / スタイル / UI表現
ブラウザの既定表示をそのまま画面に出し、整えられたテンプレートの見た目を拒む。HTMLの素の構造が、そのまま様式になる。
ひと目で判断
見た目の特徴
- ブラウザ既定の見出しとリンク
- 下線つきの青いリンク
- 極端な文字サイズの落差
- 装飾のない罫と余白
向いている用途
- ギャラリーやレーベルの告知で、体裁より情報の速さを選ぶとき
- テンプレートで作られた同業の画面と、意図的に距離を取りたいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 既定書体のまま、見出しだけを画面幅いっぱいまで上げる
- 構成
- 段組をやめて縦一列に積み、罫と余白だけで区切る
- 素材
- 地は白か単色、画像は圧縮したまま等倍で置く
- 注意
- 既定表示を装いながら余白と行長だけを整えると、素っ気なさが演出に見え、読者は乱雑さの理由を探したまま読むのをやめる。
- 関連研究
- Brutalist Websites / 既定スタイルシートの復権 / テンプレート化への反動
関連項目
- ブルータリズム建築（Brutalist Architecture）共通する印象：反骨 / 信頼。ウェブ・ブルータリズムとブルータリズム建築の違いを見る
- ニューブルータリズム（Neubrutalism）同じ「UI表現」の系統。ウェブ・ブルータリズムとニューブルータリズムの違いを見る
取り違えられやすい
UI表現をさらに見る
同じ「UI表現」から、共通する印象が多い順に次の項目を選んだ。
- スキューモーフィズム（Skeuomorphism）共通する印象：信頼。
- フラットデザイン / ベクターミニマリズム（Flat Design / Vector Minimalism）共通する印象：信頼。
- グリッチ（Glitch）共通する印象：反骨。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/web-brutalism
- Markdown
- [ウェブ・ブルータリズム（Web Brutalism） — デザインスタイル辞典](https://indexstyle.org/ja/styles/web-brutalism)
- HTML
- <a href="https://indexstyle.org/ja/styles/web-brutalism">ウェブ・ブルータリズム（Web Brutalism） — デザインスタイル辞典</a>