ガイドを使ったレイアウト術
最近、ウォーキングを始めるとやんでいた雨が降ってくるatsushiです。
ホームページのデザインをするとき、まず、Photoshopで原寸大の大きさでTOPページをデザインしています。
原寸大で制作することで、実際のサイトの仕上がりイメージに限りなく近いものが出来るため、デザインの提案時にお客様に完成後のイメージをつかんでいただけます。
また、原寸大で作ることで、そのまま、画像をスライスし、切り出すことができるので、WEB用の素材も同時につくれてしまうのです。
この方法でかなり制作時間を短縮できるようになりました。
このデザインの方法を確立する上で、すごく効果的だったのがPhotoshopの「ガイド」機能です。
まずは、真っ白なカンバスを用意し、そこに大まかなレイアウト（各部分の大きさ）を決め、それにあわせガイドを設定していきます。ガイドを設定することで「選択範囲」をそのガイド内に設定するとガイドの位置ぴったりとあうのでサイズがずれてしまうことがないのです。
そしてそのときのコツとして、ガイドは、Shiftキーを押しながら設定することで5pxずつ動きます。この仕組みを利用してページの各部品を5px刻みでレイアウトします。
こうすることで、画像のサイズも中途半端なサイズがなくなり、コーディングも少しは楽になるかもしれないです。
また、5px刻みのブロックのレイアウトだからデザインに安定感も生まれます。でも、デザインによっては、少し硬い印象になりがちなので使う画像などでやわらかさを演出すると良い感じにまとまると思いますよ
