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選(国内外問わず)
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは!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デザインをする時の参考にしてみてくだされば嬉しいです!

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

 


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

シンプルなデザインについて考えてみる
Webデザイン
デザイン
公開日: 2017年07月25日
最終更新日: 2019年05月28日
シンプルなデザインについて考えてみる
オンスタ運営
独学で目指すフルスタックエンジニア!Udemyのオンラインコースまとめ!
オンライン学習
公開日: 2019年06月28日
最終更新日: 2020年05月22日
独学で目指すフルスタックエンジニア!Udemyのオンラインコースまとめ!
  • # pickup
  • # フルスタックエンジニア
オンスタ運営
グリットデザインを使いこなそう!
Webデザイン
デザイン
公開日: 2018年08月10日
最終更新日: 2019年05月28日
グリットデザインを使いこなそう!
オンスタ運営
誰でも気軽に学べる!無料で活用できるJMOOCとは?
オンライン学習
公開日: 2019年07月26日
最終更新日: 2019年07月26日
誰でも気軽に学べる!無料で活用できるJMOOCとは?
  • # JMOOC
オンスタ運営
プログラミングを学びたい方必見!話題のドットインストールとは?
オンライン学習
公開日: 2019年07月18日
最終更新日: 2019年07月18日
プログラミングを学びたい方必見!話題のドットインストールとは?
  • # ドットインストール
オンスタ運営
小中学生を全力サポート!オンラインで学べるeboardとは?
オンライン学習
公開日: 2019年08月14日
最終更新日: 2019年08月07日
小中学生を全力サポート!オンラインで学べるeboardとは?
  • # eboard
オンスタ運営
プログラミング必修化に向けて、世間を取り巻く2019年の動向と、備えるべきことについてまとめ
オンライン学習
プログラミング教育
公開日: 2019年09月06日
最終更新日: 2019年10月31日
プログラミング必修化に向けて、世間を取り巻く2019年の動向と、備えるべきことについてまとめ
  • # プログラミング必修化
オンスタ運営
プログラミング初心者必見!真似をしながら誰でもWebサイトが作れるシラバスとは?
オンライン学習
公開日: 2019年08月19日
最終更新日: 2019年08月08日
プログラミング初心者必見!真似をしながら誰でもWebサイトが作れるシラバスとは?
  • # シラバス
オンスタ運営
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
Webデザイン
デザイン
公開日: 2019年03月26日
最終更新日: 2019年05月28日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営
デザイナーとカメラ撮影
デザイナー
デザイン
公開日: 2017年06月16日
最終更新日: 2019年05月28日
デザイナーとカメラ撮影
オンスタ運営
全記事一覧

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

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

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

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