シンプルでおしゃれなWebデザインの見本12選

Webデザイン

みなさんこんにちは、めくばせです。

Webデザインの基礎を学んだから、もっとスキルアップしていきたい! と考えた時、最初にやるのはデザイントレースですよね。

でも、どう探したらいいのかわからない……。さまざまな業界のWebデザインを同時に見比べてみたいけれど、そもそも他の業界に詳しくないから何を検索したらいいかわからない……と、お悩みではありませんか?

そこで今回は、SHElikesで実際にWebデザイン講座を受講し、デザイントレースも行っているわたしが使うサイトをご紹介します。ぜひ、Webデザインの勉強の参考にしてみてくださいね。

Webデザイナーについて詳しく知りたい方は、こちらの記事をチェック!

SHEのWebデザイン講座に興味がある人は、体験レッスンへ↓

 

見本を探すのに便利なリンク集・ギャラリーサイト12選

⑴ 女子の‘‘好き’’が詰まった【umeboshi】

女性の「好き」を集めたWebデザインギャラリー、umeboshi

淡い背景と梅干しのような赤い丸がとても可愛らしいですよね。女性の「好き」を追求しているのにキラキラゴテゴテした感じがなく、スッキリとシンプルにまとめられているところも素敵です。

  • イメージ別(かわいい、子ども、レトロなど)
  • カラム数別

からも検索できて機能性も抜群。

「女性向け」と聞くと可愛らしいピンクを連想する人もいるかと思いますが、こちらにはちょっぴりスパイスが効いたWebデザインもあります。デザインだけでなく、コンテンツの魅せ方や機能にビビッときたものを掲載しているそうです。

⑵ サイトがズラリと並ぶ姿は圧巻【MUUUUU】

クオリティが高い、縦に長いサイトを厳選して集めている、MUUUUU

サイトがズラリと並ぶ姿は圧巻です。ページ移動のボタンを押すことなく無限にスクロールができるので、ストレスフリー。

  • 業界別
  • デザイン別(TOPページにJS多用、特殊なWebフォント利用など)
  • タイプ別(ECサイト、ポートフォリオなど)
  • 色別

からWebサイトを検索できます。

⑶ Web制作に役立つ情報が満載【Web Design Trends】

Webに関わるすべての人のためのメディア、Web Design Trends

デザインギャラリーだけでなく、Webサイト制作やデザインに役立つ情報、最新のトレンド、チェックすべきサービスなども発信しています。

サムネイルの下に表示されているグレーのタグをクリックすると、

  • デザインの手法
  • テクニック

ごとにWebデザインを探せます。

個人的には、サイト1つ1つにbox-shadowがついているところがツボ。

⑷ ログインせずともお気に入りを保存可能【Web Design Clip】

Webデザイン制作の上で参考になるクリエイティブの高いWebデザインのリンク集、Web Design Clip。1,600サイト以上掲載されており、ページの読み込みが速く、サクサク動きます。

  • 業界別
  • タイプ別(オモロイサービス、特設サイトなど)
  • テイスト別(シンプル、和風など)
  • 採用サイト別

で検索可能です。

わたしの推しポイントは、クリップボタンを押せばログインせずにお気に入りのサイトを保存できること!

⑸ お気に入り保存&スクロールのストレスフリー【81-web】

Webサイト制作に役立つ優れたデザインのサイトを集めたギャラリー&リンク集、81-web。サイトドメインに入っている「81」は日本の国際電話番号に由来しており、国内のサイトのみ掲載しています。

サイトのサムネイルにカーソルを載せると、

  • カテゴリー
  • タグ

が表示されます。そこから検索も可能です。

  • サムネイルの右下にある「+」ボタンで、お気に入りを保存できる
  • 無限スクロールなのでページ移動のストレスフリー

の2つがわたしの推しポイント。

⑹ 運命のサイトに出会える、Shuffle機能付き【I/O 3000】

国内外を問わず、Web制作の参考となるサイトが集められているギャラリーサイト、I/O 3000

ハンバーガーメニューから

  • 業界別
  • タグ別(app、coolなどすべて英語)
  • 色別

などで検索できます。

  • サムネイルが大きめで見やすく使いやすい
  • 無限スクロールでページ移動のストレスフリー

なだけではなく……。

なんといっても1番推したいのは、シャッフル機能! ずっと前に更新されたサイトに辿りつくのは困難ですが、この機能を使えば運命のサイトに出会えちゃうかもしれません!

ハンバーガーメニューの最後の「Shuffle」を押してみてくださいね。

⑺ とにかく#006c61が美しい【S5-Style】

Webデザイナーのためのリンク集・ポータルサイト、S5-Style

「Search」と書いてある目のボタンを押すと、

  • 業界別
  • クリエイティブ別(3D、CG、ストップモーションなど)
  • 色別
  • テクニック別(CMS、HTML5など)
  • タイプ別(ポートフォリオ、広告など)

からWebデザインを探せます。

  • 掲載は6,400サイト以上。圧倒的!
  • スターアイコンをタップして、ログインせずに保存
  • 無限スクロールなので、ページ移動のストレスフリー

と機能も抜群ですが、とにかくサイトが綺麗。#006c61 がとても美しいグリーンで、見ているだけで癒されます。

⑻ 閲覧数順にソートできる【bookma! v3】

Webデザインに特化したブックマークサイト、bookma! v3

  • 色別
  • テイスト(インターナショナル、信頼・安心など)
  • カテゴリー(ECサイト、スペシャルサイトなど)

からWebサイトを探せます。そしてなんと、バックグラウンドカラーからも検索できちゃうのです!

わたしの推しポイントは、

  • 新しい順
  • 古い順
  • 閲覧数順

でソートできること。注目されているサイトを探すのもラクラク。

⑼ カーソルhoverでコメントが見れる【WP Design Gallery】

さてさて、次の2つはWord Pressに特化したサイト集をご紹介します。Word Pressを使いこなしたい人はぜひ見てみてくださいね。

1つ目は、Word Pressを使用したサイトが集められているWP Design Gallery

ページの下で

  • 色別
  • カラム数別
  • 業界別
  • テイスト別(アート、ミニマルなど)

からWPサイトを検索できます。

わたしの推しポイントは、カーソルをサムネイルに載せると、サイトに対してのコメントが表示されるところ。サイトイメージやテクニックについて詳しく説明されています。

⑽ 4,800以上のWPサイトを掲載【WordPress Gallely】

Word Pressで作られている優れたサイトを集めたギャラリー、WordPress Gallery

  • タグ別(アニメーション、ブートストラップなど)
  • 色別

で検索ができ、4,800以上のサイトが掲載されています。

サムネイルが大きくシンプルで、見やすいデザイン。WordPressのテーマも紹介されているので、テーマ探しにも使えますよ。

⑾ UIパターンから検索できる【MOBILE MOZAIC】

最後の2つは、モバイルデザインやレスポンシブに特化したサイトをご紹介します。

1つ目は、スマホ向けのモバイルデザインのみを集めたギャラリーサイト、MOBILE MOZAIC

  • カテゴリー別(Navigation、Gamesなど。すべて英語)
  • UIのパターン別(Logins、Listsなど)

に検索可能です。UIが集められているところが推しポイント!

カラフルでキャッチ―なデザインが並んでおり、見ているだけで楽しくなってしまいます。

⑿ レスポンシブデザインをするなら絶対見たい【RWD JP】

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト、RWD JP (RESPONSIVE WEB DESIGN JP)

  • 業界別
  • 色別
  • テクニック別(ブートストラップ、HTML5など)
  • タイプ別(ECサイト、ポートフォリオなど)

から好みのWebデザインを探せます。

推しポイントは、モバイル、タブレット、パソコンの3種類のデザインが一目でわかるところです。レスポンシブ対応のデザインって迷いますよね。そんな時にはぜひ参考にしたいギャラリーサイトです。

まとめ

「これ使いたい!」と思えるようなギャラリーサイトは見つかりましたか?

検索方法や無限スクロールなど自分好みのサイトを使えば、Webデザインの勉強がさらに楽しくなるでしょう。

最初から思い通りのデザインをするのは難しいですが、見本を参考にして何度もチャレンジし、一緒に最高なデザイナーになりましょうね!

Webデザインに興味がある方は、まず体験レッスンへ↓

【執筆】

SHEshares編集部 めくばせ
2016年、服飾の専門学校に進学するも「わたしの人生で大切なものではない」と気づき、2017年1月に中退。同時期にライターを開始。現在はshares編集部としてライターさんのフォローなどをしている。
昔からモノづくりが好きで、2018年4月にはSHElovesでWebデザインを受講。ピアス制作やWeb制作にも注力中。
生粋の天秤座女で、常にフラット・バランス命。すべてを肯定し愛せる人間になりたい。
Twitter(@_____ilil_
おすすめ執筆記事
服飾学校を中退→Web業界へ。やさしい言葉で人々を救う‘‘保健室の先生’’が選んだ「自分を幸せにする」生き方
【私を救ったコトバたちvol.4】「あなたは大丈夫。人生はめちゃくちゃ魅力的だ。」

関連記事一覧

ライター育成します

Bitnami