ブルータリストのWebデザイン、ミニマリストのWebデザイン、そしてWebUXの未来

ウェブサイトはより混沌とし、雑然としていて、洗練されていませんか？ 良いデザインのルールは破られていますか？ ウェブは醜いですか？ これは新しいトレンドですか？

あなたがほとんどのデザイナーのようで、何が起こっているかに細心の注意を払っているなら、あなたはしばらくの間、残忍という言葉が投げかけられているのを聞いたことがあるでしょう。 ブルータリストのWebサイトは、長い間業界のベストプラクティスであったユーザーフレンドリーなインターフェイスから離れ、代わりに不完全な手書きのHTMLサイトに焦点を合わせています。 デザイナーは、私たちが知っているようにUXのルールを取り除いており、すべてが少し混乱しているように感じています。

洗練された現代的なデザインの信条は非常にありふれたものであるため、私たちはそれらを文体的な選択とはほとんど考えていません。 「良い」ウェブデザインとは、一般的にミニマリズムのルールに従うものを意味します。 クリーンでシンプルな、すっきりとしたインターフェース—しかし、これが常に当てはまるとは限りません。 時計を数十年巻き戻しましょう。

ウェブの誕生

Webデザインは、最初のWebサイトが公開された1991年から長い道のりを歩んできました。 インターネット革命は、最初のWebサイトが第1世代のHTMLを使用したテキストベースのみであることに始まりました。

それから、誰もが確かに覚えているすべてのそれらのクレイジーなアニメーションサイトでFlashが来ました。 CSS（Cascading Style Sheets）の開発が始まり、Webデザイナーは、背景色、テキストサイズ、コードのテキストスタイルなどの拡張機能をさらに細かく制御できるようになりました。 JavaScriptは、ドロップダウンメニュー、高度なナビゲーション、およびエラーチェック付きのWebフォームを提供してくれました。

当初、「ウェブデザイン」の本当の意味は誰も知らず、ウェブのパイオニアたちは試行錯誤しながらデザインパターンを確立していました。 Webデザインの初期の時代は、形式的なセマンティクスとアクセシビリティにほとんど注意を払わず、代わりに構造よりも美学を選択するレイアウトを使用していました。

設計者は、デザインを構築および構造化するために、テーブル、ネストされたテーブル、非表示の1ピクセルスペーサーファイルなどのHTML要素に大きく依存し、より複雑な複数列のレイアウトを作成できるようにしました。 それはいくつかのかなり鈍いインターフェースになりました。

2000年代半ばに、ウェブサイトはその構造の背後にあるより慎重な思考で生まれました。 ナビゲーションはブラウザの上部にあり、カテゴリは左側のバーに配置されていました。 Webページは短く狭く保たれ、ユーザーにスクロールを強制しないようにコンテンツが多くのページに分散されていました。 設計者は、何が効果的であるかを学び、より良いサイトを構築し始め、その過程で標準とベストプラクティスを確立しました。

レイアウトオプションが増えるにつれ、どこにでも画像やテキストでいっぱいのノイズの多いUIが混在するようになりました。 ただし、一部の規律ある設計者は、依然としてミニマリズムを選択しました。

ミニマリストの美学

デザインのトレンドは行き来しています。 ただし、ミニマリズムは、古くから存在しているデザイン言語です。 これは、デザインの最も単純で最も重要な要素を利用することによって達成される、フォームの単純化に焦点を当てたデザイン哲学です。

ミニマリズムはウェブデザインに限ったことではありません。 そのデザインの理想を包含するあなたの周りのすべての要素について考えてください。 ミニマリストのデザインを、Nest、Apple、Herman Miller、および多くのミニマリストのデザイナーに影響を与えた他の多くのデザインと簡単に結び付けることができます。

ハーマンミラーのデザインが今日でも素晴らしい理由は何ですか？ それらは、時代を超越した外観を持つ単純にうまく設計されたオブジェクトです。 彼のデザインは現代の家やインテリアに非常によく合い、今日でも新鮮でモダンな感じがします。 彼の作品の多くはミニマリストの外観で設計されており、特定の流行に実際に結び付けることはできません。 彼らはまだ時の試練に耐えます。

彼の時代の最も有名なグラフィックデザイナーの1人であるJosefMuller-Brockmannのミニマリストのデザインは、 HermanMillerのデザインと非常によく似ています。 Muller-Brockmannは、1940年代から1950年代にかけて、スイススタイルのデザインの形でミニマリズムを受け入れ、習得しました。

彼のグラフィックデザインから、余分な装飾や余分な装飾は取り除かれました。 彼のレイアウトのすべての要素には目的がありました。 このアプローチの背後にあるデザイン思考は、ミニマリストのデジタルデザインを今日非常にうまく機能させるものです。

ミニマリズムがデジタル時代にどのように確立したか

歴史は常に私たちに追いつく方法を見つけます。 印刷デザインの場合と同様に、ミニマリズムとその背後にある哲学は、Webデザインやその他のデジタルアーティファクトに追いつきました。 ほんの数年前、光沢のあるボタン、行、テキストの段落でWebサイトがどのように見えたかを考えてみてください。すべてが、注目を集めています。

次に、デザイナーがデジタル空間の現実のオブジェクトを模倣した要素を設計するというスキューモーフィズムのトレンドが起こりました。 AppleのiCalの革の詰め物を覚えていますか？

最小限のデザインは実際には意図的なものです。 これは、不要なものをすべて取り除き、コンテンツに重点を置いて最大の注目を集めることになっている要素に焦点を当てた設計アプローチです。

ミニマリストデザインのメリット

ミニマリストのデザインアプローチは、単にその見た目よりも多くの理由で流行しました。 ユーザーの行動、デザイン思考プロセス、およびコンテンツファーストのデザインプロセスの台頭についての理解が深まったことで、この思考を前進させることができました。 最近のモバイルユーザーの大幅な増加は、UXと使いやすさに重点を置いた、ミニマリズムへの強力な加速ポイントとなっています。

ユーザーは常に外出先でインターネットにアクセスしているため、製品設計者は、その瞬間のコンテキストで絶対に不可欠なものを提供することに集中する必要があります。その最も基本的な機能。

現在、モバイルの使用はすべてのWebアクセスの半分以上を占めており、この割合は増加するだけです。 レスポンシブデザインはゲームチェンジャーであり、デザイナーに「異なる考え方」を強いています。 今日、これまで以上に、レスポンシブまたはアダプティブデザインは、ミニマリストデザインアプローチが非常に重要であるモバイルの世界で必要です。

平均的なユーザーにとって、ミニマリズムはおそらく設計するのが最も簡単なことのように思われます。 最小限のビジュアルコンテンツを使用して完璧なバランスを実現し、最大限のエレガンスを備えた基本的な要素のみに焦点を当てることは、実際には非常に困難です。

ミニマリズムの未来

ミニマリズムは、実際のトレンドや単純な通過段階ではなく、時代を超越した概念であり、優雅さと洗練さを放っていると考える必要があります。 時代を超越した古典的ですが、20世紀初頭の実装以来すでに見てきたように、進化し、改善されます。

たとえば、Googleのマテリアルデザインは、ミニマリズムに着想を得た「フラット」デザインアプローチの最初の主要な進化の1つでした。 Googleのデザイナーは、物事をシンプルかつミニマリストに保ちながら、影の効果と動きと奥行きの概念を使用してデザイン言語を強化しました。 マテリアルは、実際のマテリアルを模倣するという特定のひねりを加えたフラットなデザインを採用しています。

ミニマリズムの欠点

人生の他の要素と同様に、私たちは常に長所と短所を見る必要があります。 多くの人が、今日のWebサイトにはフレーバーがなく、ほとんどすべてが似ていると主張しています。 ご存知のとおり、大きなヒーロー画像、テキストをオーバーレイしたビデオ、テキストを含むアイコンの列などです。 だれでも数分で時間をかけて、互いに非常によく似た10のサイトを思いつくことができます。 これは、絶えず変化するオンラインの行動や好みを反映していますか？

デザインの一貫性と一般的なユーザーの行動のためのデザインは、すべてのデザインで非常に重要ですが、ユニークであることの価値を忘れることはできません。 私たちは怠惰になりましたか、それとも私たちの考えを独自性からより効果的なユーザーエクスペリエンス戦略にシフトしたのでしょうか？

Webデザインにおけるブルータリズム

その頑丈さと快適または簡単に見えることへの懸念の欠如において、残忍さは、今日の遍在するミニマリストのウェブデザインの軽さ、楽観主義、および軽薄さに対する若い世代による反応として見ることができます。

好きな人もいれば嫌いな人もいれば、単に理解できない人もいます。ブルータリストのウェブサイトです。

例としてCraigslistを取り上げます。 Craigslistは、ブルータリストのWebサイトの「おじいちゃん」と見なす必要があります。 見た目に美しいものではなく、www.awwwards.comで取り上げられることはありません。 黒のテキスト、青のリンク、白の背景。 かわいくないです。 それが機能するからである必要はありません—そしてそれは本当にうまく機能します。 煩わしさや余分な可動部品なしで、購入または販売する必要があるものを見つけることができます。

1996年の設立以来、Craigslistは、その非常に実用的なデザインにもかかわらず、またはおそらくそのために、その人気を維持してきました。 過去20年以上にわたって、デザインに大きな変化はありません。

おそらくCraigslistの例に触発されて、ブルータリストスタイルが復活しています。 以下は、ブルータリストスタイルを使用した優れたデザインの優れた例です。

これらのブルータリストのウェブサイトは、大きな意味で注目を集めています。 なぜこれらのウェブサイトは突然とても人気があるのですか？ ウェブの均質化に飽きたデザイナーもいるのでしょうか？

UXデザインが最も重要であり、ユーザーの行動とコンテンツファーストのアプローチが重要である時代には、これらのサイトのUXは（意図的に）悪いものです。 ミニマリズムの原則に反して、これらのデザインは、レイアウトがいたるところにあるテキストと画像のコラージュと対面しています（ここでも意図的に）。

ブルータリズムの簡単な歴史

ブルータリストのデザインスタイルは新しいものではありません。 ウィキペディアで簡単に検索すると、スタイルは実際には1950年代から1970年代半ばのブルータリスト建築に由来していることがわかります。 ブルータリズムの後に、ミニマリズムが鍵となるモダニズム建築運動が続いたのはおかしい。

ル・コルビュジエは、この運動の最大の先駆者の1人でした。 彼のキャリアは、ヨーロッパ、日本、インド、南北アメリカで設計された建物で50年に及びました。

この用語は、ル・コルビュジエが材料の選択を「打放しコンクリート」と表現したように、「生」を意味するフランス語の「打放しコンクリート」に由来しています。 超機能主義のデザインは、モダニズムに指をさすかのように、実用性を提供するためだけに設計されたように見えました。

ブルータリズムは大量生産社会に立ち向かおうとし、仕事をしている混乱した強力な力から荒っぽい詩を引きずり出します。 これまで、ブルータリズムはスタイリスト的に議論されてきましたが、その本質は倫理的です。 –アリソン＆ピーター・スミスソン、新しいブルータリズム、建築デザイン（1957年4月）

ブルータリストのデザインは、形より​​も機能を選択して、外観を丸く拒否します。 ブルータリストの設計者は、最小限の労力と入手可能な最も安価な材料で設計を実行し、より正直で反ブルジョア的な結果を達成することに誇りを持っています。

デジタル時代のブルータリズム

Bloombergは、ニュースサイトに独自の方法でこのスタイルを採用しています。 デザインはほとんど派手で、明らかに生の機能に焦点を当てています。

ブルータリズムは確実に復活しています。 醜い、生の、従来のデザインからの脱却、クレイジーなホバー効果、表面的な装飾品がいたるところにあります。 多くの純粋主義者は、この傾向を厳しく、荒く、険しく、不快で、対立的で、冷笑的であると考えています。 です。 わざと。

ブルータリズムは、デザインに対してより原始的なアプローチを採用しており、Webデザインの核心であるコードに焦点を戻します。 ブルータリズムはしばしば「醜い」デザイントレンドとして描かれますが、私たちはそれを超えて見なければなりません。 ブルータリスト運動の背後にある哲学は、物事を「醜い」ものにするのではなく、生々しく飾り気のないものにすることです。

今日のブルータリストサイトは、90年代のDIY Webに基づいており、美しいファサードの背後に機能を隠すのではなく、裏返しのアプローチに焦点を当てていると言えます。

人気のソーシャル共有サイトRedditのUIデザインは、申し分のない生々しく箱型で、90年代後半のウェブタイポグラフィ、洗練されていない重いコントロール、そして垂直方向の呼吸の余地がほとんどありません。

デザイナーのPierreButtinは、一連の再設計されたモバイルアプリで、ブルータリズムを新たな極限にまで引き上げました。 ブルータリストの再設計というタイトルの彼の最新のプロジェクトでは、Buttinは、Facebook、Instagram、Twitter、およびその他の人気のあるアプリを、テキストを多用したレイアウトとフラットなデザインで、ブルータリストスタイルでレンダリングします。

ブルータリズムとミニマリズム

ブルータリズムとミニマリズムは、比較的見られるべきではなく、物事を見る新しい方法とデザインへの別のアプローチとして見られるべきです。 ブルータリズムは、今日のサイトやアプリの均質化に反対するものですが、デザイナーがブルータリストのアプローチを使用してWebサイトのデザインを開始する前に、まず、どのルールを破るのかを知る必要があります。

従来のミニマリストデザインは、残忍なものに取って代わられることはありません。 ブルータリズムは、現状に挑戦するデザイン文化、つまり「最高」と言われることにうんざりしている文化と見なさなければなりません。

次のプロジェクトでこれらのスタイルを選択するとき、正しいことも悪いこともありません。 それでも、次のWebサイトやアプリをブルータリストのデザインスタイルで使い果たしてデザインする前に、オーディエンスを知っていることを確認してください。 あなたが会社とあなたの聴衆がそれを高く評価すると思うならば、危険を冒してください。

ブルータリストのウェブデザインは注目を集めており、ブランド認知度は非常に急速に高まっています。 ルールは破られるように作られています。 あえてウェブをウェブにします。 少し変わっていても、あえて目立ち、少し大胆になりましょう。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

Toptal Designブログでさらに読む：

• デザインの原則とその重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• ゲシュタルトのデザイン原理を探る
• Adobe XDとSketch–どのUXツールがあなたに適していますか？
• トップデザイナーが使用する10のUX成果物