
目次
あらすじ
ウェブデザインをする時って何か参考になるサイトがあるといいですよね。
今回はそんな要望に応えるべく、ウェブデザイナーが知っておきたい、ウェブデザイン参考サイトを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(ピンタレスト)とはアメリカに本拠地を置く写真共有サービスです。
当然写真だけでなくウェブデザインもかなりの数があるので、数で言うと1番のサイトではないでしょうか。
またウェブデザインでも、
- 病院
- 美容室
- コーポレート
など、さらに細かく検索することができるので、ウェブデザインをする際ピンポイントで参考デザインを探すことできます。
Pinterest(ピンタレスト)では会員登録することができ、ログインすることで、自分のページにお気に入りのデザインや写真を保存しておくことができます。
また、フォローやフォロワーを作ることも可能なので、他のユーザーと繋がり、それぞれの好みのデザインや投稿したデザインなどを閲覧しあうことができます。
URL: Pinterest
SANKOU!
SANKOU!は日本のサイトで、国内のサイトでもよりすぐりのものをかき集めた、クオリティの高い参考サイトです。
コーポレートサイトやECサイトといったサイトのタイプ別でソートできたり、音楽、ホテルなどサイトのジャンル別、もしくは白、青といった色でソートすることもできます。
また、気に入ったサイトをお気に入りに追加することができ、あとでお気に入りのみをまとめて閲覧することも可能です。
URL: SANKOU!
Web design inspiration(ウェブデザイン・インスピレーション)
Web design inspiration(ウェブデザイン・インスピレーション)はウェブデザインに特化したサイトです。
ウェブサイトやスマホ、タブレットなど、デバイスごとのデザインを見ることができます。
日本語対応はしていませんがデザインを見るだけだったら問題なく使えるはずです。
ウェブデザインの他に、WordPress用テーマのデザインも見ることもできます。
siteinspire(サイト・インスパイア)
こちらもウェブデザインに特化したサイトです。
世界中にあるデザインスタジオの作品を見ることができたり、ShopifyやSquarespaceなどのCMS用のデザインを見ることもできます。
残念ながらこちらも日本語対応はしていませんが、デザインのみの閲覧だったら問題ないはずです。
URL: siteinspire
Best Website Gallery (ベスト・ウェブサイト・ギャラリー)
名前の通り、ウェブデザインのギャラリーサイトです。
他の参考サイトに比べて数は少ないですが、各デザインがどのくらい閲覧されているか、何件お気に入り登録されているかなどをそれぞれ見ることができます。
また、他のサイトと違うところが、
- Bootstrap
- Node.js
- JQuery
など、そのサイトが使っているフレームワークごとにソートすることができるので、ウェブデザイナーのみならずウェブ開発者にとっても興味深いものとなっています。
残念ながら日本語対応はなしです。
URL: Best Website Gallery
CSS néctar (CSSネクター)
CSS néctar(CSSネクター)はウェブデザイナー及びウェブ開発者に向けたサイトです。
このサイトはAwwwards.com同様、CSSnectar(CSSネクター)より受賞もしくはノミネートされたウェブサイトを掲載しています。
ウェブデザインは厳選されたものを掲載しているので、各ウェブサイトのクオリティは高いです。
残念ながら日本語対応はなしです。
URL: CSS Nectar
Landbook (ランドブック)
Landbook (ランドブック)はウェブデザインに特化したサイトで
- ランディングページ
- ポートフォリオ
- ブログ
- ECサイト
など、それぞれのウェブサイトのジャンルや構成でソートすることができます。
また、有料ではありますが、Landbook (ランドブック)が提供している、ウェブサイト用テンプレートを購入することができます。
日本語対応はなしです。
URL: Landbook
まとめ
いかがだったでしょうか。
ウェブデザイナーとして日々いろんなデザインを目にし、参考にすることは非常に大切です。
特にAwwwardsにノミネートされるサイトのクオリティは高いですし、チェックしといて損はないです。
ぜひこれらのサイト、参考にしてみてください。