マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

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制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-3-

約3週間に1回の登場になりますが、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて、続いて紹介していきたいと思います。 今回は最終回となりますので、最後まで読んでいただけれ …

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …

手軽に雰囲気を変える!無料英字webフォントのまとめ -素敵な明朝フォント編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第二弾として「素敵な明朝英字フォント …

手作り感溢れる癒しのWEBデザイン

手作り感溢れる癒しのWEBデザイン

フラットデザインやシンプル系、クール系のデザインとは違った手作り感溢れるデザインは気持ちが伝わりほっこりさせてくれます。 トレンドのデザインは進んでゆきますが、手作り系のデザインは今も昔もずっと残って …