ブルータリズムのWebデザイン：編集できる実例
ブルータリズムのWebデザイン例
ブルータリズムのWebデザイン：ライブ実例とコピーできるCSS | We.Inc
ブルータリズムとネオブルータリズムのWebデザインを、4つのオリジナルのライブ実例、太い枠線と硬い影のボタン作成ツール、コピーできるCSSで解説します。
ブルータリズムのWebデザインは、ページを生の構造にまでそぎ落とします。デフォルトやシステムのフォント、見える枠線、装飾のないリンク、最小限の飾りです。より親しみやすい派生形のネオブルータリズムは、太い黒の輪郭線はそのままに、フラットな明るい色とずらした硬い影を加えます。どちらも主にCSSの選択で表現できるので、下の実例は編集でき、すべてのルールをコピーできます。
ブルータリズムとネオブルータリズムの比較
- 文字
- システムフォントや等幅フォント、多くはデフォルトのサイズ
- 太いグロテスク体やシステムのゴシック体を大きく
- 色
- 黒、白、あればリンクの青1色
- 黄、ピンク、ミントなどのフラットで鮮やかな塗り
- 枠線
- 1pxの罫線、表、見える箱
- 2〜4pxの黒い実線の輪郭
- 印象
- 生々しく、文書のよう
- 遊び心があり、ステッカーのよう
ブルータリズムのサイトを集めたギャラリーは、中身を確認できないスクリーンショットばかりです。ここにある実例はすべて、素のHTMLとCSSで書いたオリジナルのデザインで、ライブで描画され、その場で編集でき、自由にコピーできます。さらに、多くの人が探しているネオブルータリズムのボタンを作るツールも用意しています。
- ボタン作成ツールで、枠線の太さ、影のずらし幅、塗りの色、角丸を調整します。
- プレビューにカーソルを合わせて押し込む効果を確かめ、CSSをコピーします。
- 4つの実例までスクロールし、コードを編集して結果の変化を確認します。
- 派手な配色を公開する前に、アクセシビリティの注意点を確認しましょう。
- 硬い影にはぼかしの値は不要です。box-shadowの3つ目の長さを0にすると、くっきりしたずらしのブロックになります。
- 鮮やかな黄、ミント、ピンクの上の黒い文字はたいてい読みやすいですが、白い文字はたいてい読みにくくなります。組み合わせごとに確認しましょう。
- 生々しいことは雑であることではありません。枠線や文字が粗く見えても、余白の単位は一貫させましょう。
- フォーカスの輪郭線は見えるように太く残しましょう。このスタイルにもよく合います。
- このスタイルは、ポートフォリオ、ZINE、イベント、デザイナー向けのツールに使いましょう。銀行やクリニックのサイトで使う前には、利用者に試してもらいましょう。
よくある質問
ブルータリズムのWebデザインとは何ですか？
Webページを磨き上げる代わりに、その骨組みを見せるスタイルです。デフォルトのフォント、硬い角、見えるグリッドや表、下線付きのリンク、少ない画像が特徴です。目指すのは美しさではなく、正直さと速さです。
ネオブルータリズムとは何ですか？
ネオブルータリズムは、ブルータリズムの太い輪郭線と無骨なレイアウトを取り入れ、フラットで明るい色、太い文字、塗りつぶしのずらし影と組み合わせたものです。大胆でカジュアルに見せたいプロダクトのランディングページやアプリの画面でよく使われます。
CSSでネオブルータリズムの影を作るにはどうすればよいですか？
box-shadowにxとyのずらし幅、ぼかし0、単色を指定します。例：box-shadow: 6px 6px 0 #000。これをborder: 3px solid #000と組み合わせます。ホバー時に要素を影の方向へ動かし、ずらし幅を小さくすると、押し込んだような感触になります。
ブルータリズムのデザインはアクセシビリティに悪いのですか？
本質的にはそうではありません。素のHTML、本物のリンク、はっきりした輪郭線は、むしろアクセシビリティが高いことがよくあります。問題になるのは、コントラストの低い配色、小さすぎるデフォルトの文字、フォーカススタイルの削除です。どのサイトでも確認するのと同じように、これらを確認しましょう。
このスタイルが合う場面
- ブルータリズムは、個性やDIY精神を打ち出したいサイトに向いています。個人ページ、スタジオ、出版物、音楽やイベントのサイトなどです。飾り気がないため、ダウンロードする画像やWebフォントが少なく、ページも軽くなります。
- 医療、金融、購入手続きなど、訪問者に安心感を与える必要がある場面では合わせにくくなります。そうした場面では、落ち着いたレイアウトに、枠線付きの行動喚起ボタンのようなブルータリズムのアクセントを1つだけ加えるのが良い妥協策です。
真似せずに自分らしく仕上げる
- ブルータリズムのページの多くは、テンプレートではなく共通の語彙を持っているだけなので、誰かから借りる必要はほとんどありません。見えるグリッド、番号付きのセクション、ティッカーなど、構造上のモチーフを1つ決めて、一貫して繰り返しましょう。
- 配色は黒と白に、フラットなアクセントカラーを多くても2色までにします。あとはグラデーション、写真、柔らかい影の代わりに、余白、枠線、文字の大きさで表現しましょう。
4つのオリジナル実例
生の文書のようなトップページ
システムの等幅フォント、デフォルトの青いリンク、装飾のない表です。見た目全体がわずか数個のルールでできています。
ネオブルータリズムの料金カード
カードとボタンの両方に、太い輪郭線、フラットな塗り、硬い影を付けています。
グリッドが見えるギャラリー
枠線がグリッドの線を兼ねているので、構造そのものが装飾になります。
ブルータリズムのニュースレター登録フォーム
ラベル付きの入力欄とボタンに太い輪郭線を付け、スタイルに合う太いフォーカスリングを表示します。
ネオブルータリズムのボタン作成ツール
枠線、影のずらし幅、塗り、角丸を調整してください。初期値では次のCSSが出力されます：
枠線：{n}px
影のずらし幅：{n}px
角丸：{n}px
塗りの色
始める
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る