マーカーネット株式会社

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

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

関連記事

Movable Type6がリリースされました

Movable Type6がリリースされました

movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …

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

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

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

【Vol.5】優れたキャッチコピーを見て、閃き力を上げよう!【映画・アニメ編】

冬っ子のわたくし、この暑さもう限界です 皆様こんにちは。いかがお過ごしでしょうか? 真冬生まれのため連日の暑さに耐えきれず瀕死状態のAD&デザイナーMです。   明日から気温が落ち着くようで …

海外で人気のあるPHPのyiiフレームワークを使用してみました。

海外で人気のあるPHPのyiiフレームワークを使用してみました。

海外では、人気のあるPHPのyiiフレームワーク使用してみました。 1. yiiをhttp://www.yiiframework.com/ダウンロードしまして、 ソースコードを任意のwebの公開ディレ …

WEBサイトの配色に迷った時の必見サイト!

こんばんは! 本日社内で勉強の一環で某テストを受けた、風邪気味のKです! 夏休みも目前!早く元気になりたい! さてさて、このところお仕事をさせていただいている際、 セオリーにハマった色使いを真似ている …