こんにちは！みう(@miu0512)です。私が作ってみたいデザインの一つ「ナナメ系WEBデザイン」なかなかレイアウトが難しく、まだ実装出来ていませんが、参考としてストックしていたオシャレなWebサイトをご紹介します。

オシャレ・カッコイイという印象を与える「ナナメ」はぜひ試してみたい！

堅いイメージのサイトには使えませんが、最近ではファッション系のサイトやWEB制作会社、イベント系サイトが多く取り入れているナナメデザイン。グリッドの中身をスライドさせたり、ページ全体をスライドさせることでそのナナメ感がより引き立つのではないでしょうか。

グリッドをうまく活かして窓のように中身がスライド！斜めグリッドなサイト

[browser-shot width=”500″ url=”http://maxcooper.net/”]

背景は変わらずに、グリッドの一部分が窓のようになっていて、矢印を押すことによって窓の中身がスライドして変わっていくようなサイト。矢印の位置もそうですが、文字と画像の配置バランスがとても素敵なデザインです。

大小のグリッドがメリハリのある素敵なデザインに！斜めグリッド縦型サイト

[browser-shot width=”500″ url=”http://perspectivewoodworks.com/”]

定番の縦型スクロールサイトですが、斜めグリッドを使うことでよりスタイリッシュなイメージ。小さめグリッドと、４つ分の大きめグリッドで構成された配置が素敵。シンプルの中にも美しさを感じるレイアウトが好きです。

斜め×パララックスでとにかくカッコイイ！オシャレ系ナナメデザインサイト

[browser-shot width=”500″ url=”http://ursulab.com/”]

カッコイイイメージに、マウスを右に移動することによって表現されるパララックスの動きがとにかく素敵です。画像をホバーすると、アイコンがくるっと回ったりするなどのアニメーションがついているのもスキ。

全体的に美しいデザイン。スライドやホバー効果が素敵なナナメスライドサイト

[browser-shot width=”500″ url=”http://www.envyme.com.br/”]

まず、ページスライドが横にナナメに動く点、そしてホバーすることによってグリッド内の画像や背景がふわっと変わる点、各所のホバーの動きすべてがとにかく美しいデザイン。いつかこんなサイト作ってみたい！

さりげないナナメと微妙なパララックスが絶妙！国内の縦型コーポレートサイト

[browser-shot width=”500″ url=”http://www.synapseconsulting.jp/”]

グリッドではなくスライドの切り口がナナメな国内のサイトです。縦型で若干のパララックスと配色が素敵！ポートフォリオのリニューアルの際、こんなサイトデザインにしてみようかなと、こっそり考えています。

ナナメ×オーバルでポップスタイリッシュに！国内のスライドコーポレートサイト

[browser-shot width=”500″ url=”http://www.keihan-ag.co.jp/”]

右にナナメに下に動きのあるスライドでカッコイイ印象のあるサイト。見どころはページ遷移の際の細かい演出と、ページごとの細かいアニメーション。ただカッコイイだけではなく丸みによってポップさもプラスされています。

さいごに・・・

フラットデザインが多く取り上げられているものの、他にも今年流行中のデザインは多く存在します。ナナメなデザインはさすがに使いどころが難しかったりもするのですが、ポートフォリオサイトや製品サイトなどには結構使えそうな予感です！

最後までお付き合いいだだきありがとうございます！これからも、みう(@miu0512)を応援していただけたら嬉しいです！