Webデザインのネタ探しに!2019年のトレンドがわかる海外ギャラリー10選

Webサイトにはひとつひとつ、それぞれの個性にあったデザインが必要ですから、デザイナーは常に新しいデザインの提案が求められますし、個性にあったデザインアイデアをストックしておく心掛けが必要ですよね。そのため、デザインのネタ帳はいくつあっても多すぎることはない!? 今回は、デザインのアイデアやサンプルが見つかるサイトなどを紹介します。

オンライン上のWebデザインのコンテスト

世界でも選りすぐりのWebデザインを探すには、コンテストのサイトをチェックするのは手っ取り早いかもしれません。

世界的にも知名度の高いWebデザインアワード:awwwards

awwwardsは、2009年からオンライン上で展開されているWebデザインのコンテストサイトです。世界40か国でコンファレンスが開かれるなど、知名度も高いアワードになっています。デザインを応募するのは自由にできて、年に1回のベストオブザイヤーには授賞式も。

本家のサイトでは毎日トップページに新しい優良デザインサイトが紹介され、それぞれデザイン・UI・クリエイティビティ・コンテンツの4つの視点で審査とコメントも紹介されます。ブラウザのホーム画面にしておくと毎日1度は新しいデザインに触れられますね。

home_awwwards

UI・UXに注目したデザインアワード:CSS DESIGN AWARDS

CSS DESIGN AWARDSも、オンライン上のアワードサイトです。CSS Design Awardsは、個人・企業にかかわらずWebデザインのUI・UXとイノベーションを審査軸にしています。こちらも毎日トップページが更新されます。アーカイブからはノミネート一覧が掲載の近い順に閲覧できます。

CSS Design Awards

UIに絞ったデザインギャラリー

分かりやすいWebサイトを目指すなら、デザインだけではなくどんなUIかも重要です。これらのギャラリーはサイトの見え方を動画でチェックできるのが特徴です。

アプリのUIを複数提案:Mobile Patterns

Mobile Patternsは、UXデザインのアイデアを主眼としたUI・UXパターンのアイデアサイトです。既存のアプリをベースにして、あるUIに対して複数の提案が登録されています。動作がビデオで表示されるのでインタラクティブなデザインエクスペリエンスを想像しやすくなります。サンプル数も豊富です。

MobilePatterns

モバイル・デスクトップ両方のUIをコレクション:UI Movement

UI Movementは、モバイル・デスクトップ両方を対象にしたサイトのUIをコレクションしているギャラリーサイトです。UIならではの動きを確認しやすいように1つ1つビデオを掲載しています。

ヒーローイメージやトップページのUIだけでなく、サービスサイトのサイトフローをビデオで確認できるのは、UIのレファレンスとしては興味深い機能です。

UI Movement

色、書体など専門性に特化したギャラリー

色やフォントなどの特定の目的があって、デザインのヒントを得たいときは専門性に特化したギャラリーをチェックしてみましょう。

欧文書体のトレンドをチェック:Typewolf

Webフォントが普及して、ホームページのフォントもだいぶん自由に選ぶことが可能になってきました。TypewolfはWebデザイナーが立ち上げたデザイナーがサイト制作で使うとき目線でフォント使いの観点からキュレーションしたWebデザインサイト。ピックアップしたサイトデザインと、レビュー、そして使用フォント名ももちろん掲載されています。

TypeWolf

直感的に選ぶカラーパレット:Color Hunt

Color Hunt は、様々な目的のためのカラーコーディネーションを提案しているサイト。サイト全体がカラーパレットのようなイメージです。4色の構成で色面の広いもの→狭いものの組み合わせで構成されています。クリックでカラー番号もすぐに確認できます。

Color Hunt

マテリアルデザインが見つかる:Material Design Blog

Material Design Blogは、Googleの推奨するデザインガイドライン「Material Design」に関するデザインやUIに注目したサイト。「ボタンの動き」や「パーツ」などテーマごとにさまざまなポートフォリオサイトからデザイン例を紹介しています。本文は英語ですが、ビジュアルメインなので読めるかどうかの心配はほぼ無し。スマホサイトやスマホアプリのデザインのインスピレーションに役立ちそうです。
Material Design Blog

フロントエンドデザインのSNS:CodePen

CodePenは、Webサイトのフロントエンド開発と確認環境として使える開発系のサイトです。また、ソースコードをiframeでブログなどに埋め込むことで、ソースとプレビューを記事の中で掲載することもできます。

開発と同時に、登録したデザインをポートフォリオとして利用できるので「Project」のメニューから利用者のデザインやプロジェクトを閲覧することもできます。「Challenges」のコーナーでは毎週お題が提供されているので指定のタグ付けしてサイト内コンテストに応募することも可能です。

home_CodePen

最先端のデザインが詰まったおすすめギャラリー

クリエイターによるギャラリーサイトやSNSと連動しているギャラリーが増えています。習慣的にチェックできるようになるのでお勧めです。

世界のクリエイターの新作がチェックできるDribbble

Dribbbleは、デザイナーやクリエイターのポートフォリオ用SNSとしておなじみのサイトです。トップからブラウズしていくのもいいですし、カテゴリからジャンルを分けて巡回チェックしてもよし。SNS型なので、サインアップすれば、気になるクリエイターをフォローして新しい作品をいつもチェックすることもできますし、もちろん自分の作品を世界に向けて公開することも可能!

home_Dribbble

ブランドやファッションサイトの参考になる:site inspired

site inspiredは、Webデザイナーが個人的にキュレーションしているWebデザインのピックアップサイト。数千のアーカイブがあり、「スタイル」「タイプ」「プラットフォーム」とフリーキーワードでのデザインの絞り込み表示が可能です。インパクトもあり、写真をうまく使ったブランドサイトなどの参考になりそうなサイトが多く集められています。

Site Inspired
いかがでしたか? 普段のデザイン業務に新しいひらめきを与えてくれるようなサイトが新しく見つかりましたか?

BiNDupはデザインにこだわれるCMSですが、カラーコーディネートも簡単にできるCSSデザイン機能「Dress」がさらにバージョンアップ。まだお試しでない方はぜひ、一度チャレンジしてみてください。
BiNDupを無料で使ってみる