デザイン

デザイン

三角形を多用したWebデザイン トレンドを取り入れた海外サイトデザイン例10選 幾何学的図形の美しさ

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、The Design Trend of Using Triangles in Web Design
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

513 views

読了時間 : 約4分25秒

あなたは疑問に思うかもしれません:”三角形の何が特別なのか?単なる単純な幾何学的形状ではないか。完全主義を示唆する円や正方形でもないのに“ええ、全くあなたが正しいでしょう(最初は、ですが)。特別なことは何もありません。

 

しかし、これは史上初のポリゴン、すなわち多角形です。神が与えた数、三つの辺と角度から成り立っているのです。実際の生活では、身の回りは正方形や長方形が取り囲んでいて、三角形は珍しいのです。周りを見渡してください。壁、窓、ドア、テレビ、携帯電話、さらにはキーボード上のキーさえ、すべてが立方体または平行六面体です。

 

これこそが三角がとても特別なわけです。三角形はいつも目を引きます。Flatiron Buildingを覚えておいてください。非常に素晴らしいビルです。現実の世界では、三角形がきちんと表されている建物を見つけることは難しいのです。しかし、オンラインが広がりを見せる中、特にウェブデザインにおいては不可能なことではありません。

 

相互作用のある動かない球体は、近代的な最高級のソリューションを使えばうまくいきます。この一連の流れの中で、デコレーションとして三角形を使用することは理にかなっています。それは正に自然な流れと言えるでしょう。正直なところ、三角形の使用は鮮烈なデビューとなりました。

 

Cap Gun Collective

 

何年もの間、幾何学的形状はデザイナーの心を掴んできました。幾何学的形状は確かにトレンドと言えます。私たちが正方形が最先端だったのを目の当たりにしていたのはそんなに前ではありません。スプリットスクリーンは現在も使われており、さらに進化しています。キャップガンコレクティブを見てみましょう。彼らは、既存のスクリーンを分割する方法をやめ、画期的な新しいビジョンを打ち出しました。それは画面を対角線上に半分に分割する方法で、そうすることで2つの三角形は非常に目立ちます。これは、デコレーションとしての機能だけでなく、メッセージを眼で見て理解出来る独自のソリューションと言えます。

 

 

 

Huru

 

何よりもまず、デコレーションとして三角形を利用するとなると、背景に溶け込むことを期待します。たとえば、Huruの場合を考えてみましょう。極細のラインで囲われた典型的な直角三角形– ありふれているでしょうか?そうではないでしょう。ここでの三角形は、他の細かい装飾と素晴らしく合致した美術的観点において不可欠な要素と言えます。接触面に更にレイヤーを追加することで、左の文字のデザインが反映され、シンメトリーが目立ちます。ある点では、ここで紹介されているバックパックは我々に次のことを思い出させてくれます。空間全体を満たすシンプルさと軽さ、その主張を支持することについて何も言えないことを。

 

 

 

Bild Werk / Cworks

 

他の2つの簡単な利用法は、Bild WerkとCworksのホーム画面で見ることができます。ウィーンを拠点とする学際的なスタジオのチームは、トップページの一番上を華やかにするためには、三角形を主なイラストとして使うことを提案しています。それらの三角形は先程説明したものよりも複雑です。それは3次元でさえあります。三角形がテキスト部分でどのようにバランスを取っているかに注目してください。とても目立っていますね。その壊れやすいラインスタイルと空白が目立つおかげで、明るさを感じることが出来るのです。さらに言えば、スタジオ特有のマルチ分野だけでなく、ある特定のエンジニアリング品質を備えた創造性をも表現しています。

 

 

 

Cworksのクリエイティブチームは、背景の一部として三角形を活用しています。オレンジ一色のキャンバス全体とは対照的に、スクリーンの中央部に注目が行くようにしています。一方では、デザインに趣を添える遊び心のある機能です。また一方では、控えめではあるものの目を引く存在です。これはまさしく一石二鳥と言えるでしょう。

Takeshi Oid / Detaen Consulting

 

以前のソリューションを次のレベルに引き上げて、もっと興味をそそる魅力的なものにしましょう。

 

それに相応するものとして、Takeshi OidとDetaen Consultingの個人的な画集も考えてみます。Takeshi Oidの個人的な画集のフロントページには、一種の抽象主義精神を持つ現代的なイラストが描かれています。

 

平らな三角形は、オンラインの訪問者をローダーとして歓迎します。徐々に三角形はピラミッドへ変わり、サイトの真ん中に位置どります。ご想像どおり、トップページ上のデザインは動く仕様になっています。この視差効果のおかげでトップページは3次元を感じる仕上がりになっています。

前の例と同様、視差効果はソリューションの要と言えます。Detaen Consultingのチームは、マスキングと視差という2つの人気のあるテクニックを組み合わせ、素晴らしい効果を発揮しています。それは簡潔ながら、オリジナリティがあります。

Aluxe Reach Digital / Bonnefooi Roosendaal

 

以前に述べたように、三角形は背景のデザインの一部として使用できます。Aluxe、Reach Digital、Bonnefooi Roosendaalを考えてみましょう。最初の2つは、画面の半面の片方を、三角形を使用してさらに2つに分割することで見る人の興味を引いています。

 

どちらの場合も、各三角形は、他の三角形とは対照的に単色で表示されます。最初の例では、キャッチフレーズは画面の中心に配置されており、三角形と画像をほぼ同等に扱っています。後者の場合、三角形はキャッチフレーズの背景扱いで、文章に特に注目する形を取っています。

 

 

Bonnefooi Roosendaalの場合、三角形はロゴタイプとメニューの単なる下敷きであり、そこに目が向くように導いています。

 

背景からロゴタイプやメニューを引き離すことで、全体像を美しく豊かにします。

 

三角形が重要な役割を果たした結果として、トップヘッダーは芸術的なタッチのものとなります。

 

Circle Squarespace

 

紹介するのが最後になってしまいましたが、Circle Squarespace。

 

ここにはっきりとした三角形はありませんが、よく見ると、トップページ上に三角形の文房具があります。

 

それは創造性のタッチを刺激する素晴らしいトリックと言えるだけでなく、構図の角度がさりげなくタグラインを指す矢印のようにも見えます。

 

Behold the Power of the Triangle

 

これまであらゆるWebインターフェイスのトレンドを見てきました。

 

それらのうちのいくつかは移り変わっていくでしょう。それ以外は残留し古典へと切り変わっていきます。

 

幾何学的形状の使用は、それ自体が原動力を持っているトレンドの1つです。

 

結局のところ、インタフェイスのスケルトンは、場合によっては肉眼では見ることのできない幾何学的ブロックの考え抜かれた混合物です。

 

これとは反対に、他のデザインは一般に公開されています。

 

円や四角形のように、三角形はウェブサイトのデザインの四角い構造にうまく融合します。

 

三角形は円や四角形を目立たせ、全体像に特異性を加えるという魅力を持っているのです。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ