【カタチが見せる！個性と魅力にあふれたウェブデザイン集】

こんにちわ！
キューブ制作部の片山です！

最近、四角や丸から三角まで様々なカタチをモチーフにした
シンプルなアクセサリーを雑貨屋などでよく見かけます。
おしゃれで可愛いと思ったので、
私も手に取ってついつい買ってしまいました（笑）

シンプルなカタチなのに、おしゃれに見えたり、可愛かったりと…
それをつけてるだけで個性をだせますよね！

webデザインにも、こういった「個性」を出すための一つの方法として
“カタチ”を使用することで、特徴をだしたりしているものが最近多く見かけるようになりました。

今回は、そんな、「カタチ」を使ったウェブデザインを紹介します！

● 株式会社京阪エージェンシー

http://www.keihan-ag.co.jp/

京阪電鉄の企業サイトです。

サイトをあけると対角線上にある三角形が目に入ってきます。

このカタチと色合い見たことがある！って思ったら、「京阪電気鉄道株式会社」のロゴマーク！
ロゴマークのカタチを上手くサイトのデザインに活かすことによって、
「京阪電車のサイト」ということがすぐに伝わってくるように感じます。

それだけではなく、またたくさんのカタチがスクロールすると同時に現れてきます！

以前、ブログで紹介したパララックスデザインで二重構造になっているので、
スクロールする度に三角に見えたり..多角形にみえたりと仕組みが楽しいですね！
また、このような表現で、一つ一つのテキストを目で追っていけるような
デザインを作り出しているように見えますね。

永遠ループなサイトでもあるので、何度もループしてたくさんのカタチを見てみては？

● dot×dot

http://dotby.jp/category/work/

エンターテイメント、ゲーム、建築、ファッションなどのデジタルを生かした
企画や制作をしている会社のサイトです。

まず、サイトをあけると画面いっぱいにちりばめられた「ドット！」
会社名がそのままこのサイトに表現されているかのようなデザインです。

カラフルで透明度をかけた様々なカタチのドットが
背景に流れていたり、文字にかぶさることなんて気にしないというように次々と現れます。
ちょっとしたタイトルやナビゲーションにも、欠かさず「ドット」があり統一感も出て、
サイト全体を盛り上げているように感じます。

でも..「たくさんのドットが文字にかぶさるから見にくいな～！」と思いきや！
テキストの上に触れると、しっかりと前面にテキストの枠として
浮き出てくるようになっています！

たくさんのドットを使用していても、そういった工夫さえあれば、
カタチを自由に使った個性的で賑やかなサイトでも
全然OKではないでしょうか！

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

http://www.chem.kumamoto-u.ac.jp/

熊本大学工学部の物質生命化学科のサイトです。

サイトのメインビジュアルにさっそく使用されている「六角形」！

これもまた、ロゴマークと連動しているデザインですね。
ぼやぼや～っと六角形の画像が変わるところなんかは、「化学」って感じがしますし、
薄い点線の方眼紙のような背景がこの六角形を
より「理数系」って感じをひきだしているように感じます。

ページを移動してみると..
学科案内のページなんかは、三角形がコンテンツに使われていたり、
ほんとに細かく薄いですが、「chemistry　meets」と書かれた文字と三角形の中にもさらに
図形が見えて、目立たせる効果の一つの手法になってるように
見えてくるのではないでしょうか？

いかがでしたか？

三角形や丸、多角形などのようなカタチでも、
サイトによって使い方がそれぞれ違い、
見せ方も違いましたね。

このような表現を取り入れることによって、
サイト全体に「個性」/「魅力」/「印象に残る」といった
効果があり楽しいですね！

他企業と差別化をするためにも、「魅力的で印象に残る」は大切ですね。

では、また次回もお楽しみに！