6月24日 横山さま

本日は、午前中、横山さん。

ビジュアルはある程度できていたので、トップページをまとめてきていただきました。

まったくはじめてのWEBデザインですが、要件を理解して、ちゃんとやってきていただけました。

メニューや、コンテンツの部分などまだ、気をつけてほしいところがありますが、そろえないといけないところとか

なくしたほうがいい要素など、アドバイスしたことをちゃんと理解してくださっています。

これは、ほんと鍛錬なんで、数をこなすことで、確実にクオリティは上がっていきます。

ラフがとりあえず、出来上がったので、これをphotoshopで切り出して、GIFあるいはJPEGに書き出していきます。

まず、サイトの全体を入れるホルダを作ります。その中にimages（たいていこの名前）フォルダを作って、ここに画像を書き出していきます。

ヘッダならヘッダのエリアを区切るようにガイドラインを設置し、結合部分をコピーで、合成した状態をコピーして、新しい書類を開きます。（こうすることで、新しい書類は切り取ったものと同じ大きさで開きます）ペーストして、

PhotoshopのWEB用に保存で、GIFかJPEGで保存します。

メニューだけは、CSSによるロールオーバー（マウスが乗ったら画像が変わる）処理をしますので、上下2段がさねで、マウスが乗っていないときと乗ったときの画像を並べてつくります。

ここで、2つの画像が1ピクセルでもずれているとマウスが乗ったときに動いてしまうので、
絶対
ぴったり合うように工夫して合わせます。

テキスト文字で作るところは、ラフから文字を消して背景だけ書き出します。

これが出来たら、まず、文書構造を作り、次に、デザインにあわせてDIVでエリアを区切っていきます。

CSSで配置やフォントなどの見た目を定義していき、サイトのコーティングは終わりです。

ここには、なかなか現在のCSS2が抱えている問題がいろいろ出てきます。それを克服することで、スキルが蓄積していきます。すると、ある程度のトラブルはサイトの検索や自分の勘を頼りに解決できるようになります。

次回はセカンドページのデザイン、コーティングをやってみましょう。

初めてのサイトが出来上がる生みの苦しみです。大変ですが、がんばりましょう。

6月22日 中山様 斎藤様

本日は、午前中にカウンセリングがありまして、

その後、午後から中山様。

やってきていただいた宿題をチェックして、若干復習しつつ、次のところに入ります。

中山さんは、ファイル名のつけ方が非常に丁寧ですね。

イラストレーターでの、ブレンド機能をやりました。

2つの図形同士を、つないでいく中間画像を自動的に作り出す機能です。

面白いんですが、何のために使うのかというところですが、これが頭をひねれば、いろいろ便利なんですね。

同じ図形同士をブレンドすると、ある一定間隔の間に、均等に複製することが出来て、その数も自由にコントロールできます。また、スムーズカラーを使うと、ちょっとこったグラデーションなんかも出来ます。

さらに、ブレンドパスを曲げたり、ブレンドパスを別の図形に置き換えたりすることで、一定の経路に物体を並べることが出来ます。

なかやまさんのリクエストで、ありんこを並べてほしいということだったので、こんなGIFアニメを作ってみました。

（FLASHを使っています。。。）

こんなことも出来ます。

夜からは、斎藤さん。

いよいよ、フライヤーも出来上がりそうです。

商品の袋も、完成して来ました。なかなか。。。

フライヤーはこんな感じの、カラフルなものになりました。

背景のイメージは斎藤さんが写真を撮って、自分でイメージを作りました。

かわいいですね。

残りの時間で、お店のショップカード（クーポン告知）のデザインをしてみたいとのこと。。

斎藤さんの思い描くイメージをラフで描いていただき、紙片を散らばらせたようなイメージということだったので、

もう、ほんとに紙をちぎっていただきました。で、スキャナでスキャン。

なかなかいいかんじでとれたんですが、台紙に画用紙みたいなのを使ったので、ざらざらかんもスキャンされてしまい、背景を抜く処理がちょっと困難でした。だめですね。ちゃんと考えてやらないと。。。すいません。

ロゴも、デザインしなおしたいということでしたので、フリーのフォントを選んでいただきましたが、結構激しいタッチのを選ばれたので、ちょっと、イメージ合うかどうか心配です。

デザインは、その場で決定せずに、一晩寝かしてくださいね。（ちょっとしたコツです）

6月21日 石野様

21日午前は、石野さん。

前回はコラージュやっていただいたので、その前の続きです。

例のバレエ教室のサイトですが、ご自身でもう一度デザインしなおしたということで、見せていただきました。

ピンクベースですが、デザインはかなり格調高い感じになっていました。

ビジュアルの合成や、メニューをタブメニューにしたりと、
よく工夫されて、研究された後が見えます。

ただ、ピンクの面積が多いので、めざした方向性から少し外れてしまうので、白バックにしていただき、

タブメニューは、トップに設置すると、タブ以下の部分が切り替わらないとおかしいので、デザインを検討していただきました。

そのほかは、無難にまとまっていたので、ラフの修正をしていただいて、早速画像の切り出し、コーティングに入っていただきました。

ちょっとペース飛ばしていきます!

サイトを作る段取りとしては、

ラフ＋サイトマップ（サイトの構成を図にしたもの）をクライアントに提示して、了解をもらい

（この段階まできています）

その後、文書構造をコーティングしていきます。（ｈタグや、リスト、pタグなどで意味づけをしていきます。）

そして、デザインラフをコーティングを考慮しながら、gifやjpegで切り出していきます。

さらに、文書構造のHTMLに、DIVタグでレイアウトを組み込むためのタグを入れていきます。

全体を囲むDIVと、それぞれのエリアをかこむDIVを書いていきます。

あとは、CSSをそれぞれ記述していきます。

このときに、今回画像置換という方法を勉強していきます。

メニューのマウスオーバーの機能も、これを使っていくことで、リスト構造でメニューを作ったものに、画像メニューによるデザインを適用できます。

マウスオーバーの機能は、ジャバスクリプトを使う方法もあります。

（それぞれ、メリット、デメリットがあります）

きょうは、かなり詰め込んでしまいましたが、どれも重要なことですので、2回同じことをしてもいいので、理解しておいていただきたいなと思います。

次回までに、トップをコーティングしてきていただくということにしました。