こんにちは。シンス株式会社の越水です。

今年もあっという間に6月、もうすぐ2016年も半分を切ろうとしています。福岡も梅雨入りをしてジメジメとしますが、もうすぐはじまる夏に向けて日々元気にウェブ制作に励んでおります！

それでは先月チェックしてきたWebサイトの中から、デザインやインタラクションが気になったWebサイトをまとめてお届けします。

それではどうぞ！

※「2016年5月に公開されたサイト」というわけではないのでご了承ください。

Al Erkyah City

URL : http://www.alerkyahcity.com/

カタールの首都、ドーハにある居住区域Al Erkyah Cityのサイトです。

ロゴの形にマスクされた画像スライドが印象的なトップページになっていて、エメラルドグリーンを中心としたすっきりとしたデザインも見やすいサイトになっています。

BUNDY BUNDY

URL : http://bundy.madebywild.com/

オーストリアを中心に展開するヘアサロンBUNDY BUNDYのWebサイトです。

ミニマムで洗練されたデザイン。ヘアサロンらしくファッショナブルで隙のない写真が効果的に使用されています。

トップのメインビジュアルは画像と思いきやシネマグラフチックな動作をする動画が配置されており、女性がこちらに視線を投げかけたときに思わずドキッとする印象を与えます。

Coffee Supreme

URL : http://www.coffeesupreme.com/

ニュージーランド、オーストラリアでコーヒーショップ、コーヒーの卸売を展開する企業のホームページです。

整理されたグリッドデザインがとても見やすいです。

サムネイル画像やナビゲーションをマウスオーバーしたときの効果もさり気なくてオシャレなので飽きずに見ていられます。

レスポンシブの挙動もすっきりとしたレイアウトで使いやすいため、すごく勉強になります。

ESPALMADOR MARISQUERIA

URL : http://www.tf-corp.co.jp/espalmador

エスパル仙台のなかにあるスペイン料理が楽しめるカジュアルレストランのホームページです。

夏を先取りするような涼しげなデザインが爽やかで楽しげなレストランの雰囲気を伝えています。

レスポンシブを考慮したワンカラムのシンプルなレイアウトですが、canvasを利用したアニメーションやシズル感ある画像素材の配置で、単調にならず見た目に楽しいサイトになっています。

Reputation Squad

URL : http://veille.reputationsquad.com/

SNSのユーザー動向のモニタリングなどを行うWebマーケティングツールのWebサイト。

背景で幾何学的に動作するJavaScriptアニメーションがカッコいいです。

各ページごとにパララックスのような表現が実装されており、凝ったインタラクション満載のWebサイトになっています。

Lionel Durimel

URL : http://wmnvm.com/about

フランスのアートディレクター兼デジタルデザイナーのポートフォリオサイト。

海外のデザインギャラリーでも多数のアワードを獲得している方で、紹介されている作品自体も見どころが多いWebサイトになっています。

グリッチ表現を取り入れた背景の動きが斬新でカッコいいです。

Make my lemonade

URL : http://makemylemonade.com/

フランス、パリを拠点に活動するデジタルクリエイティブスタジオColorsが運営するWebマガジンです。

ガーリーなコンテンツとデザインがメディアの楽しそうな雰囲気を表現しています。

アイキャッチ画像ごとに重ねて設定されているポップな背景のアイデアも参考になります。

Metamorphosis.

URL : https://bonnemarque.se/

海外の有名Webデザインギャラリーのアワードを多数獲得しているクリエイティブユニットのポートフォリオサイト。

デザインセンスやサイト全体の設計、インタラクションの導線作りなど見れば見るほど勉強になるサイトです。

タイポグラフィを動画のマスクとして配置するデザイン、トレンドなのか最近良く見る気がします。カッコいいですね。

Now You See Me 2

URL : http://www.nowyouseeme.movie/

邦題「グランド・イリュージョン」で知られる映画の続編プロモーション用のサイトです。

スクロールアクションと連動してうごくコンテンツがめちゃくちゃ凝っています。

単なるスクロールアニメーションとしては片付けられない表現に思わずため息が漏れます。

Patricia Blanchet

URL : http://www.patriciablanchet.com/

パリの女性向けドレスシューズメーカーのホームページ。

ロゴの箇所だけ画像が反転する見せ方が珍しくてピックアップしました。全画面の動画・画像背景も多くなってきて、さらにもうひとアクセセントを加えたい時に参考になりそうです。

Renate Rechner

URL : http://www.renaterechner.at/en/

フランスでメンタルヘルスに関係するサービスを提供する人材関連の企業サイトのようです。

スクロールする毎に左右のコンテンツが反転していくという変わった使い心地のWebサイトになっています。それぞれの動作の制御も「よく設計したな…。」と思うほど。

デザインや配色、アニメーションが不思議な世界に迷い込んだような印象を与えます。

おわりに

いかがでしたか？気になったWebサイトはありましたか？

またシンス株式会社内で話題になったWebサイトのまとめをお届けしたいと思います。それでは、また次回！

楽天、Yahooショッピング、カラーミー、各種ネットショップ構築に対応いたします。