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

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

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

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

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

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

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

[su_button url=”https://likes.she-inc.jp/courses/1/trial/” target=”blank” style=”flat” background=”#d29aa9″ color=”#ffffff” size=”11″ center=”yes”]体験レッスンに応募する(無料)[/su_button]

 

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

⑴ ターゲットから検索できる【umeboshi】

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

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

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

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

無限スクロールでページ遷移のストレスフリー【MUUUUU】

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

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

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

Web制作の知識も身につく【Web Design Trends】

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

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

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

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

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

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

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

で検索可能です。

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

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

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

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

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

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

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

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

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

などで検索できます。

以上だけではなく……。

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

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

6,500サイト以上を掲載!無限スクロールでスイスイ探せる【S5-Style】

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

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

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

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

⑻ 検索条件は提示されない【bookma!】

感性を刺激するWebデザインギャラリー、bookma!

画面上のアイコンから、以下の並び替えが可能です。

画面左上のクマアイコンを押すとサイドバーが表示され、サイト内検索をすることができます。ただし、今回ご紹介している他のサイトのような検索条件は表示されていません。

カーソルhoverでサイトの詳細が表示される【WP Design Gallery】

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

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

ページの下で

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

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

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

Word Pressに特化したサイトの2つ目は、WordPress Gallery

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

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

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

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

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

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

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

国内のレスポンシブデザインを集めた【RWD JP】

レスポンシブに特化したサイトの2つ目は、日本国内の秀逸なレスポンシブWebデザインを集めたRWD JP (RESPONSIVE WEB DESIGN JP)

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

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

⒀ 長めのサムネイルでLPの雰囲気がわかる【ランディングページ集めました。】

次にご紹介する2つは、ランディングページに特化したサイトです。1つ目は、Webデザイナーのためのランディングページのリンク集ランディングページ集めました

サイトからの離脱を抑え、「売れるサイト」を作りたい人にピッタリなギャラリーです。

以上3点から検索することができます。

リンクされたサイトのサムネイルが長めなので、ランディングページの雰囲気が一目でわかるところが魅力ですね。

⒁ 健康・美容系の豊富なタグからLPを探せる【LANDINGPAGE BOOKMARK】

ランディングページに特化したサイトの2つ目は、LANDINGPAGE BOOKMARK

画面右のメニューより、タグで検索が可能です。

タグは「サプリメント」や「ダイエット」「スキンケア」など健康・美容系が豊富なため、今後ランディングページを作る方はぜひ参考にしてみてくださいね。

⒂ Webデザインの‘‘部分’’だけを集めた【ブブンデザインアーカイブ】

最後にご紹介するのは、ブブンデザインアーカイブ

Webデザインをする際、タイトルやナビゲーション、見出しのデザインをどうすべきか迷う人も多いでしょう。

しかしブブンデザインアーカイブには、以下などのデザインが多数掲載されているため、インスピレーションを活性化させることができるはずです。

また、デザインだけでなく業界別にも検索できます。

掲載されているひとつひとつのサムネイルが小さすぎないため、パッと見ても情報を受け取れるところが魅力的。

まとめ

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

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

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

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

【執筆】

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

Share Story
このストーリーをシェアする
ツイート シェア