ホームページ作成初心者の皆さんこんにちは。

初心者向け記事として、
ホームページ作成を始めたばかりの方でも分かりやすい記事を、
ウェブデザインという観点から掲載していこうと思います。

「デザインには技術が不要。まずはHTMLやCSSの勉強をしよう!」
と多くの方が思いがちですが、それは大きな間違いです。

もちろんホームページ作成のための言語の学習も大事なのですが、
軽視されがちな傾向にあるデザインの作成(=デザインカンプの作成)も実はかなり重要です。

ホームページ作成は、「デザイン」→「コーディング」の順番で行うのが鉄則だからです!

今回は、デザインカンプの作成時にズレを発生させないことの重要性をご紹介します。

デザインカンプに「ズレ」は大敵

c1b872542a32cc57b1fdd25042770e15_m

ウェブサイトのデザインカンプの作成は、
Adobe Photoshopを用いて行われるのが一般的です。

トップページや下層ページなど、
サイト内に登場するそれぞれの種類のページごとに、
デザインを上から下まですべて構成していきます。

この際気をつけることは、
デザインに1pxのズレも生じさせないことです。

デザインカンプはただデザインの方向性を決定するため”だけ”に作成しているのではありません。
HTMLで記述する際の各オブジェクトのサイズも同時に定義しているのです。

作成した各オブジェクトのwidth(横幅)やheight(縦幅)をメモしておくことで、
スムーズにHTMLやCSSを記述することができます。

デザインカンプの作成はPhotoshopのガイド機能にかなり頼った作業になります。
また、画像出力の際はスライスツールも活用します。
これらの機能にズレは大敵です。それぞれについて詳しく見てみましょう!

Photoshopの「ガイド」機能とは?

d25574cfc57ba18eb07999bd6bf57075_m
Photoshopの「ガイド」とは、画像を出力しても表示されない、

蛍光水色の線を任意の箇所に表示する機能です。
以下に「ガイド」機能の活用例をざっくりとご説明します。

一般的なウェブサイトのコンテンツ部分の横幅は960pxですが、
私はだいたいいつも1200pxのPSDファイルにて作業します。

左端から120pxと1080pxの位置に縦のガイドを引くと
コンテンツ部分がどこまでなのかが分かるようになります。

それなら横幅960pxのPSDファイルを用意すれば良いのでは?
と思われるかもしれませんが、コンテンツ部分より外を用意することで、
コンテンツ部分の色合いを見ながら背景色の調整も行えるようになります。

他にもガイドはページ内の各オブジェクトの幅や高さ、
位置を正確に揃えるためにも使用します。

とても便利ですしウェブデザインに欠かせない機能ですが、
あまりにもガイドを引きすぎると
どのガイドが何を表しているのか分からなくなってしまいますので、
そのあたりは気をつけましょう。

ガイドは上部・左部に表示されているルーラーの上から
編集領域に向けてドラッグすることでも引くことができますが、
マウス操作なのでほんのわずかな(しかし致命的な)ズレが生じてしまう可能性もあります。

ガイドを引く際には必ず
「表示」>「新規ガイド」を選択し、
数値を入力して引くように心がけると良いでしょう。

Photoshopのスライスツールで画像を切り出して出力

63af50ce0b1254600d70a78763f59e35_m
デザインカンプの作成が完了したあと、
画面左のツールバーに入っているPhotoshopのスライスツールを使って
各画像パーツを切り出していきます。

通常、PSDファイルを別形式に変換し出力すると、
含まれるすべての内容が1枚の画像として出力されます。

スライスツールはその名の通りPSDファイルをバラバラにスライスし、
パーツごとの画像としての出力を可能とする機能です。

スライスツールもマウスで操作し指定しますが、
やはりズレが心配なので、

スライス上で右クリック>「スライスオプションを編集」

からスライスの横幅・縦幅を数値で指定しましょう。

また、位置のズレも心配ですので、
PSDファイルを拡大してよく確認してください。

もし、1pxでもズレがあったら・・・?

HTMLやCSSを記述してサイトを構築した際、
オブジェクトに不自然な余白ができてしまったり、
ページ自体の崩れの原因になることもあります。

まとめ

たかが1px、されど1px

今回お伝えした内容を読まれてうーん神経質だなぁ
と思われた方もいらっしゃるかもしれませんが、

ズレが発生してしまったときの面倒くささはなかなかのものです。

どこがズレているのか、すぐに発見できなかったり。

デザインカンプ作成時に一手間かければ、後々の作業がスムーズになりますよ!
たかが1px、されど1px、です。

おすすめの記事