カンプやワイヤーフレームを作成する上で重宝するのが、グリッドシステムです。
これは、縦方向に区切られたカラムに沿って要素を配置するもので、簡単に見栄えのするレイアウトを作成することができます。
多くの制作者はグリッドシステムを利用する場合には960GRID SYSTEMなどを使用したりします。
近年のWebサイトは横幅が大きくなり続けており、デザインする時に960GRID SYSTEMの横幅が960pxでは不足する場合も出てきているものと思われます。
もっと自由にグリッドシステムを設計したい場合にはカラムを自作するのが一番です。
PhotshopもIllustratorもCCではカラムを簡単に作成できるようになっています。
もっと自由に自分専用のカラムを使用してグリッドシステムを活用してみましょう。
ページの横幅の決め方ＰＣ用
グリッドシステムのカラムを作成する時に事前に必要になるのがページの横幅を決める事です。
これは対象にするモニタサイズで概ね決める事ができます。
960pxとされる場合が多いのは最小モニターサイズの想定が1024pxとする場合が多いことになります。
最小モニターサイズを何ピクセルにするか決めることで大きな方針は決まってきます。
また、8の倍数にすると良いという考え方もあります。
よく使われているサイズを参照するのも良いでしょう。
更に、最近よく使用されるBootstrapの仕様に従うのも良いかもしれません。
今回の例はBootstrapを使用することを念頭にサイズを決めています。
Photoshopでカラムを作成する方法
- メニューの新規から新規作成を行います。
プリセットから「Web」を選択して、幅と高さに任意の数字を入れます。今回は幅を1170px高さを5000pxとしました。
カラーモードはRGBです。
- メニューに表示から「新規ガイドレイアウトを作成」を選びます。これはＣＣからの機能です。
- 「新規ガイドレイアウトを作成」ボックスの列の数と幅と間隔を記入します。今回は数＝12、幅＝70px、間隔＝30pxとしました。
間隔のことをグリッドシステムではガターと呼びます。これでカラムができあがります。
- このままでは左右に余白がなくなり、1170px以上にブラウザが広げられた時の確認ができませんので、現段階で一般に使用されているモニターの最大サイズを1920pxとして横幅をその数字にします。その方法はメニューの「イメージ」から「カンバスサイズ」を指定して決めます。
完成例
Photoshopでグリッドシステムを利用するとき、ガイドが整数のピクセルになっていることが必要です。境界線のにじみの原因になりますので再度確認をしておくとよいでしょう。
Illustratorでカラムを作成する方法
- メニューの新規から新規作成を行います。
プロファイルからWebを選択して、幅と高さに任意の数字を入れます。今回は幅を1170px高さを5000pxとしました。
カラーモードはRGBです。
- 長方形ツールを使用して長方形のオブジェクトを作成します。幅と高さはアートボードに設定した数値と同じです。今回は幅を1170px高さを5000pxとしました。その後、できた長方形のオブジェクトは整列パネルを使用してアートボード基準の「水平方向左に整列」と「垂直方向上に整列」でアートボードと同じ位置に整列をさせます。
- メニューの「オブジェクト」から「パス」の中の「段組設定」を選びます。
- 「段組設定」パネルの「列」の段数と幅、間隔、合計を設定します。今回は段数＝12、幅＝70px、間隔＝30px、合計1170pxと設定しました。これでカラムができあがります。
- このままでは左右に余白がなくなり、1170px以上ににブラウザが広げられた時の確認ができませんので、現段階で一般に使用されているモニターの最大サイズを1920pxとして横幅をその数字にします。その方法はアートボードツールを選んでからコントロールパネルのwのところでアートボードの幅を変更します。
完成例
Illustratorでグリッドシステムを作成する場合、アートボードの起点やガイドの位置が整数のピクセルでないと境界線がにじむ原因になりますので位置の調整は最終段階で再度確認をしておくとよいでしょう。
Illustratorで作成する方法は長方形オブジェクトを段組にしていますので、オブジェクトに色を付けたり透明度を加えると960GRID SYSTEMのようなガイドを作成することができます。
Webデザインの現場ですぐに役立つ Photoshop仕事術
コメントを投稿するにはログインしてください。