グリッドを使用したWebデザインレイアウト作成方法

【こちらの記事は、約4分程でお読みいただけます。】

皆さん、こんにちは！

WEBサイトを作る時、パーツやレイアウトなどの大きさや配置を
決めるとき、適当に決めて配置していませんか？

パーツのサイズ決めやレイアウトは、一定の法則に乗っ取って
行った方が、整理されすっきりと見せることが出来、
HTMLでコーディングするときも楽に行えます。

この法則に、方眼紙のような「グリッド」を併せてデザインすることを
「グリッドデザイン」といいます。

この方法を使用することにより、サイトのクオリティを一つ上に
上げることが可能です。

詳しくは、KENスクールの講座「クオリア」で勉強することが出来ます。
折角なので、「グリッドデザイン」をする時の準備を説明します。

サイトをHTMLで作成する前に、
Photoshopやイラストレーターなどのグラフィックソフトを使用して、
「デザインカンプ」というサイトの完成図を作成します。
デザインカンプを作成する時点で、
「グリッドデザイン」を仕込んでおかないといけません。

今回は、「Photoshop」での設定を説明します。
Photoshopを立ち上げたら、任意の大きさの新規ファイルを作成します。

ショートカットキー「ctrl」+「@」でグリッドが表示されますが、
デフォルトのグリッドだと使いづらい場合があります。



その場合は、 「編集」メニューから「環境設定」を選択します。

カテゴリの「単位・定規」を選択し、「単位」が「pixcel」になっているのを確認します。

カテゴリの「ガイド・グリッド・スライス・カウント」から「グリッド」の「グリッド線」を「20」に、



分割数を「２」にします。
これで、「20pxを2分割した」グリッドが作成できます。

あとは、このグリッドに沿ってパーツの作成・配置を行っていきます。
何気ないテクニックですが、これを行うとサイトのクオリティが断然アップします。

「クオリティアップ」の「クオリア」講座、
興味が沸きましたらインストまでお問い合わせください。

--------------------------------------------------------------------------------

Web制作現場のテクニック全てを、ここに集約！
KENスクール自慢の就職対応プロフェッショナル講座！

⇒【「極」 Professional クオリア講座】
Webサイトを一段階上のクオリティへ進化させる
「極」 Professional クオリア。
デザイン、ユーザビリティにこだわり、
より高い質のWebサイトを制作していきます！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 馬場