Comments
Description
Transcript
「DreamweaverCS3」で実習される方
~I t ma s t e r s in on l y t en da y s ! H ow to c re at e th e h o me pa g e wh ic h s ee m s t o b e p rof e s si on al si mp ly a nd s p ee di l y 実践編 Pr a ctice s ection v er8 .1 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 0 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 1 目次 Step１、 ① 「Dre amw e aver 」のＡＰエレメントで ページを作成する 3P （ダウ ンロ ード デー タを使 用し ての 実習 ） ② 「Elements」でロゴや画像を作成する 69p （ダウ ンロ ード デー タを使 用し ての 実習 ） ③ テンプレートを使ってオリ ジナルホームペー ジを作ろう ④ 「Next Ftp」でアップロードす る ⑤ レイアウトのルールを覚え て調整する Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 2 123p 147p 165p Step1 ―① 「Doreamweaver」のＡＰエレメントでページを作成 する ホームページ作成ソフト は、ＩＢＭ社製の ホームページビル ダーが最も人気 が高いです。つい で、Adobe 社製（旧マクロメディア 社製）の Dreamweaver。 実はここでご紹介する Adobe 社製の Dreamweaver はプロのＷＥＢデザイナ ーのほとんどが使ってい るソフトなのに人 気度は２番目で、 我々にはあまり 知られた存在ではありませ ん。 なぜ人気がイマイチかとい うと、Adobe 社製のソフトは、ソ フ トの 操作 性 の独 自 フ ォ ー マッ ト を 頑 な に守 り 通 し て いて 、少 々判り 難いからです。 ホームページビルダーは 明らかに「マイク ロソフト社」のワ ード、エクセル などの操作性を意識して つくられているの で、初心者がとっ つきやすいわけ です。 しかし、ビジネス用のホ ームページを作成 するならばホーム ページビルダー では役不足です。 ロゴ作成 と画像 修正の デザイ ンスタ ンダー ドが「Adobe る以上、同じ操作性 、同じ概念か らつくられている「Adobe Photosh op」であ Dreamweav er」 を使用したほうが効率はは るかに高いです。 文書作成はワード、表計 算ならエクセル、 データベースなら アクセス、とい Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 3 うようにビジネス文書作成 には「マ イクロソフト社 」がスタン ダードを握り、 同じ操作性、同じ概念、 データの互換性な どにより効率が高 くなっているた めに、ほとんどの企業がこ れを採用している わけです。 ところが残念ながらマイ クロソフト社はデ ザインやホームペ ージ作成のソフ トは全く強くありません。 そこで市場参入してきたの がＩＢＭと Adobe です。 ホームページビルダー、Dreamweaver の比較をするとこのようになり ます。 ソフト名 ホームページ ビル ダー D re amwe ave r 提供会社 ＩＢＭ Adobe（ア ドビ） 操作性 マイクロソフト社に似て、 扱いやすい 独自の操作性でとっつきにくい。 メリット 初心者でもすぐに作成可能 ＡＰエレメント やレイア ウトテーブルにより自在 のレ イア ウト 可能。 画像処理ソフト （ Photoshop） との連携が強い デ メリ ッ テーブル構造を基本とする。 画像処理 ト ソフトとの連携な し、「どこでも配置モー 独自の操作性に慣れるまで時間がかかる。 ド」は使いにくい。 お もな 利 ホームページ 作成 初心 者。 家族 のア ス モールビジ ネス の経営者もしくは ス タッフ。 用者 ルバムな どをつくる 小回りのきくビジ ネスに利用。 または 凝ったサ イト を作りたい大企業向け。 結論からいえば、ホーム ページビルダーは ビジネスには不向 きです。あくま でも個人の趣味のＨＰ作成 で利用すべきもの です。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 4 ビジネスに使うの ならば、Dreamweaver を利用すべきです。画 像処理ソフ トのスタンダードである「Photoshop」と同じ操作性、同じ環 境で作成でき、 最強のス ピード 作成 を実現 する「 ＡＰエ レメン ト」機 能 があ ります（同じような機能 がホームページビ ルダーにもありま すが、ファイル を変換したり大変扱いにく いです）。 Dreamweaver の唯一の難点は「Photoshop」と同様、「独自 の操作性」にあ ります。 Adobe 社は大変にプライドが高いようで、マイクロソフト社 の存在はまった く無視しています。 いまだに編集の機能 、 「貼り付け」を「ペー スト」と表記している のは Adobe 社くらいでしょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 5 また、メニューの言葉のわ かりにくさといっ たら、天下一品で す。 「不可視アイテム 」 なんていう言葉が平気でメニュー に並んでいます。 ただし、デメリットはこ こだけですから、 慣れれば大変に使 いやすい、イン ターネット上でビジネス を行うあなたの最 強のパートナーに なってくれます 。 ぜひ習得されることをおす すめいたします。 １、ＡＰエレメントってどんなもの？ web 起業家にとって、最大の 命はスピー ド です。 自分の考えていること 、紹介したい 商品がすぐにワー プロ感覚で作成で きて、 即座に web にアップをする・・ ・そんな 夢の世界を実現 してくれる のが Dreamweav er の「ＡＰエレメント機 能」です。ＨＴＭ Ｌ構文など覚え る必要なく、大変きれい な、イメージどお りのページを作成 することができ ます。まずはどのように作 成するか、概要を 見てください。 （概要ですからまだ作業は しないでください ね） 【Dreamweaver、の新規ページ画面↓】 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 6 「方眼紙」のような新規ペ ージに、画像やテキ ストを置く場所を、「ＡＰエレ メント」という箱をマウスのドラッグで指定 することで決めていきます。 画像を呼び出します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 7 コメントを入れる場合 にも「AP Div を描画」というボタンを 押して、ＡＰ エレメントをマウスのドラ ッグで配置します 。 だいたいの大きさに広げて 、コメントを記入 します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 8 表組みの設計など気にする 必要がないので、 大変に楽ちんです 。 しかも、下記のように、 配置した画像やテ キストは、マウス で自由な場所へ 変更が可能なのです！ マウスで好きなところに移 動！配置！ 通常のテーブル構造では決 してできない 、 「 好きなところに配置 」して、 しかも「修正・変 更」が 自由で、簡単 であることが、最 大のポイントで す。これをテーブ ル構造でやってい たら、一 体何時間かかるで ことでしょう！ どうでしょうか？今まで ホームページ作成 の不自由さに嘆い ていた方、わく わくしてきませんか？ （ホームページビルダー でも似たような機 能がありますが、 ブラウザの表示 にミスが生じる、変換な どの手間がかかる などでまったく使 えるものではあ りません） Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 9 ２、ホームページ作成の準備 それでは、実習に 入る前に準備です 。まずは「Dreamweaver」を起動してく ださい。 Windows の画面、左下にある「ス タート」ボタンを クリックし 、「すべての プログラム」をクリック、イン ストールされているプ ログラムの中から 「Dreamweaver ＣＳ３」を選択します。 デスクトップにアイコン があるときはデス クトップから起動 することもでき ます。 「すべてのプログラムから 起動」 「デスクトップアイコンか ら起動」 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 10 起動したては、以下のよう な画面でしょう。 多少レイアウトち がっていても 問題ありま せん 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 11 次に、作成に必要なメニュ ーを表示する必要 があります。 右上の、「ウィ ンドウ」 をクリックして開いて ください 「ウィンドウ」の 中が以下の３つの 部分にチェックが 入っていればＯＫ です。 「挿入」「プロパティ」「ファイル」 チェックがなかったらクリ ックして表示させ ておいてください 。 この３つ以外のウインドウは一切使いません ので、余計 なメニュ ーやパレ ットのウインドウは消して おいてください。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 12 次に表示に関する「環境設 定」をします。 上部メニューバーの「編集 」から、一番下に ある「環境設定」を選択します。 環境設定の小窓が開いた ら、左側にある「 カテゴリ」一覧よ り、下から２番 めの「新規ドキュメ ント 」を選択します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 13 右側の画面で「新規ドキュ メント」に関する 設定をします。 ここでは設定するのは１箇 所、「エン コーディング 初期設定（Ｄ ）」というと ころです。 ここを「日本語（シ フト JIS）」に設定しましょう。 続けて 、左側の「カテゴリ」から、一番下の「不 可視エレメ ント 」を選択し ます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 14 右側の「不可視エレメント」の設 定では、全ての チェックボッ クスに「チェ ック」を入れまし ょう 。 最後にもうひとつ。 左側のカテゴリから「フ ォント」を選択 し、 「 プロポーショナル フォント」と 「等幅フォント」のところ の「サイズ」を各 々「12pt（中）」にします 。 チェック を入れ たら、 これで 環境設 定は 終りで す。「Ｏ Ｋ」ボ タン を押しま しょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 15 設定が終わると以下のよう な画面構成になる はずです。 「プロパティ」 「挿入」 「ファイル」 この３つの言葉、場所は必ず 覚えてください。 ．．．． ご心配なく。覚えるのはここだけです。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 16 実習に必 要なデータのダウンロード 次に、実習で必要な画像デ ータをダウンロー ドします。 (ダウンロードのＵＲＬ とＩＤ・パスワード はお申し込み時に お届けした自動 返信メールや、第１回フォ ローメールでお知 らせしています) ご購入者専用の「サポート サイト」h ttp://www.n iche-marketing .jp/sample/ にアクセスして、 「お客の声ページ」作成用 画像データ→ sample1 ダウンロード をクリックしてください。 このような画面ができます から、「 保存」ボタンを押 してください。 保存先を指定します。保存 先は「デスクトッ プ」にしてくださ い。 （覚えやすければどこでも ＯＫです） Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 17 保存が終了したら 、 「sample.lzh 」をダブルクリッ クして解凍 してください。 （解凍ソフトがなければ 、サンプルダウン ロードページにお すすめ解凍ソフ トのリンクがあるので、 解凍ソフトをダウ ンロードし、ご自 身のパソコンに インストールしてください ） 解凍し終わると、以下のよ うに「sample1 フォルダ」が開きます。 全部で８つのファイルがあ ればＯＫです。 （パソコンの設定 によっては.gi f という拡張子が表示 されていな い場合があ りますが、 気にしないでくだ さい） 注意！ ここで、sample1 フォ ルダ が開けな い、という場合は 、選択して いる のが、解凍され た 「フォル ダ」で はな い、ということです。 解凍した 後、パソコ ンには 、 ・ 最初にダウ ンロードしてきた 「sample1 というファイル 」 と ・ 解凍してでき た「sample 1 というフォ ル ダ 」 の２種類が存在します。 ここでは 「解凍して でき たフォル ダ」を開いて く ださい。 このフォルダは「sample１」という名前で、デスクトップに あります。 （保存先は各々のパソコ ンにより違います 。解凍ソフトで、 設定した保存先 にフォルダは保存されます ） このデータは後ほど使用し ますので、場所を 覚えておいてくだ さいね。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 18 それではいよいよ実習にかかります！ ちなみに、これからやる作業は、実に簡単です。たぶんパソコン暦が浅い人でも早 ければ 10 分程度でできます。 気負わず、楽しんでやってください ね！ 注意！ なにか間違った操作をしてしま ったら、「編 集」の「取り消し」で 何度でも、どこまでも戻 ることができます 。失敗を恐れずど んどんチャレン ジしましょう！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 19 ３、実習ＡＰエレメントで作成！ それでは、いよいよ実習で す。 それでは、実際に「Dreamweaver」のＡＰエレメン トを使用して 、以下のよ うな「お客様の声ページ」 を作成してみまし ょう。 【作成事例「お客様の声」ページ↓完成イメージ】 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 20 一番最初はまず、Dreamweav er を起動すると出て くる窓から中 央の「新規 作成」のところにある「Ｈ ＴＭＬ 」を選択します。 もし、上図の窓が 出てこない場 合は、Dreamweaver の上部メニューバーか ら「ファイル」→「新規」 を選択します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 21 「新規ドキュメント」画面 が表示されます。 左から順 番に「 空白ペ ージ」「 ＨＴＭ Ｌ」「な し」 をクリッ クし、「作 成」 を 選択してください。 以下のように、空白のペー ジが出てきました ね。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 22 さあ、いよいよ画像や文 字を配置していく のですが、ちょっ と待ってくださ い。大きな真っ白いペー ジ、このままでは ちょっとばかり作 業がしづらいで すよね。 そこで、作業を始 める前に 、もうひとつだけ 画面の設定をして おきましょう。 それは「グリッドの表示」 です。 （グリッド、とは配置の目 安になる「マス目 」のことです） 上部メニューバーから「表 示 」→「グリッド 」→「グリッド 設定 」を選択し ます。 グリッド設定窓が表示さ れますので、間隔 のところを好みに 応じて適当に設 定してみてください。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 23 ここでは「10 ピクセル 」に設定してみます。 「グリ ッドの表示 」にチェックを入れ 、「Ｏ Ｋ 」ボタンを押しましょう。 こんな風に、レイアウトテ ーブル（作業場） にマス目が表示さ れましたね。 ここまでできたら、一度、 ファイルを保存し ましょう。 ファイルを保存する前に 、「ページ の名前（ページ タイトル ）」を設定しまし ょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 24 ページタイトルの設定は、タ イトル の「無題 ドキュメント 」と書かれている ところを上書きするだけで す。 この実習では、20 ページにあるような「お客様 の声」のペー ジを作成します ので、タイトルの「無題 ドキュメント」となっているところ を「お客様 の声 」 と書き換えてみましょう。 それでは、ファイルを保存 します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 25 新規作成したページを「初めて保存 」するときは、上部メニューバー から「フ ァイル 」→「新規保 存 」を選択します。 「名前を付けて保存」とい う小窓が表示され ます。 「デス クトップ 」を選択して から、「保存す る場所 」は「sample1 フォルダ」 を選択します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 26 ファイル名のところにファ イル名を入力しま す。 ここでは「sample1.h tml」と入力しましょう。 入力ができたら、「保存 」ボタンを押します。 注意！フ ァイル名 をつけるときは 、必ず 「小 文字 半角 英数 字」だ けでつ けてくだ さ い。（例：「サンプル 1.html」→× 「sample 1.html」→× 「sample 1.html」→○） インターネッ ト では、ファイル名に全角文字や記号、空白文字は使え ません。 ※ファイル名のあとの「.h tml」とは拡張子というもの で、そのファイルがど んな種類の ファイル なのか を表しま す。「h tml」というのは 「ホー ムページ のファイル」という意味で す。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 27 では早速、画像を配置して みましょう！ まず、「ＡＰエレ メント（画像や文 字を入れる箱 ）」を配置しま す。 上部レ イアウトタブ の中の左から２番 目にあるアイコン マークが「ＡＰエレ メント（AP Div を描画）」です。これをクリックして、作業 場の適当な位置 にドラッグでレイアウトセ ルを配置します。 ドラッグしてＡＰエレメン トを配置！ 次に、今配置した「ＡＰエ レメント」の中で 一度「左クリック 」をします。 すると、このような黄色 いカーソル が点滅 します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 28 そうしたら、挿入バーの「一 般 」タブを選択し、木のマーク「イ メージ 」ア イコンを左クリックします 。 ※ 「イメージ」とは「画像」 のことを言います 。 「イメージソースの選択」 という小窓が表示 されます。 フ ァ イ ル の 場 所 が 「 sample1 フ ォ ル ダ 」 に な っ て い る こ と を 確 認 し て 、 「top_banner.g if」ファイルを選択して「Ｏ Ｋ 」ボタンを押します。 （パソコンの設定 によっては.gi f という拡張子が表示 されていな い場合があ りますが、 気にしないでくだ さい） Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 29 すると、 「イ メージタグのアク セシビリティ属性 」という小窓 が表示されます が、ここはそのまま何もし ないで「ＯＫ 」ボタンを押します 。 はい、これでヘッダーバ ナーの画像が「レ イアウトセル」の 中に表示できま したね。 ＡＰエレメントの余白を修 正します。 画像と同じサイズくらい にＡＰエレメント の大きさを調整し ておきましょう 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 30 今、画像を呼び出したＡ Ｐエレメント の縁を左ク リック します。 すると選択状態を示す「ハン ドル」という小 さな点 がレイアウトセルの四隅 と各辺の中央に表示されま す。 ここでは、画像の下方に ＡＰエレメントの 余白がありますの で、ＡＰエレメ ントの下辺のハンドルを ドラッグして画像 と同じくらいの大 きさにしてみま しょう。（だいた いでいいですよ） ハンドルをドラッグ！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 31 はい、画像サイズにＡＰエ レメントを調整で きました！ ※ＡＰエレメントはその 中に配置された画 像のほうが大きい 場合は、その画 像の大きさに合わせて自 動的に拡大します ので、画像用にＡ Ｐエレメントを 配置するときは、小さめ に配置すれば、画 像配置後にＡＰエ レメントの余白 を調整する操作は必要なく なります。 同じ要領で、残り４つの画 像を配置していき ます。 ．．． ． 左上のちょっと内側あたり に 、「画 像」を置きます。 上部の「挿入」バーから「 レイアウト」タブ を選択、「AP Div を描画」のア イコンをクリックして、マ ウスのドラッグで レイアウトセルを 配置します。 ． ．． ．． ．． 場所は、 適 当で ＯＫ です 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 32 ＡＰエレメントの中で一度 左クリックをして から、「 挿入バー」から「 一般」 タブを選択、木のマーク「 イメージ」アイコ ンをクリック！で す。 「イメー ジソース の選択 」画面 では、今 度は「v oicelogo.g if」とい うファイ ルを選択してみましょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 33 「イメージタグのアクセ シビリティ属性」 という小窓が表示 されますが、こ こはそのまま何もしないで 「ＯＫ 」ボタンを押します。 はい、２つめの画像が表示 されましたね！ 次は、親子の写真と、子犬 の写真を挿入しま す。やり方はまっ たく一緒です。 もう手順は覚えましたよね ？次ページからは 手順を少し省略し ますよ。 もし、わからなくなって しまったら、３２ ページに戻って、 詳しい手順を確 認しましょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 34 「v oice&picture！」の少し下に「ＡＰ エレメント」を 置き、「oy ako.jpg 」と いうファイルを開きます。 親子の写真が出てきました 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 35 親子の写真のちょっと右下 に、子犬の写真を おきます。 同じように「Ａ Ｐエレメ ント」を適 当に配置し て、「koinu .jpg 」というファ イルを開きます。 かわいい子犬が現れました ね。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 36 ここまででひと段落です。 それでは、ちょっと遊んで みましょう。 それぞれの画像 を、マウス でドラッグ しながら、 好きな位置にいろいろ動 かして みてください。 画像を移動したい場合は、画像を選択するの ではなく、画像が 入っている「Ａ Ｐエレメント」を選択状態 にして動かします 。 ＡＰエレメントを選択する ときは、必ず 「縁」を左クリック 、です。 【画像の「上」でクリックすると・・・】 「黒い ハンドル 」が出てきます。この 状態では移動はで きません。 【画像の「縁」（＝ＡＰエレメントの縁）でクリックする と・・・】 「青いハンドル」 が出てきます。こ の状態で移動でき ます！ 移動するときにも、 必ず画像の縁、つまり青い「辺」の部分をマウスでドラッ グ してくださいね。 では、実際にみなさんも 、画像の縁をクリ ックして選択状態 にして、マウス のドラッグでいろいろ、移 動してみてくださ い。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 37 たとえば、こんな風にして みたり。↓ 好きなように。好きな位置 に。自由に。 どうでしょうか？ 超簡単 でしょ？ テーブル構造で作成し 、 「なん で置きたい場所に 画像を置けないん だ！」と絶 叫していたあなた。 おめでとうございます。 もう、そんな苦しみからは永遠に解放されます。 それでは、画像の位置を 、だいたいでいい ですから元の場所 に戻してくださ い。次に、画像だけでは味 気ないですから、コメントを何かい れたいですね。 そこで、「文 字」を挿入します 。 やり方はいたって簡単です 。 いつものように「AP Div を描画」マークをク リックしてから マウスのドラ ッグでＡＰエレメントを配 置します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 38 場所は、親子の写真の横あ たりにしてみまし ょう。 配置したＡＰエレメントの 中で一度「左クリッ ク」し てから文章 を書き込み ます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 39 別にサンプルのように書 き込まなくてもよ いですので、それ らしいことを書 いてみてください 。「かわいいです ね∼」など。 注意！ ＡＰエレメントの中で隙間無く改行したい場合 は、キーボードの 「sh ift」キーを押しながら「en ter」キーを押します 。これが通常の改 行で、 「BR」という黄色い「 改行マーク」が表 示されます。 普通に「en ter」キーだけで改行すると 、「段落改 行」となり、 大きく間隔が 開いてしまいます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 40 今度は、ＡＰエレメント の中の文字サイズ を小さくしてみま しょう。マウス のドラッグで文字を範囲指 定し、下部の「プロパ ティパネル 」でサ イズを「10」、 単位を「ポイント 」 に指定してみましょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 41 注意！通常のサイ ズ（な し）は「12 ポイ ント」で す。小さ くしたい場合は「10 ポイント」く らいにし ます。大きく表示さ せたい場合は逆に、「18 ポイ ント」や「24 ポイント」な どに します。 文字が部分的に小さくなり ました。 さらに、この「ＡＰエレメ ント」の中に画像 を配置することも 可能です。 文章を入力したＡＰエレ メント内で左クリ ックして、セルを 選択状態（青い 枠になって、入力カーソ ルが点滅の状 態 ）にします。カーソルを置く場所は、 画像を配置したい場所、に なります。 今回は、最初の行（2008 年・・・・）の左側 に画像を配置して みましょう 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 42 画像の配置はもう手馴れた ものですよね！ もういちど手順をおさらい しますよ。 挿入バーのところにある「 一般」タブ を選択します。次に「木」 のアイコン マーク を左クリックです。 「sample１」フォルダの中の、「n ew.g if」を開きます。 「イメージタグのアクセ シビリティ属性」 の窓はそのまま「 ＯＫ」ボタンを 押します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 43 ＡＰエレメントの中に 、「n ew！」というロゴ文字（画 像）が入りました 。 ここまで終わったら、ファ イルを保存します 。 上部メニューバーから「フ ァイル 」→「保存 」を選択してください。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 44 ここで一呼吸おきましょう 。 さて、作成したページは、W EB ではどのように見えるので しょうか？ これを確認するには「地 球のマーク 」、「ブ ラウザでのプレビ ュー」ボタンを 押します。 この地球のマークを押す と、あなたのパソ コンの中にインス トールされてい るブラウザが表示されます から、それを選択 します。 ここでは、「イ ンターネット エクスプロー ラ 」を選択してみます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 45 選択したブラウザが起動 して、作成したホ ームページの実際 の見栄えを確認 することができます！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 46 どうでしょうか？ たったこれだけの要素、 これだけの短時間 ですでにホームペ ージの体裁が整 っていると思いませんか？ これが Dreamweaver の「ＡＰエレメント」の威力 なんです。 このようなソフト、機能 があるのに、なぜ 巷の「ホームペー ジ作成講座」で は「ＨＴＭＬタグ の基礎」 「テーブ ル構造」などを一から覚え させようとする のでしょうか。私には本当 に不思議でなりま せん。 このページをホームペー ジビルダーのテー ブル組みで作成し たら、２時間や そこらは十分かかるはずで す。いわん や H TML 言語を習得 してテキストエ ディタで作成となったら１ 日がかりでも終わ らないでしょう。 ナンセンスにもほどがある、というものです。 さて次は、ホームページの 基本、「 リンク 」です。 これも本当に簡単なので、 ちゃっちゃと作っ てしまいましょう 。 ここでは、 「 H OME」 「 過去の お客様の声」と いう２つのページ を簡単に作り、 リンク先にします。 手順としては、 ① 「ＨＯＭＥ」と「過去の お客様の声」の ダミーページを新規 に作成する。 ② 最初に作った「sample1.h tml」からリンクを張る 。 という２ステップです。 これから作るページはダミ ーのページですの で、ごくごく簡単 に作ります。 準備はいいですか？ では、やってみましょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 47 ①「ＨＯＭＥ」と 「過去のお客 様の声」の ダミーページ を新規に 作 成 す る 。 まず、Dreamweav er で新規ページを開きます 。 20 ページで実践したとおり、Dreamweav er の上部メニューバーの「ファイ ル」から「新規」を選択し 、新しいページを 開いてください。 （ここはおさらいになり ますから、少し作 業を省略します。 わからなくなっ たら、20 ページに戻って、新規ファ イルを開くところ を復習してくださ いね） Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 48 ＡＰエレメントを適当な位 置に配置し、適当 な大きさに広げま す。 ＡＰエレメントの中に「リ ンク先その１ Ｈ ＯＭＥ」と入力し てください。 入力したら、文字の大きさ を変えてみましょ う。 テキスト をドラッ グで範 囲指定 して、 プロパテ ィのと ころで サイズ 「24」、 単位は「ポイント」を選ん でください。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 49 文字が大きくなったら、フ ァイルを保存して プレビューで確認 をします。 注意！ Dream wea ver では、編集中のファイルをプレ ビューするときは 、必ずファイル を保存してからプレビュー 、という手順にな ります。 上部メニューバーから「フ ァイル」→「新規 保存」を選択しま す。 「名前を付けて保存」の窓が表示 されたら、保存する場所は「sample1 フォ ルダ 」、ファイル名は、「h ome.h tml」として保存しましょう。 保存がで きたら、「ブ ラ ウザで プレ ビュー 」ボタ ンを押 して、 見た目 を確認 しましょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 50 ここまでと同じ手順で、 今度は「過去のお 客様の声」のダミ ーページを作成 します。 もう、簡単ですよね！ 手順はまったく同じで、 ＡＰエレメントの 中の文字だけは「 リンク先その２ 過去のお客様の声」としま す。 文字の大きさも同じく「24 ポイント」に変更してくださ いね。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 51 ファイルを保存します。 上部メニューバー から「ファイル」 →「新規保存」 です。今度はファイル名を 「kakon okoe.h tml」とします。 保存ができたら、ブラウザ でプレビューしま しょう。 さぁ、これでリンク先のペ ージが２つ、作れ ましたね。 いよいよ、リンクを張って みましょう！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 52 ②最初に作った「sample1.h tml」からリンクを張る 「sample1.h tml」ファイルを開きます。 ファイルを開くときは、 上部メニューバー から「ファイル」 →「開く」を選 択します。 ファイル一覧の小窓が表示 されますので 、最初に作っ た「sample1.h tml」フ ァイルを選択して開くボタ ンを押して下さい 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 53 まず、「ＡＰエレ メント」左上のほ うに配置して 、「ＨＯＭＥ へ」と文字を書 き込んでください。 次に、「ＨＯＭＥ へ」という文字の 部分をドラッグで 範囲指定してくだ さい。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 54 そのまま の状態 で、「プロ パティ 」の「 リン ク」の 窓の右 側に ある「 黄色い フォルダのマーク 」 をクリックしてください。 「ファイ ルの選 択」窓 が表示 され ますの で、リ ンク先 となる ファイ ル、 「h ome.h tml」を選択してＯＫボタ ン を押します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 55 「H OME へ」の文字がリンクを示 すの青色になりま した。 これでリンクのできあがり です。簡単ですね ！ さて、ちゃんとリンクにな っているか確認し てみましょう。 ファイルを保存してから 、 「ブラウザでプレ ビュー」ボタンをクリック し、ブ ラウザでホームページの 表示ができたら、 青文字の「ＨＯＭ Ｅへ」をクリッ クしてください。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 56 先ほど作成したダミーのリ ンクページ「ＨＯ ＭＥ」が表示され ましたね。 はい、これでリンクの完成 です。 念のため、もう一回練習で す。 ブラウザを閉じ、ページの 右上に「ＡＰエレ メント」を配置し て、今度は「過 去のお客様の声」と記入し ます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 57 同じ よう に文 字 を範 囲 指定 し 、プ ロパ テ ィの リン ク窓 の 右側 につ い ている 「黄色 いフォルダ マーク 」をクリックします。 「sample１」フォルダの「kakon okoe.h tml」を開きます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 58 リンクが青文字になった ら。ファイルを一 度保存して、ブラ ウザでプレビュ ーしてリンクをクリックし てみましょう。 先ほど作成したダミーのリ ンクページ「過去 のお客様の声」が 出ましたね。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 59 確認ができたら、ブラウザ は閉じてください 。 リンクはこれで以上です。 かなり簡単ですよ ね。 文字だけでなく、画像にリ ンクを張る場合も 同じ手順です。 画像にリンクを張るとき には、画像を左ク リックして選択状 態にして、プロ パティのリンク窓の右に ある黄色いフォル ダマークを押し、 リンク先のファ イルを開いてくださいね。 最後に、装飾した文字を挿 入して仕上げです 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 60 い つ も の よ う に 「 Ａ Ｐ エ レ メ ン ト 」 を 配 置 し 、「 2008 年 春 バ ー ジ ョ ン ！ 5/28 更新」と記入してください。 この見出しは、目立たせた いところです。 全体を範囲指定して 、「Ｂ（ボール ド）」をク リックします。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 61 くっきりきれいな太文字に なりました。 さらに、文字を赤にします 。先ほどと同じよ うに文字を範囲指 定します。 色をつけたい場合 はプロパテ ィのサイズの 隣にある四 角形の印を クリック し ます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 62 すると「色パレット」が表 示されますので、この中から赤を選 んでください。 文字が赤くなりましたね。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 63 さらに、 「５／２８更新 」というと ころに、アンダーラインを 引きたいと思い ます。「５／２８ 更新」という部分 を範囲指定し、 右クリック してくださ い 。 そこから、「スタ イル」→「アンダ ーライン」を選択 します。 アンダーラインが引かれま した。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 64 文字の装飾も大変簡単です ね。まさにワープ ロ感覚です。 ほかに、右寄せ、センタリ ング、左寄せ、太 字などで装飾可能 です。 また、上部メニューバー の「テキスト」か らは、取り消し線 なども選択でき ます。 これで完成です。それで はファイルを保存 して「ブラウザで プレビュー」ボ タンで見栄えを見てみまし ょう！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 65 素人が短時間で作成した割 には、 なかなかイケて ますよね！ このレベルなら、十分ビジ ネスとしても通用 します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 66 どうでしょうか？ 簡単でしょう？ これであなたも今日からホ ームページデザイ ナーの仲間入りで す。 ところで、 皆様が作成したサンプル ページですが、こ のページが見栄え がまあまあイケ てるのは、トップバ ナーや「v oice＆pictu re！」の 「ロゴ文字」 である ことはもうおわかりですよ ね。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 67 これらがもしも普通の文字 だったらどうでし ょうか？ なんか、ダサいというか味 気ないですよね。 こうなると急に 素 人くささ が出てしまいます。 【文字だけだととたんに素 人っぽくなる！】 それでは、次は、「Photoshop Elemen ts」でこのロゴ文字を 作成する方法を 実践します！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 68 Step1 ―② 「Photoshop Elements」でロゴや画像を作成する ホームページビルダーの ような作成ソフト にも、画像を切り 取ったり、小さ くするなどの付属機能はあ ります。ロゴ文字 を挿入する機能も あります。 しかし、この「おまけの 機能」では、趣味 のホームページは 作成できても、 ビジネスには利用できませ ん。 私が当初作成しはじめた 時のホームページ でも、ロゴや画像 がなんか間抜け で素人くささが抜けません 。 しかし、これがホ ームページビルダ ーなどの、 「 おまけ 機能」の 限界なんです。 【ワン！ズダイレクト初期 ↓】 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 69 しかし、その後「Ph otosh op Elemen ts」を同時に利 用することで 、以下のよ うに進化しました。 【ワン！ズダイレクトその 後↓】 デザインの見栄えが雲泥の差 であることは、 以前後比べ、 誰の目にも明らかだと思い ます。 なにが、この差を生んでい るかわかりますか ？ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 70 「 ロゴ文字の作成」と「写真画像の処理」 それは、 の２つです。 ロゴ文字とは、こういうの だったり・・・・ ↓ このような↓、 文字を「画像として」作成すること です。 写真画像処理とは、このよ うな↓素人くさい 恥ずかしい写真を ・・ この よ うに ↓ 商売用のホームページに乗っけられるような 写真に「編集すること」 をいいます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 71 ロゴ文字は、よく「ＧＩＦ アイコン」などと 言われます。これ が top ページ にきれいにあるのとないの では、大きなデザ イン上の見栄えが 違うのです。 ところが、これら をビジネス用に作 成する方法論は 、 「おまけ機能 」以外この 世にほとんど公開されてい ません。 また、デジカメ画像などを トリミング（必要 な部分だけ切抜く 方法）したり、 画像のファイルサイズを 小さくしたり、色 を見やすくする（ 色調補正といい ます）などの技術をどうビ ジネスに使うかと いう情報も同様で す。 これまた恐ろしい驚愕の事 実です。 ロゴ文字作成、画像 編集は Adobe 社の「Photosh op Elemen ts（ 以下 Elemen ts といいます）」を 使います。 「Elemen ts」は、世 界標準の画像処理 ソフト「Ph otoshop」の兄弟版として 知られています。 ほとんどのプ ロのＷＥ Ｂデザイ ナーは「Ph otoshop」で画像を加工 していま す。 しかし、Photoshop ほどの専門機能はな くても、「Elemen ts」で十分、見栄 えのよい画像を作ることが できるのです。 素人が「Elemen ts」で、ごく限られた機能を 使って簡単に作成 するだけでも、 ホーム ページ の見 栄えが 天と地ほど の差が出 ますか ら、絶 対に活用すべきです。 操作は慣れるまで多少、難 しく感じるかもし れません。 しかし、ホームページ作成 ソフトの「Dreamweaver」と同じ会社の製品であ り、操作の感覚が非常に似 ています。 ワードとエクセルの関係の ようなものです。 両者を交互に使用するこ とで、相乗効果が 生じて飛躍的に能 力は高まるはず です！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 72 １、「Elements」ってどんなことすんの？ まずは概要 です（まだ 実際に操作 しないでくだ さいね ）。 例えば仮に、このような↓ ロゴ（ＧＩＦアイ コン）をつくると しましょう。 まず、「Dreamweav er」同様、「Elemen ts」で、ロ ゴの大 きさの新 規ページ を用意します。ここでは白 の背景があるだけ です。 これに、緑色のラインを入 れます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 73 さらに、あらかじめ用意し た「小さいダック スの画像」を加え ます。 金色の文字を入れます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 74 余白にもうひとつ文字を入 れます。 これをひとまとめに、「GIF ファイル」という形式で保存して 、完成です。 このように、 「ロゴ（ＧＩＦアイコン ）」という のは、さまざまな 文 字 や画 像を組み合わせて作成していきます 。これらひとつひとつの「 文字」 や「画像」のことを「レイ ヤー」（ 階層、という意味 ）と呼びます。 「レイヤー」 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 75 つまり、このロゴは、 ①「Let’s en try ！」という文 字 ②「小さいダックス」の 画 像 ③「子犬お探しサービスへ 登録を！」という 文 字 ④「緑色のライン」の 画 像 ⑤ 背景 ．．．．．．．．．．． ．．．．．．．．． の、５つのレイヤー（階層） で、ひとつの画像を構成 しているわけです。 この、 レイヤー（階層）という概念を理解することが、大変に重要で す 。 レイヤーの世界観は、マ イクロソフト社の エクセルやワード といった一般ビ ジネスソフトにはまった く存在しない概念 なので、なかなか 慣れるまで時間 がかかります。 しかし、このような作業 は、ホームページ ビルダーのような ＨＰ作成ソフト では絶対 にでき ませ ん。ま た、他 の画像 処理ソ フト はたく さんあ ります が、 「Adobe Ph otosh op」は世界のデザイ ンクリエーター の 80％以上が使用す るソフトで、極めて見やす いロゴを自在につ くることができま す。 仕上がりも段違いにきれい です。 世の中の映画のポスター や新聞折込のチラ シ、パンフレット の画像やロゴな どはほとんど この「Ph otosh op」で作成されて いるといっ て過言で はありま せん。 その「Photosh op」の弟分である「Elemen ts」は、その価格からは考えられ ないほどの高機能で、こ のようなロゴを作 る以外にも、プロ 並の機能が山ほ どありますが、商売に つかうＨＰ作成に使 うのは、ほんのわずかな機 能を覚えるだけで十分です 。詳細な作成方法は次 part 以降で述べ ます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 76 ２、準備 それでは、実習に入る前に準備 です。まずは「Elemen ts」を起動してくださ い。インストール した方であれば以 下のようなアイコ ンがあると思いま す（バ ージョン 6.0 の場合）。 初めての起動の時に「シ リアルナンバー」 の入力が要求され ます。シリアル ナンバーを入力すると以下 のような「初期画 面」が現れます。 この画面は「スタートアッ プスクリーン」と 言います。 ここからオレンジ色の「編 集」マークを選択 します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 77 起動すると、このような画 面になります。 次に、作成に必要な画面構 成にする必要があ ります。 右上の、「ウィ ンドウ」 をクリックして開いて ください Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 78 「ウィンドウ」の 中が以下の４つの 部分にチェックが 入っていればＯＫ です。 「ツール」「レイヤー」「効果」「パレットエリア」 チェックがなかったらクリ ックして表示させ ておいてください 。 この４つ以外のウインドウは一切使いません ので、他の 余計なメ ニューや パレットのウインドウはチ ェックをはずし、 消しておいてくだ さい。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 79 以下のような画面構成にな るはずです。 「ツール」 「効果」 「レイヤー」 「パレットエリア」 この４つの言葉、場所は必ず 覚えてください。 ．．．． ご心配なく。覚える場所はここだけ です。 他のややこしい機能は一切 使いません。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 80 実習に必 要なデータのダウンロード 次の準備は、実習で必要な 画像データをダウ ンロードします。 http://www.n iche-marketing .jp/sample/ にアクセスして、 「Ph otosh op」 「ロゴ文字」作成用画像データ→sample２ ダウンロード をクリックしてください。 このような画面ができます から、「 保存」ボタンを押 してください・ 保存先を指定します。保存 先は「デスク トップ 」にしてください。 （覚えやすければどこでも ＯＫです） Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 81 保存が終了したら 、 「sample2.lzh 」をダブルクリック して解凍してくだ さい。 （解凍ソフトがなければ 、サンプルダウン ロードページにお すすめ解凍ソフ トのリンクがあるので、解 凍ソフトをダウン ロードしてくださ い） 解凍し終わると、以下のよ うなフォルダが出 てきます。 全部で３つのファイルがあ ればＯＫです。 このフォルダは「sample2」という名前で、デスクトッ プにあります。 このデータは後ほど使用し ますので、場所を 覚えておいてくだ さいね。 それではいよいよ「Elemen ts」の実習にかかります！ 「Dreamweaver」同様、これからやる作 業は、 実に簡単 です。 ただし、ちょっとだけ「Dreamweav er」よりは難易度が上 がります。 でも、最初は難しくても 決してあきらめな いでください。で きないのはあな たの能力が低いわけでも頭 が悪いせいでもあ りません。 ソフト会社がわかりにくく作っているのが悪いんです（マジで） 。 かならず慣れてくれば、自 然と問題は解決し ていきます。 遊び心で楽しんでやりまし ょう！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 82 ロゴの作成 それではいよいよ実践です 。このようなロゴ 文字を作成します 。 （文字ロゴではサンプルデ ータは使用しませ ん） 【ロゴ文字↓】 インターネット上では、 文字のフォント形 式はほぼゴシック 形式で統一され ています。これ以 外のフォント 、 「 ポップ体」 「ゴシッ クＵＢ」 「楷書体 」など の特殊 表現はでき ないように制 限 されています。 ネット上では「 誰でもコンピ ュータの性能 や機種に左 右されずに 、情報を閲 覧できるように」 作られている からです。 【特殊表現の文字↓】 そうかとい って、 ゴシックのテキスト（文章）一辺倒のホームページは 無味乾燥で、かっこよくありません。 せめて店の顔である「top では、メリハリのあるかっ こいい文字表現を 使いたいものです 。 それが「文字ロゴ」です。 作成は「Elemen ts」を使えばいたっ て簡単です！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 83 ページ」 まず、左上メニューから 「ファイル」→「 新規」→「白紙フ ァイル」を選択 します。 新規ページ設定画面が出て きます。プリセッ トは「カスタム 」、幅 を 600 ピ クセル、高さを 300 ピクセルくらいに 適当に設定します 。 注意！このピクセルの「 大きさ感覚」は徐々に慣れてきます。「 300 ピクセル×100 ピクセルな ら、web 上でど のくらいの大きさになるか」が、すぐ にイメージできるようになれば、web 作成は 大幅に効率がアップしま す 。 注意！ 「解像度」は「72pixel」、カラーモード 」は必ず「RGB カラー」に してください！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 84 空白のスペースが出てきま したね。 それでは、まず、後ろの緑 色の文字を作成し ましょう。 左のメニューバーから「横 書き文字ツール」 を選択します。 範囲を適当な大きさにマウ スでドラッグしま す。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 85 次に、ここに文字を記入 していくのですが 、その前にフォン トの書体・サイ ズの設定を行います。設定 には「ツール バー 」を使います。 ツールバーで、書体とサ イズを設定します 。書体は「Impact」、サイズは「36pt」 です。 注意！ パソコンによっては「Impact」の書体が入っていな い場合もあります 。 その場合は、似たような書 体で実習してくだ さい。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 86 「Voice＆Pictu re！」と記入します。 次に色を黒から、薄い緑に 変えてみます。 文字の範囲を選択してか ら、ツールの「描 画色を設定」をク リックし、カラ ーピッカーで薄緑色を選択 します（色は適当 でＯＫです ）。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 87 薄い緑色に変更できました 。 ただし、これではお堅い 感じの書体なので 、ちょっと装飾し ましょう。先ほ どと同じように範囲を選 択してから、ツー ルバーで文字を斜 体にします。さ らに文字を太字にします。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 88 多少「遊び心」が出てきて 楽しい文字に↓な ってきましたね！ これでひとまず「○」をク リックして文字 を確定 します。 さらに、これに「最新「 お客様の声」と受 け渡しの様子」と いう文字を入れ ましょう。レイヤーパレ ットから「新規レ イヤーを作成」ボ タンをクリック します。次にツールバー から「横書き文字 ツール」を選択し 、下のほうの余 白にマウスでドラッグしま す （位置は 適当でＯＫです ）。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 89 今度は、真面目な文体に してみましょう。 同じように文字パ レットでの設定 です。フォント書体は「Ｍ Ｓゴシック 」、サイズは「14pt」、カラーは「黒」 です。設定したら 、 「最新「お客様の声 」と受け渡しの 様子」と記入 して、 「○」 で入力を確定してください 。 このままで文字と文字のバ ランスが悪いです ね。 「最新∼」という文章を 上のほうへ移動し ましょう。まず、 ツールから「移 動ツール」を選択します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 90 レイヤーパレットから 、「最新「お 客様の・・」のレ イヤーを選択しま す。 注意！ 必ず 、レイ ヤーを 選 択してから 、 作 業にかか りまし ょう。「 レイヤー」 とは、「 階 層」という意味です。このロゴ作成の場合は、「背景」「「Vo ice ＆Picture！」「最新∼」 という３ つの「階層」から 成り立っているわけです。 「最新「お客様の・・」と いう文字をマウス のドラッグで移動 します。 注意！ レイヤーには順番があ ります。この場合は、「最新の∼」が「上に」あるので、 「vo ice ∼」の上に重なっ て見え るわけです。この上下の 順番は、レイヤーパレッ ト でレ イヤーをドラッ グ＆ドロッ プで変え ることができます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 91 あとはこれを適当な大きさ に切り抜きましょ う。 まず、ツールから 、「切り抜きツー ル」を選択します 。 マウスのドラッグで、以 下のように、範 囲指定をして 、 「○」をクリックして 確定します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 92 見事に、文字ロゴが完成し ましたね。 最後に、この出来上がった ロゴ文字画像を保 存します。 Ph otosh op 形式とＧＩＦ形式の２つの 形式で保存 します。 （理由は後述） まず「ファイル」から「保 存」を選択します 。 すると、このよう な↓小窓が出ます ので、 「再表示し ない」を チェックしてＯ Ｋボタンを押します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 93 デスクトップから、先ほどダウンロー ドした「sample2」フォルダを指 定し、 「v oice」というファイ ル名で保存してく ださい。フ ァイル形式は「Photosh op （*PSD*PDD）」です。 次に、GIF 形式で保存しましょう。今度は 「ファイル」から 「別名で保存」 を選択し・・・・ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 94 同じよう にデス クトッ プから、「sample２」フ ォルダ を指定 し、「voice」と いうファイル名 で保存し てください 。今度のフ ァイル形 式は「CompuServe GIF (*GIF)」です。 注意！ このとき、ファイ ル名に自 動的に「vo ice のコピー」などと 表示され ますが「のコピー」の部 分は必ず削除して ください。ファイ ル名は画像もホ ームページと同じように 、「半角英 数字」しか使用で きません。 保存ボタンを押すと 、「レイヤーを 統合しますか？」 という小窓が現れ ます。 ここでは必ず「ＯＫ」をク リックしてくださ い。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 95 次に「インデックスカラー 」という小窓が現 れます。 ここも、そのまま、何も 設定を変えずに「 ＯＫ」ボタンをク リックしてくだ さい。 更に「ＧＩＦオプション 」という小窓が現 れますが、これも 、そのまま「Ｏ Ｋ」ボタンをクリックしま す。 これで、ＧＩＦ形式でも保 存ができました。 注意！ロゴ文字はＧ ＩＦフ ァイル、写真は JPEG ファイルで保存すると覚え ます。 写真と文字が 一緒の画 像はどちら か割合の多い方で保 存します（どちら でも大差 はあ りませんので）。 注意！フ ァイル名 をつけるときは 、必ず 「小 文字 半角 英数 字」だ けでつ けてくだ さ い。（例：「画像 1.gif」→× 「gazou1.gif」→○） これで「ＧＩＦ形式」の 「文字ロゴ」の出 来上がりです。こ のようにして作 成した画像を「Dreamweav er」で組み込んでいくわけです ！ ロゴ文字などの画像作成 は、慣れるまでは 時間がかかります が、１０日間も やっていれば、ひとつの画像作成を 3 分くらい で作成できるようになりま す。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 96 なぜ Photoshop 形式と GIF 形式両方で保存するのか？ Ph otosh op 形式とＧＩＦ形式の２ つで保存するには 理由があります。 もちろんＧＩＦ形式のファ イルを作成するの が目的ですから 、Photosh op 形 式で保存しなくても問題は ありません。 しかし、「作成してｗｅｂにアップロードしたものの、どうも気に入らない」 ということが非常によくあ ります。 「文字をもう少し大きく 」 「この文章の位置 を高くしたい 」という場合 、一度 ＧＩＦ形式で保存してし まうと、それは「 ひとつの画像」と してレイヤーが 合体してしまうので、 修 正ができなくなってしまいます 。 これを、Ph otosh op 形式で保存し ておけば、「 雛形」とし て使いま わすこと が可能になります。Ph otosh op 形式は、レイヤー（階層）を それぞれ独立し たままで保存できる形式な ので、何度でも画 像を修正できるわ けです。 たとえば、先ほどは↓この ようなロゴ文字を 作成しました。 これを雛形として使い、 文字を入れ替える だけで、簡単に別 のページの「文 字ロゴ」ができます↓。 時間にして 1 分程度でできあがります。 そんなわけで、２つの目 的、「修正するときのバックアップ」「同じ雛形を利 用してほかの文字ロゴを作成」 するために Photosh op 形式でも保存はして おくわけですね！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 97 写真を組み合わせたロゴの作成 さらにステップアップし て、↓のような「 画像組み合わせロ ゴ」を作成する ことも可能です。 それでは、ダウンロード したデータを使い 、このような写真 組み合わせロゴ を作成してみましょう。 【作成例↓】 まずは、 先ほど の「文字 ロゴ」 作成の 要領で、「merit？ demerit？」とい う文字を書き入れるところ まで作成してくだ さい。 サイズは幅 330 ピクセル、高さ 40 ピクセルくらい。文 字の種類は Arial Black、 文字のサイズは 24pt くらいでよいでしょう。 （ここは先ほどの復習で すので、詳しく手 順を説明しません 。自力でやって みてください、目標時間は 5 分以内！）。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 98 次に、「ファイル 」→「開く 」から、 先ほどダ ウンロー ドした「sample２」 のフォルダを指定し 、「koinu .jpg 」を開いてください。 かわいい子犬の画像が現れ ました。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 99 注意！ ここで子犬の画像が表示されたと きに「me rit? e merit?」の文字の画 面が消えてしまう場合、画 面の表示モードを 変更してください 。 上部メニューバーから「 ウインドウ」→「 アレンジ」→「並 べて表示」を選 択すると、２つの画像を表 示できるようにな ります。 さて、この子犬の画像を文 字に組み合わせま しょう。 はたしてどのようにやるの でしょうか？ まず。子犬の画像を選択し てから、「移動ツール」を 選択します。 子犬の画像を、ドラッグ＆ ドロップで、中央 に持ってきます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 100 はい、子犬の画像がコピ ーされて、とって もキュートな写真 入ロゴができま した。 ・・・・異様に簡単 ですよね。 このような作業を積み重 ねて、デザイナー の皆さんはホーム ページやポスタ ーや、パンフレットなどの デザインを作成し ているわけです。 結局のところ、どんな一 流デザイナーが手 がける雑誌や広告 などのデザイン も、「画像」と「文章」を組み合わせ、ひとつの「画像」を作成 しているに過ぎません。 思ったより、はるかに簡単 でしょう？ 一見難しそうな仕事でも、 舞 台裏はこんなもんです 。 おそらく、このような ノウハウが世の 中に簡単に出回っ てしまうと デザイン 業界の給料が少なくなってしまうので 、出し惜しみされているのでし ょう。 それでは、先ほどと 同じように、Ph otoshop 形式と GIF 形式で「sample２」 に保存して終了です。 ファイル名は「merit」としてください。 なお、ダウンロードのサ ンプル画像が他に もありますので、 ためしに組み合 わせてください。 「組み合 わせロゴ 」というのは大変 に簡単に 、トップページ をお化粧することができま す。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 101 補足① ：背景色をつける場合 ロゴ文字などの背景色をつ ける場合を補足説 明しておきます。 このような↓鮮やかなオレ ンジの背景色をつ けたい場合は？ 実は結構簡単です。ツール の「塗りつぶしツ ール」を選択しま す。 （バケツのマークです） Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 102 ツールの「描画色を設定 」をクリックし、 色を指定します。 明るめのオレン ジを適当に クリックして「ＯＫボタン」を押 してください。 塗りつぶす色を決めたら 、 「 レイヤー」パレットで 、 「 背景」を選択してから・・・ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 103 適当な隙間をクリックしま す。こんな↓感じ になりましたね。 でも、これだと子犬の写真 の背景が白いまま なので、かっこ悪 いですね。 今度は、子犬のレイヤーを 選択して赤く塗り つぶしましょう。 レイヤーパレットから、子 犬の写真レイヤー 「レイヤー１」を 選択します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 104 背景が白いところをクリッ クして塗りつぶし てください。 白いところを塗りつぶした ら、はい！できあ がりです。 簡単ですね！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 105 写真の修正 次は、写真画像の編集です 。 ホームページにおいては、 写真の見栄えの良 し悪しは大変に重 要です。 特にトップページで素人 同然の写真が掲載 されていると、す ぐに嫌われサイ トになってしまいます。 この章ではホームページを 彩る大切な材料 、web 起業家のための画像の編集 テクニックを解説します。 （この章ではダウンロードデータによる実習はしません。 操作がとても 簡 単なためです。ご自 身の写 真や、 商品の 写真など でぜひ実際にやってみてください） テクニックその１ 「白抜き」 TOP ページで自身の顔写真な どを出すときは、背景を 白にする見せ方、いわ ゆる「白抜き」にするとか っこよくなります 。 背景の本棚とか、生活感 が見えていると商 用ＨＰとしてはか っこ悪くなりま すから、画像データを、Elemen ts で加工します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 106 ①まずは、顔写真画像を開 きます（ご自身の でやってください ね！）。 ②だいたいを切り抜きます 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 107 ③背景を「消しゴムツール 」を選択してドラ ッグで消します。 ④はいできあがり！結構か んたんでしょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 108 テクニックその２ 「切り抜き」∼余計な情報をカットせよ！ 写真をサイトに掲載する 場合、どうしても 素人っぽさ丸出し の写真、という のがあります。 さまざ まな 理由が あり ますが 、素 人っ ぽく見 える 最大の 原因 は、 余計な ものが写っている ということに尽きます。 これを切り抜きテクニック で解消しましょう 。 （ここの例はペットばか りですが、不動産 であれ、アパレル 用品であれ、食 品であれ、考え方は基本的 には同じです） たとえば、以下のような サイトがあります 。別に特別悪いデ ザインではあり ませんが、画像がいかに も素人丸出しなの で、お客に不安感 をもたれてしま います。 【いかにも画像が素人丸出 しのサイト↓】 なにが悪いのか？ この例の場合は、犬を見 せたい画像なのに 、ソファだとか 、バックだとか 余 計なものがたくさん写っているのがとても問題なのです。 ３つの画像をこのように修 正してみましょう 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 109 第一印象が大分違います。 すでにこのマニュアルで は何度も登場して いますが、このテ クニックを「切 り抜き」といいます 。「トリミ ング 」と呼ばれることもあります。 画像編集の基本中の基本で す。 「切り抜き」で 余計な背景を取り除くだけで見違えるようにメ リハリの利いた画像になります 。 やり方はいたって簡単です 。 左上メニューの「ファイル 」から「開く」を 選択して、画像を 呼び出します。 （画像はご自身で用意して くださいね） ツールから「切り抜きツー ル」を選択します 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 110 左上から右下にマウスのド ラッグして、切り 抜きたい範囲を指 定します。 このときに注意するのは 、中心のマークが 、被写体の中心に合っている ことが重要 です。これがずれてしまうとデザイン が崩れます。 次にマウスで「○」をクリ ックして切り抜き ます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 111 切り抜けました。 このように余計な背景（ バッグだとか、ソ ファとか）を取り 除いた画像にす るだけで、すっきりコン パクトに、お客へ 伝えたい情報（被 写体）だけを伝 えることができます。 特に、上記の例の場合な どでは、背景が「 一般家庭のソファ 」だったり、パ グの横にあるのが「普通 のバッグ」だった りすると、お客か らのイメージは かなり悪いものになります 。 この よう な 舞台裏の余計な情報は、お客を無用に不安にさ せるだけ ですから、取り除いてあげ て、見栄えもよくする と大変印象がよ くなります！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 112 テクニックその３ 「画像解像度（サイズ）変更」 テクニックその３はサイズ 設定です。 多くの「素人っぽいサイト 」のほとんどは、 画像が大きすぎ ます。 「小さくコンパクト 」。これがサイ トのセンスを良く 見せるコツです。 【悪い例 画像が大きい↓ 】 ご購入者の声をデジカメで 撮影したまんまの 大きさで Top ページに乗っける と大きすぎます。Top ページ全体のバラン スが悪くなって素 人っぽいページ になります。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 113 Elemen ts では、画像解像度を設定するこ とによってサイズ を変更します。 画像を呼び出し、画像の上部 タイトルバーの位 置で右クリッ ク をすると、メ ニューが出てきます。この 中から「画像解像 度」を選択します 。 画像解像度の設定画面が出 てきますので 、 「画像 の再サンプル 」のところにチ ェックを入れてから 、「ピクセル数 」のところで幅か 高さを小さくしま す。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 114 ● ポイント＝単位は pix el（ピクセル）であわせます 。 「幅」を 120 ピクセルに低くし てみます。Elemen ts の優れた機能により、 同じ比率で「高さ」も自動 的に低くなります （96 ピクセルに）。 ＯＫボタンを押すと、ぐっ と画像が小さくな りました。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 115 この画像を Top ページに載せます。 Top ページは特殊なページです。 お客に購入へのアクショ ンをとってもらう ためのページであ り、間違っても 大きい画像で無駄なスペー ス取りをしないで ください。 写真の大きさ（画像解像度 （ピクセル ））のの目安は 以下のとおりです 。 Top ページの写真＝幅 100∼120 ピクセル お客様の声などの コンテンツペ ージ ＝幅 200∼400 ピクセル （Top ページ以外のコンテンツページ は多少大きくても ＯＫです） Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 116 テクニックその４ 「画質調整」 ∼見やすい色へ自動に設 定してくれる魔法！ デジタルカメラはかなり 技術進歩していま すが、それでも写 りの良い撮影は かんたんではありません。 暗く写ってしまっていた り、鮮やかな明る い色のはずが真っ 黒になってしま ったり・・・せっかくの写 真も写りが悪いと 印象が相当にダウ ンします。 Elemen ts に は、 こ れ らの 問 題 を簡 単 に解 決 し てく れ る ハリ ポ タ 顔負 け の 魔法 がそなわっています。ボタンひと つで、色鮮やか、 見やすい文字 へ見事に変身させてしまい ます！ それが「画質調整」のテク ニックです。 例：観葉植物の場合 以下のような観葉植物が 商品だとしましょ う。デジカメで撮 ったんですが、 異様に暗く 写ってしまいました。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 117 これに「 自動コントラスト 」の魔法をかけま す。 「画質調整」を選択し 、「自動コン トラスト」を選択 します。 すると！ 明るく色鮮やか な緑の観葉植物が 現れました！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 118 注意！兄弟版「Photoshop CS2」の自動色調補正 Ph otosh op CS2 の場合は、自動コ ントラストは「イ メージ」から 、「色調補 正」→「自動コントラスト 」をクリックです 。 次はペットでやってみまし ょう。 上記は、ブリーダーさんからいた だいたお写真で、生後 2 週間のトイプード ルレッド（赤）です。毛 色はレッドなので すが、デジタルカ メラの問題か、 撮影時の光量の問題かわ かりませんがかな り薄い色に見えま す。まるで小麦 色。これに「画質調整」の 魔法をかけます。 さきほどと同じように「自 動コントラスト」 を選択します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 119 すると！ 鮮やかなレッド が現れます。 Elemen ts における画質調整は、「本来 、被写体が持 っているであろう 色、コ ントラストなどをコンピュ ータが推測して表 現する」機能です 。 まさに魔法ですね。 本来、画質調整というの は大変デリケート な作業で、プロの デザイナーがわ ずかな色のバランスを考え ながら緻密に行う ものです。 これが、 ＩＴ革 命の おかげ でまっ たくの 素 人がボタンひとつでできるの ですから 、驚きを隠せません。 自動画質調整には以下の６ つがあります。 1.自動スマート補正 2.自動レベル補正 3.自動コントラスト 4.自動カラー補正 5.自動シャープ 6.自動赤目補正 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 120 この中でも、最も 自然な色合 いが出るのが 「自動コントラスト」 で、基本的に 「自動コントラスト」だけ 使用していればＯ Ｋです。 「ちょっと暗い感じだなあ 」 「どうも色が良 く出ていない 」と感じたら 、ボタ ンいっちょう自動コントラ ストです。 これだけで 見 違えるような画像に変 身 します。 このような見にくいお手紙 のスキャン画像も ・・・・ ↓自動コントラストにより 一発で色の濃い、 見やすい文字にな ります。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 121 「Elements」のまとめ Elemen ts の機能は大きく分けると、３つ になります。 ① ロゴ文字を作成する。 ② 写真を編集・補正する ③ 写真と文字を組み合わせたロゴ文字を作成する 重要なのは、①ロゴ文字 を作成する です 。これを応用する ことでトップペ ージのトップバナーを作成 したり↓ アマゾンのような商品カテ ゴリーのタブを↓ 作成することがで きます。 （ここまできれいに作る必 要はありませんが ） 写真の修整、補正につい ては、本書で紹介 している以外に、 たくさんの機能 が死ぬほどありますが、ビ ジネスシーンでは あまり使うことは ありません。 「切り抜き」「サイズ調整」「画質調整」 の３つだけ覚えて おけば十 分です。 これに集中してください。 いかがでしょうか？ 「Dreamweaver」よりは多少難しいところ がありますが、想 像するよりはは るかに簡単だったのではな いでしょうか。 「Dreamweaver」と「Elemen ts」を連携させた応用 編は、 「 テンプレートを 使ってホームページを作ろ う」の章（後述） でさらに詳しく説 明します！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 122 Step1 ―③ 「テンプレート」を使ってオリジナルホームページを 作ろう この項では、テンプレー トを使ってあなた だけのオリジナル ホームページを 作ってみましょう。 テンプレートはサポートサ イトからダウンロ ードできます。 やることは今まで実践した ことの復習ですか ら簡単です。 【テンプレート（雛形）ダ ウンロードサイト 】 http://www.n iche-marketing .jp/sample/h in a.h tml ステップについては以下の 通りです。 １．サポートサイトからテ ンプレート（雛形 ）をダウンロード する。 ２．Elemen ts でトップバナーを編集する ３．Elemen ts でサイドメニューのロゴ文 字を編集する ４．Dreamweaver でトップページを編集する ページをゼロか ら作るのと 違い、雛形 テンプレー トを使えば 、Elemen ts で 画像を編集し、Dreamweaver でコンテンツを書き 加えるだけで 、あっとい う間にプロっぽいトップペ ージができてしま います。 それでは実践です！ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 123 １．サポートサイ トからテンプ レート（雛 形）をダウン ロードする テンプレートのダウンロー ドページ http://www.n iche-marketing .jp/sample/h in a.h tml にアクセスして、お好みの テンプレートをダ ウンロードしてく ださい。 ここでは例 と して 、「テーマカラー 黄緑」のテ ンプレー トを使っ て「健康 食品どっとこむ」というト ップページを作っ てみましょう。 「テーマカラー黄緑」の ところにある「ダ ウンロード」のリ ンクをクリック します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 124 次のような画面が出てきま すのから 、「保存」ボタン を押してください 。 保存先を指定します。保存 先は「デスクトッ プ」にしてくださ い。 （覚えやすければどこでも ＯＫです） Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 125 ダウンロードが完了すると 、以下の ような画面になり ますので 、 「閉じ る」ボ タンを押します。 デスクト ップに保 存され た「kimidori.lzh 」のアイコ ンをダ ブルク リックし て、解凍します。 解凍すると以下のようなフ ォルダが出てきま す。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 126 それでは、ダウンロード したテンプレート 「テーマカラー黄 緑」を使って、 例として 「健康食品どっとこむ」という トップページを作 って み ま し ょ う 。 テンプレート オリジナルホーム ページ 「テーマカラー黄緑 」には 、上図左のような ブランクページが 入っています。 これを上図右のような商用 ページにしてみま しょう。 ２．トップバナー を編集する Elemen ts でトップバナーを編集します。 上部メニューバーから「フ ァイル」→「開く 」を選択します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 127 ファイルの一覧の中から 、「h eader.psd」を選択して開きます。 メッセージの窓が出たら「 更新」を選択して ください。 このようなヘッダーバナー が現れました。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 128 最初から雛形になっている ので、文字を入れ 替えるだけですぐ に使えます。 サイト名を「健康食品どっ とこむ」と書き換 えましょう。 サイト名を編集するため 、サイト名のレイ ヤーを選択し、ツ ールボックスか ら「横書きテキストツール 」を選択します。 サイト名の「○○○○○ ○○」を範囲指 定して、 「健康食品どっ とこむ」と入 力し、「○」をク リックして確定し ます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 129 次に、バナーの右下、オ レンジ色の文字の ところにＵＲＬア ドレスを入れて みましょう。手順は先ほど と同じです。 レイヤーパレットから「 ○○○○○○ ○ ○○○○○○」の レイヤーを選択 して、横書きテキストツー ルを選択です。 文字列を範囲指定して 、「www.ken kou shokuh in .com」と入力します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 130 これで編集は終わりです。 みなさんがテンプレート を使うときは、お 好みに応じて、文 字の大きさを変 えたり、色を変えてみたり してもいいですね 。 では、いつものように、フ ァイルを psd 形式と g if 形式の２種類で保存して ください。 ※ファイル名は必ず小 文字半角英数 字で つけてくださいね。 ３．サイドメニュ ーのロゴ文字 を編集する 次に左サイドメニューのロ ゴ文字を編集しま しょう。 これもトップバナーと同 じで、テンプレー トが用意されてま すから、文字を 入れ替えるだけで、あっと いう間にできてし まいます。 Elemen ts で「sidemenu.psd」を開きます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 131 操作手順は、先ほどのトッ プバナーと同じで す。 レイヤーパレットから「 ○○○○○」のレ イヤーを選択し、 ツールボックス から「横文字テキストツー ル」を選択。 文字を範囲指定して「健康 食品」と入力しま す。 はい、もうできちゃいまし た。 別名保存で psd 形式と g if 形式でファイルを保存します。 同じ要領で、「お 客様の声」「お役立ち情報 」「ご購入 方法」という ３種類のロゴ文字も作成し てください。 全部で４つの左サイドメニ ュー用ロゴ文字が できました。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 132 ４．Dreamweav er でトップページを編集する 画像ができたので、それを 使って Dreamweav er でトップページを編集して いきましょう。 Dreamweaver を起動して、上部メニュ ーバーより 「ファイル」 →「開く」 で「kimidori.h tml」を開いてください。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 133 まずは、先ほど作った画像 を現在のサンプル と差し替えてみま しょう。 トップバナーをクリック し、選択状態にし 、プロパティのソ ース窓の右がわ にある、黄色いフォルダマ ークをクリックし ます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 134 先ほど編集したトップバナ ーの g if ファイルを選択して「Ｏ Ｋ」ボタンをク リックします。 トップバナーが入れ替わり ました。 次に、同じ要領でサイドメ ニューの画像を入 れ替えます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 135 サイドメニューの一番上 の画像を選択し、 プロパティのソー ス窓の右にある 「黄色 いフォルダ 」をクリックします 。 ファイルの一覧から 、呼び出したい ファイルを選択し 、 「開く 」をクリックし ます。ここでは「健康食品 」のロゴ文字を呼 び出してみます。 同じ要領で、「お 客様の声」「お役立ち情報 」「ご購入 方法」という ３種類のロゴ文字も呼び出 してみましょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 136 このテンプレートでは、 メニューが３つし か配置されていま せんので、４つ めの左メニューのロゴ文字 は、通 常の画像の貼 り付け で呼び出してください 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 137 サイドメニューも簡単にで きちゃいましたね 。 これで、画像の配置はでき ました。 あとは、左メニューや右 側コンテンツにテ キストを入力し、 必要な箇所にリ ンクを張れば、トップペー ジの完成です。 それでは、左メニューから 作ってみましょう 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 138 まずは、一番上の「健康食 品」のメニューを適 当に入力 します。 まだリンクは張らないでい いですよ。 他のメニューのところにも 、適当に 何か文字を入力してみま す。 次に、右側のコンテンツを 作ってみましょう 。 黄緑色の帯の中にある「 新着情報」のテキ ストを「今月のオ ススメ商品」と 書き換えます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 139 「今月のオススメ商品」 のすぐ下にあるＡ Ｐエレメントに、 コンテンツ（文 章）を適当に記入します。 文字の大きさを変えたり 、 「より強調 」を使ったりし て、メリ ハリをつけてみ ましょう。 （参照ページ、マニュアル 実践編４１ページ ∼・６１ページ∼ ） できたら、その下の「申し 込み方法など」のＡ Ｐエレメントにも適 当に コン テンツを入力してみましょ う。 ※ここで使用しているク レジットカードの マークは、サポー トページ内にあ る「背景・ボタンなどの無 料商用素材ダウン ロード」のページ からダウン ロードすることができます 。 http://www.n iche-marketing .jp/sample/ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 140 こんな感じになりました。 次に、トップバナー下のと ころを編集しまし ょう。 「顔写真」のところには 写真を貼り付け、 顔写真右のところ には、サイト運 営者名や電話番号、サイト のアピールポイン トなどを記入しま す。 こんな感じですね。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 141 ここまでできたら、一度フ ァイルを保存しま しょう。 上部 ツー ル バー の「 フ ァイ ル」 から 「新 規 保 存 」を選 択 し、 ファ イ ル名を 「in dex .h tml」として「kimidori」というフォルダ の中に保存します 。 「ファイル名を変えて保存 」する場合は「新 規保存」を選択し ます。 「保存」を選択すると、フ ァイル名はそのま ま、上書き保存と なります。 注意！ ファイル名は必ず in dex .h tml として保存してくださ い。他の名前を つけてはいけません 。これは 、インターネッ トの世界では 、 「 唯一ファイル名 を省略できる」のが「in dex .h tml」だからです。そのため、 トップページに は「in dex.h tml」という名前を付けるこ とが一般的です。 さぁ、どうでしたか？テ ンプレートを使う ことによって、本 当に簡単にホー ムページができてしまった でしょう？ 最後に、リンクが必要なと ころにリンクの設 定をします。 あなたがご自分のホームペ ージを作るときに は、リンクを張る 前に、リンク 先のダミーページ を作成 してくださいね。 覚えてますか？ リンク先ページの作成の 方法はマニュアル 実践編４８ページ ∼をご参考くだ さい。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 142 ここでは、全てのリンク先 ページを作ること はしません。 練習ですので、全てのリン クを「kimidori.h tml」に張ってしまいましょ う。 リンクの張り方も復習です から、さらっとい きますよ！ テキストをドラッグで範 囲指定して、プロ パティのリンク窓 の右にある黄色 いフォルダマークを押しま す。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 143 ファイルの一覧が出 てきたら 、「kimidori.h tml」を選択して「Ｏ Ｋ」をクリ ックします。 もう、リンクはお手のもの ！ですね。 他のリンクも同じようにし て設定しましょう 。 （練習 ですから 、すべて「kimidori.h tml」へリンクすればいいで す） リンクがすべて設定できた ら、一度ファイル を保存してくださ い。 今度は上部ツールメニュー の「ファイル 」から「保存 」を選択してくだ さい。 （上書き保存） Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 144 これでテンプレートを使っ た、オリ ジナルのホームペ ージのできあがり です。 できたホームページを「ブ ラウザでプレビュ ー」で見てみると ・・・ こんな感じになりました。 ↓ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 145 どうです？テンプレート をちょっと編集し てテキストを入力 するだけで、ト ップページも、とっても簡 単に作れますよね 。 ここで練習したのは、あく までも「例」です 。 あなたは、ご自分のホーム ページにあった内 容で作ってみてく ださいね！ ぜひ、テンプレートを利 用して、スピーデ ィに、そして簡単 にホームページ を作ってください。 次はいよいよ、作成した ホームページをＦ ＴＰソフトを使っ てアップロード してみましょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 146 Step1 ―④ 「Next Ftp」でアップロードする 「Elemen ts」でロゴ 文字や写 真を作 成し、「Dreamweav er」で組み合わ せ、 文字を付け加えていく。 これがホームページ作成の ルーチンワークで す。 そして、自分のパソ コンで作成した html ファイルや画像ファイルをレンタル サーバーにアップすれば 、晴れてインターネットにあなたの ページが世界に 公開されるわけです。 なぜわざわざアッ プロードソフト を使うのか？ ホームページビルダー や Dreamweav er などのホームページ 作成ソフトには 「アップロードする機能 」が必ずついてい ます。もちろんこ れでアップロー ドしてもよいの ですが、プ ロとしてネ ットビジネ スをする場 合は、 アップロ ード専用ソフト を使用した方がよいです 。 理由は３つ。１つ目はソ フトのバージョン がアップするたび に操作方法が変 わり、いちいち覚 えなおさなければ ならないからです 。これは 結構面倒です。 ２つ目は、 「 画像だけをアップ ロードしたい 」ということもた まに発生します が、これだけのた めにホームページ 作成ソフトを立ち 上げるのは億劫で す（重 いので立ち上がりが遅い ）。 最後は、ソフトの付属機 能の方がアップロ ードのためのスピ ードが遅いこと です。わずかな差ですが年 間トータルすると かなりの時間にな るはず。 また外注でホームページを 作成した場合など は、 「更新したファイ ルだけ」ア ップロードをする必要があ ります（ 後述）。このよう な場合は 、さまざまな個 別設定ができる専用ソフト の方がなにかと便 利なわけです。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 147 それでは、これから「Nex t FTP」の設定方法、簡単アップロード方法、個別 アップロード方法を、先 ほどの実践で作っ たホームページ（ 健康食品どっと こむ）を例にして解説しま す。 ※ここからの実践では、レ ンタルサーバーが 必須となります。 まだ、レンタルサーバーを 用意していないか たは、レンタルサ ーバーを申 し込んでから実践してくだ さいね。 おすすめのレンタルサーバ ー情報は、第１回 のフォローメール でご案内し ています。 準備 ソフトを起動させましょう 。こんなアイコン があるはずです。 こんな画面がでてきました 。エクスプローラ ーのような見栄え ですね。 ちなみに、起動も軽く 、「シンプル イズベスト」を追 求したようなこの スタイルが、私は大好きで す。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 148 設定方法 「ホストに接続」画面の 、個人用を選択 して、 「新規ホスト」をクリックして ください。 「ホストの設定画面」が出 てきますので、こ こを設定をします 。 入力するところは、とりあ えず以下の４つで す。 「ホスト名」、「ホストアド レス」、「ユーザー ＩＤ」、「パスワー ド」 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 149 レンタルサーバーに申し 込みをすると、こ のようなメールが 送られてきます から、それぞれを入力し ていきます（会社 によって呼び名が 違うことがあり ます）。 例： アカウント名 : パスワード : URL : 入力するところ nich-m →ユーザーID xryx○○○○ →パスワード http://nich-m.kir.jp/ WWW/FTP ホスト名: nich-m.kir.jp ディレクトリ： /public_html →ホストアドレス →ホスト名（※１） →ホスト開始フォルダ（※２） 外注先に、サーバーへの アップもやっても らっている場合は 、これらの項目 を教えてもらってください 。 （※１）ホスト 名は適当な名 前でもたい てい大丈夫 です（接続に 絶対必要な わけではな い。 （※２）ホスト 開始フォルダ はサーバー によって違 います。ホス ト開始フォ ルダの指定 がある場合、そ のフォルダの 中にホーム ページや画 像のファイル をアップロ ードしなく てはならない、というルー ルがあります。 代表的なサーバーでのホス ト開始フォルダは 以下の通りです。 ※レンタルサーバーからの 情報に、必ず記載されて いますから、確認してく ださいね！ レンタルサーバー名 ホスト開始フォルダ kagoya public_html さくらインターネット www シーサイドネット public_html Ｉ−ＤＯ www サイトサーブ docs Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 150 次に接続をします。作成し たホストの「接続 」ボタンを押すだ けです。 次に、先ほど Step１−③ で作ったホームページをアップロー ドをしましょう 。 左側が「ローカル 」、つまりあなた のパソコンの中で す。右側が「ホス ト」、 接続したサーバーの中です 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 151 ここで、あなたのパソコ ン側、アップロー ドする先のサーバ ー側のフォルダ を表示させておくことが必 要です。 レンタルサーバーによっ ては、アップロー ド先（ホスト開始 フォルダ）を指 定してくることもあります ので注意が必要で す。 まず、 「ロー カル側」の 窓にデスクトップ にある「kimidori」フォルダを表示 させましょう。 ※「ローカル」とは、あな たのパソコンのこ とです！ フォルダ表示窓の右にある 下矢印マークをク リックして 、 「デスク トップ」を 選択します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 152 すると、ファイル一覧の窓 に、デスクトップ の内容が表示され ます。 この中から、111 ページでデスクトップに保存し た、 「kimidori」フォルダを 選択してダブルクリックし ます。 この部分には、あなた のパソコン内のフ ォ ルダが表示されます。 フォルダ表示窓が 「kimidori」となり、 ファイル一覧 の窓には「kimidori」 のフォルダが現れます。 このフォルダの中に、ホームページのフ ァ イルや画像のファイルが入 っています。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 153 ファイル名の窓に現 れた「kimidori」フォルダをダブルクリッ クして、中の ファイルを表示させます。 Kimidori フォルダの中に保存され ている ファイルの一覧が表示され ます。 これでローカル側（パソコ ン側）の準備はＯ Ｋです。 次にホスト側の窓を見てく ださい。 ホストに接続すると、こん な風になっていま す。 人によっ てこの 画面の ファイ ル一覧 にある 表示は 違いま すが、「 ホスト:’/’」 という表示になっているか どうかをまず確認 してください。 この 部 分 の表 示 は あな た の サー バ ーの 内 容になるので、必ずしも一 致しません。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 154 レンタルサーバーの設定 で「ホスト開始フ ォルダ」の指定が ないサーバーを お使いのかたは、この状態 で準備完了です。 「ホスト開始フォルダ」 の指定があるサー バーをお使いのか たはここから、 サーバー指定の「ホスト開 始フォルダ」を選 択します。 画面の例では、「public_h tml」というフォルダがホスト開始 フォルダに設定 されているので、「pu blic_h tml」を選択し、ダブルクリッ クします。 フォルダ表示窓に「public_h tml」と表示されたことを確認します 。 この 部 分 の表 示 は あな た の サー バ ーの 内 容になるので、必ずしも一 致しません。 これでホスト側も準備完了 です。 ※このホスト側の設定は、あくま でもホスト開始フォ ルダが「p ubl i c_ht ml 」の場合の設 定です。あなたがお使いの レンタルサーバー のホスト開始フォ ルダが「www」だった ら「www」フォルダを開いてくださ い。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 155 注意！「せっ かく苦労してホ ームページを作成した のに、インターネット でうまく表示さ れない」というトラブルの９０ ％以上は、このアッ プロード元（ローカル）、アッ プロード先 ．．．．． （ホ スト ）どちら かの 指定が間違っ ていることが原因です。気をつけましょう！ アップロードの前に、も う一度、ローカル 側とホスト側の設 定が合っている か確認しましょう。 それでは、いよいよ、ホー ムページをアップ ロードしてみまし ょう。 ローカル側の「kimidori」フォルダの中にある全 てのファイル を選択状態に して、アップロードボタン クをクリック！ これだけです。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 156 ファイルの転送が終了す ると、ホスト側に ローカル側にあっ たファイルが転 送されたことが確認できま したね。 アップロードができたら 、切断ボタンをク リックして、ＦＴ Ｐの接続を解除 します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 157 次に、アップロードしたホ ームページをブラ ウザで見てみまし ょう。 今、 アッ プ ロー ドし た ファ イル の 中で 、ト ッ プペ ージ に なる ファ イ ルには 「in dex .h tml」という名前をつけまし たよね。 この場合、ホームページの ＵＲＬは次のよう になります。 http://あなたのドメイン名/index.html ※ＵＲＬアドレ スについては 、マニュア ル理論編「 今さら聞けな いホームペ ージ作成の 超基礎知識」の章内 、 「ファイルの保 存の仕方とホーム ページの見え方の 関係」の項を よーくご覧ください。 ブラウザのアドレスバー にＵＲＬアドレス を入力して、リタ ーンキーを押し てください。 はい、ホームページが表示 されましたね。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 158 以上のように、自分のＰ Ｃで作成してアッ プロードするのは いたって簡単で す。トラブルもほとんどあ りません。 問題は、デザイナーや作成業者にホームページを一度作成してもらい、 すでにサーバーに存在するデータを更新する場合です。 この場合は、気をつけるこ とがあります。 外注で作 成してもらったホームページを自分で更新する手順 まず、ホームページのデ ータをサーバーか ら自分のパソコン にダウンロード する必要があります。 外注先にデータのありかを 教えてもらい、接 続してください。 例： 例えば、右側のようなデ ータがサーバ ー側に あるとしましょう。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 159 このデー タを すべて 自分のパソ コンの どこか のフォ ルダに ダウン ロード します。 注意！このとき、必ず 任意のフ ォルダをひ とつ作成し、そこにダウンロードしてくだ さい。 「local」と名前をつけた 新規フォルダをデ スク トッ プなどに作成するとよいでしょう。 自分のパソ コンに 作成した、「local」フォル ダを選 択して、 ダブル クリック します。 このような状態になってい ればＯＫです。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 160 次に、サーバー側のフォル ダとファイルすべ てを選択して・・ ・ 右クリックし、「 ダウンロード」を クリックします。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 161 （ダウンロード中、なに か質問をしてきた ら適当にＯＫボタ ンを押していっ てください） このような↓状態になって いればＯＫです。 自分のパソコンのローカ ル側、サーバーの ホスト側のデータ が、同じ状態で すね。このように、ホー ムページデータを アップロード（ま たはダウンロー ド）するというこ とは、常にローカルとホストを同じ状態にする 、という ことです。 そして、このダウ ンロードした データを 、「Dreamweaver」で開いて修正し たり、新しいホームペー ジを作成して、今 度は自分のパソコ ン側から、サー バーにアップロードしてい くわけです。 注意！このとき、ダウンロードした「local フォルダ」にあるデータは必 ず違う場所にバックアップコピーをしておいてください。 この後間違ったアップロードしてしまうと、す べてのデータが上書き されて元のデータが消失してしまうことになりかねません。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 162 外注のデータを更新するときは個 別アップロードが必 要！ 他人が作ったデータです から、へたにいじ くってデータを壊 したり、へんな アップロードをして web 上で画像が表示されなく なる、ということ は非常 によく起こりえるトラブル です。 ．．．． このような時は、たとえば 自分でトップページを更新したら、そのページだ ．． けを 更新する、といったことが必要 になります。 一括アップロードをしてし まうと、注 文受付の CGI や独自のプログラムが組 んである場合は、プログラ ムの設定が変わっ てしまうことがよ くあります。 ある程度慣れてくれば修 復も十分可能なの ですが、これをや ってしまうと外 注先にもう一度作り直し てもらうことにな ったり、えらい手 間がかかること になるので、とても注意が 必要です。 これを解消するのが 個別アップロード です。 やり方は難しくありません 。 たとえば私が au toresthan ks.h tml というページの文字だけ を更新したとし ましょう。 この場合は、その更新した ファイルだけをま ず選択します。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 163 次に右クリックをして 、「アップロ ード」をクリック します。 ．．．． ．．．．．．．． このようにすれば 、 「更新した ファイルだけを 」アップロード することができ ます。 注意！新しく更 新した ページ内に画像を追加した 場合 などは、その画像も一 緒にア ッ プロードしないと、新しく更新した ページが表示されなくなりますから 注意してくだ さ い。 FTP の説明は以上です 。 くわしくは、「Nex t FTP」のホームページ に詳しい機能の説 明、詳細の設定 方法、Q&A などがありますので、 そちらを参考くだ さい。 「ヘルプ」の中に、ホーム ページに直接飛べ る箇所があります 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 164 Step1 ―⑤ レイアウトのルールを覚えて調整する ここからは、レイアウトデ ザインです。 「Dreamweaver」のＡＰエレメントによる ホームページ作成 は、テーブル構 造のように、 「 デザイン構 造を考えてから要素 を配置する 」のではありま せん。 逆に 「要素を思いつくまま並べてから、 あとで形を整える」 という順番になります。 ここは、どれだけ強調しても足り ない、というくらい 重要なポイント で す。本マニュアルで最も大 事といってもいい でしょう。 なぜこの順番でホ ームページを 作成しなけ ればならない のか？ 私たちがビジネスシーンで「文書 」を使って コミュニケーショ ンをする場合。 どのようにその「文書」を 作成するでしょう か？ お客さんへのプレゼン資料 。業者への指示書 。電子メール。 どんなもの でも、ま ず「書き たいこと をだーっ と書き、後 から 体裁を整え て 、 相手に渡す」というルーチ ンですよね？ このほうが効率がよいこと は誰でも日常感覚 で知っています。 ところが、デザインを生業 にしているプロは 違います。 まず「デザインの構造」を イメージして、そ の後に内容を落と し込みます。 これがホームページ作成 で常識となってい る「テーブル構造 によるデザイン の手法」なんです。 この方法では、素人は「 出来上がりのイメ ージ」をすぐに思 い浮かべること ができないので、とても難 しくなってしまう のです。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 165 素人がホームページを作 成して、どうして もプロっぽく仕上 げられない原因 は、ここにあります。 ですから、ここは発想を 逆転させて、みな さんがいつも仕事 でやっているル ーチンでホームページを作 成します。 一度「Dreamweav er」でページを作成し 、 「 Elemen ts」でロゴを作成し 、 「 Nex t FTP」で web にアップしてから、見栄えを確 認し、再度「Dreamweaver」 でレイアウトを調整して 仕上げる、という ルーチンが、素人 にとってはもっ ともスピーディで効率的な やり方なんです！ では、そのレイアウトはど のようにしたらき れいに仕上がるの でしょうか？ 実は、レイ アウト デザイン には 「センス」や「才能」はぜんぜん関係あり ません 。ある一定の「ルール」があって、それを 知っているかどうかだけ の問題 なのです。 誰でもできる一流デザイン レイアウトデザ インとは、 つまるとこ ろ 「 どこ に 配置 して 」「 ど のよ うに メリ ハリ をつ ける のか 」 という考えを組み合わせること に過ぎません。 あまり知られていませんが 、レイア ウトデザインには ルール があります。 それが、 ① 近接 ② 整列 ③ 反復 ④ コントラスト の４つのルールです。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 166 ４つルールってどんなの？ ∼デザインの中にに隠された秘 密のルールとは センスのよいデザインとは 、この４ つのルールに沿っ たデザインをいい ます。 たとえばこの「プロント」 さんのミニパンフ レット。↓ 渋∼い色 合いに モダ ンな図 形っぽ いイメ ージを 置い て、か っこい いです ね。 （私はこういうデザインは 大好きです ）。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 167 このパンフは、４つのルー ルが凝縮された、 大変よいデザイン といえます。 ルール①近接 近接とは、 「 関係のある 要素をグルーピン グして、視覚的に配置 する」 ことです。人間の目は 、 「 近くにあるもの 」は関係がある 、と認識し ます。 ここでは、プロントの こだわりの部分 、タイトルとサ ブタイトルの 部分、と要素が明確にグル ーピングされてい ます Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 168 ルール②整列 整列とは、文字や画像の始 まりや終わりの位 置をそろえること です。 ． ．．． 部分的に左そろえ、中央 そろえをすれば よいのではなく、ペ ージ全 ．．． ．．．．． 体での 整列ライン を設定することが 超大事です。 異なるグループ も 、整列ライン にあわせること が大事！ こんな離れたと ころも、実は隠 れた整列ライン に並んでいる！ ．．．．． 整列ライン Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 169 ルール③反復 反復とは、ある一定の 同じパターンを 繰り返し見せる ことで、印象 をを強調させることです。 人間は「繰り返し要素」があると、安心感と 面白みを感じるの です。 （芸人・長井秀和に「 間違いない！」 と何度も繰り返 しいわれると 反応的に笑ってしまうのと 同じ理屈です） くり返し くり返し くり返し くり返し くり返し Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 170 ルール④コントラスト 最後はコントラスト。 ホームページの トップページで は最も意識し なければいけない点。 コントラストとは 、「明暗をはっき りさせる」という こと。 印象の強いデザイン、 記憶に残るデザ インには必ず強 いコントラス ト(明暗)があります。 最も多いのは「 濃い色の背 景に、白抜き 文字」 です。 ＷＥＢでも非常によく使わ れるテクニックで す。 どれだ け明暗 をく っきり させ るかど うか は、「な にを強 調し たいの か」という優先順位によっ て決めます。 濃紫の背景に白 抜き文字。 タイトルを際立 たせている！ 値段「¥180」を 同じく白抜きで 目立たせていま す。 これで、作者は タイトルの次に 値段を強調さ せたい 、という ことがわかりま す。 ※以上のテクニックは、 朝日コミュニケー ションから出版さ れている「ノン デザイナーズ・ブック」 に詳細が書かれて いますので、ぜひ 知識を吸収して ください。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 171 これら４つのルールのデ ザインは、パンフ レットであれポス ターであれ、も ．．．．．． ちろんインターネットのホ ームページでも まったく同じ です。 このルールに 沿ってレイアウ トを 調整するだ けで、 驚くほど「 プロっぽい」 印 象を お 客に見せることができます 。 それでは、実際にホームペ ージではどのよう にするかを見てみ ましょう！ ルール① 近接 近接とは、「同じ メッセージの要素 をなるべく近くに 配置する」ことで す。 例：お客様の声ページ↓ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 172 このケースでは、ロゴタ イトル、ページ紹 介とリンクの部分 、お客さんであ る神田さんの要素、と３つ に分類できます。 これらが等間隔に存在す ると、人間にとっ て「見にくい、メ リハリの無い」 ページになってしまいます から、これらを グルー プ要素にな っている ように、ぐっと 近づけます 。 大分すっきりわかりやすく なりました。 このレベルのレイアウト補 正は、マ ウスでだいたい近 づけていればＯＫ です。 このような補正が 簡単にできる のも、「Dreamweav er」のレイアウトセルな らではです。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 173 一般に、ホームページビ ルダーなどで写真 と文章の要素間を くっつけるだけ でも、テーブル構造では簡 単にはいきません 。 素人がテーブル組でホー ムページを作成す ると、いかにも不 細工に出来上が る原 因 は、 こ のよ うな レイアウトデザインルールを知らず にテーブル組にいきなりとりかかり、しかも修正が物 理的に難しいためです 。 ルール② 整列 ルールの 2 番目は「整列」で す。 「整列」とは、ページ内 でのすべての要素 を、ある一定のラ インに整列させ ることをいいます。 「整列」をいかに緻密に 行うかで、素人か プロかの分かれ道 ができるといっ て過言ではありません。 「整列」は Dreamweav er の「グリッドに吸着」と いう機能を利用し ます。 たとえば、最初に実習した sample1.h tml のページ。 このように、ＡＰエレメン トが配置されてい ます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 174 「グリッドに吸着」とい う機能を使うため に、Dreamweav er を設定します。 上部メニューバーの「表 示」から「グリッ ド」→「グリッド に吸着」を選択 し、チェックマークを入れ ます。 これで準備完了です。 この機能を使うことで、 各々のＡＰエレメ ントがグリッド（ マス目）単位に 移動するようになります 。これを利用して 、マウスのドラッ グで簡単にＡＰ エレメントを整列させるこ とができるのです 。 なので、前ページ でいうと 、 「ＨＯ ＭＥへ」のＡＰエレメント にその下の２つ のＡＰエレメント（文字ロ ゴと「2008 年春バージョン・・・」 のテキスト） を整列させたい場合も、 マウスで適当に「 ＨＯＭＥへ」の近 くに移動するだ けで自動的に整列させるこ とができます。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 175 マウスのドラッグで簡単・ 正確にレイアウト セルを整列できま す！ 「近接」と「整列」をほん の少し使う だけで 、とても見やすい、デザインセ ンスの良いページになりま す。 是非、「近接」と 「整列」を意識し たページ作成をし てみてくださいね 。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 176 ルール③ 反復 デザインルールの 3 番目は「反復」です。同じパターンを繰 り返して使うこ とで、ページ内デザインを 見やすくする方法 です。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 177 ワン ！ ズダ イ レ クト Ｈ Ｐの 場 合は 、 左の メ ニュ ー の 、金 色 の文 字 、「 main menu 」、「お役立ちコ ンテン ツ」、「取り扱 い犬種」、「 ご購入 方法＆ご 連絡」 という ロゴ文字を 同じデザイ ンで反復して 使用 しています。 また、中央のメインスペ ースにも、「子犬お探しサー ビス」「 新着情報」とい うロゴバナーを、 同じ バナー形式 で反復して 使って います。 このように、同一 ページ内で同じ要 素が繰り返し入るこ とで、人 間の脳は 理解のスピード を速め、結果「見や すいサイト」と なるわけ です 。このよ うな反 復要素 が少な いサイ トは、 大抵見 にくい サイト となり ます。 【反復要素の少ないサイト ↓。要素がわかり にくく、理解しづ らい！】 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 178 ルール④ コン トラスト ルールの最後は、｢コント ラスト｣です。 「コントラス ト」とは「明暗 」の意味 で、「メリハリ」 といってもよいで しょう。 これがないと、のっぺら ぼうとした印象を 受け、お客の心に インパクトを残 しません。 【良い例↓】 上記はとてもコントラス トの使い方の上手 なサイトです。背 景色はもちろん 白ですが、タイトルバナ ー、メニューの部 分は「濃い灰色」 を使い、その上 に「オレンジ文字」と「 白抜き文字」を効 果的に使うことで 、印象を強めて います。｢濃い灰色｣ ⇔ 「オレンジ 」「白」 という色のコントラスト が明確なため、引 き締まった好印象 を受けるわけで す。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 179 【悪い例↓コントラスト、 メリハリの少ない サイト。印象に残 りにくい↓】 以上がデザインの４ルール です。 かなり単純な理屈なので すが、この４点を 意識してページを つくりこむこと で、見違えるよう にセンスのよい 、好印象が 残るサイトへ変身 するはずです。 特に「お客様の声」な どのコンテンツが たくさんあるペー ジでは、 「近接」と 「整列」を強く意識する ことで、とても見 やすいページを作 成することがで きます。 「 Ｔｏｐペー ジ」では 、とに かく第一印 象が勝負 ですから、 また、 「反復」 「コントラスト 」を強く意 識し、印 象を植え付けるよ うにするべきで す。 決して難しいことではあり ません。 まずは、始めてみることが 大事です。 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 180 いかがでしたか？ 以上で実践編での説明は終 わりです。 マニュアルはここまでで すが、実践編を終 えられたかた向け に、サポートサ イト内には、自由に使え るホームページの ひな形テンプレー トや、画像やバ ナーなどの素材を用意して います。 ひな形テンプレートや素 材ファイルを使っ たホームページの 作成方法の解説 もサポートサイトに用意し てあります。 是非ご利用くださいね。 【サポートページ】 http://www.n iche-marketing .jp/sample/ Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 181 終わりに 本マニュアルの内容は以上 です。 たったこれだけの知識で すが、間違いなく ホームページを「 自分の思うとお りに」「プロっぽ く」作成すること が可能になるはず です。 実践編のネクストステップ である、 「フォームメ ール」の作成 などのＣＧＩプ ログラム、 「Ｙａｈｏｏへ の登録掲載 」 「キー ワード広告の出稿 方法」 「ＳＥＯ 対策」などのマーケティ ング情報は、随時 メールマガジンや ニュースレター でお知らせしていきます。 ぜひ多くの知識を得ると いう投資をするこ とで、あなたの脳 に大きなレバレ ッジをかけてください。 ネットビジネスで活躍で きる充実感、自信 と誇りが得られる はずです（きっ と多くのキャッシュも ）。 信じるのはあなたが持つ能 力です。 足りないのは情報だけ。 私はその情報を皆さんに提 供しているにすぎ ません。 巨人の大ベテランピッチャ ー、工藤公康 選手は、 「あなたは４ ０歳以上にもな りながら、なぜいまだ一 線級のエースとし て活躍できるのか ？」という質問 に、躊躇することなく、こ う答えました。 ． ．．． ． ．． ．．． ． ．．．．．．．． 「 多 くの 人 は、 自 分 で 自 分 の 限 界を 勝 手 に 決 め込 ん でい る 。 自分の能 力に限界はないと信じれば、どこまでもやれるはず」 きっとインターネットビジ ネスも同じでしょ う。 メールマガジンでまたお会 いいたしましょう ！ 滝井秀典 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 182 著作権および知的財産権について 第一条： 複製・ コピー・ 二次使用の禁止 本マ ニュアル一式（ 利用方法、 理論編、 実践編） に含まれる一切の情報は著作権法に保護 されており、ま た、 秘匿性の高い情報で あることから、 著作権保有者である キーワードマー ケテ ィング研究所 滝井秀典 の許可を得ずに、 複製・ コピー・ネッ トで の公開、 掲載を含む どのような 手段で あって も、 二次使用を禁止し、 購入した個人のみが使用で きるものとしま す。 第二条： 損害賠償 万が一、 第一条に該当するような 行為が発覚した場合は、 著作権法専門の顧問弁護士を 通じ、 損害賠償請求をいたしま す。 第三条： 知的財産権の範囲 知的財産権の範囲は、スモ ールビジネスや起業家向けホーム ページ 作成、およびマ ーケテ ィング施策全体を指しま す。 当マ ニュアルのコンセプトを真似した販売、 広告宣伝には、 知 的財産権の侵害を主張いたしま す。 特に情報起業家・ コンサルタントの方々は厳重にご 注意く ださい。 Copyr ight (c) 2004- 2008 Keyword marketing re sear ch in stitu te in c. A ll r igh ts re serve d. 複製禁止、無断掲載禁止 Copyright (c) 2004-2008 Keyword marketing research institute inc. All rights reserved. No reproduction or republication Without Written permission 183