Webデザインが学べるコミュニティを作りました!

Webサイトのメインビジュアルの作り方を極める!良質な記事まとめ

masaca(@masaca_dApps)です。

WebサイトのメインビジュアルはWebデザインの中でも最も重要な部分です。
サイトの印象の大部分を決める部分であり、カッコ良さの大半もメインビジュアルで決まってしまいます。

メインビジュアルにはいくつかの定番の型やパターンがあります。
与えられた素材や、サイトのイメージによって適切な表現を使い分けられるといざという時に助かります。

「いくら参考サイトを見ても形にならない」、「デザインに迷ってしまう」という時に役に立つメインビジュアル制作の解説記事をまとめましたので参考にしてください。

masaca

どれもメインビジュアルに関する良質な記事を紹介するよ。

メインビジュアルのレイアウト手法を知る

Webデザインの定番を知る – メインビジュアル編 –

参考 Webデザインの定番を知る - メインビジュアル編 -Umi Design

メインビジュアルの定番のレイアウトパターンを丁寧に解説してくれています。
この記事を見れば「こういうときはこのレイアウトを使う!」という基本がわかるようになります。

masaca

とても参考になりました。感謝しかない記事です。

サイトのメインビジュアルに悩んだときに参考にしたい!11個のレイアウト手法

参考 サイトのメインビジュアルに悩んだときに参考にしたい!11個のレイアウト手法Hatsuka

こちらは定番のレイアウトパターンとデザインの手法まで解説をしてくれています。
メインビジュアルに重要な写真のトリミングについての解説もあり、勉強になります。

masaca

良質な記事すぎて見つけたときは感動しました。

ノンデザイナーでもできる!写真を使ったイケてるメイン画像の作り方

ノンデザイナー向けに、もっと簡単に解説するならこの記事もオススメです。
「簡単にそれっぽく!」というときに参考にしたいです。メインビジュアル制作のポイントがわかりやすくまとめられています。

参考 ノンデザイナーでもできる!写真を使ったイケてるメイン画像の作り方CAMPHOR- Tech Blog

masaca

ノンデザイナーを対象にした解説は少ないので貴重です!ありがとうございます。

写真の扱い方、トリミングの方法を学ぶ

わたしのデザインセオリー(写真マスク編)

作例のマスクの手法が実務ですぐに使えて、わかりやすいです。
実践的なトリミングやマスクの手法を学ぶなら絶対にオススメの記事です。

参考 わたしのデザインセオリー(写真マスク編)デザイナーのイラストノート

masaca

写真のマスクの手法と、レイアウトについての解説がデザイン本のように丁寧で感動的です!とても勉強になります。

デザイナー目線で語る、グッドな写真の5つの鉄則

参考 デザイナー目線で語る、グッドな写真の5つの鉄則YWCD

メインビジュアルは大きな画像一枚で使ったりしますが、トリミングによっては残念なデザインになってしまいます。
基本的なトリミングの考え方をこの記事で覚えればミスを防げます。

masaca

トリミングの大事さをこの記事で学ぶことができました。素晴らしい記事です。

メインビジュアルのトレンドを抑える

メインビジュアルの基本を覚えたら、あとはトレンドを取り入れるなどアイデアの引き出しを増やしましょう。
コムテブログさんが2018年最新のトレンドをまとめてくれています。

2018年に使いたいWebデザイントレンド !ファーストビューのアイデア集

参考 2018年に使いたいWebデザイントレンド !ファーストビューのアイデア集commteblog

Webデザインの参考にしたい、ファーストビューのアイデアその2

参考 Webデザインの参考にしたい、ファーストビューのアイデアその2commteblog

masaca

これで現在のトレンドもバッチリです。素晴らしいまとめありがとうございます。

まとめ

Webサイトのメインビジュアルデザインのポイントは「レイアウトのパターン」、「写真の扱い方、トリミング」、「タイポグラフィ」、「トレンド抑える」ことです。

基本を抑えたら、たくさんの良質なWebサイトを見て参考にしてみてください。Webデザインを探すなら以下の記事で目的のデザインを探すことができます。
もう迷わない!目的別で探せるWebデザイン参考サイト総まとめ 以下のテクニックもメインビジュアルのデザインに役に立ちます。
初心者デザインから脱出!写真の上の文字を見やすくするテクニック7選 【永久保存版】Webデザイン初心者でもわかる!フォントの選び方を5つの事例で解説 Webデザイン初心者でも簡単!画像の横幅を伸ばしたいときのテクニック

masaca

ギャラリーサイトを見る前に基礎知識があるとどういうところを参考にすればいいかがわかるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA