要素を綺麗に流線的に。斜め配置が特徴のWebデザイン

Webデザイン３つの良いとこ : 3 Good Point!

要素が斜めに区切られ、流線的なデザインが特徴のWebデザインのご紹介。ECサイトをはじめとするWebサイトのデザインから、ロゴのデザインまで手掛ける制作会社のサイトです。

サイトの特徴は右下へ孤を描いて構成を区切らせているデザイン。とてもなめらかにカットされたように映るので、綺麗です。サイト全体にかけてページに区切りにはこの演出が使用されているので、統一感がありますね。

snowden-要素を隠す

その正体は上の画像。上図は実際にサイトで使用されている画像です。

まずは普通にページをデザインし、そこにz-indexを利用して要素の背景画像にこの画像を使用することにより、下にある要素を隠して「斜めに切れている」という状態を演出しています。

直線でないデザインをWebサイトで見たときはこの演出をしていることがよくあって、Web風でもトップページの記事下が流線状になっている演出を、このデザイン法を利用して実現しています。

ですが、このようなデザインのサイトを見ることはよくありますが、SnodenのWebデザインは若干の演出がサイトに流れるような、鋭い動きを出しているので、とても良いデザイン例だと思いました。

snowden-わかりやすいインタラクション

マウスオーバーした際のインタラクションがわかりやすくていいですね！グローバルメニューはマウスオーバーされていることがとてもわかりやすくフォーカスされます。シェアボタンもマウスオーバー時の切り替えがわかりやすいです。

また、サイト下部のTwitterの箇所、コンタクトの箇所もロールオーバーが秀逸。私もこのように「何をしているかわかる」インタラクションを、デザインしていきたいなーと思いました。

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！