ウェブサイトで珍しい形を取り入れたサイト14こ紹介

ウェブサイトで珍しい形を取り入れたサイト14こ紹介

こんにちは。最近はブログメディアのデザインを作る機会が多くなってきました。井畑です。

ブログメディアはコーポレートサイトと比べ、よりデザインや装飾等で「個性」を出す場合が多くあります。どうしたらいいかなーと思って色々悩んで、「形」で個性を出すのもありかなと思い、ウェブサイトではあまり使われづらい三角形や五角形、六角形を上手く使っているサイトを調べてみました。

やはり印象に残るものが多かったです。それでは早速見てみましょう!どうぞ!




三角形を使ったデザイン

三角形を使う場合、余白をどう活かすかが重要になってくると思います。

Snowbird


Snowbird
コンテンツのサムネイルが三角形です。マウスオーバーすると折り紙が広がるように画像が広がるのも面白い動きです。

Cink


Cink
メインビジュアルが三角形をグリッド上に並べたレイアウトが印象的です。コンテンツを多く見せるという意味で三角形は良い形かもしれません。

ひし形(四角形を斜めにした形)を使ったデザイン

ひし形は今回紹介する形の中でも一番多く見る形だと思います。正方形を45°斜めにする形なので、CSS的にも取り入れ易いのが理由でしょうか?

小玉醸造株式会社


小玉醸造株式会社
海外のサイトではよく見かけるひし形のメニューを取り入れています。珍しいレイアウトでもテクスチャや配色に和のテイストがしっかり入っているので雰囲気はしっかり伝わります。

v2


v2
ボタンがひし形なのに加え、マウスオーバーした際の動きが変わっていて面白かったのでご紹介。
長いページですが、スクロールしていった際のボタン配置のバランスと配色が上手く、飽きずに下までつい見てしまうデザインです。

株式会社クレハ


株式会社クレハ
グローバルナビや背景にうまくひし形や斜めのラインが取り入れられています。「PAGETOP」の見せ方も上手いなーと思いました。

LETTERS, INC.


LETTERS, INC.
ちょっと変化球ですがひし形をはじめ、色々な形状を使っているデザインです。形もさることながら、形を全て細い線で表現しているのが珍しいですね。

五角形を使ったデザイン

五角形は今回紹介する中でもなかなか見ないデザインなので、特徴を出すのには最適かもしれません。(レイアウト難しいですが)

THE STABLES ステーブルズ


THE STABLES ステーブルズ
商品のサムネイルが五角形(家の形)になっている面白いデザインです。これは一度見たらなかなか忘れられないインパクトがありますよね!

Peppermint – Przetarg na Klienta


Peppermint – Przetarg na Klienta
五角形と緑色が印象的なサイト。スクロールするにつれて、五角形がどんどん描画されていくのも面白く、ついつい最後までスクロールして見てしまいます。

六角形を使ったデザイン

六角形は敷き詰められていると、理路整然とした印象も出てくるので、コーポレートサイト等でも使えそうです。形状も円に近い形なので割と使いやすそう;D

熊本大学工学部 物質生命化学科


熊本大学工学部 物質生命化学科
六角形が分子構造を表しているみたいで、サイトコンセプトとマッチしており、良いデザインだと思いました。 ページローディングもステキ:)

Buffalo


Buffalo
コンテンツを六角形のサムネでレイアウトしています。六角形は順不同のものを並べるのには適しているかもしれません。

Statek Psychologia


Statek Psychologia
こちらはスライダーが六角形を組み合わせたデザインです。スライドのアニメーションも面白いですね。

KUAD PRODUCTION


KUAD PRODUCTION
コンテンツ一つ一つを六角形のレイアウトに詰めるパターン。カテゴリー名を六角形の右下のスペースに配置するなど、上手く六角形の形を活かしたデザインです。

まるっこい形を使ったデザイン

正円ではなく、今回はくずれた楕円っぽいのを上手く使っているデザインを集めました。(正円はよくある方なので)

MORINAGA MILK


MORINAGA MILK
コンテンツがまるっこいだ円で囲われており、サイト全体をやわらかい雰囲気を作っています。スクロールするとだ円がぼよんと歪むのも良いですね:)

料理研究家 白井操さんのおいしく楽しいナッツKitchen


料理研究家 白井操さんのおいしく楽しいナッツKitchen
こちらもサムネイルの形が丸っこく柔らかい雰囲気です。

最後に

以上で珍しい形を取り入れたサイトの紹介を終わります。いかがでしたでしょうか?
こういった形を使うと、とても特徴が出やすく、サイトの印象をつけやすいものになります。ただし、通常の四角形や水平線を使っていくものより、読みづらくなったり、ユーザに使いづらいサイトになる事も多そうです。その辺り上手く処理したいですね。

良いデザインを見てると、すごいテンションあがりますよね。よーしもっと頑張るぞー!!
以上井畑でした!!




「メモメモ」と思ったことはSNSでシェアしよう!!
あわせてこちらの記事もどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です