【ニラは見た！】Webデザインレポート文字と1枚の画像編

こんにちは。ニラです。

夏休みボケでデザインの勉強を疎かにしていたので、久しぶりにこのシリーズを更新します。

と言ってもこの休みの間、何かしら考えたり、作ったりしていたんですけど。

文字と画像の配置

大見出しの下には、文字と一枚の画像が。っていうのを多く見かけると思います。

実際、Webデザインをするときには、文字と画像を配置することがすごく多いです。

こんな感じです。

どっちかに、文字を書いて、もう片方に一枚の画像をつけるっていうパターンをよくやっていますが、他にはどんな配置方法があるのでしょうか？

色々やっていきましょう。

スタンダード

さっきのように、片方に文字・もう片方に画像っていうパターンです。これはよく見ますし、僕もよくやっているので、僕の中ではスタンダードです。

逆にしてもいいでしょう。しかし

こうやってガイドで見たときに左側に方が安定して見えます。

でも、今回のは右側も十分許容範囲だと思います。

画像を場外へ

なかなか他のが見つかりませんね。

次は、画像を場外に持っていくっていうやり方です。

これをやることで得られる効果は、、

画像が目立ちすぎず、文字に焦点が置かれる。
見えないガイドラインからはみ出しているので、インパクトが出る。
画像をあえて高めにすることで、コンテンツそのものがある程度の高さを確保できる。

こんなところですかね。

どうしても画像と文字の間にできる余白も、びみょ〜に右によっている左よりも、思いっきり左に寄せている右の方が、個人的にすっきりとした区分になります。

しかし、連続してこの配置がされているのを想像して見てください。無秩序な感じになるので、この方法は、使いすぎ注意って感じです。

えぇ？

エンジニアを○しかねないようなデザインがありました。

縦長の画像を使い、且つ下の余白を無くしたい時には使えそうですね。

正直あんまり使わないと思います。使うとしても、１ページにつき一回ですね、、。

上に画像、下に文字

これは、見出しの直下に横長の画像その下に文字を入れるパターンです。

トリミングの都合上、横長になった画像を左側のように使うと、事故ります。

そんなときに右側のようにすると、安定感が増すかもしれません。

右の画像の左下の余白が気になるっていうのがちょっとデメリットですね。個人差あります。

さっきのとは違って、連続で同じ配置を行なっても、サイトで見る分にはあまり違和感は出ないと思います。でも、上下の余白をちゃんと管理しないと混乱するかも。

まとめ

やっぱりこれがめっちゃ無難。乱用できるよ。

と言っても他の方法も全然使えるので、いつか試してみたいと思います。

これに加えて、さらに画像を重ねたり、背景に装飾したり、ずらしたりすることによって個性が出ると思います。

❤︎

2022/09/08

nira-012.mahora94

◀︎

next...

prev...

▶︎

comment

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

Artist

nira-012.mahora94

よろしくお願いします

【ニラは見た！】Webデザインレポート 文字と1枚の画像編

comment

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

【ニラは見た！】Webデザインレポート文字と1枚の画像編