ホームページ制作基礎
01■ワークフロー
打ち合わせ
どんな内容にするか、またお客様から提供してもらう写真等（商品写真等）について打ちあわせをします。
企画書作成
打ちあわせ内容をもとに企画書を作成します。これをお客様に見せ、OKをもらえれば次の段階へと進みます。
データを提供してもらう
商品写真や文章などのデータをお客様に提供してもらいます。
ホームページ制作開始
お客様からいただいたデータをもとにホームページ制作をします。
初校提出
できたホームページのデータを提出します。ここで修正するところをお客様にチェックしてもらいます。
再校正提出
修正したデータをお客様に提出します。ここでも修正するところがあったら再び修正します。これを完成するまで繰り返します。
アップロード
最終チェックでOKがもらえたらFTP作業をしてアップロードします。
02■Photoshop(フォトショップ）
photoshop（フォトショップ）ってどんなソフト？
フォトショップとはパソコンに取りこんだ画像を画像編集する「フォトレタッチ」といわれる分野の
Adobe社が開発した代表的なアプリケーションソフトです。
画像の形や色を変えたり、画像を合成、webページで使用する素材の作成などができます。
photoshop(フォトショップ）でできること
画像の色調を補正できる。
画像のコントラストや明るさ、色調を自由に変えることができます。
画像の加工ができる。
画像を手描風にしたり、ぼかしたり、歪ませたりと、自由に加工ができます。
画像の合成ができる。
複数の画像を合成して新しい画像を作り出すことができます。
心霊写真や、動物を瓶の中に入れてみたり、現実とかけ離れた画像を簡単に作成することが可能です。
文字を自由に作成できる。
画像だけでなく、文字も自由に編集することができます。立体感のある文字や、
輝きを放つ文字など、様々な文字を簡単に作ることができます。
イラストが描ける。
画像の上に新たに自分で絵がかけるイラスト機能が充実しています。
web用の素材を作成できる。
画像をWEB用に保存することができます。
その他の便利機能
画像をスキャナやデジカメから取りこむことが容易にできます。
03■illsutrator(イラストレーター）
illustrator（イラストレーター）ってどんなソフト？
イラストレーターは、「ドロー」といわれる分野を代表するイラストを描くためのソフトです。
図形の加工やグラフ・ロゴの作成、文字入力、ウェブに使用する画像の編集などが行えます。
illustrator（イラストレーター）でできること
線や図形でイラストを描くことができる。
かっちりしたイラストを描くのに優れている。
イラストに着色したり加工できる。
パターンやグラデーションといった複雑な着色ができます。
そのほか、イラストを自在に変形、拡大・縮小、回転などができます。
文章を自在にレイアウトできる。
文字を入力して、書体の大きさやフォント、色などを自在に変えることができます。
グラフを作成できる。
数値を入力するだけで簡単にグラフを作ることができます。
写真などのトレースができる。
スキャナで読みとったり、デジカメから取りこんだ写真をイラストレーターに配置してトレースすることができます。
web用の素材を作成できる。
イラストをWEB用に保存することができます。
04■Dreamweaver（ドリームウィーバー）
dreamweaver（ドリームウィーバー）ってどんなソフト？
ドリームウィーバーとは幅広いユーザー層に支持されているホームページ作成ソフトです。
ホームページビルダーなどと違いプロも使っているソフトです。
この他には、Adobe Goliveなんかも多くのプロが使用しています。
ドリームウィーバーはワープロの文書を作成するような感覚で
ホームページをつくるだけで自動的にHTMLタグを埋め込んでくれます。
また、htmlタグを編集したり、直接記述することもできます。
ドリームウィーバーを扱う前に覚えるべきこと
HTMLタグを理解する。
ホームページとは全てこのhtmlという言語から成り立っています。
このhtmlを理解したうえでホームページの作成を始めましょう。
ドリームウィーバーは自動的にhtmlタグを埋め込んでくれるので
htmlを知らなくてもある程度は作れるのですが、やはり、
細かなとこや直接ソースをいじる必要性がでてきた時などは知っておかなければ困ります。
そんなに難しいものではないので絶対覚えましょう。
CSSを理解する。
cssとはカスケーディング・スタイルシート（Cascading Style Sheets）の略で
文字の大きさ、色、背景、行間隔などの様々な書式を細かく設定することができます。
今までhtmlで指定していた文字の設定をCSSで一括設定して管理することができます。
このCSSを覚えておけば、よりデザイン的にも優れたホームページを容易につくることが可能になります。
ファイル形式と拡張子を理解する。
サイトで使うファイルにはhtmlファイルの他にも画像ファイル、音声ファイルなどの様々な種類のファイルがあります。
これらのファイルにはファイル形式を識別するために、ファイル名の後に、
「.（ピリオド）」をつけてその後に拡張子をつける必要があります。
05■FLASH（フラッシュ）
flash（フラッシュ）ってどんなソフト？
フラッシュとはインターネット上でのムービーやちょっとした動画、
ボタンなどのインタラクティブなwebコンテンツを作成するためのMacromedia社が開発したソフトです。
これによりインタラクティブなホームページを作成することが可能になります。
flash（フラッシュ）でできること
アニメーションを作成できる
フラッシュにはタイムラインというものがあります。
この時間の概念を加えることにより、「ぱらぱら漫画」の原理のようにアニメーションを作成することができます。
絵を描くことができる。
フラッシュはドロー系ソフトです。鉛筆を動かす感覚でイラストを描くことができます。
音楽、画像ファイルを取りこむことができる。
イラストレーターで描いたイラストなどを取りこんでアニメーションを作成することができます。
また、音声を取りこんで音のあるアニメーションをつくることも可能です。
イラストが描ける。
画像の上に新たに自分で絵がかけるイラスト機能が充実しています。
Action Scriptを記述できる。
直接スクリプトを記述して簡単にインタラクティブなものをつくることができます。
企画書の書き方（基本）・前編
01■タイトルの書き方【タイトルは短く抽象的に！】
企画書にはまずタイトルをつけます。タイトルの文字数はできるだけ少なく抽象的にします。
その方が、相手の記憶に残りやすいからです。
タイトルだけでわかりづらい場合は、さらにサブタイトルをつけるとよいでしょう。
サブタイトルはタイトルを解説する文章にします。
また、トップページ（表紙）はタイトルとサブタイトルだけのせる場合と、
とくに表紙はつくらずに本文の上に大きめの文字でタイトルを記載する2パターンが一般的です。
02■表紙のレイアウト方法【最近はビジュアル化の傾向に！】
表紙でその企画書の印象は判断されるといっても過言ではありません。
なので、作成する際は十分考慮したうえでつくりましょう。
また、最近はビジュアル化傾向にあるようです。大別すると表紙のパターンは3つに分けられます。
１、文字だけで構成。
２、その文字に色をつけたり、線で囲ったり文字に装飾を施したもの。
３、企画のイメージにそった写真やイラストをのせ、ビジュアル性を増したもの。
これら3つを比べて、どれが良いかというのはその企画書や相手によって変わってくるものなので、
その都度適切な判断を下しましょう。
03■挨拶文の書き方【はじめの印象づけが肝心！】
企画書の冒頭部分には「はじめに」というあいさつ文を記載しましょう。
このあいさつ文があるのとないのでは第1印象がだいぶ違ってきます。
本題にはあまり関係のない部分ではありますが、印象を良くするためには欠かせない項目なのです。
その具体的内容は
１、あいさつの言葉。
２、企画者の決意の言葉。
３、「どうぞご検討ください」などの結びのあいさつの言葉。
などのあいさつ文を記載しましょう。この項目は相手が最初に読むページです。
ここで相手側の意識をグンと引きつけることが重要なのです。
04■目次の書き方【素晴らしい企画書でも目次がなければ価値は半減！】
ボリュームのある企画書には、目次が絶対に必要になってきます。
企画書の内容がどんなに素晴らしくても、どこに何の情報があるのかをすぐに探すことができなければ、
その企画書の利用価値は半減します。
なぜなら、プレゼンしている時は自分が説明しながら見てもらうので問題ないでしょうが、
その企画書がクライアントに渡り、クライアントがひとりになって見る場合などは
いちいちページを探すのでは面倒くさくてしょうがありません。
これでは目を通してもらうのは難しいでしょう。なので、長い企画書には目次は必要不可欠なのです。
また、短い企画書には目次は必要ありません。
目次の書き方としては企画書の内容がすべてわかるような配慮をした目次が望ましいです。
05■コンセプトの書き方【誰もがイメージしやすく！】
企画のコンセプトを明確に表現することで、企画の全体像が見えてくるものです。
できるだけ簡潔でわかりやすい言葉で書くと相手の理解も深まりイメージしやすいものになるでしょう。
そもそも、コンセプトとは具体性がなく、必ずそのコンセプトを誰もが共有できるとは限りません。
なので、できるだけ誰もがイメージしやすく、かつ、利益を生むようなコンセプト作りをしなければならないのです。
よってマーケティングのことも考えて、今はどんなニーズが高いのかなどを把握してコンセプトを作る必要があります。
06■目的の書き方【目的と願望は全くの別物！】
企画の目的を明らかにして、その企画書の方向性を明らかにしなくてはいけません。
不可能な目的を「目的」とはいえません。ただの「願望」にすぎないのです。
これに注意して目的を定めなければ現実みをおびません。
例えば、「駅前のちっちゃな土地に新規飲食店を立ち上げたい」という場合の妥当な目的は
「月の売り上げ○十万円、○百万円」などになると思います。
そして「月に○○千万円、○○億円」ということになるとほぼ不可能で、目的ではなくただの願望です。
その後、何店もチェーン展開していき売り上げを上げていくことは可能ですが、
やはり最初の目的は1店舗目の売り上げをきちんと確保できるということでしょう。
人間とは欲の強いものなので目的と願望を混同してしまいがちなのです。
上に挙げた例はあまりに極端ですが、人間はそういうところがあるものなのです。
なので、この辺に注意してきちんと現実みのある目的をたてましょう。
企画書の書き方（基本）・後編
07■内容の書き方【1番重要な部分！】
企画書の内容は最も重要な部分です。なので色々な表現方法の中で最もあったものを十分に検討する必要があります。
企画の内容とは実際にどういうことをやって目的を達成するかの詳細項目であり、その企画書の結論でもあるのです。
なので、読み手がわかりやすいような表現をしなくてはいけません。
ポイント1
企画の内容とは当然ただ1つのものではありません。
いくつもの要素があって全体の企画を構成できます。
これらの各企画と全体の企画の関連性をわかりやすく記載すること。
ポイント2
ビジュアル化させることで見やすい工夫をしましょう。
文章だけで考えるのではなく、図やイラスト、またはフローチャートをのせることも考えましょう。
最も重要な部分なので力を抜かずに凝ったものを作りましょう。
08■効果の書き方【企画とは利益を上げるため！】
企画の効果というのは、正確に判断できないことが多いので、あくまで現時点での予測でかまわないのです。
企画とはそもそも何のためにされるのか？そう、利益を上げるためです。
なので一見、素晴らしい企画でもとても実行できない内容であったり、
実現不可能なものは利益を上げられないので「企画だおれ」になってしまいます。
つまりなんの効果もないわけです。
現在は情報技術の発達が著しく、パソコンなどでのシミュレーションなどである程度の効果の予測をすることもできます。
なので、できるだけ具体性のある効果（予測）を記載するよう心がけてください。
09■問題点の書き方【問題点を記載することはマイナスなことではない！】
企画書とはあくまで企画で完璧なものではありません。
なので企画書には、現時点で考えられる問題点を全てその理由もつけて記載しましょう。
問題点を記載するということは別にマイナスなことではありません。
次の段階へ進むためにはさけることができないものなのです。
問題点の書き方は簡単に箇条書きでかまわないです。
また問題点を記載するには次のような意味があるのです。
企画を立案した時点では判断できないものもあるのでそれを検討してもらう。
どんな企画であろうと企画が100％成功する保証はどこにもない。それを承知で実行にうつすかの判断を委ねる。
企画を成功させるために、関係者にどこに力をそそいでほしいかを明確にする。
などの意味もあるのです。なので、現時点で考えられる問題点についてはできるだけ書きましょう。
10■日程の書き方【自分の思いえがいている理想とピッタリ重なることはまずない！】
日程には、個々の作業の日程と、個々の作業の関連性を記載しましょう。これはあくまで推測になります。
この日程の項目は、すぐに実行する際には欠かせない項目です。
主なスケジュールを構成する項目は
１、総日数
２、作業別の所要日数
３、開始日
４、最終日
５、作業の流れ
６、日程の変動する可能性がある作業についての詳細
（6）について説明します。実際に企画が実行段階までいくと、あらゆる問題と遭遇する可能性があり、
無駄な時間をとられてしまうことがあります。
ですから、そういう可能性が考えられる作業についてはその理由などを記載し、
総日数に少し余裕をもたせてやるのがベストです。
いずれにしろ、自分が考えていた理想の形と実際の作業とはピッタリ一致することは
難しいのでそのことを頭においてスケジュールを組む必要があります。
11■予算の書き方【正確な数値を出すのは難しいができるだけ近い数値を！】
企画書の内容が認められたとしても、スケジュールや予算などのことが書かれていなければすぐに実行にうつせません。
これでは現実的な企画といえません。
「内容はよいけど具体的じゃない」などといわれて破談になる可能性だってあり得ます。
ですから、必ず予算の項目をもうけるのです。予算なので、もちろん正確な数字を出すのは難しいです。
なので、あくまで予算案という形でそれに近い数字を出せばよいのです。主な予算の項目としては
１、費用総額
２、各企画ごとの費用
３、変動費と固定費
４、作業項目ごとの費用
（3）について説明します。
取材のための交通費などの変動する費用とデザイン料などの固定された費用を区別して見積もりを出します。
（4）について説明します。
なぜ作業項目ごとの予算をださなければいけないかというと、これが1番合理的だからです。
何百万円、何千万円といった巨額をまとめて提示されたら誰でもギョっとします。
そこで、具体的にどの作業にはどれだけ費用がかかっているのかということを
実際に見せてあげればお客様に納得してもらえます。
特に、その分野について全く知識がないお客様を相手にするときは、
この作業項目ごとの費用を記載することは必要不可欠です。
12■添付資料の書き方【企画書とは分けて別冊、別紙に！】
資料
企画をたてるのに用いた情報を添付すれば、より一層企画書に対する信頼度は上がります。
また、その添付した資料はどのページに対応するかのナビゲーションも忘れずに記載しましょう。
過去の事例
過去に似た内容の企画が行われた事例があった場合には、参考の事例として紹介するため、添付しましょう。
資料や過去の事例は、企画書とは別にするのを原則としましょう。
別紙や別冊という形で添付するとよいです。資料や過去の事例は、その企画書の基盤となる情報源です。
これらが添付されることにより、信頼性が増すほか、
その企画をたてるにあたりどれだけ努力したかを物語ることができ、
さらに、読み手にその企画書が優れたものだと思わせてしまうといった効果があります。
ですから、これらを添付することをおすすめします。
しかし、その量は少なすぎず、多すぎず適度な量にしましょう。
やむを得ず多くなってしまったら、資料や過去の事例であっても表紙をつけましょう。
表紙には目次と索引を記載し、索引には企画書の本文中のどこに対応するかの詳細を記載しましょう。
文章素材集 -
企画書