ガイドを使ったレイアウト術
最近、ウォーキングを始めるとやんでいた雨が降ってくるatsushiです。
ホームページのデザインをするとき、まず、Photoshopで原寸大の大きさでTOPページをデザインしています。
原寸大で制作することで、実際のサイトの仕上がりイメージに限りなく近いものが出来るため、デザインの提案時にお客様に完成後のイメージをつかんでいただけます。
また、原寸大で作ることで、そのまま、画像をスライスし、切り出すことができるので、WEB用の素材も同時につくれてしまうのです。
この方法でかなり制作時間を短縮できるようになりました。
このデザインの方法を確立する上で、すごく効果的だったのがPhotoshopの「ガイド」機能です。
まずは、真っ白なカンバスを用意し、そこに大まかなレイアウト（各部分の大きさ）を決め、それにあわせガイドを設定していきます。ガイドを設定することで「選択範囲」をそのガイド内に設定するとガイドの位置ぴったりとあうのでサイズがずれてしまうことがないのです。
そしてそのときのコツとして、ガイドは、Shiftキーを押しながら設定することで5pxずつ動きます。この仕組みを利用してページの各部品を5px刻みでレイアウトします。
こうすることで、画像のサイズも中途半端なサイズがなくなり、コーディングも少しは楽になるかもしれないです。
また、5px刻みのブロックのレイアウトだからデザインに安定感も生まれます。でも、デザインによっては、少し硬い印象になりがちなので使う画像などでやわらかさを演出すると良い感じにまとまると思いますよ
「更新が簡単」「拡張性が高い」ビジネスブログの作成や、自身で商品管理ができる通販サイトの構築、集客できる不動産サイトの制作ならネットインパクトへ。SEO対策・ユーザビリティに配慮したホームページ作りを心がけています。
お手頃価格で結果の出るホームページをつくります。さまざまな業種での制作実績がございます。はじめてウェブサイトをつくる方からネット販売をはじめたい方までお客様のニーズに合わせたホームページを低価格で構築致します。
ホームページ制作やネットショップサイトの構築とSEO対策はお任せください。通常の商用サイトはもちろん、不動産関係や自動車関連の作成実績が豊富です。
