ウェブデザイナー必見!ウェブデザインをする際に参考になるサイト10選

あらすじ

ウェブデザインをする時って何か参考になるサイトがあるといいですよね。

今回はそんな要望に応えるべく、ウェブデザイナーが知っておきたい、ウェブデザイン参考サイトを10個選びました。

基本的には海外のサイトを中心にお届けしたいと思います。(日本のサイトもあり)

ウェブデザイン

ウェブデザインはスクールでの教え方や、個人によって多少なりともやり方が変わるかと思いますが、基本的にはAdobe XDやPhotoshop、Sketch、Figmaなどのツールを使って作成します。

私のやり方では、まずはクライアントの要件を綿密にチェックして、重要な点を一覧にしていきます。

example

など。

その後、クライアントの要望を元に、まずラフなワイヤーフレームを手書きで作ります。

この時に参考となるサイトをいくつか探し、それを参考にしながらワイヤーを作っていきます。

そして、そのワイヤーフレームを元にウェブデザインツールを使って実際にウェブデザインを作成していきます。

基本的にはランディング・ページであろうが、普通のサイトであろうがその手順は変わりません。

実際に作ったものがこちらです。

すいません、ちょっと海外色が強めですが、こちらはSketchというツールを使って作成しました。

ウェブデザイン参考サイト10選

それでは、私がよく参考にさせてもらっているウェブデザインサイトを10個選んでみましたので、ご紹介したいと思います。

Awwwards.com(アワーズ・ドットコム)

言わずと知れたAwwwards(アワーズ)

このAwwwardsとは、世界中のウェブデザインを集結させたサイトで、世界で最も権威があるサイトといっても過言ではない参考サイトです。

サイト内では世界中にあるウェブデザインを紹介しているだけでなく、サイトの美しさを決める

といったアワード制度があります。

これに表彰されるのはウェブデザイナーにとってはかなり名誉あることです。

さらに、日本語バージョンもあるので、全て日本語で見ることができます。

URL:　Awwwards.com

Dribbble(ドリブル)

Dribbble(ドリブル)とは2009年にアメリカで生まれた、デザイナーのためのSNSです。

その名前からわかる通り、バスケットボールをコンセプトとして作られているので、ShotやReboundといったDribbble独自の用語がサイト内で使われています。

このサイトではウェブデザインのみならず

といった幅広いデザインを見ることができます。

利用するには招待される必要がありますが、デザインの閲覧のみなら無料なので安心してご利用できます。

また、デザインの掲載のみならず、求人や仕事を依頼することもでき、デザイナー同志の交流の場としても活用できる画期的なサイトです。

URL:　Dribble

Behance(ビハンス)

Behance(ビハンス)とはAdobe(アドビ)が提供しているSNSで、世界中のクリエイター及びデザイナーが集まるサイトです。

デザインの閲覧の他に、

などができます。

ライブストリーミングでは、IllustratorやPhotoshopなどの講義動画だったり、UI/UXのデザインの仕方の講義動画などを閲覧することができます。

※プロジェクトの作成はAdobeに登録してある必要があります。

またウェブデザインの他にも

など、細かいジャンルのデザインを見ることができます。

URL:　Behance

Pinterest(ピンタレスト)

Pinterest(ピンタレスト)とはアメリカに本拠地を置く写真共有サービスです。

当然写真だけでなくウェブデザインもかなりの数があるので、数で言うと１番のサイトではないでしょうか。

またウェブデザインでも、

など、さらに細かく検索することができるので、ウェブデザインをする際ピンポイントで参考デザインを探すことできます。

Pinterest(ピンタレスト)では会員登録することができ、ログインすることで、自分のページにお気に入りのデザインや写真を保存しておくことができます。

また、フォローやフォロワーを作ることも可能なので、他のユーザーと繋がり、それぞれの好みのデザインや投稿したデザインなどを閲覧しあうことができます。

URL: Pinterest

SANKOU!

SANKOU!は日本のサイトで、国内のサイトでもよりすぐりのものをかき集めた、クオリティの高い参考サイトです。

コーポレートサイトやECサイトといったサイトのタイプ別でソートできたり、音楽、ホテルなどサイトのジャンル別、もしくは白、青といった色でソートすることもできます。

また、気に入ったサイトをお気に入りに追加することができ、あとでお気に入りのみをまとめて閲覧することも可能です。

URL: SANKOU!

Web design inspiration(ウェブデザイン・インスピレーション)

Web design inspiration(ウェブデザイン・インスピレーション)はウェブデザインに特化したサイトです。

ウェブサイトやスマホ、タブレットなど、デバイスごとのデザインを見ることができます。

日本語対応はしていませんがデザインを見るだけだったら問題なく使えるはずです。

ウェブデザインの他に、WordPress用テーマのデザインも見ることもできます。

URL: Web design Inspiration

siteinspire(サイト・インスパイア)

こちらもウェブデザインに特化したサイトです。

世界中にあるデザインスタジオの作品を見ることができたり、ShopifyやSquarespaceなどのCMS用のデザインを見ることもできます。

残念ながらこちらも日本語対応はしていませんが、デザインのみの閲覧だったら問題ないはずです。

URL: siteinspire

Best Website Gallery (ベスト・ウェブサイト・ギャラリー)

名前の通り、ウェブデザインのギャラリーサイトです。

他の参考サイトに比べて数は少ないですが、各デザインがどのくらい閲覧されているか、何件お気に入り登録されているかなどをそれぞれ見ることができます。

また、他のサイトと違うところが、

など、そのサイトが使っているフレームワークごとにソートすることができるので、ウェブデザイナーのみならずウェブ開発者にとっても興味深いものとなっています。

残念ながら日本語対応はなしです。

URL: Best Website Gallery

CSS néctar (CSSネクター)

CSS néctar(CSSネクター)はウェブデザイナー及びウェブ開発者に向けたサイトです。

このサイトはAwwwards.com同様、CSSnectar(CSSネクター)より受賞もしくはノミネートされたウェブサイトを掲載しています。

ウェブデザインは厳選されたものを掲載しているので、各ウェブサイトのクオリティは高いです。

残念ながら日本語対応はなしです。

URL: CSS Nectar

Landbook (ランドブック)

Landbook (ランドブック)はウェブデザインに特化したサイトで

など、それぞれのウェブサイトのジャンルや構成でソートすることができます。

また、有料ではありますが、Landbook (ランドブック)が提供している、ウェブサイト用テンプレートを購入することができます。

日本語対応はなしです。

URL: Landbook
 

まとめ

いかがだったでしょうか。

ウェブデザイナーとして日々いろんなデザインを目にし、参考にすることは非常に大切です。

特にAwwwardsにノミネートされるサイトのクオリティは高いですし、チェックしといて損はないです。

ぜひこれらのサイト、参考にしてみてください。