カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

  • KREDO Kredo
    • ニュース・キャンペーン情報

      ニュース・キャンペーン情報

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • 【保存版】ホームページ、Webデザインの参考サイトまとめ10

【保存版】ホームページ、Webデザインの参考サイトまとめ10

太田 ヨウタ
太田 ヨウタ
公開日:2020.03.19
更新日:2020.03.19
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット
【保存版】ホームページ、Webデザインの参考サイトまとめ10
少女

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

少年

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

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

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

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

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

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

記事のもくじ

  • Webデザインの参考になるギャラリーサイト10個
    • 日常的に使える!見ていて飽きない汎用ギャラリーサイト
    • 用途特化型のギャラリーサイト
    • トレンドを把握するためのギャラリーサイト
  • Webデザインの参考サイトを活用するメリット
    • デザインの勉強ができる
    • 業界のデザイン動向がつかめる
    • 刺激を得られる(モチベーションアップ)
    • 模倣(トレース)することでスキルアップできる
  • まとめ:多くのWebデザインを参考にスキルアップを図ろう!

Webデザインの参考になるギャラリーサイト10個

Webデザインの学習・参考になるギャラリーサイトを10個紹介します。

ここで紹介するギャラリーサイトは、比較的更新頻度が高く、さまざまなジャンルのWebデザインを集めているサイトです。

用途別にそれぞれ分けて紹介していますので、あなたの用途に合わせて各ギャラリーサイトにアクセスしてみてはいかがでしょうか。

日常的に使える!見ていて飽きない汎用ギャラリーサイト

日常的に使えて、さまざまなジャンルの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デザインとは異なるデザインが求められるため、用途に合わせて利用してみてはいかがでしょうか。

LP ARCHIVE

LP ARCHIVEのページはこちら

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

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

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

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

Landingfolio

Landingfolioのページはこちら

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

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

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

AGT SMARTPHONE DESIGN GALLERY

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

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

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

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

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

トレンドを把握するためのギャラリーサイト

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デザインを参考にスキルアップを図ろう!

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

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

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

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

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

「これからの時代、プログラミングと英語が必要そう…」
それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。
そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか?

セブ島 IT×英語留学の「Kredo」では、
政府公認ITカリキュラム
大学教授レベルのフィリピン人IT教員
スピーキングに特化した英語クラス
日本人スタッフによる学習サポート
などによって、 これからの時代に必要なIT×英語のスキルが
初心者からでも最短で身につきます。

KredoのIT留学で人生を変えてみませんか?

\プログラミングと英語が同時に身につく!/
KredoのIT留学について詳しくみる

  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
太田 ヨウタ
太田 ヨウタ

IT関連企業にてインフラエンジニア(SE)として官公庁や銀行などのシステム更改をメインに約10年従事。基本情報技術者・ネットワークスペシャリスト・情報セキュリティスペシャリストなどの資格も取得。その後、IT・Web専門ライターとして、プログラミング、ネットワーク、セキュリティ、AIなどの解説記事を中心に執筆している。「専門知識を初心者でも理解できるようにわかりやすく書く」ことを心がけている。

関連記事

  • Web・プログラミング

    初心者必見!Pythonの詳しい導入手順を徹底解説【Windows・Mac別】

    2020.10.19
  • Web・プログラミング

    Rubyで開発?Ruby開発に向いているもの&開発に必要なことまで解説

    2020.09.26
  • 【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!
    Web・プログラミング

    【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!

    2020.09.25
  • 【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!
    Web・プログラミング

    【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!

    2020.09.11
kredo it 英語 留学

よく読まれている記事

  • 2020.12.03

    【1/6&1/7 無料オンラインセミナー】なぜ今、プログラミング × 英語を身につけるべきなのか?

  • Kredo CEO横田猛夫さん
    2019.06.26

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

  • ショッピングを楽しんでいる男女のイメージ画像
    2019.02.12

    海外就職を成功させたい人へ!経験者が教えるメリットとデメリット

  • 熱心にプログラミングを教えるフィリピン人講師と日本人留学生

    【日本語で学んでいる場合じゃない】“英語”でIT・プログラミングを学ぶメリットとは?

IT留学オンライン
kredo 留学

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.