デザイナーなら知っておきたい７つのレイアウト
webデザインをするときに必ずレイアウトって悩みますよね。
私もデザインを始めたころは何がよいレイアウトなのかさっぱり分からずやってました汗
記念すべき第一回目の記事はレイアウトについて書いていきます。
レイアウトを決める前に
レイアウトの前にまずどのように表現したいかを決めないとレイアウトも決められません。
例えば
- ボリューム感があるように見せたい！
- 緊張感があるデザインにしたい！
- 動きのあるデザインにしたい！
などなど。それを実現するための一つとしてレイアウトが存在します。
シンメトリー
- 王道っぽくみせたい
- 綺麗にみせたい
超王道レイアウト手法の一つ。
左右上下が対称のもの。
カンタレのチカラ
https://www.ktv.co.jp/recruit/
I want chu
対決
- バトルコンテンツを表現したい
- 紹介したいものが二つあるとき
雑誌やweb記事などで対決のコンテンツはよくありますが
そういったときに使えるレイアウト手法です。
またこのパターンのレイアウトはシンメトリーになっている場合が非常に多いです。
ひたパンつけパン
https://tsuke-hita.jp/pc/index.html
女どうしで楽しむちょっとリッチな東京時間|tokyo bookmark
https://tokyobookmark.net/feature/kelly_tokyotime/top.html
円
- 楽しげな感じに表現したい
- かわいい感じのレイアウトにしたい
2012年のトレンドレイアウトでもある円のレイアウト。
けっこう円を使ったレイアウトは最近よくみます
Message for Japan
エール募金
グリッドレイアウト
- かっちりとしたレイアウトにしたい
- 誠実な印象を与えたい
シンメトリーと同じくらいメジャーすぎるレイアウト技法。
どこでも見るレイアウトですが、最近は特にマガジン系や
ニュースサイトなどでよくみかけます
Mighty Crown
https://www.mightycrown.com/j/index.php
斜め
- 動きのあるレイアウトにしたい
- 普通のレイアウトとは違う感じにしたい
難しいレイアウトですがビシっと決まればカッコ見えるレイアウトです。
著者はあんまり斜めレイアウトは使ったことがありません
An introduction
Hey you
MOE
ムーブメント
- 動きのあるデザインにしたい
- 楽しげな感じのデザインにしたい
動きのある表現したいときやまたはストーリー性のある
レイアウトなどでとても有効です
ブラック会社に勤めているが俺はもう限界かもしれない
https://black-genkai.asmik-ace.co.jp/
奥行き
- 立体間のあるデザインにしたい
- 立体で商品などをひきたてたい
動きのある表現したいときやまたはストーリー性のある
レイアウトなどでとても有効です
cupcup
https://www.ikitchen.jp/palette/main.html
palette
————————————————
上記のレイアウトはあくまで技法ですので
最初にも書いた通りまずは目的を明確にしてからレイアウトしましょう☆
他にもレイアウト手法がありますがまた今度紹介したいと思います。
以下の記事もすごく参考になります
■webblog
良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと
https://endoutakae.com/2012/02/22/webdesign_v/
