masaca（@masaca_dApps）です。
WebサイトのメインビジュアルはWebデザインの中でも最も重要な部分です。
サイトの印象の大部分を決める部分であり、カッコ良さの大半もメインビジュアルで決まってしまいます。
メインビジュアルにはいくつかの定番の型やパターンがあります。
与えられた素材や、サイトのイメージによって適切な表現を使い分けられるといざという時に助かります。
「いくら参考サイトを見ても形にならない」、「デザインに迷ってしまう」という時に役に立つメインビジュアル制作の解説記事をまとめましたので参考にしてください。
masaca
目次
メインビジュアルのレイアウト手法を知る
Webデザインの定番を知る – メインビジュアル編 –
メインビジュアルの定番のレイアウトパターンを丁寧に解説してくれています。
この記事を見れば「こういうときはこのレイアウトを使う！」という基本がわかるようになります。
masaca
サイトのメインビジュアルに悩んだときに参考にしたい！11個のレイアウト手法
こちらは定番のレイアウトパターンとデザインの手法まで解説をしてくれています。
メインビジュアルに重要な写真のトリミングについての解説もあり、勉強になります。
masaca
ノンデザイナーでもできる！写真を使ったイケてるメイン画像の作り方
ノンデザイナー向けに、もっと簡単に解説するならこの記事もオススメです。
「簡単にそれっぽく！」というときに参考にしたいです。メインビジュアル制作のポイントがわかりやすくまとめられています。
masaca
写真の扱い方、トリミングの方法を学ぶ
わたしのデザインセオリー（写真マスク編）
作例のマスクの手法が実務ですぐに使えて、わかりやすいです。
実践的なトリミングやマスクの手法を学ぶなら絶対にオススメの記事です。
masaca
デザイナー目線で語る、グッドな写真の５つの鉄則
参考 デザイナー目線で語る、グッドな写真の５つの鉄則YWCDメインビジュアルは大きな画像一枚で使ったりしますが、トリミングによっては残念なデザインになってしまいます。
基本的なトリミングの考え方をこの記事で覚えればミスを防げます。
masaca
メインビジュアルのトレンドを抑える
メインビジュアルの基本を覚えたら、あとはトレンドを取り入れるなどアイデアの引き出しを増やしましょう。
コムテブログさんが2018年最新のトレンドをまとめてくれています。
2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集
参考 2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集commteblogWebデザインの参考にしたい、ファーストビューのアイデアその2
参考 Webデザインの参考にしたい、ファーストビューのアイデアその2commteblogmasaca
まとめ
Webサイトのメインビジュアルデザインのポイントは「レイアウトのパターン」、「写真の扱い方、トリミング」、「タイポグラフィ」、「トレンド抑える」ことです。
サイトのメインビジュアルを作るのに大事なこと
・写真の扱い方、トリミング
・レイアウトのパターン
・タイポグラフィ
・トレンド抑えるこのあたりがポイントで、参考サイトを見るときも意識して見ると発見があると思います👀
共通点に気づくはずです。— masaca (@masaca_dApps) 2018年7月29日
基本を抑えたら、たくさんの良質なWebサイトを見て参考にしてみてください。Webデザインを探すなら以下の記事で目的のデザインを探すことができます。
もう迷わない！目的別で探せるWebデザイン参考サイト総まとめ
以下のテクニックもメインビジュアルのデザインに役に立ちます。
初心者デザインから脱出！写真の上の文字を見やすくするテクニック7選 
【永久保存版】Webデザイン初心者でもわかる！フォントの選び方を5つの事例で解説 
Webデザイン初心者でも簡単！画像の横幅を伸ばしたいときのテクニック
masaca
コミュニティではWebデザイン勉強中のあなたにもっと役立つ情報を発信中！
SPONSORED LINK
コメントを残す