1. まとめトップ
  2. デザイン・アート

最近増えてきたWebデザインの真似したいテクニック

日々進化しているWebデザイン。ついていくのにやっと・・という人も多いはず。最近のトレンドは、どういったデザインなのか?古臭く見えないデザインとは?など、参考になるサイトをまとめていきたいと思います。サークルを使ったデザインや、あえてヴィンテージに見せる、など新しい発見があるはず。

更新日: 2012年07月10日

You_9180さん

  • このまとめをはてなブックマークに追加
2820 お気に入り 195166 view
お気に入り追加

サークル(円)を使ったWebデザイン

昨年くらいから、サークルを活用したwebサイトのデザインが増えてきている

CSS3で円を表現・装飾できるようになったり、Google+のサークル機能などから影響を受けているようです。

並べるわけではなく、不自然な配置とサイズにすることで、ユーザーの視線を自然と集める形になっています。

http://hellohellohi.com/

それぞれのサークルにカーソルを合わせると、暗転する面白い仕組み。それぞれカテゴリを選択すれば、斜めにスライドします。

http://webey.eu/

アイゴは、ヨーロッパで販売されている車です。ナビゲーションメニューバーの固定から、サークルを使ったデザインまで、デザイン要素が盛りだくさんです。

http://www.noweaygo.pl/

サークルデザインをフッター部分に取り入れて作られたデザインです。

http://columnfivemedia.com/

こちらはCSS3を使っているわけでなく、画像を使ってデザインとしてサークルを使っています。

http://www.iamrakesh.com/

あえてレトロやビンテージ風に仕上げる

昨年あたりからレトロデザインの、webサイトの比率が増えてきた

CSS3の普及ももちろんですが、ページ上に表示させる要素を必要最低限にしぼるデザインなってきたことが理由のようです。

メニューボタンを押すと、中央の枠内でカテゴリが移動します。枠内だけに情報を埋め込んでいるのも斬新ですね。

http://www.level2d.com/home.html

あえて濁った色を使ったインフォグラフィックスタイルのWebデザインです。大きな太字もレトロ感を演出しています。

http://www.amazeelabs.com/en

パンチ力のある、昔のアメコミ風に作られたヴィンテージスタイルです。日本人でもアメコミをみると古い気分になるのは不思議です。

http://ruhotenuf.ca/

一見すると何のサイトかわからず、思わず興味を引いてしまうサイト。女性のファッションもレトロな匂いが漂っています。

http://www.reklama-audio.pl/

西部劇などに使われるビンテージなタイトルフォントと、古紙のような色使いのレトロ感が堪りません。

http://www.lordlikely.com/

ナビゲーションメニューバーを固定させる

コンテンツが少なくても、どこからでも移動することができる

個人用Webサイトやブログなどで、昨年あたりからよく利用されています。ユーサビリティーの面において威力を発揮しますよ!

正確には、斜めにスクロールしているように見えるのですが、画面全体が傾いているように見えるので、インパクトは大です!

http://www.loyselstoy.com/

左側のメニューだけを固定して、スクロールすると商品画像だけが動きます。メニューが常についてくるので、別のカテゴリに移動する時も面倒ではないです。

http://happycog.com/

ヘッダーのメニューボタンを押すと、ヘッダーは固定されたまま、画面がスクロールして、カテゴリTOPまで動きます。

http://www.fullstopinteractive.com/

キャラクター部分を固定して、スクロールすれば、右上のキャラクターも連動して動きます。

http://www.fat-man-collective.com/hello.php

メニューバーを固定でそれぞれのカテゴリを押せば、スライドされてカテゴリTOPに飛ぶ仕組み。デザインもシンプルで使いやすいです。

http://www.netontwerp.com/index_en.htm

日本でデザインの評価が高いWebサイト<2012>

出典w3q.jp

森本刃物製作所の高級ペーパーナイフのサイトです。余分な物を一切排除したデザインは「モノ」の魅力をグッと引き立てます。


http://www.morimotohamono.com/ja/paperknife/

出典w3q.jp

デザイン事務所「シファカ」が運営しているサイト。TOPにある卵型の円が、カーソルに合わせてふるふると面白い動きをします。

http://mon.cifaka.jp/

写真、イラスト、アートなど、各ジャンルのクリエーターが所属する事務所のサイトです。ポートフォリオにも、現代的な作品が多く参考になります。

http://am-tokyo.jp/

Webデザインも映像も印刷物も手掛ける「budori」のサイト。あるデザインサイトから2012年7月のWebデザインランキングで1位を獲得しています。

http://www.budori.co.jp/

1





このまとめへのコメント8

  • この投稿は現在表示することができません。

  • この投稿は現在表示することができません。

  • この投稿は現在表示することができません。

  • この投稿は現在表示することができません。

  • この投稿は現在表示することができません。

  • この投稿は現在表示することができません。

  • この投稿は現在表示することができません。

  • この投稿は現在表示することができません。

1

You_9180さん

PC/Web色々勉強中

このまとめに参加する



  • 話題の動画をまとめよう