マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン

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

投稿日:

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

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


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

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

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

SaaS Pages


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

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

Calltoidea

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

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


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

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

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

最後に

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

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-WEBデザイン

執筆者:

関連記事

【Illustrator小技】PDFファイルを代替フォントでなくアウトライン化して開ける便利なワザ

アウトライン化されていないPDFをIllustratorで開こうとする時、 Illustrator「このPDF、該当するフォントがないから代替しちゃいますね~」 デザイナー「うわぁぁフォント変わっちゃ …

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

なるべく早く作ってほしい!! 今週末までに提出お願い!! ・・・・・・ヤバイ、時間がない。 こんな急ぎの依頼が来たときに、デザイナーさんの手助けをしてくれる素材サイト。 今回は、特定のジャンルに特化し …

【Illustrator】基本図形で出来ちゃう!ハートマークの作り方

こんばんは、新人Aです。 今日は、Illustratorでハートを作る方法についてお話します! まぁ、素材サイトさんからデータをお借りしちゃえばそれで済む話なのですが… 理想の形が見当たらない!という …

【Fireworks】写真の上の文字を読みやすくする方法

こんばんは、新人Aです。   今日は、写真に文字を乗せるときに読みやすくする工夫についてお話します! たとえばこんな写真。 綺麗な夜景ですが、暗い空と明るいライトアップのコントラストで白い文 …

背景に動画を取り入れたWEBデザイン

背景に動画を取り入れたWEBデザイン

動画を取り入れたWEBサイト。 大分主流となってきて、見かける頻度も一段と増えました。 動画 = 重い という概念もどこへやら。。 最近のWEB動画はとても軽い。 背景として動画を入れ、飽きさせること …