「よーし、俺様のサイトをオープンしちゃうぞ！」と作ってはみたものの、どこからみてもシロートまるだし。「あれ？こんなはずじゃ……」とお悩みのみなさんに、手軽にできる「脱・シロートテクニック」を大公開。 デザインも内容もテクニックも、めざせバージョンアップ！ 白熊　吾郎 　 GORO SHIROKUMA Web & 映像業界で生きる（モーション）グラフィックス屋。マスコミインハウスからフリーに。 ■バックナンバーへ ■ サンプルサイト制作（１） 前回プランを作った「白熊吾郎オフィシャルサイト」の制作です。まぁサンプルなんでネタはネタとしまして、作っていく途中途中でのポイントを参考にしていただけたら、と。 Web制作はあとから修正するのにたいへん手間がかかるモノですが、要所要所をおさえれば案外さっくり作れるモノでもありますよ。 ラフスケッチ（→044／046 参照） 3ざっくりしたレイアウトと、ディレクトリ構成をメモします。 レイアウト（左）とディレクトリ構成（右） 画像はクリックで拡大できます。 こんな感じでササッ、と書いてありますが、要は自分が忘れちゃいけないポイントが分かればいいのです。レイアウトでは特に、 　・共通部分はどこか 　・共通部分のサイズは 　・スクロールバーがどこに出るか（フレームを使う場合） が分かれば良いですね。 共通部分とはロゴやインターフェイスなど、サイトのほとんどのページで使い回す部分のこと（→052 参照）。そのサイズが分かれば、おのずとコンテンツに使える範囲がわかりますね？ 今回は左と上にインターフェイスを置くタイプ（→058 TYPE3 参照）で、左をコーナー選択、上をサブコーナー選択にしています。来訪者が迷わないよう、コーナーごとに同系色でカラーを決め、それをコーナー選択ボタン／コーナータイトルで使い、サブコーナーの選択でコーナーカラーの類似色を使うことにしました。このように、コーナーが多い場合は同系色／類似色を上手く使うことで、すっきり整理することができます。 　一方、ディレクトリ構成のメモでは 　・データ保存場所としての階層構造 　・各ディレクトリの名称と位置関係 　・各ディレクトリの用途 が分かればOK。「このデータはどのコーナーだっけ？」「このコーナーのディレクトリ名って？」「このファイルはどのimageフォルダに入れるんだ？」といった、一見間違えそうにないことを間違えるのを防ぎます。コーナーが多かったり、サブコーナーが多いケースでは、保存場所を間違えることが多いのです。特に画像を保存するimageフォルダで間違えるケースが多いので要注意。そうならないためにも自分用のディレクトリ・メモは必須です。 ちなみにこのディレクトリ構成表、複数の人間でサイトを制作するときには必ず作ってメンバーで共有します。サイトの設計図ですからね。 【Point】 076：ラフスケッチで最低限必要な部分をメモせよ！ 077：同系色・類似色の持つイメージで分類・誘導ができる！ Illustratorで基本構成 ラフスケッチをもとに、グラフィックアプリケーションでデータを作っていきます。好きなソフトでガシガシ作っていくのですが、商業レベルになるとピクセル単位の緻密な設計＆制作が要求されます。このため、ドラッグ＆ドロップでホイホイ、というわけにはいかないので、ある程度精度の高いアプリケーションが必要になってきます。 今回はAdobe IllustratorとPhotoshopを使いますが、Webに特化したアプリケーション（Adobe ImageReadyやMacromedia Fireworksなど）も便利です。作り方の流れを参考にして各自のアプリケーションに対応させてください。 今回は曲線を使ったパーツがあるため、Illustratorでだいたいのカタチを作ってからPhotoshop形式に書き出し、さらにPhotoshopで修正するという手順をとります。 まずIllustratorで新規書類を作り、最低画面解像度（→048 参照）のサイズで背景用の長方形を作ります。今回は800×600ピクセル表示のマシンでも見られるようにしたいので、最低画面解像度を720×500ピクセルに想定します（実際のマシンではブラウザ内縦サイズは450ピクセル前後しか表示できませんが、今回は説明のためにちょっと大きめです）。 長方形ツールを選択しドラッグ……といきたいところですが、精密に作るためサイズ指定で作ります。画面上をクリックしてサイズ指定ダイアログで720×500ポイントを入力します。もし他の単位になっているときは「720pt」「500pt」と「pt」をつけて入力すれば、ポイントに変換してくれます。 最低画面解像度で背景となるエリアを作る 【Point】 078：オブジェクトはドラッグで作らず、ピクセル単位で数値入力 次にインターフェイスエリアです。今回はあとでPhotoshop形式で書き出すときに、レイヤー構造をそのままPhotoshopに移行したいので、パーツの種類ごとにレイヤーを分けていきます。 新規レイヤー「base」を作り、長方形ツールをサイズ指定して入力します。サイズはラフスケッチで設計した数値で。縦長と横長の２つを作ったら、背景エリアの画像と今作った長方形のひとつを選択し、配置パレットを使って左端と上端を揃えます。同様もう一つの長方形も揃えたら、ふたつの長方形を選択し、パスファインダで合成してひとつのオブジェクトに変換しておきます。 背景エリアとぴったり揃える 次にコーナー名とサブコーナーのエリアを作ります。新規レイヤー「コーナー名」を作り、サイズ指定で長方形を。同様に「サブコーナー名」レイヤーにも長方形を。二つとも位置を調整しておきます。 コーナー名（緑）とサブコーナー名（薄緑） 【Point】 079：IllustratorとPhotoshopを連携させるときは、オブジェクトの種類ごとにレイヤーを分ける！ [ NEXT→]