2021年のWebデザイントレンドが分かる参考サイト7選

Creative

このページでは、2020~2021年以降の最新のwebデザインのトレンドが分かる、ホームページやランディングページの参考サイトを7選厳選して紹介します。今回紹介するサイトをブックマークしておけば、デザインの教養、トレンドリサーチは完璧です。

こんな人におすすめです

  • Web制作会社
  • デザイナー
  • 芸術/美術系の学生
  • IT系の学生
  • 自分のサイトを持っている人
  • Web系フリーランス(目指している)

ホームページ・LPのデザイン参考サイト7選!!

参考サイトを見る際に意識して欲しいのは以下の点です。

  • デザイン(色合い、大きさ、余白、強弱など)
  • 動きと使いやすさ(UI/UX)
  • ライティング(コピー)
  • 使用ツール/使用CMS

Web Design inspiration

デザインインスピレーションを重視したデザイナー向けの参考サイト。

レベルの高いWebサイトが綺麗に見やすく並んでいる印象。
参考サイトしてのUIが非常に分かりやすく、まずはこのサイトから調べることが最近多いです。
といった感じで、個人的にお気に入りの参考サイトです。

▼参考サイトへ
https://bm.s5-style.com


Awwwards

世界で使用されているWEBサイトのレビュー/評価サイト。

ゲームの評価として有名な指標としては、ファミ通クロスレビューやIGNの評価、そしてゲームオブザイヤーなどが挙げられます。そのWEBバージョンと言えば一番近い表現でしょう。

Awwwardsでは各国の著名なクリエイターが評価レビューをし得点を算出しています。
物凄くレベルの高いデザインが豊富にあり勉強になりますが、バチバチな技術力勝負な感じがして、一般的な企業サイトには参考にし辛い感じはあります。

▼参考サイト
https://www.awwwards.com


LP advance

ランディングページ(広告用の一枚物のページ)が集められた参考サイト。

基本的に静的サイトなので、デザインやUI/UXは自由な感じがして超斬新なLPも数多くあります。
普段と違った表現の仕方を参考にするなら非常におすすめです。

サイト内には色別やタイプ検索があり、なんとメインビジュアル別、エフェクト効果からも検索できます。
またボタン一つでお気に入りに追加する事も可能です。

▼参考サイトへ
https://site-advance.info


Web Design Clip

通常のホームページデザインが集められた参考サイト。
多くがWordPressで作成されたサイトで、斬新なアニメーションやページ遷移の仕方、ナビゲーションの仕方など、デザインだけでなくUI/UXの参考にもなります。

サイトには、JapaneseジャンルとWorldジャンルがあり英語版のサイトも多くあります。日本のみならず海外のセンスも拝見出来るので幅広い感性を蓄えられる参考サイトになっています。

▼参考サイトへ
https://www.webdesignclip.com


sps collection

スマホデザイン用の参考サイト。

現在のサイトはほとんどがスマホ対応(レスポンシブ)で作成されていますが、この参考サイトはスマホ部分にのみフォーカスしているので、より良いスマホファーストなサイトを見つける事ができます。

25以上のカテゴリーと10種類以上の配色から絞り込みができ自分のイメージに近いサイトが簡単に見つける事ができます。

▼参考サイトへ
https://spscollection.com


MUUUUU.ORG(ムーオルグ)

 クオリティ重視で選定。縦に長くオーソドックスなレイアウトでかつ、非常にデザインが優れたサイトを厳選して掲載している参考サイト。

デザインセンスの良いサイトが非常に多く集まっている印象。LPもあれば動的サイトもあり混在しているが、一枚の絵として参考にすべきサイトが多くあります。

▼参考サイトへ
https://muuuuu.org


Pinterest(ピンタレスト)

Webサイトのデザインからバナー広告など幅広くデザインを扱っているアプリ。

Pinterestとは一言で言うと、ネット上のWebサイト・あるいはPinterest上にある画像を自分のボードに集めることができる画像収集サービスです。

ログインが必要ですが、デザイナーやWEB制作者はトレンドリサーチとして必ず登録を行なっておきたいサイトです。

▼参考サイトへ
https://www.pinterest.jp


以上が「2021年のWebデザイントレンドが分かる参考サイト7選」でした。

私はweb制作案件のクライアントのイメージを具体化する際、webサイトの模写で勉強する際によく使います。
最近はUI/UXの勉強のために様々な動きをXDに落とし込んでアーカイブ化しています。

皆様も参考サイトを見て自分なりのセンスを磨いていきましょう。

三浦圭人

最後まで閲覧頂きありがとうございます。
Twitterでは更に細かくWEBリテラシーのネタを発信しています。是非フォローお願い致します。感想/ご意見頂けたら喜びます✨

2020年7月14日Creativedesign,Reference,WEB

Posted by KT