Webイロハ
「よーし、俺様のサイトをオープンしちゃうぞ!」と作ってはみたものの、どこからみてもシロートまるだし。「あれ?こんなはずじゃ……」とお悩みのみなさんに、手軽にできる「脱・シロートテクニック」を大公開。
デザインも内容もテクニックも、めざせバージョンアップ!
shirokuma 白熊 吾郎   GORO SHIROKUMA
Web & 映像業界で生きる(モーション)グラフィックス屋。マスコミインハウスからフリーに。
■バックナンバーへ
サイトデザイン(4)
インターフェイスとページデザインはどうしても混同している人が多く、分けて設計するのは難しいところ。これからサイトを立ち上げる人はもちろん、自分のサイトをリニューアルする人もエッセンスを参考にしてください。
実際のページデザインに入るには、何かしらのグラフィックアプリケーションが必要です。ここでは主にAdobe Photoshopを使いますが、あなたの使い慣れたアプリケーションで作業してください。若干メニューや操作方法が異なりますが、大まかな流れは同じです。
なお操作説明の中で「ファイル>保存」と表記する場合は、ファイルメニューをプルダウンして保存を選ぶ、という意味です。
060. まずピクセル単位で区切る!
今回はトップページの他にA〜Eの5つのコーナーがあるページと仮定し、ページのヘッダ部分に横方向でデザインします。またサブコーナーが、A=4、B=3、C=3、D=2、E=2あるとし、将来的に最大6つまで増やすとしてデザインします。となると、コーナーは1+5=6個、サブコーナーも6個で考えます。
 ヘッダ部分にロゴなどを置くなら、この段階で場所とサイズを決めておきます。全幅750ピクセルの中をボタンの数で割り振っておけば、この後の作業もスムーズです。
capture060
とりあえずサイズだけを確定する(この画像は原寸ではありません)。
150×50のロゴ、100×30のメインコーナーボタン、10×20のサブコーナーボタンを2段に配置することにする。色はダミー。
061. ダミーレイアウトで操作性を確認!
慣れてくればこの作業は不要ですが、細かいレイアウト作業が初めての人にはぜひおすすめです。実際に060で設計したインターフェイスのダミーを、グラフィックアプリケーションで作り「ボタンがクリックしやすいか?」「ページ全体に対してサイズが適当か?」など、操作性やバランスをチェックします。

1)Photoshopで新規書類作成(ファイル>新規)
   サイズ:750×500ピクセル
   解像度:72pixel/inch
   画像モード:RGBカラー
   背景色:白

2)定規を表示させ(ビュー>定規を表示)、定規部分をダブルクリック。
   「環境設定」の「単位・定規」が表示されるので
   定規:pixel
   文字:point
   に変更してOKをクリック

3)定規部分からガイドをドラッグして、書類上に060で作ったピクセル数でラインを引く※図1

4)テキストツールでコーナー名を打ち込んでみる※図2
capture061-1
【図1】


【図2】クリックして原寸表示
このダミーで大きさを確認します。インターフェイスが大きすぎてスカスカなら、文字サイズとボタンサイズの両方を縮めましょう。逆に小さければレイアウトを再調整します。もし「クリックできるサイズなんだけど、文字が入りきらないんだよなぁ……」というケースならば、次の062へ。
[ NEXT→]