[初心者必見]見てパクれ!Webデザインの参考サイトギャラリー

フリーランスの心得 ブログ ホームページ制作

「WEBデザイン・コーディングの練習がしたい!どうすればいんだろ?」

WEBデザインの勉強は至ってシンプル。

良いサイトを見てパクる。作る。以上!

それだけモチベーション上がらないので、ランサーズとかCrowdworksから案件をとってきてお金を稼ぐのもありです。
友達のサイトや近場のレストランのサイトとか勝手に作ってたらどうでしょうか?

とりあえず始めは自分のデザインよりいろんなデザインが出来るデザイナーになろう
自分のデザインはその後です。

>>関連記事
アクセスページのクオリティが高いサイトを集めたよ。

【Webデザイン】muuuuu.org

縦長サイトに特化したWebデザインギャラリーサイト。
クオリティ高めのデザインが多いです。縦長サイトはアニメーションとかにもこだわりあるサイト多いので初心者向きよりは中級者向きな気がします。
アニメーションの参考には良いです。

検索:ジャンル・印象(○○風)・タイプ(EC・ポータル他)・色/色調

http://muuuuu.org/

【Webデザイン】io3000.com

国内外のWebデザインが掲載されています。
検索が若干使いづらい。けど海外のサイトはやはりクオリティが高いというか写真が良い。

https://io3000.com/

【Webデザイン】IKESAI.COM

イケてるサイト.com文字通りイケてるサイトを集めているサイト。
内容的には、Webデザインの見本帳に似てるかなーと思いますが、こちらもかなり前からあるので情報量多めです。

検索:ジャンル・色/配色

https://www.ikesai.com/

【Webデザイン】Webデザインの見本帳

色や印象、ジャンルで検索できて、初心者だけでなく、普通によく使ってました。
掲載されているデザインは昔のデザインから今のデザインまで情報量は多いです。

検索:ジャンル・印象・色/配色

http://www.web-mihon.com/

【スマホ】AGT SMARTPHONE DESIGN GALLERY

国内外問わず掲載しているスマートフォンのデザインギャラリーサイト
画像をマウスオーバーすることでデザインを確認できます。

検索:色・ジャンル

http://agtsmartphonedesign.com/

【スマホ】sps collection

情報量はまだまだだけど、クオリティの高いサイトが掲載されています。
Bookmarkボタンがあり、あとで確認できます。

検索:ジャンル・色・アーカイブ

https://spscollection.com/

【スマホ】優れたスマートフォンサイトデザイン集-iPhoneデザインボックス

国内外問わず掲載してあります。

検索:色・イメージなど一つのカテゴリーに入っている

http://design.web-hon.com/

【LP】LP-アーカイブ

ハイクオリティなランディングページが多いです。情報量多めです。

検索:色・ジャンル・イメージ

https://rdlp.jp/lp-archive

【LP】ランディングページ集めました。

ランディングページ(LP)を集めたサイト。
美容・化粧品系のサイトが多めです。ということはアフェは美容・化粧品が多かったんだろな。
デザインの勉強より見せ方とか売り方の勉強にもなるので、LPよく作る人は参考に出来ます。

http://lp-web.com/

【海外LP】Land-book

海外のランディングサイト。
日本のデザインが負けているとは思わないけど、国によって見せ方とか好む色とかあります。
最近、多言語化も進んでますし、海外のデザインに目を通しましょう。

https://land-book.com/

【海外Webデザイン】AWWWARDS

海外のWebデザインギャラリー。情報量はかなり多めです。

https://www.awwwards.com/

最後にまとめ

PCのWebデザイン、スマホのデザイン、ランディングページ、海外のWebデザイン・LPなどをよく見るところだけを集めました。
もっとたくさんあるんですが、情報量など多いものをまとめてみました。

良いデザインを作るためには良いデザインを知るのが近道ですし。
ハイクオリティなコーディングをするにはハイクオリティなサイトを見るのが一番です。

アニメーションが多いサイトのソースを見て、動きなどを勉強してみましょう。

が!その前に本やオンラインサービスで基礎を勉強しましょう。コードが書けなければ意味がないわけだしね・・・(´・ω・`)
Web系の本ってそれなりに値段するんですが、デザインやコーディング苦手なら勉強するしかありません。

動画で勉強

Webデザイン入門オンライン講座

個人的には、動画見て勉強するんじゃなくて、本で勉強してから動画で勉強って感じですね。
本だとどうしてもわからないところが出てきたりしますが、なぜか動画だとすんなり入ってきます。

本で勉強

気に入った記事であれば、ぽちっとお願いします<(_ _)>