【ニラは見た！】Webデザインレポート~メインビジュアル編~

おはようございます。ニラです。

引き続き、自分なりのWebデザインの研究をしていこうと思います。

メインビジュアル

前回は、Webサイトの一番上にあるグローバルナビについて調べて見ました。今回は、メインビジュアルについて考えていこうかと思っています。

メインビジュアルは、Webサイトの顔・・？

メインビジュアルは、Webサイトの顔と言っても過言ではありません。なので、サイトの数だけメインビジュアルの種類があるかもしれませんね。

そんなに調べたらおじいちゃんになってしまうのでレイアウトや、キャッチコピーの配置だけ調べていこうと思います！できれば画像も再現していこうかと。

ではではではでは早速。

メインビジュアルレポート

今回もグローバルナビと同じで、「海・NIRATCHI」をベースに検証していきます。

グローバルナビは、最近一般的と感じる、背景のない文字だけのデザインで進めます。

真ん中に文字をどどんっと！

これは、写真を背景全体に配置しておいて、ど真ん中にテキストをドンっと載せるタイプです。

ど真ん中ってだけあって文字にスポットライトが当てられている感じがしていいですね。他にも何か感じますが、言葉で表現しにくいです。

文字が小さいと、大人っぽい？落ち着き？

文字が大きいと、インパクト増量？

ど真ん中はど真ん中でも、文字の大小を変化させても印象は大きく変わりますね。

巨大で長い文字をど真ん中に置いて、ウィンドウを貫通させるのも一つの手。でもこれはもはや、ど真ん中という次元じゃない。

下にどどん

下に巨大な文字を入れるタイプです。

背景画像にフォーカスする時にはいいかもですね。この時の文字は、ある程度大きくないとアンバランスな感じがしそうです。これかっこいいですね。

下にどどん系の余白ギッチギチのレイアウトは、好みが分かれそうだけど、アクティビティな感じがあってこれはこれでありですね。

ちなみに上に持って行くとどうなる？

上にすると、こんな感じ。グローバルナビのせいで、なんか違和感がありますね。こうするくらいなら、下に置いた方がいい気がします。

左よせはどうかな？

左よせにして見ました。インパクトは劣るものの、整ったイメージですね。

文字を多めにしてみたよ

一単語

個人の感想ですが、載せたい文字が多いほど効果的な気がしますね！

この手法で、アルアルなこと

この画像はまだ大丈夫なのですが、背景に文字を載せる場合に、背景と重なってはまずい部分とかがあると思います。僕が調べたら、そうゆうとこも考慮されているWebサイトが多く、ちゃんと背景画像にも文字を載せるためのスペース（壁とか空とか、そのままだと不自然な空間とか）が用意されています。我々もそうゆうとこを考慮できるともっといいですね！

「波と文字が被るのが嫌」っていう考えなら、こんな感じとか？こうやってあらかじめ計算されたトリミングが施されているとかっこいいですね。

❤︎

2022/06/22

nira-012.mahora94

◀︎

next...

prev...

▶︎

comment

fill out コメントをキャンセル

Artist

nira-012.mahora94

よろしくお願いします