Comments
Description
Transcript
第3学年 課題研究 学習指導案
第３学年 課題研究 学習指導案 実施日時：平成１７年 １月２４日（火） 第３・４校時 １１時∼１２時５５分 実施場所：石巻商店街 対象生徒：３年４・５組（情報処理科） （１） 単元名 Web Page 作品制作（課題研究） （２） 指導計画（本時の位置づけ） ＨＰ作成 ＨＰのチェック 石巻商店街へＨＰのプレゼンテーションへ向けてリハーサル （３） 本時のねらい 班ごとに、担当をしている商店のＨＰをプロモーション（売り込み）する。このプロモーシ ョンを通してプレゼンテーション能力の育成と、ビジネスをプロデュースするマインドを養う ことを目指す。 プロモーションまでの事前準備では、十分に著作権に反していないかチェックをした後に、 作成したＨＰのコンセプトをまとめておく、ＨＰのターゲット層やその層を選んだ理由、その うえでＨＰの構成（操作性の工夫・デザインの表現方法）をプロモーション前にリハーサルし、 伝えたい事柄が伝わっているかチェックする。また、リハーサルで質問された事柄については、 項目ごとに分け、洗い出しておき、プロデュース時に質問を受けた場合、専門用語などを考慮 し、用語や言葉を駆使し簡潔に伝えられるよう工夫しておく。 （４） 学習過程 ＜取材班→○ ねらい 学習活動・内容 作業班→● 共通→◎＞ 教師の支援・留意点 導 ◎グループごとに、取材班と学 ◎取材班は、移動中の安全に十 入 校に残りまとめの作業をする 分に気をつけるよう指示し、教 班に分かれる。取材班は自転車 師も 2 つの班に分かれて移動す などで石巻商店街へ移動する。 る。 展 開 ○プロモーション （プレゼンテーション） ○事前に準備したプロ ○各商店を巡回する。 モーション資料を基に、 ○運用 管理 面の質 問に 関して ○取材中に学校に残っている プレゼンテーションを は教師側で説明をする。 班に、プロモーションの進行具 行う。 ●生徒 に作 品が著 作権 に反し 合や、商店からの要望事項など ●テキストと作成した ていな いか 検討さ せる ととも を連絡させる。 ＨＰを突き合わせなが に、全てのＨＰをチェックし、 ●著作権に関する検討 ら著作権に違反してい 反して いる ものが あれ ば指導 ○学校へ戻る ないかチェックをする。 助言する。 整 ◎プロモーションの反省・自己 ◎反省・自己評価シート ◎係分担をさせ、効率よく作業 理 評価 に記入する。 をさせるよう指導する。 ◎取材録をまとめる ◎取材録を作成する。 ◎要望事項をまとめる ◎要望解決のための手 ◎要望解決のための手順を作 段を考える。 成する。 番号 科目名 課題研究 学校名 宮城県石巻商業高等学校 １．学習指導経過と現状と課題 平成１７年度から、地元（石巻）商店街のＨＰ作成に取りかかった。初めての取り組みであり、多 くの課題を抱えながらのスタートとなった。ＨＰの管理をどうするか、著作権を厳守させる指導、様々 なコンテンツの利用などインターネットに実際に載せるには様々な注意とビジネスをプロデュースす る企業家精神・マインドの育成などを模索しながの授業展開となった。 今年度は、１学期にＨＰ作成の基礎を学習させた。はじめは簡単な HTML 文を学習し、Web Page を 作成さる。このことによって、Web Page 作成がそれほど難しいものではないことを印象付けさせると 同時に HTML 文の構成を理解させる。HTML 文の構成を理解させることが、次に学習する、JavaScript を活用できるかどうかにかかってくるので。ここではあえて簡単な Web Page の作成と、HTML 文の構 成をしっかりと理解させることにポイントを絞った。次に Web 上にある JavaScript のサンプル集の活 用方法を学習させた。ここではあくまでもサンプルの活用方法だけにとどめ、Java 言語の中身までは 学習しないが、オリジナルなものイメージどおりのものを作成するために、サンプルの改良のポイン トについてのみ学習した。生徒はイメージに合った JavaScript を Web 上から探しだし、試行錯誤しな がら改良を加え HTML 文の中に配置させていった。留意点としては、デザインに関しては指導をするこ とを避け、クリエイティブ・自主性を尊重し作成させる。ただし、Java 言語に関しての質問は助言し た。 ２学期は、１つのテーマを設定しＨＰを作成させた。この段階では Web 上の守らなければならない ルールを盛り込んでいく。Web は全世界に情報を発信するものであり、個人的なものではないことを 理解させ、そのために守らなければならないモラルやエチケットについて認識させる。また、著作権 についても学習した。著作権については、社団法人 著作権情報センターから無料で取り寄せることが できるテキストがあるので、生徒人数分を取り寄せ、授業で活用した。著作権とは何か、著作権を侵 害しないよう Web Page を作成させることが、この取り組みの中で最も重要な位置づけにあることを把 握させる。また、ただ Web Page をデザインするのではなく、しっかりとしたビジョン・コンセプトを 持たせ作成に取り掛からせる。ビジネスにおける Web の役割を理解し、習得したテクニックを駆使し 作成する。こうした作業をとおして、経営戦略的な Web Page を作成し、起業家精神・マインドが大切 であることを理解させる様に努めた。 ３学期・４学期は商店街のＨＰ制作に移った。商店街への取材活動・ＨＰのプロデュース・プロモ ーション・納入までを行った。 １学期から２学期にかけては、モチベーションも高く維持していた。しかし、３学期からの商店街 のＨＰ作成となると、ＨＰ自体クリエイティブなものであるため、どこから手を付けていいのか、Ｈ Ｐ作成のノウハウを確立することに戸惑い、ややモチベーションが下がった事があった。 深く追求すれば、心理学的な学習も必要となる（マジックナンバー・オブ・セブン、色彩の心理、 コンセプトを持たせるイメージ表現方法）ＨＰ制作において、どこまで盛り込めばいいのかが次年度 の検討課題となった。 ２．課題解決に向けて（学習指導案の作成） 次ページの学習指導案により授業実践を行う予定。 ３．参考資料 JavaScriptサンプル集& HTMLの基礎(http://www9.plala.or.jp/oyoyon/html/）等生徒が各自で調べ るWeb Page・ｲﾝﾀｰﾈｯﾄⅡHTML＋メール(実教出版)・WEB DESIGN GLOBE(http://www.globe-web.jp)・ 著作権情報センター発行のテキスト「はじめての著作権講座」「はじめての著作権講座Ⅱ」「マルチメ ディアと著作権」 平 成 １ ７年 度 宮城県石巻商業高等学校 課 題 研 究 （ 情報 処 理 科） 『ホー ムページを作ろう』 ホーム ペー ジを作 ろう ！ Ⅰ．ホームページとは テ レ ビ や ラジ オ か らは ， 非 常に 多 く の 情報 が 流 れて く る 。た だ し ， どち ら も 一方 的 に 見 た り 聞 いた り す るだ け で ，こ ち ら から は 何 もで き な い。 し か し ， イン タ ー ネッ ト で は誰 で も 情 報発 信 で きる メ デ ィア で あ る 。い わ ゆ る自 分 だ け の 放 送 局と い っ た感 じ で ，番 組を 持 つ こと が で き ，それ を 全 世界 に 発 信す る こ とが で きる 。 ただ し ホ ー ムペ ー ジ とい う こ とか ら わ か るよ う に ，放 送 局 と言 う よ り は， コ ン ピュ ー タ 化 さ れ た 本と い う イメ ー ジ に近 い 。 Ⅱ．ホームページを作るには ホ ー ムペ ー ジ を作 る た めに は Ｈ ＴＭ Ｌ と いう 言 語 を使 い ， 作成 し ま す。 Ｈ Ｔ Ｍ Ｌ とは Ｈ ｙｐ ｅ ｒ Ｔｅｘｔ Ｍ ａ ｒ ｋｕ ｐ Ｌａ ｎ ｇ ｕ ａｇ ｅ の略 で ， Ｗ Ｗ Ｗ ブ ラウ ザ で 表示 す る ファ イ ル を作 る た めの テ キ スト 編 集 用語 で す 。 Ｈ Ｔ Ｍ Ｌ は＜ ＞ で 囲ん だ タ グと 呼 ば れ る目 印 を 用い て 文 章の 構 造 を 指定 し ま す。 ＨＴ Ｍ Ｌ を 記述 す る のに 最 も 簡単 な 方 法 は， テ キ スト エ デ ィタ （ メ モ 帳） と ブ ラウ ザ （ イ ンタ ー ネ ッ トエ ク ス プロ ー ラ ）を 用 意 す るこ と で す。 テ キ スト エ デ ィ タで Ｈ Ｔ ＭＬ タ グ を 含ん だ 文 書 を作 成 し ，ブ ラ ウ ザで そ の 結 果を 表 示 して 確 認 する と い う 流れ で 作 業を 進 め て い き ま す。 Ⅲ．簡単なホームページを作って みよう。 １ ．メ モ 帳 の起 動 Ｗ ｉ ｎ ｄ ｏｗ ｓ ９ ５に 標 準 で入 っ て い るメ モ 帳 とい う テ キス ト エ デ ィタ を 使 用し ， Ｈ ＴＭ Ｌ を 作成 す る 。 スタート → プロ グ ラ ム → アク セ サ リ -1 - → メモ 帳 ２ ．メ モ 帳 への 入 力 （フ ァ イ ル名 ： myhome.htm） 「 Ｗ ｅ ｌ ｃｏ ｍ ｅ ｔｏ Ｓａ ｓ ａ ｋ ｉ ｓ Ｈｏ ｍ ｅ Ｐ ａ ｇ ｅ 」と い う 文字 を 表 示す る た めに は 以 下の よ う に記 述 し ます 。 < html > ・ ・ ・ ＨＴ Ｍ Ｌ文 書 の 始ま り < head > ・ ・ ・ 見出 し 部分 の は じめ < title > ・ ・ ・ タイ ト ル部 の は じめ my home page ・ ・ ・ タイ ト ル名 < /title > ・ ・ ・ タイ ト ル部 の お わり < /head> ・ ・ ・ 見出 し 部分 の お わり < body > ・ ・ ・ 本体 部 分の は じ め Welcome to Sasaki's Home page ・ ・ ・ 本体 （ 表示 さ せ る部 分 ） < /body > ・ ・ ・ 本体 部 分の お わ り < /html > ・ ・ ・ ＨＴ Ｍ Ｌ文 書 の おわ り （ フ ァ イル 名 ： myhom e.htm ） ＊１ ： タ グは ， < html >・・ < /html >，< head >・・ < /head>， < title >・・ < /title >， < body >・・ < /body>の よ う に開 始 タ グと 終 了 タグ の ペア に な って い る 。 タグ は 大 文字 ・ 小 文字 の ど ちら で 書 いて も Ｏ Ｋ。 ＊ ２ ： 作成 し た テキ ス ト の保 存 の しか た ファ イ ル → 名 前を 付 け て保 存 保存 す る 場所 個 人 フォ ル ダ ファ イ ル 名 myhome.htm ファ イ ル の種 類 す べ ての フ ァ イル 保存 ３ ．自 分 の ホー ム ペ ージ を 見 よう 。 イ ン ター ネ ッ トエ ク ス プロ ー ラ を起 動 さ せ自 分 の ホー ム ペ ージ を 確 認す る 。 -2 - ｅ ｲﾝﾀｰﾈｯﾄ → フ ァ イル → 開く → 参照 → → → → → ｴｸｽﾌﾟﾛｰﾗ → フ ァイ ル の 場所 個 人フ ォ ル ダ フ ァイ ル 名 myhome.htm フ ァイ ル の 種類 す べて の フ ァイ ル → ＯＫ ４ ．表 示 す る文 字 の 大き さ を 変え る 。 < body> < h1 > ・ ・ ・ｈ １ の 大き さ で 表示 し な さい ＊１参照 Welcome to Sasaki's Home page < /h1 > ・ ・ ・ｈ １ の おわ り < /body > ＊ １ ：大 き さ は< h1 >・ ・ < h6 >の間 で 大き さ を 指定 す る こと が で きる 。 ＊ ２ ：ま た ， １文 字 ず つ大 き さ を指 定 す るこ と がで き る 。 < body> < font size=1 >Ｗ < /font> ・ ・ ・サ イ ズ １ < font size=2 >ｅ < /font> ・ ・ ・サ イ ズ ２ < font size=3 >ｌ < /font> ・ ・ ・サ イ ズ ３ < font size=4 >ｃ < /font> ・ ・ ・サ イ ズ ４ < font size=5 >ｏ < /font> ・ ・ ・サ イ ズ ５ < font size=6 >ｍ < /font> ・ ・ ・サ イ ズ ６ < font size=6 >ｅ < /font> ・ ・ ・サ イ ズ ６ < /body > ５ ． 表示 す る 文字 ・ バ ック カ ラ ーの 色 を 変 える 。 < body bgcolor="#ffff00" text="#000000" > ・・ ・ バッ ク が 黄色 ， 文 字が 黒 < h1 > Welcome to Sasaki's Home page < /h1 > < /body > -3 - → ＊ カ ラー コ ー ド カ ラ ー コ ー ド は １ ６ 進 数６ 桁 の 値 で 表 し ま す 。２ 桁 ず つ 赤 ， 緑 ， 青の 量 を 指 定 します。 ＃ × × × × × × ↓ ↓ ↓ 赤 緑 青 （い ず れ も０ ０ ∼ ｆｆ ま で の色 の 度 合い を 決め る 。） （１ ６ 進 数は ０ １ ２３ ４ ５ ６７ ８ ９ ａｂ ｃ ｄｅ ｆ ） 例 黒・ ・ ・ ＃０ ０ ０ ００ ０ 紫 ・・ ・ ＃ｆ ｆ ０ ０ｆ ｆ 青・ ・ ・ ＃０ ０ ０ ０ｆ ｆ 白 ・・ ・ ＃ｆ ｆ ｆ ｆｆ ｆ 緑・ ・ ・ ＃０ ０ ｆ ｆ０ ０ 水 色 ・・ ・ ＃０ ０ ｆ ｆｆ ｆ 赤・ ・ ・ ＃ｆ ｆ ０ ００ ０ 濃 灰 ・・ ・ ＃８ ０ ８ ０８ ０ 黄・ ・ ・ ＃ｆ ｆ ｆ ｆ０ ０ 灰 色 ・・ ・ ＃ｃ ０ ｃ ０ｃ ０ ６ ．水 平 ラ イン を 引 こう 。 < body bgcolor="#ffff00" text="#000000" > < h1 > Welcome to Sasaki's Home page < /h1 > < br > ・ ・・ 改 行 < hr > ・ ・・ 水 平ラ イ ン < /body > ＊ 改 行 す る 場合 は < br >，水 平 ラ イ ン を 引 く 場合 は < hr >を記 入 す る 。 た だ し， こ れ ら は < /br >， < /hr >は いら な い 。 -4 - ７ ．メ ニ ュ ーを つ け てリ ン ク させ よ う 。 < body bgcolor="#ffff00" text="#000000" > < center > ・ ・・ セ ンタ ー リ ング は じ め < h1 > Welcome to Sasaki's Home page < /h1 > < /center > ・ ・・ セ ンタ ー リ ング お わ り < br > < hr > < br > < center > ・ ・・ セ ンタ ー リ ング は じ め メ ニュ ー を 選ん で 下 さい 。 < /center > ・ ・・ セ ンタ ー リ ング お わ り < br > < center > ・ ・・ セ ンタ ー リ ング は じ め < a href="shokai.htm" >１ . 自 己 紹介 ・ ・・ shokai.htm に リ ン ク（ 別 な ファ イ ル ） < /a > ・ ・・ リ ンク お わ り < /center > ・ ・・ セ ンタ ー リ ング お わ り < /body > （フ ァ イ ル名 ： myhome.htm ） -5 - ８ ．自 己 紹 介の フ ァ イル の 作 成（ フ ァ イ ル名 ： shokai.htm ） < html > < head > < title > 自 己紹 介 < /title > < /head > < body bgcolor="#00ffff" text="#ff0000" > < center > <b> ・ ・ ・太 字 は じめ ＊ １参 照 私 の自 己 紹 介の ペ ー ジで す < /b > ・ ・ ・太 字 お わり < /center > < br > < br > < img src="kao.jpg" width=100% height=100% > ・ ・ ・写 真 貼 り付 け ＊２ 参 照 < br > ○ ○○ ○○ × ×歳 Ａ型 ・ ・ ・自 己 紹 介部 分 × ×× × × < br > < br > < a href="myhome.htm ">最 初 に 戻る < /a > ・ ・ ・前 の ペ ージ に 戻 る・ リ ン クお わ り < /body > < /html > （フ ァ イ ル名 ： shokai.htm ） ＊ １ ：文 字 を 変形 さ せ る < body> < b >私の 自 己 紹介 の ペ ージ で す </b > ・ ・ ・ <b >∼ < /b >で 太 字 で表 示 < i>私 の 自己 紹 介 のペ ー ジ です < /i> ・ ・ ・ <i >∼ </i >で斜 体 で 表示 < u >私の 自 己 紹介 の ペ ージ で す </u > ・ ・ ・ <u >∼ < /u >で 下 線 を付 け て 表示 < /body > ＊ ２ ：グ ラ フ ィッ ク デ ザイ ン の 貼り 付 け と縮 小 ・拡 大 < img src="kao.jpg" width=100% height=100% > ↓ ↓ ↓ ↓ ↓ ↓ 高 さが １ ０ ０％ 幅 が １０ ０ ％ イ メ ージ フ ァ イル -6 - ９ ． 文字 を 動 かそ う ！ 文 字を 動 か す ため に は ＜ｍ ａ ｒ ｑｕ ｅ ｅ ＞ タグ を 使 用し て 作 成し ま す 。 たと え ば ，は じ め に 作 成 し たＷ ｅ ｌ ｃ ｏ ｍ ｅ ｔｏ Ｓ ａ ｓａ ｋ ｉ ｓ Ｈｏ ｍ ｅ ｐ ａｇ ｅ （ myhome.htm ） と い う 文字 を 動 かす た め には ， 以 下の よ う にな り ま す。 < center > < h1 > < marquee direction="left" behavior="alternate" scrollamount="5" > Ｗ ｅ ｌｃ ｏ ｍ ｅ ｔｏ Ｓ ａ ｓ ａｋ ｉ ｓ Ｈ ｏ ｍｅ ｐ ａｇ ｅ < /marquee > < /h1 > < /center > ＊< marquee direction="left" behavior="alternate" scrollamount="5" > ↓ ↓ ス クロ ー ル の方 向 ↓ ↓ ス クロ ー ルす る 速 さ "left" 左 動 き 方を 意 味 する "right" 右 "alternate" ・・ ・ 左 右へ の 移 動を 繰 り 返す "scroll" ・・ ・ ス クロ ー ル する "slide" ・ ・・ 他 方 の端 に 到 達し て 停 止 "scrollslide" ・ ・ ・ スク ロ ー ルア ウ ト して 停 止 １０．画面のフレーム設定 １ ．フ レ ー ムの 作 成 < html > < head > < title > < center > 平 成１ ７ 年 度商 業 デ ザイ ン < /center > < /title > < /head > < fram eset rows="25%,75%" > ・ ・ フレ ー ム セッ ト 上 25%, 下 75% <frame name="title" src="title.htm " > ・ ・ 上「 title 」 title.htm に リ ンク <frameset cols="35%,65%" > ・ ・ 下の 左 が 35%, 右 が 65% 分割 < frame name="mokuji" src="mokuji.htm" > ・ ・ 下 左 「 mokuji 」 mokuji.htm に リ ン ク < frame name="kaisetu" src="kaisetu.htm" > ・ ・ 下 右 「 kaisetu 」 kaisetu.htm に リ ン ク </frameset > ・ ・ フレ ー ム セッ ト 終 了 < /fram eset> ・ ・ フレ ー ム セッ ト 終 了 < /html > （ フ ァ イル 名 ： frame.htm ） -7 - 画 面 は下 記 の よう に 分 割さ れ る 。 （ ｔ ｉｔ ｌ ｅ 部） title.htm に リ ンク （ ｍ ｏｋ ｕ ｊ ｉ 部） （ ｋａ ｉ ｓ ｅｔ ｕ mokuji.htm に リン ク kais etu.htm に リ ン ク ２ ．ｔ ｉ ｔ ｌｅ の 部 作成 < html > < body bgcolor="#000000" text="#ffffff" > < center > < h1 >平 成１ ７ 年 度商 業 デ ザイ ン 作 品< /h1 > < /center > < br > < center > < h1 >３ 年５ 組 １ ００ 番 佐 々木 宏 明 </h1> < /center > < /body > < html > （ ファ イ ル 名： title.htm ） ３ ．ｍ ｏ ｋ ｕｊ ｉ の 部作 成 < html > < body text="#000055" > < br > ＊ ＊＊ 目 次 部） ＊＊ ＊ < br >< br >< br > < a href="myhome.htm " target="kaisetu" >ホ ーム ペ ー ジへ < /a > < /body > < /html > （ フ ァ イル 名 ： mokuji.htm ） -8 - ４ ．ｋ ａ ｉ ｓｅ ｔ ｕ の部 作 成 < html > < body>こ の 画 面が な い とフ レ ー ムが 作 れ ませ ん 。 < /body > < /html > （ ファ イ ル 名： kaisetu.htm） Ⅴ．リンクする部分の記述 目 次 の 部 分に は リ ン ク す る 部 分 と し て ，「 １ ． 花 」 と 「２ ． 空 」 と 「 ３ ． 海」 と が あ る 。 こ の 部 分に つ い て は， 別 に ｈｔ ｍ ｌ 文を 作 成 し てお か な くて は ， リン ク は し ない 。 そ こで 下 記 の よ うに 「 １ ．花 」 は hana.htm 「 ２ ． 空」 は sora.htm 「 ３ ．海 」 は um i.htm １ ．「 １． 花 」 のフ ァ イ ルの 作 成 < html > < body> < center >< h1 >花 で∼ す < /h1 ></center > < br >< br > < center >< img src="hana.jpg" width=80% height=80% >< /center > < /body > < /html > （ フ ァイ ル 名 ： hana.htm ） ２ ．「 ２． 空 」 のフ ァ イ ルの 作 成 < html > < body> < br >< br >< br > < center >< h1 >青 い空 < /h1 >< /center > < br >< br > < center >< img src="sora.jpg" width=80% height=80% >< /center > < /body > < /html > （ フ ァイ ル 名 ： sora.htm） -9 - を作 成 す る。 ３ ．「 ３ ．海 」 の ファ イ ル の作 成 < html > < body> < br >< br >< br > < center >< h1 >海 は広 い な 大き い な ∼♪ < /h1 > < /center > < br >< br > < center >< img src="umi.jpg" width=70% height=70% >< /center > < /body > < /html > （ ファ イ ル 名： um i.htm ） Ⅵ .タ グ 一 覧 いろいろな加工をしてみよう！ ！ １．テーブルの作成 ｅｘ １ < body > < table border > < td rowspan=3 >ゴ ルフ < /td > rowspan=3 は ３ 行 を 意 < td colspan=2 >男 性 < /td > 味 する 。 < td colspan=2 >女 性 < /td > colspan=2 は ２ 列を 意 味 < tr > す る。 < td >丸 山< /td >< td >青 木 < /td >< td >宮里 < /td ><td >横 峯 </td > < tr > < td >倉 本< /td >< td >ウ ッ ズ< /td >< td >北 田 < /td>< td >服 部< /td > < /table > < /body > 結果 男性 女性 ゴルフ 丸山 倉本 青木 宮里 横峯 ウッズ 北田 服部 ２．同じファイルの別の場所にリ ンク < a href="#book1" >書 籍１ < /a > ・ ・ ・ < a name="book1">< /a > - 10 - ３．フォームの作成 <form action="mailto:[email protected]" method="post" > User ID:< input type="text" name="ID" size=20 > <p > <input type="radio" name="machine" value="dos/v" checked > DOS/V < br > <input type="radio" name="machine" value="UNIX" > UNIX < br > <input type="radio" name="machine" value="Mac" > M ac <p > <input type="submit" value=" 送 る " > <input type="reset" value=" 取り 消 し " > </form> ○ < form action="mailto:[email protected]" method="post" > ﾌｫｰﾑの定 義（ ｱﾄﾞﾚｽへ 送 る ） ﾃﾞｰﾀの 送受 信 方 法（ こ の 場 合標 準 入 力か ら 読 む ） ○ < p >は 段 落（ パ ラ グラ フ ） を作 成 す る。 ○ < input type="radio" name="machine" value="dos/v" checked > DOS/V ﾗｼﾞｵﾎﾞﾀﾝ付 加 ↓ ↓ ｸﾞﾙｰﾌﾟ名 ↓ 送り 返 さ れる 時 の 値 ○ < input type="submit" value=" 送 る " > ｻﾌﾞﾐｯﾄﾎﾞﾀﾝ付 加 ○ < input type="reset" value="取 り 消 し "> ﾘｾｯﾄﾎﾞﾀﾝ付 加 - 11 - ↓ ﾁｪｯｸ状 態を 意 味 する ４．スタイルシート そ の １（ 同 じ ペー ジ で 規定 す る 方法 ） フ ァイ ル 名 ：( stylesheet1.htm ) < !doctype html public "-//w3c//dtd html 4.01 transitional//en" > < html> < head > < meta http-equiv="content-type" content="text/html; charset=shift_jis" > < meta http-equiv="content-style-type" content="text/css" > < style type="text/css" > < style >・ ・ < /style > h1 { でスタイルを規 font-size : 50pt ; 定する color : blue ; border-style : solid ; border-color : red ; border-width : 3px 50px 3px 50px ; text-align : center ; < h1 >で 示 } した 部分 h2 { はこ のス font-size : 20pt ; タイ ルで color : purple ; 表 示 する border-style : solid ; border-color : green ; border-width : 1px 20px 1px 20px ; text-align : center ; } < /style > < title >ス タ イ ルシ ー ト </title > < /head > < body > < h1 >スタ イ ル シー ト < /h1 > < br >< br > < h2 >スタ イ ル シー ト < /h2 > < /body > < h2 > で 示 し た 部 分 < /html> は こ のス タ イル で 表示する - 12 - そ の ２ （ス タ イ ルを 別 フ ァイ ル で 規定 す る 方法 ） フ ァ イル 名 ：（stylesheet2.htm ） < !doctype html public "-//w3c//dtd html 4.01 transitional//en" > < html> < head > < meta http-equiv="content-type" content="text/html; charset=shift_jis" > < meta http-equiv="content-style-type" content="text/css" > < link rel="stylesheet" type="text/css" href="stylesheet2.css" > < title >ス タ イ ルシ ー ト </title > < /head > styl es heet2.css < body > にリ ンク し < h1 >スタ イ ル シー ト < /h1 > なさ いと 言 < br >< br > う規 定 < h2 >スタ イ ル シー ト < /h2 > < /body > < /html> フ ァイ ル 名 ：( stylesheet2.css ) h1 { < h1 > の テ キ ス ト 等 font-s ize : 50pt ; の 規 定を し てい る color : blue ; 部分 border-style : solid ; border-color : red ; border-width : 3px 50px 3px 50px ; text-align : center ; } h2 { < h2 > の テ キ ス ト 等 font-s ize : 20pt ; の 規 定を し てい る color : purple ; 部分 border-style : solid ; border-color : green ; border-width : 1px 20px 1px 20px ; text-align : center ; } フロ ン ト ペー ジ を 活用 す る 。 - 13 - Ｗｅｂデザイン手順 ヒアリング コンテンツ 立案 企画書作成 プレゼンテーション インターフェース プログラム作成 ファイナルプレゼ ンテーション １．ヒアリング お客様に一番時間をいただく項目です。まず、お話をお伺いして、お互いのことを理解した上 で、Ｗｅｂ立ち上げに際して目的がはっきりしていない方は、しっかりお伺いしていきます。 目的が決まりましたら、その目的やターゲットを分析し、私たちと一緒にじっくり考えて戦略 を練っていきます。 たとえば、ターゲットは、個人？企業？・・・そのためには、会社紹介、カタログ、プロモー ション、マーケティング、資材調達など、どのように紹介していくかなどです。 ドメインが必要であれば、ここでお伺いし、希望ドメインを候補としてあげて頂きます。 ２．コンテンツ立案 ヒアリングでお伺いした内容をもとにコンテンツとしてどのように表現しているか？を形に していきます。同業他社はどうやって成功しているのかや、失敗しているかを調べ、何が必要か を揃えていきます。ご希望のドメインの取得が可能かどうか？ここで調べ結果を企画書に盛り込 みます。プログラム組み込みなどをどのように組み込んでいくか？などを具体的に考えていきま す。 ３．企画書作成 コンテンツ立案までを構成図で作成し、書面にて、各機能分析した内容を組み込んで作成して いきます。ここまでの段階で、概算お見積書を作成します。 ４．プレゼンテーション 企画書の構成図をもとに、プレゼンテーションを行い、お互いの理解を深め、機能の確認をい たします。ここで、概算お見積書をご覧いただき、ご納得がいただければ、ご契約となります。 ５．インターフェース ここで、基本デザイン、基本機能を作成します。ＴＯＰページとその下の階層１ページプロト コルいたします。 この時点で、企画書で作成した内容が、画面で確認できて、リアル感ができます。大きな変更 点があれば、この時点で、修正を加えていきます。リンクなどもこの時点で構成図と照らし合わ せて、整合性のチェックをいたします。 ６．プログラム作成 各機能にあったプログラミングをしていきます。ＣＧＩ作成もここで行います。 基本デザインに沿って、デザインした内容をプログラミングしていきます。アンケート受付、 買い物かご、アイテム検索などがこれにあたります。 ７．ファイナルプレゼンテーション 本公開前にできあがった内容の最終チェックを行います。リンク、ＣＧＩ機能の確認、メール などです。 ここで、動作確認が確認できれば、納品になります。所定のサーバーにデータをＵＰし、納品 完了となります。 参考・・・Kiyotech HP グループ役割分担 代表（チーフ） 副代表（サブチーフ） プログラマー 取材（カメラマン）・デザイナー Ｗｅｂページに記載する事項例 １． 社名・会社の概要 ２． 代表者（社長）の一言 ３． 取扱商品・商品説明・金額等 ４． 地図・所在地 ５． 社屋 ６． ヒット商品・目玉商品・特別企画 ７． 広告 ８． 会社の歴史・商品の歴史 ９． 近隣観光地 ホームページ制作する上での留意点 １．Ｗｅｂ制作に対する考え ◎ホームページの目的 ホームページ制作では、まずそのサイトの目的を明確にし、その目的に標準を合わせた内容や 構成、デザイン等を考えて、お客様にご提案いたします。 目 的 が あ い ま い な ま ま 作 ら れ た ホ ー ム ペ ー ジ で は 、完 成 し た 内 容 も あ い ま い な も の に な り ま す し 、 具体的な結果も見えにくくなってしまいます。 そのホームページで何をしたいのか、そしてどんな結果を求めて開設するのかをお客様とご相談 さ せ て い た だ き 、 成 果 の 出 せ る Web サ イ ト を 目 指 し た い と 考 え て い ま す 。 ◎利用者について考える ユ ー ザ ー が ホ ー ム ペ ー ジ を 使 っ て 情 報 収 集 を す る 際 に は 、そ の Web サ イ ト に 対 し て「 自 分 が求 めている情 報 」が 分 か り や す く 掲 載 さ れ て い る 」と い う こ と を 求 め ま す 。こ の 要 求 を 満 た し て い る サイトはそのユーザーへ満足感を与えられますし、逆の場合は不快感を与えてしまいます。 訪れてくれたユーザーに満足感を与えられるということは、そのホームページの成果に大きな影 響を及ぼします。情報の発信者側は、ユーザーが自社サイトに何を求めているかを十分に考え、 その提供をしていくことが大切だと考えています。 ◎ デザインについて デザインをする上での基本として考えているものは、 “操 作 の し や す さ ”“情 報 の 探 し や す さ ”“見 や す さ ”の 三 点 で す 。 ホームページと紙媒体との決定的な違いは、雑誌やカタログがページをめくっていくだけなのに 対 し 、 ホ ー ム ペ ー ジ で は “操 作 ”を し て い く 、 と い う こ と が 必 要 に な り ま す 。 リ ン ク ボ タ ン を ク リ ッ ク し て 活 用 す る ホ ー ム ペ ー ジ の 場 合 、 そ の “操 作 ”の し や す さ が 大 き な ポ イ ン ト に な る と 考 え て います。 例えどんなにビジュアル的に優れたサイトでも、目的の情報に行き着く為のリンクボタンがど こにあるのかわからないようですと、ホームページとしての本来の目的（情報の伝達）から外れ てしまうことになってしまいます。見た目の良さはもちろん大切ですが、ユーザーにとって最も 重 要 な こ と は 、「 目 的 の 情 報 が 即 座 に 探 せ る 」 と い う こ と で は な い か と 思 い ま す 。 またこれはデザインばかりでなく、ホームページの内容や全体の構成にも言えることでしょう。 色々な企画を無造作に押し込んだ結果、メインとなる情報が薄らいでしまったり、構成が複雑な ため目的の情報になかなかたどり着けない等、これではせっかく訪れたユーザーも途中で諦めて しまうかもしれません。 そして、情報の見やすさも重要なポイントです。 例えばフォントの大きさ。見た目重視でいくならば小さい方がカッコイイのですが、あまり小さ くしすぎると、見る人の環境によっては読めないくらい小さくなってしまいます。このホームペ ー ジ で も 比 較 的 小 さ い フ ォ ン ト サ イ ズ を 使 っ て い る の で す が 、こ の く ら い の サ イ ズ を 限 度 と 考 え 、 デザインとのバランスでそのサイズを決めるようにしています。 他にも、文章の行間や表組内のスペース、使用する色の組み合わせ等、情報を見やすくするため には、これらの細かい配慮も必要と考えています。 ２．制作から公開までの流れ 1.お問 い合 わせ・見 積 もり依 頼 のご連 絡 ・・・ ホームページの事 でご不 明 な点 がございましたら、お問 い合 わせフォームよりお知 らせください。折 り 返 しご連 絡 を差 し上 げます。 制 作 する内 容 がだいたい決 まっている場 合 、その内 容 をお知 らせいただければ、２ページ程 のサン プルを制 作 いたします。その後 、ご検 討 下 さい。 2.企 画 ・お打 ち合 わせ・・・ ホームページで必 要 なデータ・情 報 の打 合 せをさせて頂 き、ホームページの内 容 を具 体 的 にしていき ます。また制 作 のスケジュールもこの時 点 で決 めていきます。打 合 せは実 際 にお会 いして行 うことが 基 本 ですが、電 話 ・FAX・メール等 で進 行 させていただける場 合 でも問 題 ありません。 3.編 集 準 備 ・・・ 打 合 せの内 容 をもとに、ホームページの素 材 収 集 ・構 成 やデザイン等 のプランを立 てます。お客 様 にも、ホームページ上 に掲 載 する素 材 やテキスト資 料 を用 意 して頂 きまして、これらの準 備 が整 った 時 点 で実 際 の制 作 作 業 へと進 行 して行 きます。 写 真 データなどは、カタログやパンフレットからも取 り込 み可 能 です。 4.制 作 作 業 ・・・ お客 様 と内 容 を確 認 しながら作 業 を進 行 し、仕 上 がったホームページはデモ用 のスペースにアップ ロード後 、お客 様 にチェックをしていただきます。必 要 があればここで校 正 作 業 を行 います。 デモ用 のスペースはグローブでご用 意 いたします。非 公 開 スペースですので、お客 様 のみがインター ネット上 でご確 認 頂 けます。 5.検 証 とアップロード・・・ 制 作 の完 了 したホームページを、正 規 の公 開 用 サーバーにアップロード致 します。CGI が含 まれる 場 合 は、そのサーバー用 にセッティングし、全 ての動 作 テストを行 います。その後 、お客 様 に最 終 チ ェックをしていただき、正 式 URL にアップロードします。（WWW 公 開 ） 6.サイト運 営 ・管 理 ・・・ 契 約 内 容 に基 づく運 営 ・管 理 ・継 続 的 にサポートします。 ３．サイトの内容について ◎ホームページを立ち上げる場合には、まずはその目的を明確にすることが大切です。 効 果 的 な ホ ー ム ペ ー ジ を 目 指 す に は 、ま ず 目 的 を 明 確 に し 、そ の 目 的 を 達 成 す る た め に は “ど う いう内容が必要なのか、どういう見せ方がいいのか、どういう機能が必要かといったことを考 え、効率良く制作内容に反映させていくことが大切です。 ◎ホームページを訪れるユーザーは、そのほとんどが何らかの目的を持ってアクセスします。 自 分 の 意 思 で ホ ー ム ペ ー ジ を 訪 れ る わ け で す か ら 、何 の 理 由 も な く ア ク セ ス す る と い う こ と は 、 ないと言ってもいいでしょう。ユーザーから見たホームページの評価は、自分が期待する結果 がそのサイトで得られるかどうか、ということで決まってしまいます。訪れたホームページが まったくの期待はずれに終わってしまえば、もう二度とアクセスする気にはなれないでしょう し、もし期待通り、またはそれに近いホームページであれば、お気に入りに登録するなどして また訪れたいと思うはずです。 また、製品情報を求めて訪れたサイトなのに会社概要しか掲載されていない場合や、宿泊先を 探すために温泉のサイトへ訪れたのに、写真もなくテキストばかりでイメージがつかめない場 合等、これでは訪れたユーザーはがっかりしてしまいます。 ◎ホームページの制作では、その特性に合わせた作りが必要になります。 例えばニュースサイトや検索サイトのようなホームページでは、トップページにできるだけ多 くの情報やリンクメニューを配置して、スピードと情報の探しやすさを追求しています。デザ イン上では必要以上の画像は配置せず、シンプルかつ整理されたレイアウトが多くなっていま す。 こ れ は 、こ れ ら の サ イ ト の 特 性 が “観 る ”こ と よ り も “読 む・探 す ”と い う 要 素 の 方 が 強 い た め で 、 その要素に適した作りがこのような形になっているのです。 も し こ の よ う な 特 性 を も つ サ イ ト を 、 全 面 FLASH で 構 築 し た ら ど う な る で し ょ う か 。 情 報 を 探 し に 来 た ユ ー ザ ー は 、リ ン ク を ク リ ッ ク す る 度 に ム ー ビ ー の Loading で 待 た さ れ て し ま い 、な か な か 目 的 の 情 報 に た ど り 着 く こ と が で き ま せ ん 。イ ラ イ ラ し て し ま い ま す 。 こ の よ う な 状 況 で は 、自 ら 訪 問 者 を 遠 ざ け て し ま う 結 果 に 繋 が っ て し ま う で し ょ う 。 （もちろんこれは FLASH が 悪 い と い う の で は な く 、 そ の サ イ ト の 特 性 に 合 わ な い と い う 意 味 で 。） 逆 に 、 若 い 人 に 向 け た エ ン タ ー テ イ ン メ ン ト 系 の サ イ ト で は FLASH は と て も 効 果 的 で す し 、文 章 を 中 心 に 作 るよりも写真やイラストをメインにした方が良い場合もあります。ホームページの立ち上げを 予定している場合には、カッコ良さや機能的な部分に目が行きがちになってしまいますが、特 性と作りに関するバランスも大切な部分ですので、十分な検討が必要だと思います。 ４．サイト公開までの準備 ◎ホ ー ム ペ ー ジ に 掲 載 す る 為 の 資 料 （ 原 稿 ） の 用 意 特 別 なケースを除 いてホームページに掲 載 する為 の原 稿 をご用 意 いただきます。 o 文 章 原 稿 （メモ帳 ・Word) o 写真 o カタログ o プリント o ポジフィルム o デジタルカメラのデータ o その他 ＊カタログや雑 誌 等 は著 作 権 が貴 社 にある場 合 に利 用 となります。 い ろ い ろ な形 で受 け 取 るこ と に対 応 し てお り ま す。 ク オリ ティ を求 めた場 合 はカ メラ マン が 撮 影 し たポ ジ フ ィ ルムに勝 るものはありませんが、現 在 はパソコン上 でかなり画 像 修 正 等 を行 えますので、予 算 に合 わせて 原 稿 をご用 意 下 さい。また、不 要 と思 われるような資 料 もビジュアルの元 になったりしますので原 稿 以 外 の 資 料 をご提 出 下 さるとよりいっそう良 いものができあがる可 能 性 があります。イメージとなるような写 真 がな い場 合 はこちらで所 有 する素 材 を使 用 し制 作 します。また文 章 の原 稿 は手 書 きのものから WORD やメモ 帳 等 のデジタルデータ等 対 応 致 します。特 にメモ帳 等 でのデジタルデータでお渡 し下 さる場 合 は大 変 助 か ります。 ◎ホームページを公開するサーバーの用意 一般的に言われているホームページのアドレスとなる場所です。 オリジナルドメインを取得して公開するケースやアドレスにこだわらない場合などいろいろです がホームページはデータを発信するためのサーバーにおかなければなりません。 ◎ サーバーの種類 一 言 でサーバーと申 しましても、その種 類 は多 くあり、また運 営 体 系 も複 数 存 在 しています。運 営 体 系 を 大 きく分 けると、自 社 内 にサーバーを設 置 する方 法 と外 部 のサーバーをレンタルする方 法 があります。また外 部 のサーバーをレンタルする場 合 にも、サーバーを一 台 まるごと借 りる方 法 と、複 数 のユーザーで一 台 のサ ーバーを共 有 する方 法 があります。 サーバーのタイプ 運 営 コスト 自 社 内 サーバー システムの構 築 が必 要 。サーバー運 営 にも専 門 的 な知 識 が必 要 。トラブルがあった場 合 の対 処 が大 変 。 サーバー機 器 の購 入 、システム構 築 、専 用 線 の接 続 、メンテナンス等 、本 格 的 なものにな ると多 大 なコストが必 要 。 一 台 まるごとレンタル レンタル業 者 により異 なりますが、サーバーの運 営 にはある程 度 の知 識 が必 要 。 安 めのところで初 期 費 用 が 10 万 円 弱 、月 額 費 用 が 3 万 円 ∼5 万 円 程 度 。 共 有 レ ン タ ル サ ー バ ー の運 営 自 体 は レ ン タ ル 業 者 が行 う の で 、 サー バ ー に 関 する 専 門 的 な 知 識 は不 要 。 ドメイン取 得 を含 めた初 期 費 用 で２万 円 程 度 、月 額 が 3 千 円 ∼1 万 円 程 度 。 よ ほ ど 自 社 内 に サ ー バ ー を 置 く 必 要 が ある 場 合 を 除 い て は 、 レ タ ン ルサ ー バ ー （ ホ ス テ ィ ン グ サ ー ビ ス ） を 利 用 するのが一 般 的 です。 ◎ サービス内容の種類 仮に共有レンタルサーバーを選んだ場合、業者やそのサービス内容により、更に選択肢が出て き ま す 。レ ン タ ル 業 者 の 広 告 に は 、100MB の レ ン タ ル ス ペ ー ス 、高 速 バ ッ ク ボ ー ン 、高 機 能 等 の キャッチコピーが目に入りますが、実際どのくらいの性能が必要なのかという例を挙げてみたい と思います レ ン タ ル 容 量 最 近 で は 100MB の レ ン タ ル ス ペ ー ス も 当 た り 前 に な っ て き ま し た 。価 格 的 に 差 が な い の で あ れ ば 多 い に 越 し た こ と は あ り ま せ ん が 、 実 際 に 100MB の ス ペ ー ス を 埋 め よ う と す る と 、相 当 巨 大 な Web サ イ ト に な り ま す 。デ ー タ 量 が 大 き く な る ム ー ビ ー フ ァ イ ル や 音 楽 フ ァ イ ル 等 を 大 量 に 設 置 す る 場 合 を 除 い て は 、 ど ん な に 写 真 が 多 く て も せ い ぜ い そ の 半 分 の 50MB も あ れ ば 十 分 で す 。 ち な み に こ の グ ロ ー ブ の ホ ー ム ペ ー ジ の デ ー タ 量 は 、 全 部 で 3∼ 5MB 程 度 で す 。 Ｃ Ｇ Ｉ の 利 用 一 般 的 な レ ン タ ル サ ー バ ー の 場 合 、CGI の 利 用 は 許 可 さ れ て い る か と 思 い ま す 。で す が 、中 に は セ キ ュ リ テ ィ ー や 負 荷 の 関 係 で 禁 止 し て い る 業 者 も あ り ま す の で 、注 意 が 必 要 で す 。 ま た 、レ ン タ ル 業 者 で 予 め 用 意 し て い る CGI（ カ ウ ン タ ー や メ ー ル フ ォ ー ム 等 ）は 利 用 可 能 で も 、 ユ ー ザ ー 独 自 の CGI は 禁 止 し て い る 場 合 も あ り ま す 。利 用 状 況 に 合 わ せ て ご 判 断 い た だ き た い と 思 い ま す が 、将 来 独 自 の CGI を 利 用 す る 可 能 性 が あ る 場 合 は 、CGI の 利 用 を 許 可 し て い る サ ー バ ーをお勧めいたします。 ５．ＳＥＯ対策について ◎検索エンジン最適化 検 索 エ ン ジ ン 最 適 化 (SEO)と は 、 お 客 様 の ウ ェ ブ サ イ ト に 関 係 の あ る キ ー ワ ー ド を 検 索 エ ン ジ ン の 上 位 に 表 示 さ せ る こ と に よ っ て 、 ”売 上 に 繋 が る ト ラ フ ィ ッ ク ”を 獲 得 す る イ ン タ ー ネ ッ ト プ ロモーションです。 WEB を 制 作 し た だ け で は 効 果 が な い の で す 。 皆 さ ん も 利 用 し て い る yahoo、 google、 goo・ ・ ・ ・ な ど の 検 索 エ ン ジ ン は 実 に 80%以 上 の エンドユーザーが使用しています。検索エンジンに登録することでホームページを宣伝すること ができるのです。しかし登録はしているものの、なかなかアクセスが伸びないという方は多いの ではないでしょうか？その解決策は、ユーザーの立場に立って考えると簡単にわかります。皆さ ん も 経 験 が あ る と 思 い ま す が 、ユ ー ザ ー は 上 位 に 表 示 さ れ た も の か ら 順 に ク リ ッ ク し て ゆ き ま す 。 そ し て 検 索 結 果 は と い う と 、 せ い ぜ い 20 件 程 度 し か 閲 覧 し ま せ ん 。 こ の 、SEO（ 検 索 エ ン ジ ン 最 適 化 ）の 対 策 を 入 れ て い く 場 合 、現 状 の WEB に 対 策 を 行 う よ り も 、 新 規 に 制 作 す る 時 に 組 み 込 ん だ 方 が 、構 成・コ ン テ ン ツ の 面 か ら も 効 率 的 な 対 策 が で き る の で す 。 新規に制作するときから、これをプランニングできる弊社におまかせいただければ時間のロスも す る こ と な く 、 ユ ー ザ ー に 訪 れ て も ら い や す い 状 態 で UP で き ま す 。 い ま あ る ホ ー ム ペ ー ジ を 効 果 の あ が る 、 問 い 合 わ せ の 入 る WEB に す る の は 大 変 で す が 、 そ の 対 策 も ふ ま え て 新 規 や 、リ ニ ュ ー ア ル で ホ ー ム ペ ー ジ を 作 成 す れ ば 、効 率 的 で あ る ば か り で は な く 、 より理想的なホームページにしていくことが可能になります。 グ ロ ー ブ で は 、 デ ザ イ ン ・ コ ン テ ン ツ ・ そ し て SEO ま で ト ー タ ル で の サ ポ ー ト が 可 能 で す 。 ６．検索エンジン登録申請 ◎ホームページ運営の鍵となる検索機関への登録申請 当社で制作させていただいたホームページは代表となる下記の検索機関（サーチエンジン）へ無 料で登録申請させていただきます。 登録については先方の判断にゆだねられるケースもありますので登録を保証するものではありま せんのでご注意下さい。またサーチエンジンによっては登録の受付を中止する場合もありますの でご了解下さいませ。 ■検 索 エ ン ジ ン 一 括 登 録 主 な 登 録 申 請 サ イ ト は 下 記 の 通 り で す 。（ 同 一 の エ ン ジ ン を 使 用 し て い る ケ ー ス も あ り ま す ） 検 索 機 関 （サーチエンジン goo infoseek Google アルタビスタ nifty Excite Biglobe all the web OCN hi-ho ７．ホームページ制作料金 ◎当社の一般的な制作料金 ホームページの制 作 費 は、制 作 する内 容 によって変 わります。お客 様 毎 にホームページの掲 載 内 容 は全 て 違 いますので当 然 料 金 は同 じになることはありません。1 ページいくらですか? こんな事 をよく言 われますが、 お客 様 のお考 えの 1 ページとは画 面 に表 示 されたページのことを指 しているのでしょうが、制 作 会 社 側 では 1 ページの捉 え方 がまちまちのようです。 Ａ４紙 の原 稿 の大 きさ? それともできあがったページの印 刷 した状 態 ? モニターの画 面 の状 態 ? その他 いろいろ会 社 によって違 うようです。 など捉 え方 がい くつ か あります。 ま たペ ージ の 基 本 的 な料 金 にボ タ ンや 画 像 などは含 まず、全 て別 料 金 なん て会 社 も あります。ですから単 純 にホームページに掲 載 さ れている価 格 に惑 わされないよう注 意 が必 要 です。 また、テキストのみのシンプルなものがいい、トップページにフラッシュの動 画 を使 用 したい、たくさんの写 真 を入 れて作 品 案 内 をしたい等 ご希 望 内 容 によって価 格 は上 下 します。当 社 では、お客 様 のご要 望 を充 分 に お伺 いしてから、お見 積 もりを無 料 でお出 し致 しますので、どうぞお気 軽 にお問 い合 わせ下 さい。 ◎ 当社の一般的な制作料金 お客様のご要望によりますが一般的なデザインで各ページに写真が数点あり文字やイラストの原 稿は紙や印刷物等から制作するホームページの場合 31.500 円 前 後 (税 込 み 価 格 ) トップページ制作 各ページ制作単価 12.600 円 前 後 (税 込 み 価 格 )が 一 般 的 で す 。 プ ロ グ ラ ミ ン グ （ CGI） の 制 作 費 も 同 様 で す 。 ア ク セ ス カ ウ ン タ ー や ア ン ケ ー ト の 為 の フ ォ ー ム など、どのような仕様で、どう活用したいかによってさまざまです。またスクリプトなどによる ボタンの変化など最近はインタラクティブな仕様も増えています。 是非、一度ご気軽にご相談ください。 制作に関するお問い合わせはこちらから 一 度 の 出 費 が 大 変 ,運 営 ・ 更 新 も し た い と の 声 が 沢 山 あ り ま し た の で 月 額 制 を 設 け ま し た 。 ８．Ｗｅｂサイトの告知について ◎ 印 刷 物 へ の URL 記 載 ホ ー ム ペ ー ジ が 完 成 し た ら 、そ の 所 在 を 示 す URL（ http://∼ ）を 告 知 し て い か な け れ ば な り ま せ ん。この作業を行わないと、せっかく公開したホームページでも、ほとんど気付かれずに放置さ れた状態になってしまいます。できるだけ多く登録・掲載をお勧めします。ホームページのプロ モーションとして、比較的簡単にできる身近な宣伝方法を中心に、いくつかの例を紹介してみた いと思います。 ◎ 広 告 物 へ の URL 記 載 ① 全 ての社 員 の名 刺 には、ホームページの URL を記 載 します。 ② パンフレットやカタログ等 の企 業 PR 誌 にも、出 来 るだけ URL を記 載 しましょう。 ③ 新 聞 やチラシ、雑 誌 等 に、自 社 の製 品 やサービスの広 告 を出 している場 合 は、その広 告 ス ペースにも URL を記 載 しておきましょう。 ④ Web 上 の広 告 掲 載 には、バナー広 告 やメールマガジンでの広 告 があります。バナー広 告 で は、アクセス数 の多 い有 名 サイトへの掲 載 や、自 社 製 品 やサービスに関 係 する、専 門 的 な サイトへの掲 載 が考 えられます。 ⑤ 広 く告 知 したい場 合 はアクセス数 の多 い有 名 サイトへ。ターゲットを絞 った告 知 の場 合 は専 門 的 なサイトへの掲 載 が有 効 的 でしょう。 ◎ Web 広 告 ホームページの告知をする上で、費用もかからず（一部有料のサイトもありますが）比較的簡単 に登録できるのが、このサーチエンジンへの登録です。ホームページを公開したらすぐにでも行 いたい作業です。 ◎サーチエンジンへの登録 サーチエンジンのサイトには、登録型と自動巡回型があります。登録型とは Yahoo Japan に代表されるような Web サイトで、そのサイトの登録フォームで掲載の申請を行います。自動巡回型とは、そのサイトのシステムが Web 上を巡回し、無数にあるホームページの URL を自動的に取得して、データベースに登録しています。その ため、Web 上に自社ホームページを公開しているだけで、自動的にそのサーチエンジンへ登録されることになり ます。 どちらの場合も、掲載されるまでにはある程度の期間（目安としては 1 週間∼1 ヶ月程度）が必要です。また登 録型のサイトでは、申請を行っても必ず掲載されるとは限りません。申請を行ってから 2 ヶ月経過しても登録が 確認できない場合は、再度申請してみることをお勧めいたします。 ◎専門的なリンク集への登録 Web 上の検索サイトの中には、上記のような総合サーチエンジンの他に、特定のテーマに絞ったリンク集も多数 存在しています。特定の業種に絞ったものや地域密着型のもの、趣味に関係するもの等、様々な内容のものがあ るようです。 ◎キャンペーンの実施 プレゼント品を用意してオープニングキャンペーンを実施する、という方法も考えられます。この方法はそのホ ームページの内容により向き不向きがありますが、特に女性（更には主婦の方）を対象とした Web サイトの場合 には、プレゼント付きキャンペーンは認知度の向上に期待が持てます。 キャンペーンを行う際にはその告知も必要です。Web 上には、このような懸賞付きページを集めた検索サイトが ありますので、利用してみるのもよろしいかと思います。 ９．制作後の運営・更新・管理 ◎運営の重要性 ホームページとは制作して公開するまでが全てではなく、公開後の運営作業も、成功に向けた重要なカギとなっ てきます。 ホームページを現実の世界に例えると、それは店舗のようなものにあたります。そして立ち上げたばかりのホー ムページは、街の片隅にある誰にも気付かれないような小さな店に過ぎません。これはホームページの運営にも 言えることで、存在を知ってもらうためには広く告知することが必要ですし、効果的なホームページを目指すに は、利用者の反応をみて内容を改善して行くといった作業が必要になります。 ◎重要度の割合 重 要 度 の割 合 制 作 40% プロモーション 20% その後 の運 営 （新 着 ・更 新 業 務 ）40% ◎運 営 の 具 体 的 な 作 業 内 容 と し て は 、 下 記 の も の が 考 え ら れ ま す 。 （ ホームページの改 善 に向 けた作 業 例 ） １． 各 ページのアクセス状 況 を記 録 します。 ２． トップページのアクセス数 が低 ければ、よりプロモーションに力 を入 れます。 ３． 各 ペ ージ のア ク セ ス数 を確 認 し 、 ユーザーの移 動 状 況 を調 査 し ます。 こ れに より ユ ーザーが興 味 を示 す ページとそうでないページを確 認 し、見 直 すべき内 容 があれば改 善 を図 ります。 ４． 本 来 の目 的 がどれだけ達 成 されているかを検 討 します。例 えばサービス業 の場 合 、ホームページを見 た 人 からどれだけ問 い合 わせがあったかが一 つの目 安 になりますが、アクセス数 が増 えたのに問 い合 わせ がほとんどない場 合 など、どこかに問 題 点 がないかを検 討 します。 ◎ホームページ掲載・運営・管理代行 貴社に代わってホームページをサーバーに公開したり、万が一の時のためにデータをバックア ップしたりと掲載から管理まで代行いたします。 ◎ホームページ更新・修正代行 立 ち 上 げ た Web サ イ ト は 、 常 に 新 鮮 さ を 保 ち 続 け る こ と が 大 切 で す 。 そ の た め の ト ピ ッ ク ス の 更 新 や 製 品 の 入 れ 替 え ・ 内 容 の 訂 正 は 、 E-mail・ Ｆ Ａ Ｘ ・ 電 話 な ど で ご 連絡いただくだけで迅速に代行致します。少しばかりのコストを削減しようとして自分で修正す ると思わぬところでページを壊してしまったり、余計なコストと作業が発生してかえって高くつ いてしまう場合もあります。当社はお客様と長くおつきあいができるように低価格にてメンテナ ン ス を さ せ て い た だ き ま す 。そ の Web サ イ ト の 利 用 者 が 増 え れ ば 増 え る 程 、運 営 に か か る 業 務 は 重要度を増してくると言えるでしょう。 ◎ホームページをご自身で更新・修正する 更 新 な ど ご 自 分 で 行 い た い お 客 様 に は 、 制 作 時 の ホ ー ム ペ ー ジ デ ー タ を CD-R な ど の メ デ ィ ア でお客様にお渡しいたします。 １０．Ｗｅｂ制作のＦＡＱ ◎「制作関連」 「金額・費用関連」 「リニューアル制作関連」 ＦＡＱ １．見積りを依頼したいのですが、どうしたらいいのですか？ 制作したいホームページの内容が具体的にお決まりのようでしたら、お問い合わせフォームにてその内容をご記 入後、送信して下さい。折り返し、概算のお見積りをご連絡させていただきます。具体的にお決まりでない場合 でも、同じくお問い合わせフォームにてお知らせください。折り返しご連絡を差し上げ、内容を打ち合わせた後、 お見積りをご提案させていただきます。 ２．問い合わせをしたいのですが、どのように連絡すればいいですか？ お問い合わせフォームよりご連絡をいただくか、 直接電話を頂けるか、直接メールでお知らせ下さい。 ３．打ち合わせはどのような感じで行うのですか？ メールやお電話での打ち合わせ後、必要に応じてお客様のもとへお伺いするか、こちらに来ていただくかします。 ただ、所在地が宮城県のため、お伺いできるエリアは基本的に宮城県・山形・岩手地区の範囲内とさせていただ きます。（状況によりその他のエリアへも出張いたしますので、ご希望の方はご相談下さい。） ４．制作の期間はどのくらいかかりますか？ 規模によりその期間は様々ですが、内容が決まり資料が全てそろった状態からですと、一般的な規模のサイトで 平均 1 ヶ月程度で納品できます。 数ページ規模の場合はこれよりも納期は早くなります。 ５．デザインはどのように決めるのですか？ そのホームページの内容・目的に応じてベストなデザインを考え、お客様にご提案いたします。同時にお客様の ご要望を取り入れながら、制作して行くことになります。 ６．どれくらいの規模から対応してくれますか？また、どれくらいの規模まで対応できますか？ 1 ページのみの制作、部分的な変更、細かい制作業務からお受けしております。 また、お客様とのスケジュール さえ合えば、数百ページ規模のサイト構築にも対応させていただきます。 ７．検索エンジンへの登録は行ってもらえるのですか？ 通常の検索サイトは登録いたしますが、ご希望の場合は主要サーチエンジンへの登録申請を代行いたします。 ８．レンタルサーバーのサービスは行っているのですか？ 申し訳ありませんが、現在のところホスティングサービスは行っておりません。ですが、提携しているサーバー 業者がありますのでそちらをご紹介します。ＨＯＭＥの右側のサイトサーブをお勧めします。サーバーをお探し のお客様には、その用途や規模に応じて、どの程度のサーバーが良いかをアドバイスさせていただきます。 ９．ドメインの取得はできますか？ 申し訳ありませんが、現在のところドメインの取得サービスは行っておりません。ですが、レンタルサーバーを 借りますとセット（上記のサイトサーブ）で同時に申し込み出来ますのでご相談下さい。 １０．ホームページの設置は行ってもらえるのですか？ はい。ご希望の場合にはお客様がご使用になるサーバーへ設置いたします。 ただこの場合、設置するサーバーに 対するお客様の ID とパスワードをお知らせいただく必要がございます。 一般的には、お客様よりその情報をお 知らせいただき、当社から直接アップロードするパターンが多くなっております。もちろん ID やパスワード等の 重要な情報は、アップロードの作業以外で使用することはありませんので、ご安心いただけたらと思います。 １１．更新を依頼したい場合はどうすればいいのですか？ お問い合わせフォームよりご依頼ください。折り返しご連絡を差し上げまして、詳細な打ち合わせをさせていた だきます。 １２．制作料金の価格はどのように決まるのですか？ デザイン、データ量、使用する技術内容などから、それぞれにかかる技術レベル、技術者の作業時間などを算出 し、全体のお見積りを計算しております。 １３．ホームページ公開後に間違えが見つかったのですが、修正してもらえますか? 運営管理代行をご依頼のお客様の場合は問題ありません。お客様がご用意されたサーバーでホームページが公開 されている場合、1 ヶ月以内でしかもそのページを修正していなければ可能です。もちろんその場合は費用はいた だきません。 １４．ホームページの 1 ページって? 当社の考えている 1 ページはあくまでも原稿の量によって決まるのであって基本的には紙原稿 A4 サイズをベー スとしています。通常紙原稿 A4 サイズ 1 ページをホームページ化するとプリントでは 2 ページ前後くらいにな ります。 １５．会社案内のパンフレットをホームページにできますか? 基本的にはできます。確かに会社案内のパンフレットを印刷して作る費用と比べホームページは割安です。しか も部分修正が簡単にスピーディーにできますから修正時のコスト面 でも雲泥の差があります。しかしホームペー ジは会社案内のパンフレットなどの紙媒体と比べてもっとインタラクティブな事ができるのにそうしないのは機 能が半減してしまいます。ですから原稿として会社案内のパンフレットを利用することは反対はしませんが、そ のままの状態をスキャニング等で画像にしたホームページはおすすめできません。 １６．貴社から遠い所に当社はあるのですが、制作してもらえますか? 問題ありません。打ち合わせなど、伺うことによる余分な営業費や交通 費などを排除できる分、価格も底値での 制作が可能となります。また電話やメール・宅急便での資料のやりとりで制作から公開まで完了している企業様 も多数例あり、1 度も先方のご担当の方と面識なく公開までたどり着いてるケースも数多くあります。 １７．ホームページ掲載に最低でも必要なものは何ですか? 一般的なホームページの場合、掲載規定となるものは無いと思いますが、ホームページを公開する以上は発信者 の住所・連絡先の電話又はメールアドレスはきちっと掲載すべきことだと思います。特にメールのアドレスがフ リーメールだったりでは、信用してもらえないホームページとなってしまいかねません。また通販などホームペ ージ上で商品を販売する場合はいくつか表示義務があります。 １８．ホームページの原稿には何か決まり事がありますか? 特に決まり事はありません。しかしデータなどの場合、各業界専門のシステムソフトで制作してあるデータなど をそのまま渡されても、こちらでそのシステムソフトが無いためデータを開くことができません。その場合はプ リントしたものなどをご用意していただくか画像の場合は JPEG・GIF など一般 的な画像形式にてお渡しいただ かなければ利用できません。 １ ９ ． HP製 作 会 社 に よ り 価 格 が と て も 違 う の は な ぜ で す か ? 「 金 額 ・ 費 用 関 連 」 都心部と地方で価格に差があるようです。都心部では人件費やビルなどの賃貸料などがバカになりません。そう いった経費が制作費に跳ね返ってしまうのは仕方のないことなのかもしれませんが合点のいかない部分でもあり ます。また、大きな制作会社の場合下請けや孫請けまであるようですから、それぞれが利益をとれば当然料金は 高くなってきます。結果として制作会社ごとに価格の差が生まれてくるわけです。 ２０．支払方法は? 「金額・費用関連」 一般企業様の場合は制作が完了しホームページ公開又はデータでの納品後に各企業様の通 常決済期日にて銀行 振り込みにてお願いしております。ホームページを制作依頼する立場から考えれば今まで取引のない所にお願い するわけですから、全額先払いや半額分先払いなどはちょっと心配ですよね。ですから当社は、ホームページ公 開迄はドメイン取得などの特別 な場合を除いては完了後にお支払いいただいております。 個人の方の制作においては日常、連絡がとりにくくなるのが現状です。特別な業務のホームページでない限り制 作費の半額を先にお預かりしてから制作に入ります。 ２１．他の業者で制作してもらったのですがその素材を使用してリニューアルできますか? 「リ ニューアル制作関連」 ホームページの著作権が貴社にわたっていれば可能です。そうでない場合は著作権の侵害にあたるため別 なもの を制作しなければなりません。 ２２．リニューアル後は社内で更新したいのですが・・・ 「リニューアル制作関連」 大丈夫です。ホームページの修正が完了後公開し、かつ CD-R 等のメディアで納品いたします。 ２３．リニューアル後ページの更新などやっていただけますか? 「リニューアル制作関連」 もちろんです。当社は制作時のみでなくその後の修正やメンテナンスなども承ります。 ◎引用文献・・・（有）グローブ会社案内 きちんと学ぶデザインの基本技 デザイン要素を整理する 01 ターゲットユーザを明確にする基本技 ○ サイト ID の印象（形状）をレイアウトにもち込む サイトでは企業のロゴマークのデザインと、画面そのもののデザインは一体に認 知される場合がほとんどである。ロゴが使っている角丸を使って全体の印象に反映 せる。このことによって「こんな商品があったな」と思い出してもらうきっかけと してロゴマークが機能するように、サイト全体を「ロゴの印象増幅装置」に仕立て る。 ○ 1 画面で訴求する構成要素は７つに絞る 「マジックナンバー・オブ・セブン」は人間が瞬時に把握できる情報量の限界を 示す。銀行の ATM や新聞の見出しなども７つ以下に押さえている場合が多い。 02 コンセプトを伝える基本技 ○ イメージを利用してコンセプトをうまく表現する。 使用するイメージの決定と加工、それらの配置バランス、ページないで使われる 画像の扱いなどは、コンセプトにしたがって細部まであらかじめ決定しておく。ア イコンもコンセプトに合わせたものを使うのが基本。 コンセプトとは？ ある目的を達成するために想定されたコミュニケーション言語。つまり、ターゲッ トに対して何をいえば響くか、アクションをおこしてもらえるかを考え、言語化し たもの、コンセプトをどのようにターゲットに伝えるかを表現に落としたものが、 デザインなどである。 ○ 広告的手法でコンセプトに訴求する。 「購入してもらう」を目的とした場合、コンセプトは「他社と差別化できるその 商品の魅力」を語ることになる。このコンセプトをデザイン化し、興味を持っても らわなければならない。例えば、企業の広告であれば、 「誠実な姿勢」を伝えるのか 「事業の面白さ」を伝えるのか、 「自由な社風」を使えるのかでデザイン手法は大き く変わる。 どのように デザイン・技術 表現 何を コンセプト 目的 誰に 03 サイトに統一感を出す基本技 ○ 作業前にスタイルガイドを作成する。 作業を進めていくうちに、徐々にズレが生じてくる場合がある。４つの要素で最 低限のルール（スタイルガイド）を決めておこう。 ●配色パターン ●基調書体、サイズ ●基調余白 ●基調ボタン要素 ○ ビジュアル、色、文字でデザインを統一する。 04 視線誘導を意識したレイアウトの基本技 ○ 視覚的な要素で視線を誘導する。 交通標識が文字ではなくマークであるのと同じように、視覚的な表現を利用する ことで、考えずに見た目で瞬時に情報を整理して次の行動に移すことができる。 多くの商品を掲載するようなショッピングサイトやブランド紹介サイトでは、多 くの情報が整理されていない場合、閲覧しながら自分の目的にある情報にたどり着 くのに時間がかかってしまう。こんなときには、ブランドや商品カテゴリーによっ て視覚的にできるだけ分類できるテーマを決め、そのテーマに合わせた装飾を加え ていこう。 それぞれ商品カテゴリーが数種類に分類できるなら、カテゴリーごとに設定した テーマカラーを用意しておき、写真の枠線や、見出しの文字カラー、背景色の色合 いなど利用できるところに繰り返し利用していく。またブランドのロゴやカテゴリ ーを視覚的に分かりやすくするためにアイコンをつけるといった方法も有効に利用 できる。色やアイコン、グランドロゴといった文字ではなく、視覚的な要素を使え ば、ページを閲覧しながら目だけで追って商品を探すことができる。 ○ 適切な視線誘導でパーツの役割を明確にする。 閲覧者がボタンの意味や、つぎに何をすればいいのかが見た目に分で認識でき るようにする。 05 Webにおけるグリッドシステムの基本技 ○ グリッドシステムに黄金比を取り入れる。 何気なく気分だけでレイアウトを分割するのでなく、一般的に使われる数値や役 割をうまく使い、計算されたレイアウト分割することで、無意識に自然と見やすい レイアウトになる。 黄金比率＝「約 1:0.62」 38% 62% 62% 38% 06 限られたスペースを有効活用する基本技 ○ 素材とスペースの関係を考える。 一つのページが画面からはみ出しているものをよく見るが、画面に収まっていた 方が見やすい。どうしても素材の関係で画面からはみ出してしまう場合は、素材を 加工して、ページに収まる努力をしよう。 07 要素のグルーピングの基本技 ○ ユーザーのニーズを考えて情報をグルーピングする。 上方を発信する側としての伝えたいこと、見せたいものだけでなく、もし自分が ユーザーならこのサイトでどんな情報を得たいかを考えて最適なグルーピングをし よう。 ○ グルーピングした情報をわかりやすくレイアウトする。 見た目の「美しさ」にとらわれがちなページのレイアウトだが、ユーザの立場を 考えてグルーピングされた情報をいかに使いやすい場所に配置するかが重要。 08 情報を整理してわかりやすく伝える基本技 ○ 情報に優先順位をつけ、メリハリをつけて表示する。 デザインに強弱をつけるための４つのポイント 「配置する場所」 左から右に読む横書きのフォーマットの場合、人の視線は左上から右下に移 動するので、重要なものは左上に配置し、低いものは右下に配置することが原 則となる。 「色の配分」 色というのは対比させることによって強弱が生まれるので、それを利用して 強弱をつける。 「見た目のボリューム」 写真やイラストのあるなし、ボタンの立体感のあるなし、サイズの大小など で強弱をつける。 「文字の工夫」 優先順位の高いタイトルなどの項目には、ある程度の大きさをもった読みや すい文字を使うことが重要。 『色彩の美学』塚田 色名 白 灰色 黒 赤 黄 緑 青 紫 敢（紀伊國屋書店刊／1978 年）より 具体的連想 雪・白紙・砂糖 霧・鼠・灰 墨・夜 火・血・太陽・赤旗 レモン・月・菜の花 葉、草原 海・空 すみれ 抽象的連想 潔白・清潔・衛生 沈静・平凡 暗黒・厳粛・死 情熱・強烈・革命・危険 平和・光明・明快・活発・安全 平和・希望・安全・新鮮 希望 高貴・優雅 見せたい要素を強調する 09 要素の優先順位をつけ基本技 ○ 余白を活用して視線を集中させる。 見てもらいたいコンテンツタイトルなどは、文字の大きさや書体、アニメーショ ンなどに頼りがちだが、余白をうまく使えばスマートに視線を集中させることもで きる。 10 写真を強調する基本技 ○ 写真を効果的に活用する。 写真を扱う際には、その視覚的効果、訴求力、流れなどを意識的に見定め、でき る限り効果的に活用する。 11 伝えたい情報を素早く伝える基本技 ○ 伝えるべき情報は確実にユーザーの目に届ける。 情報やイメージを伝えるために Flash や静止画を使っているサイトが多い。ユー ザーの目にぱっと飛び込み、なおかつそれを印象づけるために効果的な演出を考え る必要がある。 ・ スピーディに切り替わるモーションは、 「都会的」 「洗練された」といった印象 を与えたいものに向いている。 ・ モーションが速いとテキストの視認性は悪くなる。伝えたいテキスト情報は大 きく見せたり、停止させる工夫も必要。 ○ サイト全体のレイアウトで世界観を伝える。 ○ 誘目性の高い色をアクセントカラーとして使う。 ○ レイアウトの一部分に不規則性を与える。 12 ブランドイメージを打ち出す基本技 ○ サイト閲覧者の感情に訴えるデザインとして意識する。 13 イレギュラーで見せる基本技 ○ ありがちパターンを意識的に崩す。 14 文書を読ませたいときの基本技 ○ 段落や行間のスペースをアイテムを使って読みやすくする。 ○ 本文とキャプション、コラムなど雑誌で使われる表現を取り入れる。 ○ 文章を読みやすくレイアウトする。 15 デザインモチーフを使う基本技 ○ 閲覧者の目を引く「誘導」の演出で情報を伝える。 16 素材が少ないときの基本技 ○ はみだし効果を使って素材にダイナミックな表情をつける。 ○ タイプフェイスの特徴を最大限活用する。 使いやすいデザインにする 17 ユーザーの環境を意識したデザインの基本技 ○ フォントサイズは固定しない。 ○ 横幅を固定してレイアウトする。 18 わかりやすいナビゲーションの基本技 ○ あるべき場所、形、位置を考える。 ○ 階層深度を意識する。 ○ 自然に意識させられるナビゲーションを考える。 19 利便性を追求するレイアウトの基本技 ○ ページの階層を視覚的に表現する。 ○ 写真を連続して見せる際は配色を考える。 20 居心地の良さを感じさせる基本技 ○ 文字色と背景のコントラストを考える じょうちょう ○ 冗 長 なテキストはリスト化・図表化する 21 サイト内で迷わない基本技 ○ ターゲット別に入り口を分ける。 ○ 現在位置を表示させる。 ○ 詳細な解説を同ページ内で解決させる。 参考文献 「Web creators ８月号」（平成１７年８月１日発行）