2018年8月に見つけた、優れたデザインのWebサイトを10個厳選しました。
今回は、技術力よりもデザインによる魅せ方が上手だったり、細かい所のデザインまでしっかり凝られているWebサイトを多めにご紹介しています。
ぜひご自身のデザイン制作の参考にしていただければと思います。では、早速ご紹介していきましょう！
INDEX
01. Hypergiant
今月見つけたサイトの中で最も好みだったWebサイト。複雑なデザインは行っていないものの、配色やタイポグラフィ、マージンの取り方などすべてのデザインが計算しつくされていて、とても美しいWebサイトに仕上げられています。
黄色と水色の2色がメインカラーとして使われていて、サイト全体が一貫してその2色を使ってデザインされています。
事例紹介でわざと説明を塗りつぶしていたり、表示が消されていたりするなど、独特の世界観もまた魅力の1つです。
02. Olaian
画面の左右にホワイトスペースを設けず、画面全体を広々と使ったデザインのECサイト。ノングリッドデザインが使われており、金額表示もタグのようなデザインになっているため、まるで店舗で買い物しているかのような気分で商品を探すような体験が提供されています。
03. Yard Agency
トップページをスクロールすると、画面全体にエフェクトがかかって画面が切り替わるようなエフェクトが取り入れられているWebサイト。動画を画面いっぱいに表示することで1つ1つの事例をしっかり伝えることができ、見る人にインパクトも与えられるようなデザインになっています。
04. KOMINKAN
シンプルですが、タイポグラフィと細部のデザインがとても良くできているWebサイトです。テキストには太めのゴシック体が使われていてとても読みやすく、雑誌のデザインのようなレイアウトがおしゃれですね。
PCで表示すると左側のホワイトスペースに「コーミンカン」というテキストがアニメーション付きで表示されるようになっていて、デザインのアクセントになっています。
05. napla
全体的にグリッドデザインで構成されているECサイトです。シンプルなデザインながらも、1つ1つの商品画像が美しく、洗練された印象のデザインに仕上げられています。
ロゴやボタンにグラデーションが使われていて、こちらも最近のWebデザインのトレンドです。グラデーションを使う場合は、少し控えめなデザインにしておく方がバランスが取れて美しく見れますね。
06. nicotto lab.
石川県のデザインスタジオのWebサイトです。太字のゴシック体と、所々に配置された黄色の要素によってメリハリのついたデザインに仕上げられています。
以前紹介したマクドナルドと任天堂のWebサイトのデザインでも同様のテクニックが使われていますね。
07. Not Another Bill
ギフトを専門に取り扱う海外のECサイトです。テキストでは多くを語らず、写真をメインに使うことによって商品の魅力がより強調されるようなデザインとなっています。
美しい写真とミニマルデザインの組み合わせは洗練されていてスタイリッシュな印象に仕上げることができますね。
08. Art4GlobalGoals
コンテンツを表示するためには、ユーザーがロゴ上にブラシで色を付けないと表示されないという斬新な作りのWebサイトです。
さらに、1つ1つのコンテンツを表示する際にも同様のアクションが用いられており、使い方を覚えるとサイトを見るのが少し楽しくなってきます。
こういった遊びを取り入れることは、シーンによっては使いづらくなってしまうだけですが、このサイトのように上手に使えばWebサイトにオリジナリティが生まれ、強く印象を残すことができます。
09. Ono
海外の食材デリバリーサービスのWebサイト。ロゴや写真、フォント、配色などとても優しい雰囲気のデザインとなっています。使われている写真はシネマグラフ風で、可愛らしさが演出されていたり、使われているイラストも安心感を与えるようなデザインになっていますね。
Facultadというフォントが使われているようですが、サイトの印象にとてもフィットしています。日本語だと特徴的なフォントを取り入れづらいですが、英語の見出しなどにこういうフォントを取り入れてみると、また一味違ったデザインが作れそうですね。
10. SPECIAL CONTENTS | VIRTUAL FLAGSHIP STORE
VRではありませんが、VRで店内を探索しているような気分になれるECサイトです。こちらのブランドは一般的なデザインのECサイトも公開していますが、スペシャルコンテンツとしてこのようなページを公開しているようですね。
将来的にECサイトというのはこういった形に変化していくのでしょうか。既存のECサイトのデザインに疑問を投げかけているような気がして、面白いと思ったので取り上げさせていただきました。
その他の参考になるWebサイト
今回ご紹介したような、デザインの参考になるおすすめのWebサイトをギャラリー形式でまとめています。随時更新していきますので、興味のある方はぜひチェックしてください。
