エムタメ!について twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

  1. TOP
  2. デザイン
  3. Web制作の各パーツ参考サイトまとめ ~キャッチコピーからフッタまで~

Web制作の各パーツ参考サイトまとめ ~キャッチコピーからフッタまで~

記事公開日:2014/10/31
最終更新日:2023/11/17
Web制作の各パーツ参考サイトまとめ ~キャッチコピーからフッタまで~

こんにちは。

スターティアラボ ブログ編集部です。


Webサイト制作の際には、制作会社によって多少内容は異なりますが、クライアント側からいろいろと素材を用意して制作サイドへ提出しないといけません。そして、これがもう大変・・・

「あ、うちロゴないや」

「キャッチコピーとか考えたこともないよ」

「どんなデザインが良いかと聞かれてもねぇ・・・」

なんて途方に暮れる方も多いはず。

Webサイトの制作は、特にコーポレートサイトでは、そうそう頻繁にリニューアルをしないので何をどう参考にしたらいいのか分かりませんよね。というわけで、今回はWebサイトの構成に必要なパーツごとに、役立つ参考サイトをご紹介します。

1.ロゴ

▼ロゴストック

logostock

このサイトではページの最下部から細かくカテゴリを選択できます。業種、色、書体、モチーフなどお好きなものから一覧で見れるのがかなり便利です。

2.ファビコン

▼ファビコンギャラリー

favicon

あまり気に留めない人が多いですが、ブラウザのタブを複数表示する人にとっては非常に重要です。非常に小さい画像なのでロゴが複雑なイメージの場合は、代表製品のシルエットにするなど工夫が必要です。ここでは一覧で見比べられるので便利です。

3.メインビジュアル

▼Webデザインのメインビジュアルまとめ

メインビジュアル

最近はメインビジュアルをダイナミックに見せるサイトが多くなりました。画面も横にどんどん大きくなっているので、横長でもバランスの良いレイアウトの参考にしてください。

4.キャッチコピー

▼ぽいっとキャッチコピー

キャッチコピー

メインビジュアルの構想は決まっても、上に置くキャッチコピーが決まらないという方。右側のバナー「実験室キャッチコピー制作装置」がおすすめです。

5.見出し

▼見出しデザイン.com

見出しデザイン

コンテンツとコンテンツを区切る大事なデザインです。どのコンテンツ間でも活きるデザインと、区切り目がきちんと分かるデザインが良いですね。また、見出しのテキストもSEOに有効的ですので、検索される場合は「テキスト非画像」からがおすすめです。

6.バナー

▼Retrobanner

Retrobanner

エンターテイメント性の高いものや、見て貰いたいコンテンツはバナーで訴求しましょう。このサイトもページの最下部から細かくカテゴリを選択できます。サイズ、色、業種、テイストなどお好きなものから一覧で見れるのがかなり便利です。

7.フッター

▼フッターデザイン.com

フッターデザイン

最近はフッタにサイトマップの役割を持たせることが多くなってきました。検索にも有利なので弊社もフッタを以前より長めに制作させて頂いております。その分、デザイン要素を入れないと間延びしてしまうレイアウトもありますので、定期的にこのサイトの一覧で流行りをチェックしましょう。

8.グローバルナビゲーション、パンくず、ボタン、表組みなど

▼Croppy

croppy

「Croppy」では、「グローバルナビ」でグローバルナビゲーションの一覧、「イメージ」で理念や事業内容のイメージ図の一覧が閲覧できます。
ずっと前に会社概要を制作する際につくったイメージ図をそのまま使ってる方が多いのではないでしょうか。最近のデザインに合わせたものを使いたいですね。

▼ブブンデザインアーカイブ

ブブンデザインアーカイブ

「ブブンデザインアーカイブ」では、「テーブル・表」で表組みの一覧が閲覧できます。ランクレパートリーのある製品を分かりやすく表現するのに、表組みはおすすめです。

9.まとめ

やはりデザインを決めるコミュニケーションは言葉だけでは不足します。参考サイトなどで自分のイメージに近いものを探して、“相手に見せて確認する”ということが非常に重要です。

お互いにイメージのすり合わせを重ねて、良いものをつくっていきたいですね。そのために、今回ご紹介したサイトがお役に立てば幸いです。

関連キーワード

Web制作

特集

はじめての展示会物語

はじめての展示会出展までの道のりを描いたドッタンバッタン劇場

メールマーケティング

この記事を共有