WEBデザイン WEB制作

さまざまなレイアウトの工夫その①

投稿日:2014年11月26日 更新日:

キレイなウェブ制作のためには色んな要素が必要となります。「フォント」「色」「レイアウト」「写真」「バランス」「テーマ」等々!今回はその中でも「レイアウト」ついて少し説明させていただきたいと思います。でもレイアウトは様々な種類があり、それをここで全~~~~部説明するのはさすがに無理なので・・・今回はまず■□グリッド■□というレイアウトを説明させていただきます!

グリッドレイアウトとは?

www.edito365.com_3

Webページなどのデザイン手法の一つで、画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせて内部の要素の大きさや配置を決定していく方式。特に、ページを方眼紙のように同じ大きさの微細な正方形に分割し、これを複数組み合わせて要素や余白を構成する方式。

[IT用語辞典 e-Wordsより引用]

グリッドレイアウトの応用

1.グリッドスタイルでメリハリを生み出す

www.edito365.comwww.edito365.com_2

こちらはあるセレクトショップのホームページです。このサイトの場合、ところところに大きなグリットを入れるテクニックが使われてます。このグリッドレイアウトは各グリッドに大小を付けられるので、簡単にレイアウトのメリハリを生み出すことができます。

2.グリッドスタイルでアクセントを付ける

rvlt.comrvlt.com_2

あえて空きグリッドを作っていれたり、もしくは色ベタのグリッドを作って入れることでアクセントを付るもの可能です。

まとめ

要するに・・・グリッドレイアウトというのは規則性を持たせたキレイなレイアウトデザインなのかな?と私は思います(笑)。グリッドレイアウトは一見、つまらないデザイン見えるかもしれませんが、ちょっとした工夫で色んな表現ができるレイアウト手法の一つでもあります。是非、チャレンジしてみてください!

-WEBデザイン, WEB制作

関連記事

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

みなさん こんばんは! デザイナーKです! 今回、私が皆さんにご紹介する内容は! 仕事で使えるイラスト素材サイトです!! 1.ほらぱれっと 私が好きなパステルトーンの可愛い素材が揃っているサイトです。 …

多言語サイトの作り方は?デザインやビジネスにおける重要性について徹底解説

多言語サイトの作り方は?デザインやビジネスにおける重要性について徹底解説

貴社のWEBサイトは、言葉の壁に阻まれていませんか?グローバル市場で成功を収めている企業には、ある共通点があります。それは、多言語サイトの活用です。驚くべきことに、多言語サイトを導入した企業の70%以 …

ホームページ制作を自分で行うことは可能!具体的な流れや便利ツールを一挙にご紹介!

ホームページ制作を自分で行うことは可能!具体的な流れや便利ツールを一挙にご紹介!

ホームページ制作。かつては専門家の領域と思われていたこの分野が、今や多くの人にとって身近なものとなっています。技術の進歩により、無料のツールやサービスを活用すれば、プログラミングの知識がなくても基本的 …

ワードプレスのテーマの安全性をチェックしてくれる実用的なプラグイン

ワードプレスのテーマの安全性をチェックしてくれる実用的なプラグイン

WordPressのセキュリティを高めてくれるシンプルだけれども実用的なプラグインです。 名前もシンプルです。「AntiVirus」 WordPressで使用しているテーマに悪意のあるコードやセキュリ …

jQueryを使ってみよう【親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」】

jQueryを使ってみよう【親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 今回は便利なjQueryプラグイン「imgLiqu …