WEBサイトのメインビジュアルデザイン制作時の参考資料

WEBサイトの顔・メインビジュアルのデザインを考える時にザーッと読んでから着手すると良さそうだぞっと思う参考記事をまとめました。そもそものデザインコンセプトを考えてから、レイアウトパターンを検討して、色んな参考デザインを眺めつつ細部を整えていく感じの流れです。あと書籍も。

設計・コンセプト

WEBサイトの設計時に考えるべき内容かもですが、サイトの目的に照らしてメインビジュアルが担うべき役割を検討する際に参考にしたい記事をピックアップ。

• デザイン提案に説得力を持たせる6つのステップ（スライド付き） | ベイジの社長ブログ WEBサイト全体の設計の話だが、考え方とか非常に勉強になるので読んどく。
• 5STEPでブランドイメージを的確に表現できるデザイン方法 | FICC BLOG | FICCのデジタルマーケティングブログ これもデザイン全般の話ではあるが、ブランドイメージを表現するためのキーワードづくり等、参考になる。
• メインビジュアルはWebサイトの「顔」。しかしスライドショーは時代遅れ？-エムタメ！ メインビジュアルの目的を 1.サービスを伝える／2.旬な情報を伝える／3.イメージを伝える の3点に分類して事例が紹介されており、自分が今から作ろうとしているのはどれに当たるのか、まずは大雑把に決めておくだけでも作りやすくなるのでは。

レイアウトの検討

いろんなレイアウトのパターンやトレンドなどのアイデアの解説を集めました。

• サイトのメインビジュアルに悩んだときに参考にしたい！11個のレイアウト手法 – Hatsuka
• わたしのデザインセオリー（写真マスク編） – デザイナーのイラストノート
• 2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集 | コムテブログ
• Webデザインの参考にしたい、ファーストビューのアイデアその2 | コムテブログ
• 「今っぽい」WEBデザイン要素を考えてみる｜ブログ｜WEB制作会社 株式会社イングス｜東京
• 「ユーザーは3秒で判断」ファーストビュー最新パターンとデザイン事例20選まとめ | 株式会社パンタグラフ レイアウトパターン別に、ユーザーに与えるイメージや向いているサービス・サイトと併せて紹介。
• デザインをブラッシュアップする際のチートシート | dwango creators’ blog（ドワンゴクリエイターズブログ） さいごの仕上げ時に確認する感じ

スマホ版検討

PCとスマホで同じ画像を使用するのは、デザイン的にもイマイチだし、可読性を下げるなど実用面でもよろしくない場合が多いです。なのでメインビジュアル制作時には少なくともPC／スマホの2パターンを検討し、できれば別々に作成して出し分けをしたいところです。

• レスポンシブWebデザイン時のメインビジュアル周りの挙動の考察 | Drupal専門の開発会社 Studio Umi
• 良いレスポンシブデザインはメインヴィジュアルで決まる。参考にしたいテクニックまとめ。 | 株式会社 N2P

参考デザイン集

メインビジュアルのデザイン事例集です。なんやかやと参考にします。

• 選んだけど81個。マイフェバのメインビジュアルが素敵すぎる。 | DesignSource 好みの偏りは若干あれど、イケてるデザインがまとめられているので参考にしやすい。
• ステキなバナー･ボタン･メインビジュアル | SANKOU! | Webデザインの参考サイト集
• その発想はなかった！おもしろい形のメインビジュアルを採用してるWebサイト | ホームページ制作 大阪【インフォメーションメディアデザイン株式会社】
• WEBデザインのメインビジュアルまとめ
• メインビジュアルのブブンデザイン｜Webデザインの“ブブン”を集めたブブンデザインアーカイブ　公式サイト
• MAIN VISUAL collection | メインビジュアルのまとめ
• collections // Headers | MephoBox websites and collections 海外のん。404とかナビゲーションとか、メインビジュアル以外にもいろんなカテゴリがある。
• Webデザイン参考サイト、イラストブックマーク|IllustBookmark イラスト特化

書籍

なるほどデザイン（筒井 美希）

Amazon

楽天