MENUCLOSE
twitter ツイッターfeedlyRSS

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

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

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

公開日:2019年11月12日
最終更新日:2022年01月17日
オンスタ運営
Webデザイン
オンライン学習
デザイナー
制作
ホーム > 全記事一覧 > 制作 > デザイナー > Webデザイン > webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
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を実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
プログラミング初心者必見!真似をしながら誰でもWebサイトが作れるシラバスとは?
オンライン学習
公開日: 2019年08月19日
最終更新日: 2022年01月17日
プログラミング初心者必見!真似をしながら誰でもWebサイトが作れるシラバスとは?
  • # シラバス
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
初心者からのカメラ講座!テクニックが学べるカメラの学校とは?
オンライン学習
公開日: 2019年08月09日
最終更新日: 2022年01月17日
初心者からのカメラ講座!テクニックが学べるカメラの学校とは?
  • # カメラの学校
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WebサイトにおけるOOUIの必要性
Webデザイン
デザイン
公開日: 2021年08月18日
最終更新日: 2021年08月18日
WebサイトにおけるOOUIの必要性
  • # OOUI
  • # UI
d.sato

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
paizaラーニングでプログラミングをマスター!無料で受講できるコースもある?
オンライン学習
公開日: 2019年07月23日
最終更新日: 2022年01月17日
paizaラーニングでプログラミングをマスター!無料で受講できるコースもある?
  • # paizaラーニング
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
なんか物足りない…デザインにひと工夫!簡単テクニック10選
Webデザイン
デザイン
公開日: 2018年01月25日
最終更新日: 2022年01月17日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Adobe製品の基礎を学ぶならAdobeTV!簡単なチュートリアルで学びやすい
オンライン学習
公開日: 2019年08月08日
最終更新日: 2022年01月17日
Adobe製品の基礎を学ぶならAdobeTV!簡単なチュートリアルで学びやすい
  • # AdobeTV
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
OpenLearning, Japanでスキルアップ!無料学習のオンライン講座
オンライン学習
公開日: 2019年08月11日
最終更新日: 2022年01月17日
OpenLearning, Japanでスキルアップ!無料学習のオンライン講座
  • # OpenLearning
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
取り扱いの難しいダウンロード素材などのライセンス周りについて調べてみた
web担当者
ツール
制作
広告
公開日: 2020年08月31日
最終更新日: 2022年01月17日
取り扱いの難しいダウンロード素材などのライセンス周りについて調べてみた
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
7月末まで!開校記念でプログラミング学習サイト『SAi tech』オープンキャンペーン実施中!
オンライン学習
オンライン学習キャンペーン情報
プログラミング教育
公開日: 2020年07月07日
最終更新日: 2022年01月17日
7月末まで!開校記念でプログラミング学習サイト『SAi tech』オープンキャンペーン実施中!
  • # SAi tech
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webデザイナーの仕事とは!?平均年収や将来性までご紹介
デザイナー
公開日: 2019年06月13日
最終更新日: 2022年01月17日
Webデザイナーの仕事とは!?平均年収や将来性までご紹介
  • # Webデザイナー
  • # 仕事
オンスタ運営
全記事一覧

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

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

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

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