今までの常識を覆す?斬新すぎる「ブルータル」なWebデザインを取り入れたホームページ11選
以前、「2017年上半期に取り入れたい5つのWebデザイントレンド」でもご紹介させていただいたように、「ブルータリズム」と呼ばれるWebデザインのトレンドが注目を集めています。
ブルータリズム(Brutalism)とは、もともと1950年代から見られるようになった建築の形式で、荒々しさを残した打放しコンクリートなどを用いた表現を特徴としています。
「Brutal」とは冷酷で厳しい野生のさまを意味する形容詞で、「生身」(raw)を意味するフランス語に由来しています。
私たちが普段よく見るような、なめらかで繊細なデザインを使ったモダンなホームページとは対照的に、非常に大胆で野生的な印象を持ちます。
また、Webサイトによっては、奇抜でありながらも、1990年代中頃を想起させるようなラフなデザインを採用している場合もあります。
しかし、ブルータルなデザインというのに決まった形式はなく、あくまでも全体的な方向性にしかすぎません。
今回は、「ブルータル」なWebデザインを取り入れたホームページをご紹介します。
実際に実例を見ながら、奇抜で斬新な「ブルータリズム」を体感していきましょう。
ブルータリズムとはどのようなものか?
ブルータリズムは、もともと露出したコンクリートを特徴に持つ、1950年代から90年代に見られるような建築様式を指して使われる言葉でした。
Wasington Post によれば、いわゆる「Webブルータリズム」なる考え方が広まったのは、スイス・チューリッヒ在住のクリエイティブディレクターPascal Deville氏が始めた原点回帰的なホームページを集めたBrutalist Websitesが始まりだと言います。
ブルータリズムは、こんにちの心地のよいホームページとは対照的に、とにかく荒々しく主張の強いのが特徴です。
それはまるで、20年前のYahoo!ジオシティーズが流行していたときのような、「とにかく作ってみる」という作風を思い出させます。
http://abehiroshi.la.coocan.jp/
▲ 俳優・阿部寛さんのホームページは、20年前の「ジオシティーズ」時代を思い出させてくれるホームページとして現在もよく取り上げられています。
ブルータルなホームページは、とにかく表現方法が自由なので、「Webブルータリズム」を明確に定義することはできません。
時には絵文字を並べてみたり、現在では廃止されているBlinkタグを使って見たり、デザイン的にはタブーとされている表現をあえて使ってみたりと、かなり実験的な表現方法が採用されています。
斬新すぎる「ブルータル」なWebデザインを取り入れたホームページ
1. MASSA
ウクライナのキエフで活動するビジュアルアーティストのMASSAさんのホームページです。
1990年代後半を思わせるような構成のホームページですが、作品の中には超現実主義を思わせるような不思議で不気味な作品もあります。
括弧の中に作品を並べるという発想も奇抜です。
2. [Brute]
[Brute]はフランスのTwistudioが手がける「ホエイ」や「プロテイン」といった名前のファッションアイテムを販売するオンラインサイトです。
ハンバーガーメニューや大胆なサイズのメニューを取り入れながらも、画像をむき出しにして表示し、荒々しい雰囲気を表現しています。
3. [Relevant]
[Relevant]はいわゆる「アルゴリズムによる弾圧」(AIが人間を支配して抑圧する支配)に対抗するための思想家コミュニティです。
前衛的でポスト・モダンなブルータリズムが、「アルゴリズムによる弾圧」というテーマとマッチングしています。
UIに使われている青色は「エレクトリック・ブルー」と呼ばれ、報道機関Bloombergのホームページなどでも使われています。
4. Badesaison
Badesaisonはスイスのチューリッヒに2014年に作られたグラフィックデザインスタジオのホームページです。
トップページを訪れるとアイコンが爆弾マークになり、クリックすると作品を盛大に壊すエフェクトを楽しむことができます。
右にある「ENTER」をクリックすると、グラフィックデザインスタジオで作られた作品集を閲覧することができます。
5. [Hermicity]
[Hermicity]はイーサリアムのブロックチェーンを使って、できるだけ社会的組織に属さずに生きていく隠遁的ライフスタイルを提唱しているVitalik Buterin氏の理想郷を紹介しているホームページです。
まさにテーマ自体がある種の反社会性をはらんでいるので、ブルータルなホームページとマッチしています。
ページのトップでドローンが水や食料を運んでくれているアニメーションがとても印象的です。
6. Juice Box
Juice Boxはコネチカット州ニューヘイヴンにある天然の食材を使ったレストランです。
縦型のメニューが非常に印象的で、マウスカーソルがくだものに変身します。
素材をそのまま使ってみるという点では、ブルータリズムに通じるところがあります。
7. [the loop of sense]
[the loop of sense]はさまざまなGIFアニメーションが配信されていますが、なんとページ下部ではGIFアニメーションがプラカードを持って抗議をしており、肝心の中身が読みにくいという自由なホームページになっています。
本文の前にあるカードはドラッグアンドドロップで動かすことができるので、うまく動かすことができれば、詳細説明を読むことも可能です。
8. Armin Unruh
Armin Unruhはドイツ・ベルリン在住のWebサイトデベロッパーであるArminさんのポートフォリオサイトです。
中央にある立方体のようなものを上下に動かすことで、作品を見ることができるというユニークな閲覧方法になっています。
実際に触ってみて体感するという点も、ブルータルなWebサイトによく見られる特徴です。
9. 水曜日のカンパネラ
水曜日のカンパネラは2012年の夏にYouTube配信から音楽デビューしたユニットです。
公式ホームページでは、油絵のような独特な筆使いと、福笑いのような切り絵が印象的に配置されています。
ナビゲーションをトップに置き、ユーザビリティを残しつつ、マウスを動かすと絶妙なエフェクトが入る、かなり実験的なページとなっています。
10. きゃりーぱみゅぱみゅ
きゃりーぱみゅぱみゅさんのホームページでは、PV自体にブルータルな作風を持たせ、全画面で動画を再生しています。
スクロールするごとに色が変わるグラデーションレイヤーを重ねるなど、他のサイトには見られないユニークなデザインが特徴的です。
11. やくしまるえつこ
歌手・作詞・作曲家のやくしまるえつこさんのホームページも、非常に実験的なホームページであると言えるでしょう。
独特なペン画がアニメーションになっており、マウスカーソルを動かして初めて何ができるかが分かるようになっており、ユーザビリティの観点で言えば決して素晴らしいとは言い切れませんが、世界観の演出がうまくできている例だと言えるでしょう。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ナビゲーション
- ナビゲーションとは、もともと「目的地までの経路」や「道順案内」を意味する英単語です。しかし、インターネットの分野では、ホームページにある主要コンテンツをまとめたリンクを指します。これがあることで、ユーザーは目的のページがどこにあるかを短時間で見つけることができます。また、検索エンジンのクローラー(検索ロボット)に対して、効率的にサイト内を巡回させるという効果もあります。 ナビゲーションには「グローバルナビゲーション」と「ローカルナビゲーション」の二つがあります。
- ユーザビリティ
- ユーザビリティとは、ホームページの使いやすさのことです。万人にとって使いやすいホームページは存在しませんが、運営者はターゲットとするユーザーに便利に使ってもらうために、優先させることや割り切ることを検討し改善する必要があります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- PV
- ページビューとは、ホームページにおいて閲覧者が実際に見たページのページ数を言います。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ユーザビリティ
- ユーザビリティとは、ホームページの使いやすさのことです。万人にとって使いやすいホームページは存在しませんが、運営者はターゲットとするユーザーに便利に使ってもらうために、優先させることや割り切ることを検討し改善する必要があります。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング