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

あらすじ

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

 

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

 

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

 

スポンサーリンク

ウェブデザイン

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

 

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

example

  • 色は優しい青色
  • 近代的なデザイン
  • お問い合わせフォームをトップページに設置
  • ページ数

など。

 

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

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

 

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

 

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

 

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

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

スポンサーリンク

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

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

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

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

 

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

 

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

  • サイト・オブ・ザ・デイ
  • サイト・オブ・ザ・マンス
  • サイト・オブ・ザ・イヤー
  • 特別賞
  • ノミネート

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

 

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

 

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

 

URL: Awwwards.com

 

Dribbble(ドリブル)

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

 

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

 

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

  • アニメーション
  • ブランディング
  • イラスト
  • プリント

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

 

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

 

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

 

URL: Dribble

 

Behance(ビハンス)

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

 

デザインの閲覧の他に、

  • ライブストリーミング
  • 求人情報
  • プロジェクトの作成

などができます。

 

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

 

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

 

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

  • おもちゃのデザイン
  • ティーシャツのデザイン
  • 靴のデザイン

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

 

URL: Behance

 

Pinterest(ピンタレスト)

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

 

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

 

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

  • 病院
  • 美容室
  • コーポレート

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

 

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

 

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

 

URL: Pinterest

 

SANKOU!

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

 

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

 

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

 

URL: SANKOU!

 

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

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

 

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

 

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

 

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

 

URL: Web design Inspiration

 

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

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

 

世界中にあるデザインスタジオの作品を見ることができたり、ShopifySquarespaceなどの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にノミネートされるサイトのクオリティは高いですし、チェックしといて損はないです。

 

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

 

スポンサーリンク

Twitterでフォローしよう