Webデザインの参考にしたいサイトギャラリー集まとめ ~海外編~

はじめに

今日は前回に引き続き、Webデザインを作る際に大活躍するサイトギャラリー集をまとめてご紹介します。
ご紹介するサイトはモバイルアプリは省き、Webサイトのみに焦点を絞ってあるギャラリーサイトをご紹介します。

今回は海外のギャラリーサイトをみていきますが、前回の国内のサイトギャラリー集はこちらからご覧いただけます。
Webデザインの参考にしたいサイトギャラリー集まとめ

海外のギャラリーサイト

awwwards.

Site of the Day, Site of the Month, Site of the Yearでおなじみのawwwards.です。

デザインをしている際にインスピレーションを求めて使うのもよし、ただ単に最近のサイトの動向やトレンドをおうに使うのもよし、とにかく最新の動きやデザインが知れるギャラリーサイトです。

awwwards.

また、それぞれのサイトを審査員がdesign, usability, creativity, contentの4つの軸で点数をつけています。

それぞれ、designが40%, usability 30%, creativity 20%, content 10%の比率で得点が加算されます。

詳しいawwwards.の評価システムに関しては、こちらを参考にしてください。
A transparent and rigorous evaluation system implemented by experienced, world-renowned professionals.

特定の種類のサイトを探している方には、サイトを絞り込むカテゴリやタグが用意されています。

• categories
• tags
• technologies
• color
• countries

このように複数の軸が用意されており、それぞれ掛け合わせてサイトを探すことができます。

また、気楽に最新のトレンドを追いたい！という方はメニュー内の、「Winners」から受賞サイトを閲覧することができます。

CSS Design Awards

awwwards.と並んで有名なのがこのCSS Design Awardsです。

awwwards.と同じように、それぞれのサイトに採点がつけられています。
UI Design, UX Design, Innocationの３つのカテゴリに沿って点数付けされています。

こちらもサイトをタグなどで絞り込むことが可能です。
軸としては、以下の３つがあります。
– features
– industry
– color

ただ、こちらはawwwards.と違い絞り込みの掛け合わせはできません。
(例: color は blackでindustry は educationのサイトなど)

そのため、特定のサイトを探したい！という人からすればawwwards.と比べて少し使いにくさはあるかもしれないです。

CSS Design Awards

Landingfolio / EcommerceFolio

ランディングページ/Ecommerceサイトに絞ってサイトを集めてくれているギャラリーサイトです。
Startup WeekendのオーガナイザーであるDanny Postmaさんが作成されています。

Landingfolio / EcommerceFolio共に非常に似たような作りになっていて、LandingfolioはCrypto, Product, Design tools. Application…などランディングページの内容(カテゴリ)ごとに絞り込めるようになっています。

そのほかにも料金表のデザインを見る 「Pricing Design」や、ポートフォリオのデザインを一覧できる 「Portfolio Design」などもあります。

それぞれのページでは絞込み機能がついているので、必要に沿って使ってください。

Landingfolio

EcommerceFolioはSpreeCommerce, Custom, WooCommerce, BigCommerceなどプラットフォームごとに絞り込めるようになっています。

また、メニュー上の「Industry」という項目からはサイトを業界ごとに絞り込めるようになっています。

EcommerceFolio

httpster

httpster は世界中からかっこいいサイトを集めたギャラリーサイトです。

httpster の特徴としては、サイトが時系列に並んでいることです。

絞りこみはtype (サイトの業界)と style(サイトの雰囲気)の２つの軸で絞り込むことができます。
軸の掛け合わせはできませんが、絞り込んだ後も時系列でサイトが並んでいて、サイドバーにタイムラインの演出があるので、まるでときを遡っていろんなサイトを閲覧しているようなそんな気持ちになります。

httpster

site inspire

site inspireはwebデザイナー、ディベロッパーのDaniel Howellsさんが運営しているギャラリーサイトです。

Styles(サイトで使われているレイアウトやサイトの雰囲気), Types(サイトの種類), Subjects(業界), Platforms(サイトのプラットフォーム)など複数の軸で絞り込むことができ、それぞれの掛け合わせをすることもできます。

また、メニューの「Directory」からは制作会社ごとに作成したサイトを見ることができます。

site inspire

nicely done

パーツや機能ごとに素敵なサイトを集めてくれるギャラリーサイトです。
パリ出身のデザイナー、Bertrand Bruandetが立ち上げたサイトです。

軸としては、Products(紹介しているプロダクトの内容)とPatterns(ページの機能)の２つがあります。
掛け合わせで探すことはできませんが、特にPatternsの方がページの機能ごとにいろんなデザインを比べられて便利です。

nicely done

Good Web Design

nicely doneと似た構成になっており、ページの機能ごとにデザインを閲覧することができます。
Charlie FengとYitong Zhangの２名が運営しているサイトで、ランディングページをセクションごとに分けているのが特徴のギャラリーサイトです。

ランディングページに絞っているので、ナビ、メインビジュアル、特徴、お客様の声、料金、CTA、 FAQ、フッターで絞ることができるようになっています。

Good Web Design

ONE PAGE LOVE

ONE PAGE LOVEは1ページのウェブサイトのギャラリーサイトです。
Rob Hopeという南アフリカ出身のデザイナーが運営しています。

Rob Hopeさんは、ONE PAGE LOVEの他にも「Yo!」というご自身のyoutubeチャンネルで放送している週一の最新デザイン/開発情報について放映しているニュースを運営しています。

詳しく「Yo!」について知りたい方はこちらからどうぞ。
Yo!

ONE PAGE LOVE

まとめ

以上、今日はWebデザイン作る際に便利な海外のサイトギャラリー集をまとめてご紹介しました。

前回の国内のサイトギャラリー集はこちらからご覧いただけますので、ご興味ある方はどうぞ
Webデザインの参考にしたいサイトギャラリー集まとめ

次回は引き続き海外のサイトギャラリー集をテーマに、モバイルアプリをご紹介しているサイトギャラリーをご紹介します。