カテゴリー

  • プログラミング
  • 英語学習
  • 海外
  • キャリア
  • Kredo
Kredoオンラインキャンプ
KredoIT留学
無料カウンセリングはこちら
Kredoオンラインキャンプ体験談
KredoIT留学体験談
外貨を稼ぐ!海外フリーランス無料セミナー
未経験から即戦力ITグローバル人材 無料セミナー
Kredo Blog 英語・IT・AIで、人生の選択肢を広げる。
無料ウェビナー参加 ↗ 無料カウンセリング予約無料相談↗
MENU
EXPLORE KREDO BLOG

知りたいことから、世界が広がる。

ブログTOP ↗
留学・セブSTUDY & LIFE
留学・セブの記事をすべて読む ↗ 海外留学→海外移住→海外就職→
英語学習ENGLISH
英語学習の記事をすべて読む ↗ 英語学習法→英語フレーズ→
IT・AITECH & CREATIVITY
IT・AIの記事をすべて読む ↗ プログラミング学習→プログラミング知識→AI・テクノロジー→デザイン→
キャリアYOUR NEXT CHAPTER
キャリアの記事をすべて読む ↗ 転職情報→キャリアデザイン→
KredoOUR SCHOOL
Kredoの記事をすべて読む ↗ ニュース・キャンペーン→セブ島情報→インタビュー→
STUDENT DIARIES留学生のリアルな日記noteの体験記を読む ↗YouTube・Instagramで留学を知る ↗
記事を探す ブログTOP
留学・セブ
STUDY & LIFEセブで学ぶ。海外で暮らす。留学の準備から、現地の毎日まで。
留学・セブを知るすべての記事 ↗
海外留学費用・期間・学校選びを知る↗海外移住海外で暮らすためのヒント↗海外就職世界で働く選択肢を探す↗
FROM CEBU / note留学生の、
リアルな毎日。
写真とことばで読む留学日記日記を読む ↗
英語学習
ENGLISH英語が、世界を近くする。学び方と、今日から使える英語。
英語学習を知るすべての記事 ↗
英語学習法自分に合った学び方を見つける↗英語フレーズ会話で使える表現を読む↗
FROM CEBU / note留学生の、
リアルな毎日。
写真とことばで読む留学日記日記を読む ↗
IT・AI
TECH & CREATIVITYつくる力を、次の一歩に。プログラミングとAIをもっと身近に。
IT・AIを知るすべての記事 ↗
プログラミング学習はじめ方・学び方を知る↗プログラミング知識仕組みやスキルを深める↗AI・テクノロジーAIの活かし方と最新の話題↗デザイン伝わるものづくりのヒント↗
FROM CEBU / note留学生の、
リアルな毎日。
写真とことばで読む留学日記日記を読む ↗
キャリア
YOUR NEXT CHAPTER学びの先の、働き方。転職・海外就職・これからのキャリア。
キャリアを知るすべての記事 ↗
転職情報次の仕事へ向かう準備↗キャリアデザイン自分らしい働き方を考える↗
FROM CEBU / note留学生の、
リアルな毎日。
写真とことばで読む留学日記日記を読む ↗
Kredo
OUR SCHOOLKredoを、もっと知る。学校のこと、セブのこと、学ぶ人のこと。
Kredoを知るすべての記事 ↗
ニュース・キャンペーンKredoからのお知らせ↗セブ島情報現地の暮らしを知る↗インタビュー受講生・卒業生の声を読む↗
FROM CEBU / note留学生の、
リアルな毎日。
写真とことばで読む留学日記日記を読む ↗
留学日記 ↗

ENGLISH · IT · AI / STUDY IN CEBU

学ぶって、冒険だ。

英語・IT・AIで、人生の選択肢を広げよう。

留学の無料相談へ ↗Kredo Blogを読む →
JAPAN✈CEBU
Kredoで、講師と一緒に英語とITを学ぶ受講生
LEARN SOMETHING NEW.
セブの海を望む場所で学ぶ日常
HELLO, NEW WORLD.
  • TOP
  • プログラミング
  • デザイン
  • Webデザインの参考になるサイト10選【3つの用途別に紹介】

Webデザインの参考になるサイト10選【3つの用途別に紹介】

アバター画像
Kredo編集部
公開日:2023.04.20
更新日:2026.10.04
デザイン |
【保存版】ホームページ、Webデザインの参考サイトまとめ10
少女

おしゃれなWebデザインのまとめが見たい

少年

Webデザインの参考になるようなサイトはある?

このような要望に応えるべく、Webデザインの参考になるギャラリーサイトを用途別に10個紹介します。

日常的に使えるものから、用途特化型のギャラリーサイト、トレンドを把握するためのギャラリーサイトを紹介する記事です。

あわせて、これから紹介するWebデザインの参考サイトを活用するメリットまで解説しています。

これからWebデザインについて学びたい方や、多くのWebデザインを参考にしたい方向けの記事です。

10分ぐらいで読めますので、ぜひご覧ください。

記事のもくじ

  • Webデザインの参考になる日常的に使える汎用ギャラリーサイト5つ
    • 1guu
    • MUUUUU.ORG
    • I/O 3000
    • 81-web.com
    • Web Design Clip
  • Webデザインの参考になる用途特化型のギャラリーサイト3つ
    • LP ARCHIVE
    • Landingfolio
    • AGT SMARTPHONE DESIGN GALLERY
  • Webデザインの参考になるトレンドを把握するためのギャラリーサイト2つ
    • awwwards.
    • CSS Design Awards
  • Webデザインの参考サイトを活用するメリット
    • デザインの勉強ができる
    • 業界のデザイン動向がつかめる
    • 刺激を得られる(モチベーションアップ)
    • 模倣(トレース)することでスキルアップできる
  • まとめ:多くのWebデザインの参考サイトを活用してスキルアップを!

Webデザインの参考になる日常的に使える汎用ギャラリーサイト5つ

日常的に使えて、さまざまなジャンルのWebデザインを集めたギャラリーサイトを紹介します。

1guu

1guuのページはこちら

1guuは国内外を問わず、シンプルなサイトからインタラクティブなサイトまで、Webデザインの参考となるWebサイトを集めたギャラリーサイトです。

動きのあるWebデザインに関しては、なるべく踏襲するようにサムネイルでもアニメーションが確認できるように作られています。

テキスト検索はできませんが業種で検索したり、デザイン種別で検索したりすることが可能です。

さらに、国別に検索することもできるため、普段は見ることのないWebデザインが発見できるかもしれませんよ。

MUUUUU.ORG

MUUUU.ORGのページはこちら

MUUUU.ORGは、現場レベルでWebデザイナーが参考にしやすいように、縦長の一般的なレイアウトでデザインが優れたサイトを厳選して掲載しているギャラリーサイトです。

ほぼ毎日更新されており、2020年3月時点で掲載されているWebデザインの数は3,767サイトと非常に多くのWebサイトが掲載されています。

カテゴリも業界やデザイン種類、サイトタイプ、カラーで分けられており、使いやすいギャラリーサイトであるため、日常的に活用することが可能です。

I/O 3000

I/O 3000のページはこちら

I/O 3000は、非常にデザイン性の高いWebサイトを集めている印象を受けるギャラリーサイトです。

日本国内のWebサイトだけでなく、海外のWebサイトも集められているため、より多くのデザインに触れることができます。

カテゴリ分けは多少使いづらいかもしれませんが、こちらではテキスト検索が可能です。

さらに、集められたWebサイトをランダムに表示する「Shuffle」機能があるため、新しいデザインを発見する楽しみも得られます。

81-web.com

81-web.comのページはこちら

81-web.comは、日本国内の優れたデザインのサイトのみを集めたギャラリーサイトです。

ファーストビュー重視で集められているため、ユーザーの目を惹くデザインの参考にすることができます。

気に入ったサイトをお気に入りとして保存する機能があり、後ほどまとめて確認することができる作りになっています。

Web Design Clip

Web Design Clipのページはこちら

Web Design Clipは、Web製作者向けにアイデアや技術に優れたサイトを集めたギャラリーサイトです。

国内のWebサイトと海外のWebサイトを別々に閲覧できるため、国内外のデザイン動向をチェックすることにも使えるでしょう。

また、レイアウトによって検索することも可能であるため、よりWebデザインの参考サイトを見つけるために役立てることができます。

さらに、ランディングページやスマホページのWebデザインも集められており、さまざまな用途で利用可能なギャラリーサイトとなっています。

Webデザインの参考になる用途特化型のギャラリーサイト3つ

ここからは、ランディングページやスマホページに特化したギャラリーサイトを紹介します。

それらは一般的なWebデザインとは異なるデザインが求められるため、用途に合わせて利用してみてはいかがでしょうか。

LP ARCHIVE

LP ARCHIVEのページはこちら

LP ARCHIVEは、国内のランディングページを集めたギャラリーサイトです。

ランディングページのPCデザイン、スマホデザインをそれぞれ確認できるように作られています。

テーマカラーや業種だけでなく、イメージで探すこともできるため、参考にしたいランディングページを探しやすいでしょう。

さらに、キャッチコピーの一覧表示を確認したり、お気に入りのデザインを保存したりすることができるため、効果的なランディングページ作りの参考にすることができます。

Landingfolio

Landingfolioのページはこちら

Landingfolioは、海外のランディングページを集めたギャラリーサイトです。

国内のランディングページとはデザインの雰囲気が大きく異なり、よりデザイン性の高いランディングページが集められている印象を受けます。

国内のランディングページにはない、新しい刺激を得られるギャラリーサイトといえるでしょう。

AGT SMARTPHONE DESIGN GALLERY

AGT SMARTPHONE DESIGN GALLERYのページはこちら

AGT SMARTPHONE DESIGN GALLERYは、スマートフォン向けの質の高いWebサイトを集めたギャラリーサイトです。

サムネイルにマウスオーバーすることで、スクロールアニメーションされるため、全体像をすぐに確認できます。

タグによってカテゴリ分けされており、カラーや業種で検索可能です。

スマホビューの画面キャプチャが各デザインに用意されているため、いろいろなスマホサイトをみたいときにおすすめです。

Webデザインの参考になるトレンドを把握するためのギャラリーサイト2つ

Webデザインの流行り廃りは、常に変動するものといえるでしょう。

いま現在、どんなWebデザインが好まれているのか、といったトレンドを把握するために、これから紹介するギャラリーサイトを活用してみてはいかがでしょうか。

awwwards.

awwwards.のページはこちら

awwwards.は、世界中から応募されたWebサイトをユーザーが採点・投票を行い、順位付けを行っているギャラリーサイトです。

Webサイトは応募条件さえ満たしていれば誰でも応募でき、ユーザー登録をすれば誰でも採点・投票ができます。

日・月・年単位で評価の高かったWebサイトを検索でき、国別、業種、サイトに利用された技術(CSS3やBootstrapなど)でも検索可能です。

CSS Design Awards

CSS Design Awardsのページはこちら

CSS Design Awardsは、UI/UXに優れたWebデザインや機能性などを評価する国際的なアワードサイトです。

評価基準はクリエイティブなWebデザインかどうかだけでなく、コーディングと機能性、使いやすさなども含まれており、Webサイトとしての完成度が評価されます。

世界中の洗練されたWebサイトが集まっているため、非常に刺激をもらえるサイトといえるでしょう。

Webデザインの参考サイトを活用するメリット

今回紹介したWebデザインの参考サイト(ギャラリーサイト)を活用すると、多くのメリットが得られます。

実際に参考サイトを確認する前に、あなたが得られるメリットについて一つずつ見ていきましょう。

メリットを理解した上で参考サイトを見ていけば、より効果的に活用することができます。

デザインの勉強ができる

最も大きなメリットは、デザインの勉強ができることですね。インターネット上には非常に多くのWebサイトが存在しており、無数のWebデザインが公開されています。

よいWebデザインを作るためには、多くのWebデザインを知ることから始めなければなりません。なぜなら、無から有を生み出すことはできないからです。

多くのWebデザインに触れることでさまざまな知見が蓄積され、あなたのWebデザインを生み出すことができるようになるでしょう。

業界のデザイン動向がつかめる

今回紹介したギャラリーサイトは、比較的更新頻度が高いものです。そのため、新しいWebデザインも学ぶことができます。

Webデザインは常に変動するものであるため、デザイン動向を把握するためにも、多くのWebサイトのデザインを学ばなければなりません。

また、業界別にカテゴリ分けされているギャラリーサイトも多いため、業界ごとのデザイン動向もつかめるでしょう。

あわせて、アワード系のギャラリーサイトも活用すれば、世界規模で最新のデザイン動向を掴むこともできます。

刺激を得られる(モチベーションアップ)

新しいWebデザインに多く触れることで、多くの刺激が得られます。人間は安定を求める一方で、常に変化も求める生き物です。

ギャラリーサイトを閲覧することで刺激を得て、Webデザインの勉強や制作におけるモチベーションアップにつながります。

ギャラリーサイトに載っているWebサイトは、見ているだけでもワクワクします。そんな気持ちを上手に活用することも可能なのです。

模倣(トレース)することでスキルアップできる

ギャラリーサイトを閲覧するだけでも、多くのWebデザインに触れて知見を得ることができます。

しかし、実際にあなた自身のスキルとして昇華させるためには、模倣(トレース)することがおすすめです。

ギャラリーサイトに載っているWebサイトのなかには、特殊なデザインのものもあるでしょう。

具体的にどのような技術を使って実現しているのか、といったことを考えながら、トレースすることで、あなた自身のWebデザイン構築スキルが向上します。

あわせて読みたい記事

Webデザインサンプル・ギャラリーサイト21選
Webデザインサンプル・ギャラリーサイト21選
2023-04-20

まとめ:多くのWebデザインの参考サイトを活用してスキルアップを!

Webデザインの参考サイトとして、ギャラリーサイトは非常に便利なWebサイトです。

この記事の内容を参考に、ぜひいろいろなギャラリーサイトで多くのWebデザインに触れてみましょう。

インターネット上に無数にあるWebデザインをまとめたギャラリーサイトを見ることで、Webデザインの勉強だけでなく、多くのメリットを得られます。

知見を得るだけでなく、トレースすればスキルアップにもつながります。

今回は用途別に紹介していますので、あなたの興味のあるギャラリーサイトから閲覧してみてはいかがでしょうか。

英語でIT・AIを学べるKredo

英語×IT・AIのスキルを身につけてグローバルに活躍しませんか?

当メディアを運営しているKredoは、英語×ITをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で英語とIT・AIを学ぶ「KredoIT留学」「KredoAI留学」を提供しています。これまでの卒業生は3,000名以上。卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×IT・AIのスキルを身につけてグローバルに活躍しませんか?

\ セブ島でIT×英語を学ぶ /IT留学の無料カウンセリングを予約する
\ オンラインでIT✕英語を学ぶ / Kredoオンラインキャンプの詳細をみる >>
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
アバター画像
Kredo編集部

Kredo編集部です!プログラミング、英語学習、キャリア、Kredo情報を発信していきます。

関連記事

  • 独学, 勉強
    デザイン

    独学でWebデザインを勉強する3ステップ!就職・転職でデザイナーになる方法も紹介

  •  width
    デザイン

    ウェブデザイン技能検定3級の勉強方法|ガイドブック・過去問の使い方と日程

  •  width
    デザイン

    Webデザインツール・アプリ比較|無料ソフトとUIデザインの選び方

  • おすすめWEBデザイン関連資格10選
    デザイン

    おすすめWebデザイン関連資格10選【デザイナー希望者必見!】

新規CTA
KREDO JAPAN株式会社

\ SNSで留学の様子を更新中! /

  • Instagram
  • LINE
  • X
  • YouTube
©KREDO JAPAN Inc. 2024 All rights reserved.
Kredoのサービス
セブ島で学びたい方はこちら KredoIT留学
自宅で学びたい方はこちら Kredo Online 英語×アプリ開発コース
運営会社 会社概要 採用情報 お問い合わせ
利用規約 プライバシーポリシー 特定商品取引に基づく表示 資料請求