Webデザイン

Webデザイナー必見!メインビジュアルのデザイン参考サイト!

Webデザイナー必見!メインビジュアルのデザイン参考サイト!

はじめまして。
ディレクター(兼デザイナー)のせりなです。

この度、FASTCODINGは技術ブログを書き始めることにしました!

FASTのスタッフは本当に個性派揃いで、興味のある分野も前職もバラバラ。そんなみんながそれぞれ記事を書いたら・・・面白そうじゃない?ってことに。

例えば

・心は日本人、体はフランス人のjsエンジニア
・平日はプロジェクトの波にもまれ、休日は海で波にもまれてるサーファー
・女優 兼 Webディレクターという、異色の兼業をこなすFASTのスーパールーキー

こんな感じで、人種も職種も趣味も様々です。

2015年に創業して1年半が過ぎ、2017年は新しいことにチャレンジするいい機会。そして、私たちが書く記事がWeb業界で一緒に働いている仲間のためになることを願って・・・!


Webデザイナー必見!メインビジュアルのデザイン参考サイト!

Webサイトを制作しているとやっぱりよく目につくのはメインビジュアル。

まだまだWebデザイン初心者の私は、デザインするときに参考になる画像を集めて、
基本的にいいとこどりをして作品を仕上げていきます。

なので、今回は私がいつもお世話になっている『メインビジュアルまとめ』サイトをご紹介いたします!


そもそも「メインビジュアル」「キービジュアル」って何?

Webサイトのファーストビュー(1番最初にサイトを訪れたとき)で、ユーザーが最初に見る要素のこと。

FASTのサイトだとトップページの1番上のスライドショーになっている画像のことですね。


 

最近のWeb業界の傾向として、このメインビジュアルエリアを画面いっぱいに大きくしてインパクトを出したり、
私たちのWebサイトのようにスライドショーにして複数の画像を表示するパターンが多いです。

サイトの個性やメッセージ性が伝えられる重要な部分であり、自由なエリアが広いだけにデザインに困る部分でもありますよね・・・


そんな「メインビジュアル」の参考サイトをご紹介

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


〇〇業界向け、というカテゴリがあるので、作りたい雰囲気に合わせて検索ができます。
 

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


メインビジュアルだけでなく、見出しやグローバルナビゲーションのデザインもあるサイトです。
 

MAIN VISUAL collection


色ごと、イメージごとや表示ランキングなどがあって使い勝手がいいです!


デザインにはロジックが大事!一緒に見たい関連記事

Webデザイナーが知っておきたい直帰率の低いメインビジュアルの作り方


こんなサイトにはどんなレイアウトパターンがいいの?文字と画像の配置は?勉強になります。
 

良いレスポンシブデザインはメインヴィジュアルで決まる。参考にしたいテクニックまとめ。


メインビジュアルのレスポンシブ化に特化して、PC・スマートフォン版の配置や情報量を比較したページです。なるほど!


いかがでしたか?

色んな方のアイディアを見ると、
創作意欲がどんどん湧いてきますね!

デザインに困ったらぜひぜひご参考ください。