WEBサイトリニューアル時のSEO注意点 WEBデザイン WEB制作 ホームページ運用

デザインで役立つ!参考サイトまとめ

投稿日:2021年6月14日 更新日:

こんちには、デザイナーのHです。
今回は、自分自身が良く参考にしているwebサイト全体の参考サイトではなく、パーツのデザインにフォーカスを当て、いくつかご紹介します。

Parts. – SaaS/LPのパーツ別Webデザイン集

Parts. - SaaS/LPのパーツ別Webデザイン集
参考サイト:Parts. – SaaS/LPのパーツ別Webデザイン集(https://partsdesign.net/)

こちらのサイトは、日本のサイトであり、パーツデザインの参考が多くあります。

「メインビジュアル」や「よくある質問等」のメジャーなパーツから、「フロー・流れ」や「エラー・404ページ」といったなかなか探すのが大変なパーツデザインまであり、
困ったらこちらのサイトを訪問すればヒントを見つけられることでしょう!

SaaS Pages

SaaS Pages
参考サイト:SaaS Pages(https://saaspages.xyz/)

こちらは、先ほどのサイトとは異なり海外のサイトです。
ただこちらも同様に、パーツのカテゴリが非常に豊富です!
海外サイトなので使いづらい・・・ということはなく、カテゴリ名で絞り込みをかければ非常に豊富な参考デザインがみられるので、どなたでも簡単に利用できるかと思います!

Calltoidea

Calltoidea

こちらも海外のサイトです。
トップページに各カテゴリとアイコンがありますので、その中から見たいカテゴリをクリックすると、
該当カテゴリのデザインがギャラリーの様に表示されます。
こちらも様々なパーツがあるので、上記のサイトと併用し閲覧すれば、サイトに必要なパーツはほぼ網羅出来るのでお勧めです!

Headers – Webサイトのヘッダまとめ –

Headers - Webサイトのヘッダまとめ
参考サイト:Headers – Webサイトのヘッダまとめ -(https://headers.netlify.app/)

こちらのサイトは、ヘッダーのみに焦点を当てた参考サイトです。

参考デザイン数は多くはないですが、デザインの質が高いサイトのヘッダーなので非常に勉強・参考になります。
ヘッダーのサイズ感でも絞り込みも出来るので、ヘッダーデザインで悩んだら眺めてみるのもいいと思います!

最後に

いかがでしたでしょうか?
上記のサイトは自分自身がよく参考として使用しているサイトをメインにご紹介させていただきましたが、
デザインに関する参考サイトはまだまだございますので、
ご自身で見つけたサイトと合わせて参考にしていただければ幸いです。

-WEBサイトリニューアル時のSEO注意点, WEBデザイン, WEB制作, ホームページ運用

関連記事

【Illustrator】写真を簡単にモノクロベクター画像にする方法

【Illustrator】写真を簡単にモノクロベクター画像にする方法

みなさまこんにちは、新人Aです。 今日は、写真をIllustratorでモノクロにしてイラストっぽくベクター画像を仕上げたいと思います! 【1.Illustratorにベクター化したい画像を配置します …

表現の幅を広げる!!AEプラグイン

表現の幅を広げる!!AEプラグイン

こんにちは、先日自宅で自分の映像作品を会社に行く前にレンダリングし、仕事が終わって見てみると半分もレンダリングが進んでいなく絶望を味わった新米デザイナー・ムービー担当Iです。 こった映像を作成するには …

モバイルフレンドリーでいたい!~素敵サイトレスポンシブの旅~

モバイルフレンドリーでいたい!~素敵サイトレスポンシブの旅~

みなさん、こんにちは! web初心者のKです! この度、googleがモバイルフレンドリーな webサイトのランクを上げるアルゴリズムの変更を発表しましたね! http://www.itmedia.c …

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

画面いっぱいに背景写真を敷くWEBデザインが流行っている今日この頃、 見栄えのする写真を探すのもなかなかの一苦労だったりしますよね。 そんな悩めるデザイナーさんたちにオススメしたい、高クオリティな写真 …

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

こんにちは。 今回はクリックするだけでゴールド&メタリックな質感のデザインが作れてしまうPhotoshopのレイヤースタイル素材と活用方法についてご紹介いたします。 このフレームを・・・ たっ …