マーカーネット株式会社

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

執筆者:

関連記事

覚えたいんだから~!Photoshopのショートカット編

覚えたいんだから~!Photoshopのショートカット編 http://www.markernet.co.jp/blog/2015/07/02/post-5630/ Facebook

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jQueryを利用して、 facebookの指定のアルバムから写真の一覧を取得する方法を紹介します。 ※ まず、facebookからアルバム一覧します。 var name = “markernet”; …

イラスト素材サイトのご紹介

イラスト素材サイトのご紹介

こんばんは、新人Aです。 今日は、イラスト素材のサイトさんをご紹介しようかと思います!       【いらすとや】 http://www.irasutoya.com/ フ …

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

もう怖くない!色の配色

皆さん! こんばんは!! webデザインを新人デザイナーKです。 元々色選びに才能が全くない私は、デザインをする際に色んな参考サイトを メチャクチャ調べてから制作に入ります。 でもどうしても配色だけは …