マーカーネット株式会社

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

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

関連記事

【カメラ撮影】写真素材として撮影するために知っておきたいこと ~風景の色彩編~

WEB制作において”良い写真”は欠かせません。 素材を撮影する際に知っておきたいこと、 今回は風景写真撮影での色設定のポイントをご紹介します。 秋は暖色で情緒を感じさせる 例年11月末~12月初旬あた …

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材をご紹介。

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材をご紹介。 https://www.markernet.co.jp/blog/2015/08/19/post-6004/ Facebook

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

こんにちは!風邪っぴきのweb初心者Kです。 週末に風邪を治しきれず、咳のため未だマスクが手放せません。 今日は誰とも口をきけないかも知れない!!! みなさまはお風邪など召されていませんか? さてさて …

え、うそ、なんか今っぽい。

え、うそ、なんか今っぽい。Photoshopで写真をDuo Toneにする方法 https://www.markernet.co.jp/blog/2015/09/02/post-6033/ Faceb …

食べ物の写真を美味しそうにみせるフォトショの小ネタ

こんにちは! デザイナーの木野子です。 マーカーネットブログを、今回初めての担当することになりました! ここでは、私が普段web製作で使っている、 PhotoshopやIllustratorの小ネタな …