構図

こんにちは、3児のママWebデザイナーの祥子です。
Webサイトを作っていて
「なんかダサい気がする」
「整ってない気がする」
そんなふうに感じたこと、ありませんか？

でもそれ、
センスの問題じゃなくて
構図を知らないだけかもしれません。

今回は、
Webサイトでよく使われる構図を5つ、
初心者さん向けにわかりやすく解説します。

この5つを知っておくだけで、
デザインの迷いが減って
サイトが一気にそれっぽくなって
さらに、クライアントにも
「なぜこうしたのか」を説明できるようになります。

デザインの「引き出し」を
一緒に増やしていきましょう。

そもそも構図って何かというと、
情報をどんな順番で
どこに配置するか、という設計のことです。

色やフォントよりも前に考えるもので、
人の視線の流れを作る役割があります。

実は、
プロっぽさの8割は
構図で決まると言われています。

今日は感覚じゃなく、
再現できる考え方として
構図を見ていってくださいね。

①
まず一つ目は、Z構図です。
視線が
左上 → 右上 → 左下 → 右下
と、アルファベットのZの形に動く構図です。

キャッチコピー、画像、説明、ボタン
この流れを自然に見せられるので、
トップページやLPで
本当によく使われます。

初心者さんは、
まずこのZ構図から覚えるのがおすすめです。

②
次は、F構図です。
人は文章を読むとき、
実はFの形で視線を動かしています。

ブログや説明ページに
とても向いている構図です。

ブログが読まれない理由、
文章力のせいだと思われがちですが、
実はF構図が崩れているだけ、
ということもかなり多いです。

見出し、
箇条書き、
行間。
ここが本当に大事です。

③
三つ目は、三分割構図です。
写真やヒーローエリアで
よく使われます。

写真が
「なんかズレて見えるな」
と感じたら、
ぜひ三分割構図を思い出してください。

交点に人物を置いたり、
一番見せたい要素を配置するだけで、
一気に安定感とプロ感が出ます。

④
四つ目は、丸構図、円構図です。
ここは、祥子チャンネルらしい構図ですね。

視線がぐるっと回るので、
やさしさや安心感が出ます。
丸構図は、
正解を押し付けない構図です。

コーチング、
サロン、
コミュニティ、
女性向けサービスなど、
人柄や想いを伝えたいサイトと
とても相性がいい構図です。

⑤
五つ目は、斜め構図です。
動きや勢いを出したいときに
とても使えます。

キャンペーンや告知、
イベント、
期間限定オファーなどにおすすめです。

若い層向けのデザインにも
相性がいいですね。

ただし、
使いすぎには注意です。
ちょっとで十分です（笑）

最後に、よくあるNG例です。
よく見るのが、
全部センター揃えにしてしまうこと。
理由なく左右に並べること。
構図を考えずに
ブロックをただ積み上げてしまうこと。

「なんか微妙…」
と感じる正体は、
ほぼここにあります。

まとめです。
デザインは、
センスじゃなく
引き出しの数です。

今日お伝えした5つの構図、
ぜひ知って終わりにせず、
次のサイト制作で
まず1つ、使ってみてください。

きっと
「あ、整った」
その感覚がつかめるはずです。