ホームページ制作基礎

ワークフロー

1. 打ち合わせ
   どんな内容にするか、またお客様から提供してもらう写真等（商品写真等）について打ちあわせをします。
2. 企画書作成
   打ちあわせ内容をもとに企画書を作成します。これをお客様に見せ、OKをもらえれば次の段階へと進みます。
3. データを提供してもらう
   商品写真や文章などのデータをお客様に提供してもらいます。
4. ホームページ制作開始
   お客様からいただいたデータをもとにホームページ制作をします。
5. 初校提出
   できたホームページのデータを提出します。ここで修正するところをお客様にチェックしてもらいます。
6. 再校正提出
   修正したデータをお客様に提出します。ここでも修正するところがあったら再び修正します。これを完成するまで繰り返します。
7. アップロード
   最終チェックでOKがもらえたらFTP作業をしてアップロードします。

Photoshop(フォトショップ）

photoshop（フォトショップ）ってどんなソフト？

フォトショップとはパソコンに取りこんだ画像を画像編集する「フォトレタッチ」といわれる分野のAdobe社が開発した代表的なアプリケーションソフトです。画像の形や色を変えたり、画像を合成、webページで使用する素材の作成などができます。

photoshop(フォトショップ）でできること

1. 画像の色調を補正できる。
   画像のコントラストや明るさ、色調を自由に変えることができます。
2. 画像の加工ができる。
   画像を手描風にしたり、ぼかしたり、歪ませたりと、自由に加工ができます。
3. 画像の合成ができる。
   複数の画像を合成して新しい画像を作り出すことができます。心霊写真や、動物を瓶の中に入れてみたり、現実とかけ離れた画像を簡単に作成することが可能です。
4. 文字を自由に作成できる。
   画像だけでなく、文字も自由に編集することができます。立体感のある文字や、輝きを放つ文字など、様々な文字を簡単に作ることができます。
5. イラストが描ける。
   画像の上に新たに自分で絵がかけるイラスト機能が充実しています。
6. web用の素材を作成できる。
   画像をWEB用に保存することができます。
7. その他の便利機能
   画像をスキャナやデジカメから取りこむことが容易にできます。

illsutrator(イラストレーター）

illustrator（イラストレーター）ってどんなソフト？

イラストレーターは、「ドロー」といわれる分野を代表するイラストを描くためのソフトです。図形の加工やグラフ・ロゴの作成、文字入力、ウェブに使用する画像の編集などが行えます。

illustrator（イラストレーター）でできること

1. 線や図形でイラストを描くことができる。
   かっちりしたイラストを描くのに優れている。
2. イラストに着色したり加工できる。
   パターンやグラデーションといった複雑な着色ができます。そのほか、イラストを自在に変形、拡大・縮小、回転などができます。
3. 文章を自在にレイアウトできる。
   文字を入力して、書体の大きさやフォント、色などを自在に変えることができます。
4. グラフを作成できる。
   数値を入力するだけで簡単にグラフを作ることができます。
5. 写真などのトレースができる。
   スキャナで読みとったり、デジカメから取りこんだ写真をイラストレーターに配置してトレースすることができます。
6. web用の素材を作成できる。
   イラストをWEB用に保存することができます。

Dreamweaver（ドリームウィーバー）

dreamweaver（ドリームウィーバー）ってどんなソフト？

ドリームウィーバーとは幅広いユーザー層に支持されているホームページ作成ソフトです。ホームページビルダーなどと違いプロも使っているソフトです。この他には、Adobe Goliveなんかも多くのプロが使用しています。 ドリームウィーバーはワープロの文書を作成するような感覚でホームページをつくるだけで自動的にHTMLタグを埋め込んでくれます。また、htmlタグを編集したり、直接記述することもできます。

ドリームウィーバーを扱う前に覚えるべきこと

1. HTMLタグを理解する。
   ホームページとは全てこのhtmlという言語から成り立っています。このhtmlを理解したうえでホームページの作成を始めましょう。ドリームウィーバーは自動的にhtmlタグを埋め込んでくれるのでhtmlを知らなくてもある程度は作れるのですが、やはり、細かなとこや直接ソースをいじる必要性がでてきた時などは知っておかなければ困ります。そんなに難しいものではないので絶対覚えましょう。
2. CSSを理解する。
   cssとはカスケーディング・スタイルシート（Cascading Style Sheets）の略で文字の大きさ、色、背景、行間隔などの様々な書式を細かく設定することができます。今までhtmlで指定していた文字の設定をCSSで一括設定して管理することができます。このCSSを覚えておけば、よりデザイン的にも優れたホームページを容易につくることが可能になります。
3. ファイル形式と拡張子を理解する。
   サイトで使うファイルにはhtmlファイルの他にも画像ファイル、音声ファイルなどの様々な種類のファイルがあります。これらのファイルにはファイル形式を識別するために、ファイル名の後に、「.（ピリオド）」をつけてその後に拡張子をつける必要があります。

FLASH（フラッシュ）

flash（フラッシュ）ってどんなソフト？

フラッシュとはインターネット上でのムービーやちょっとした動画、ボタンなどのインタラクティブなwebコンテンツを作成するためのMacromedia社が開発したソフトです。これによりインタラクティブなホームページを作成することが可能になります。

flash（フラッシュ）でできること

1. アニメーションを作成できる。
   フラッシュにはタイムラインというものがあります。この時間の概念を加えることにより、「ぱらぱら漫画」の原理のようにアニメーションを作成することができます。
2. 絵を描くことができる。
   フラッシュはドロー系ソフトです。鉛筆を動かす感覚でイラストを描くことができます。
3. 音楽、画像ファイルを取りこむことができる。
   イラストレーターで描いたイラストなどを取りこんでアニメーションを作成することができます。また、音声を取りこんで音のあるアニメーションをつくることも可能です。
4. イラストが描ける。
   画像の上に新たに自分で絵がかけるイラスト機能が充実しています。
5. Action Scriptを記述できる。
   直接スクリプトを記述して簡単にインタラクティブなものをつくることができます。