MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)

webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)

公開日:2019年11月12日
最終更新日:2019年11月12日
オンスタ運営
Webデザイン
オンライン学習
デザイナー
制作
ホーム > 全記事一覧 > 制作 > デザイナー > Webデザイン > webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)
このエントリーをはてなブックマークに追加
webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)

こんにちは!webエンジニアを務めておりますヤマンサです!
さて、今回はwebデザイン参考まとめということで、webデザインをする時に参考になるサイトについてまとめてみました!

「なぜエンジニアが。。。」という感想を抱いたそこのアナタ。何を隠そう、もともと私はwebデザイナー出身でありまして、webデザインに関しては知見があるのです!(ドヤァw)

と、ドヤってみましたが、それも含めてフロントエンド業務にも携わるわたしとしては、やはりデザインに関しても最新の知見が必要です。
「いまどんなデザインが流行っているのか」「カテゴリーや業種、業態によって今どんなデザインが主流なのか」といったことは割と普段から広い視野で見ておく必要があります。そうしないと「いざコーディング!」という時にも「難しくて実装が。。。」なんてことにもなりかねませんし、お客様からも要望が上がってきたりしますので。

海外サイトと国内サイト

よくこういったwebデザインを参考にする時に「海外のもの」ばかりのものがあったりしますが、悩みどころとして「いや、英語フォントバンバン使えるならいいけど、作ろうとしてるのは日本語のサイトなんだよね」「これは全部英語だから成立しているデザインだな」と、海外だからこそ際立つデザインということがあり、実際に参考にして作ってみると「なんか違う」といった形になってしまうというのは割とあるあるネタだったりします。

できるだけ自分の中でイメージが離れすぎないよう、参考にするのは「国内サイト」に言及した方がいいと思います。
※もちろん海外のwebデザインで参考になるのもあるのは言うまでもないですが。

それに海外と国内ではお国事情も違ったりしますし。。って話が少し脱線してしまいましたねw

というわけで今回はwebデザイン時に参考になるサイトをまとめてご紹介していきたいと思います!
単純に眺めているだけでも楽しいですよ♪それではいってみましょうー!

webデザインクリップ(WebDesignClip)

webデザインクリップ

Webデザイン制作の参考になる国内のWebデザインリンク集(海外もあり)

まずはじめにご紹介するのはwebデザインクリップさん。こちらのwebデザインクリップさんですが、国内サイトに言及しつつ、海外サイトもまとめているということで、大変綺麗にまとまっており、重宝しますね!メニューもドロップダウン形式でシンプル。Tagを開くと国別に絞れたりして結構便利です。さらりと眺めるもよし、すこし深掘りしてサイト内を探索してみるもよしでGoodです!登録数が時期によって違うので、もう少しアーカイブが豊富になってくるとよりいいサイトになりそうです!今後に期待していきたいですね!

※画像はドロップダウンメニューを開いてみた画面です。メニューが一覧で表示され、視認しやすいように設計されています。

MUUUUU.org

MUUUUU.org

クオリティが高い縦に長いサイトを厳選して集めている。

ドメインがorgで非営利団体?と色々考えてしまいますが、非営利目的での運用に務めてらっしゃるwebデザイン参考サイトのようです。こちらも著名なwebデザイン参考サイトですね。先ほどのwebデザインクリップさんはトップページがアーカイブでページングにて移動していきますが、こちらはページを下に進めていくと下にローディングアイコンが出て読み込みが開始されますのでAjaxで読み込まれていくみたいですね。ページングで移動しなくていいのでスイスイスクロールして見ていけるのが特徴です。

こちらは国内、海外問わず一覧でブワっとみれるようになっています。

運営の方が現役のデザイナーさん

こちらのサイトはなんといっても運営されている方がホンマモンのデザイナーさんです。
現場レベルでwebデザイナーさんが使いやすいように設計されているということで、ずらっと一覧でザッピングできるように作ってらっしゃるのですね。
webデザイナーさんというと実際の現場では大変忙しくされており、アイディアを拾うと言う意味でも、こういった作りは嬉しいところですね!

webデザインギャラリー:I/O 3000

webデザイン参考 I/O 3000

国内外を問わず、Web制作の参考となるサイトをセレクト

お次はI/O3000さんです。こちらも著名なwebデザイン参考サイトです。国内外問わず、さまざまなオシャレサイトが網羅されています。特徴的なのはAjaxによる無限スクロール(下にスクロールしていくと自動でコンテンツが表示される)形と、まとめて閲覧できるように、右上にブラウザのウィンドウ高さ分下へ一気にスクロールするUIがついていること。また、ある程度一覧から情報を得られるよう、1つ1つのカードデザイン内に「虫眼鏡アイコン」がついており、クリックすると詳細がある程度かくにんできるところが嬉しいですね!海外のサイトで、遠距離だとページを開くのにもサイトによっては少々時間がかかったりするものですので、こういった気遣いは見る側からしても嬉しいところです!

なんといっても量が豊富

このなんといってもこのサイトの特徴は情報量が豊富なところでしょう!結構な数がアーカイブされています。カテゴリー、タグなどで綺麗に整理されていて見やすいのもGoodです!

webデザイン参考 I/O 3000 カードを拡大したところ

※画像はカテゴリーをでのページ遷移メニューを拡大したところ。量が豊富なのが一目でわかります。

awwwards

webデザイン参考 awwards

こちらは海外のサイトデザインを中心にまとめられた、海外のサイトです。「海外だしなぁ。。」と思ったそこのあなた、こちらは海外サイトではありますが、ちゃんと日本国内のサイトも登録されており、紹介されているんです!

こちらはお国柄なのか、ログインして円数をつける、マイコレクションを作成など、会員向けのサービスも充実しているようす!
また、詳細ページのタグを見ていただくとわかりますが、webサイト構築にあたって使用した言語がタグづけされており、「どんな技術で作られているか」もわかるようになっているので学習にピッタリ!国内サイトを網羅して刺激が足りない人、またモダンな海外のサイトから学びを得たいといった方にはぜひ一度ご覧いただきたいwebデザイン参考サイトになっています!

日本のサイトを確認したいときは左上の検索バーから検索する

そんな世界に羽ばたく日本のwebサイトとはどんなものか。気になりますよね!?そんなときは左上の検索バーに「japanese」と打ち込んで検索して見ましょう。ページが切り替わって見ることができます。

webデザイン参考 awwwards 日本語サイトの検索

※画像はJAPANESEと打ち込んで検索したときの様子

参考まとめサイトによって独自のまとめ方をしている

ここまで順に国内外問わず、webデザインする時に参考になるサイトをまとめてきましたが、こうして見比べてみると参考まとめサイトによってまとめ方や絞り込み方は様々なことがわかりますね。ぜひご自身で何かwebデザインをする時の参考にしてみてくだされば嬉しいです!

以上、ヤマンサでした〜!

 

関連コンテンツ

ステップごとで学べる!初心者も理解しやすいCodecademy
オンライン学習
公開日: 2019年07月26日
最終更新日: 2019年07月30日
ステップごとで学べる!初心者も理解しやすいCodecademy
  • # CodeAcademy
オンスタ運営
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
エンジニア
制作
公開日: 2019年09月02日
最終更新日: 2019年09月02日
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
オンスタ運営
【最新】Pythonの学習におすすめの本全部で14選
プログラミング
制作
電子書籍
公開日: 2019年06月25日
最終更新日: 2019年09月03日
【最新】Pythonの学習におすすめの本全部で14選
  • # Python
  • # おすすめ
  • # 本
オンスタ運営
Web業界で欠かせないスキル!HTML5プロフェッショナル認定資格とは?
オンライン学習
プログラミング
公開日: 2019年06月25日
最終更新日: 2019年07月11日
Web業界で欠かせないスキル!HTML5プロフェッショナル認定資格とは?
  • # HTML5プロフェッショナル認定資格
オンスタ運営
ウェブカツなら本気で稼げる!受講してプログラミングを学ぼう
オンライン学習
公開日: 2019年08月18日
最終更新日: 2019年08月08日
ウェブカツなら本気で稼げる!受講してプログラミングを学ぼう
  • # ウェブカツ
オンスタ運営
Webデザインを学べるオススメオンライン学習サイト
オンライン学習
公開日: 2019年06月20日
最終更新日: 2019年06月20日
Webデザインを学べるオススメオンライン学習サイト
オンスタ運営
デザイン制作で、色を選ぶのに困っていませんか?
デザイナー
デザイン
公開日: 2019年03月13日
最終更新日: 2019年05月28日
デザイン制作で、色を選ぶのに困っていませんか?
オンスタ運営
デザイナーのキャリアアップ(デザイナーがキャリアアップするための道のり-最終章)
デザイナー
デザイン
公開日: 2017年01月29日
最終更新日: 2019年05月28日
デザイナーのキャリアアップ(デザイナーがキャリアアップするための道のり-最終章)
オンスタ運営
ディープラーニングならChainerを活用しよう!特徴や魅力をご紹介
オンライン学習
公開日: 2019年08月24日
最終更新日: 2019年08月22日
ディープラーニングならChainerを活用しよう!特徴や魅力をご紹介
  • # Chainer
オンスタ運営
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
Webデザイン
デザイン
公開日: 2019年03月26日
最終更新日: 2019年05月28日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。