Comments
Description
Transcript
Quick Homepage Maker Manual ver3.0
Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. Contents CONTENTS INTRODUCTION ................................................................................ 5 Part1． RENTAL SERVER SERVICE AGREEMENT ..................... 6 レンタルサーバーとは？ ...................................................................................... 7 ドメインとは？ ..................................................................................................... 8 ムームードメインで独自ドメインＧＥＴ! .......................................................... 11 ロリポップ！でレンタルサーバーの契約 ........................................................... 16 Part2． INSTALL AND SETTING.................................................. SETTING .................................................. 19 Quick Homepage Maker とは............................................................................ 20 Quick Homepage Maker 設定の準備 ................................................................. 20 【補足解説】正常にホームページが表示出来ない場合について ........................ 32 ロゴやサイト情報を設定する ............................................................................. 35 プラスアルファの機能の設定 ............................................................................. 46 1. プラグインの設定 .......................................................................................... 46 2.「 システムの更新」と「バージョンアップ」 ............................................... 51 ３．サーバー別設定............................................................................................ 53 ４．アンインストール ........................................................................................ 55 Part3． UPDATE YOUR SITE ....................................................... 56 Quick Homepage Maker の概観と仕組み .......................................................... 57 Quick Homepage Maker でホームページを作る手順 ........................................ 65 作りながら学ぶ ................................................................................................... 68 基本操作説明 ...................................................................................................... 72 ページ内容の書き方............................................................................................ 77 便利な機能 .......................................................................................................... 86 画像を貼り付ける方法(詳細) .............................................................................. 94 簡単画像アップロード機能で、画像を表示させる ............................................. 94 表の活用方法 .................................................................................................... 101 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 2 Contents 公開予定表（カレンダー）を作る方法 ............................................................. 104 Google マップを設置する ................................................................................. 107 登録フォームの作り方 ...................................................................................... 109 特殊な使い方、実用的な使い方 ........................................................................ 111 作りかけの非公開ページ作成を作り、公開する手順........................................ 111 最後に ............................................................................................................... 112 Part4． POWER UP YOUR SITE .................................................113 ................................................. 113 ホームページをパワーアップさせるには ......................................................... 114 検索エンジン登録 ............................................................................................. 114 多くのホームページにリンクしてもらう ......................................................... 119 ホームページの URL を短くする ..................................................................... 120 アクセス解析を無料でする ............................................................................... 121 Google Analytics を導入する........................................................................... 122 トラッキングコードの埋め込み ........................................................................ 124 問い合わせフォームを作る ............................................................................... 126 Web 上に無料で 100MB の自分のスペースを作る ........................................... 129 ステップメールを活用する ............................................................................... 130 お支払い方法の工夫.......................................................................................... 131 おわりに ........................................................................................................... 132 Part5． KILLER PAGE.................................................................134 PAGE .................................................................134 キラーページとは何か？ .................................................................................. 135 キラーページのまとめ ...................................................................................... 136 通常のページとの併用方法 ............................................................................... 137 KILLER PAGE を使う方法 .............................................................................. 138 キラーページデザインを作る方法 .................................................................... 142 Word からページを写すコツ ............................................................................ 143 キラーページを作る方法、ワンポイント ......................................................... 143 応用編 キラーページの活用方法 .................................................................... 145 おわりに ........................................................................................................... 148 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 3 Contents Part6． AFFILIATE LINKS...........................................................149 LINKS ...........................................................149 リンクするだけのアフィリエイト .................................................................... 150 高度なアフィリエイトタグ ............................................................................... 150 Google AdSense ............................................................................................... 152 CONCLUSIONS ..............................................................................158 Premium APPENDIX ......................................................................160 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 4 Part1．Rental Server Service Agreement INTRODUCTION はじめに この度は、様々なホームページ作成方法、システムの中から、 Quick Homepage Maker をお選び下さり、ありがとうございます。 Quick Homepage Maker は、Contents Management System (CMS)と言って、 面倒なレイアウト、装飾、リンク作業などを自動で行う仕組みです。 この方法を使うことで、誰でも簡単に 50 万円相当のホームページを作ることができま す。 Quick Homepage Maker では、 ホームページで利益を生み出すための仕組みを作れるよう、 様々な工夫とマニュアルを用意しています。 是非、人に喜ばれるサービス、商材、ノウハウなどを 提供するためのビジネスにご活用下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 5 Part1．Rental Server Service Agreement Part1． RENTAL SERVER SERVICE AGREEMENT レンタルサーバー契約の手引き まずは、ホームページの住所を Get ! はじめてのレンタルサーバーの契約 Part1 では、レンタルサーバーの契約についてご説明します。ここでは、オススメのレ ンタルサーバー、ロリポップ！の契約について主に説明しています。レンタルサーバー を未契約の方は、ご参考にしてくださいね。 CONTENTS レンタルサーバーとは？ プロバイダとの違い レンタルサーバーのメリット ドメインとは？ オリジナルドメインのメリット ドメインを取得するには？ ムームードメインで独自ドメイン GET！ ムームードメインについて お得！ムームードメイン＋ロリポップ！ ドメイン登録の流れ ムームードメインからロリポップ！の契約方法 ロリポップ！でレンタルサーバーの契約 ロリポップについて サブドメインプランと独自ドメインプラン サブドメインプラン Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 6 Part1．Rental Server Service Agreement レンタルサーバーとは？ せっかくホームページを作っても、そのまま自分のパソコンに置いているだけでは、 みんなに見てもらえません。インターネットに接続しているすべての人に見てもらうた めには、サーバーという場所にホームページを置く必要があります。レンタルサーバー というサービスは、このホームページを置く場所を貸し出すサービスです。 レンタルサーバーでは、基本的に以下のことができます。 1．ホームページを公開できる 2．独自のメールアドレスを自由に設定、使用できる 「あれ？この２つってプロバイダでもできるよね・・・」 プロバイダとの違い 「レンタルサーバー」と「プロバイダ」のどちらも、メールもホームページも持つこ とができます。 では、違いは何でしょうか・・・？ プロバイダは、本来インターネット接続の業者です。そして、レンタルサーバーの業務 も兼ねるところが多くあります。 しかし、本来の業務ではないため以下のような欠点があります。 • 使用できるメールアドレスの数が少ない。 • 自由な名前のメールアドレスが使えない。 • ホームページのアドレスが長くてわかりづらい。 (例) http://www11.ocn.ne.jp/~hokuken/ • ホームページのサイズが小さい。 • CGI が使えない場合があり、設定や使用法に制限が大きい。(機能が少ない) • ドメイン(自分の名前)が使えない。(もしくは、割高） それはプロバイダがもともとホームページやメールの専門業者ではないからです。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 7 Part1．Rental Server Service Agreement そこで、商用でホームページやメールを利用する場合は、レンタルサーバーを使用する のが一般的です。 ※ その代わり、レンタルサーバーでは、インターネット接続はできません。つまり、 プロバイダとレンタルサーバーの両方との契約が必要です。 レンタルサーバーのメリット サーバーは、24 時間 365 日休みなく稼動しています。そこで、不安定になったり、 ウイルスやハッカーに攻撃されたり、停電などいろいろな障害が待ち受けています。 その場合は、メンテナンスや修理をする必要があります。自分でメンテナンスすると時 間と労力がかかってしまいますし、技術者を雇うとコストがかかってしまい、大切な本 業に力を注ぐことができません。 そこで、レンタルサーバーにすると基本的に 24 時間、専門の技術者が監視してい て、こういった障害に備えてくれるというわけです。 「レンタルサーバーを用意したぞ！これでホームページを開設だ！」 すみません。まだ不十分です。レンタルサーバーという家（箱）があっても、住所がな ければ誰も訪ねてはくれません。そこで、ホームページ上の住所を取得する必要があり ます。これが、ドメインというものです。 ドメインとは？ ドメインとは、インターネット上の住所です。 また、世界に重複する住所がないように、インターネットの世界でも、重複する住所 （ドメイン）は存在しません。 そして、ドメインは普段目にしているホームページアドレスやメールアドレスに利用 されています。 「そういえば、プロバイダがホームページアドレスをくれたような？」 そうですね。個人で勉強がてらに使用してみるのはいいかもしれません。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 8 Part1．Rental Server Service Agreement ただ、プロバイダのサーバースペースでホームページを開設すると・・・ • アドレスが長くて人に覚えてもらいにくい。 • 自分でも覚えられない。 • プロバイダを変えると使えなくなる。 • 広告として活用する場合、信用がおけない。（非商用アドレスの場合） こんなことを感じたことはありませんか？ [email protected] よ り、[email protected]の方が、信用がおけますよね。 そこで、ご商売でホームページを活用する方には、オリジナルドメインをおすすめして います。 オリジナルドメインのメリット プロバイダの間借りのようなホームページアドレスではなくて、自分の好きな言葉で 自分だけのオリジナルメール、ホームページアドレスを持つことができます。しかもド メインがなくならない限り、ずっと自分のメールアドレスとホームページアドレスを持 つことができます。 オリジナルドメインはビジネスにも最適です。「インターネットをビジネスに活用し たい！」 「会社を設立したいけれど…」このような時はオリジナルドメインを「会社名」 や関連する「商品名」で登録すれば、お客様が覚えやすい上に、インパクトも大きいは ず。何と言っても、プロバイダの間借りと、オリジナルドメインでは信頼度が大きく違 います。 ドメインの種類 gTLD： 世界中誰でも取得できるドメインです。「.com」 Generic Top Level Domain 「.net」「.org」「.int」「.edu」「.gov」「.mil」のう 一般トップレベルドメイン ち、一般の方が登録可能なドメインは、「.com」 「.net」「.org」です。 ccTLD： 「.jp」 「.us」など世界に 200 以上あります。原則と country code Top Level Domain してその国に在籍する人をドメイン登録対象とし カントリーコードトップレベルドメイン ていますが、「.tv」（ツバルという太平洋の小さな Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 9 Part1．Rental Server Service Agreement 島国のドメイン）などその国以外の人がドメイン登 録することができるドメインもあります。 新 gTLD 一般トップレベルドメインに 2000 年 11 月、 「.biz」 Generic Top Level Domain 「.info」 「.name」 「.pro」 「.aero」 「.museum」 「.coop」 の新しいドメインが追加されました。 日本で登録できる ccTLD「.jp」には、汎用、属性型、地域型というように 3 タイプに 種別されています。 汎用 jp ドメイン ○○○.jp 2001 年 2 月から登録受付が開始された JP ドメイン。 日本に在籍していれば個人でも登録でき、また登録数 に制限がありません。 属性型 jp ドメイン 「.jp」の前に登録者の組織や団体を表す文字列が使わ ○○○.co.jp れているドメインです。１組織１ドメインしか取得で ○○○.ne.jp きません。 ○○○.or.jp .co ・・ 株式・有限会社向け .ne ・・ ネットワークサービス向け .or ・・ 会社以外の団体向け .ac ・・ 教育機関向け etc。 地域型 jp ドメイン 地域型 jp ドメインとは tenjin.fukuoka.jp のように、 都道府県名と市区町村名で構成されたドメイン名のこ とです。個人でも登録可能ですが、１組織･個人につき １ドメインしか取得できません。 どのドメインを取得するか決まりましたか？ 「.jp」ドメインの取得は、他のものに比べて少し割高です。 特に、こだわらない方は、「.com」や「.net」を取得してみてはいかがでしょうか。 ドメインを取得するには？ ドメインは「レジストリ」という機関に管理されています。しかし、直接「レジスト Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 10 Part1．Rental Server Service Agreement リ」にドメインの申し込みをすることはできません。ドメインを取得するには、｢レジ ストラ｣といわれるドメイン登録業者に申し込む、または、 「レジストラ」に登録申請を 行う「ドメイン取得代行業者」を利用します。 「レジストラ」または「代行屋」を探さないとドメインの取得はできません。 興味のある方は、お調べになってください。 日本の「レジストラ」では【 お名前.com 】などが有名です。 ホームページを開設するためには、ドメインとサーバーが必要不可欠です。 そこで、北研では、ドメイン取得代行業者とレンタルサーバーをセットで申し込むとと てもリーズナブル、そして、信用のできるドメイン取得代行業者： 「ムームードメイン」 とレンタルサーバー：「ロリポップ！」を紹介したいと思います。とくに初心者の方に おすすめのプランです。（ビジネス用途には、Xserver をお勧めしています） ムームードメインで独自ドメインＧＥＴ! ロリポップ！でレンタルサーバーの契約をするには、 ① サブドメインプラン：ロリポップ！が用意したドメインを使用します。 ② 独自ドメインプラン：お客様で用意したドメインを使用します を選択する必要があります。 ここで、独自ドメインプランを選択する人におすすめなのが「ムームードメイン」です。 ロリポップ！のサブドメインプランを使われる方や独自ドメインをもう既にお持ち の方は、ささっと次のロリポップ！の契約へおすすみください。 ムームードメインについて 「ロリポップ！レンタルサーバー 」が運営する「ムームードメイン」は低価格のドメ イン取得サービスです。 年額￥６９３（税込）からドメインの取得が可能で、 「.com」 ドメイン（年額￥９５０（税込））なら「ロリポップ！レンタルサーバー」と組み合わ せても、年額 6 千円未満で利用でき、本格的なホームページ運営もお手軽な値段で始め ることができます。（※価格は異なることがありますので、詳しくは各サービスのサイ Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 11 Part1．Rental Server Service Agreement トをご確認くださいね。） ムームードメインが契約を締結しているレジストラは、米 eNom 社、お名前.com の ２社となります。ムームードメインで取得されたドメインはレジストラである【 eNom Inc. 】【 お名前.com 】にて管理されます。 お得！ムームードメイン＋ロリポップ！ 「ムームードメイン 」でドメインを取得された方は、 「ロリポップ！レンタルサーバ ー 」初期設定費用半額！￥３、１５０（税込）が半額の￥１、５７５（税込）となり ます。 また、レンタルサーバーとムームードメインと併用すると、面倒なＤＮＳの設定が簡単 にできて大変便利です。 ※ 取得したドメインで、 「ロリポップ！レンタルサーバー 」を契約される場合は、 必ず、 「ムームードメイン の コントロールパネル」よりご契約ください。直接 「ロリポップ！レンタルサーバー 」にてご契約されますとキャンペーンの対象外 となってしまいます。 ドメイン登録の流れ ドメイン登録の流れは、ムームードメインのサイトにあるお申し込みの流れを参照し てください。 ＵＲＬ：https://muumuu-domain.com/?mode=guide&state=order ここでは、簡単に説明します。 １． 取得ドメインチェック 下記のＵＲＬにアクセスして、自分が希望するドメインが既に登録されていないかチ ェックします。 http://muumuu-domain.com/ ① お申し込みフォームにある www. の後の入力欄に「.com」や「.jp」の前に希望 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 12 Part1．Rental Server Service Agreement するドメイン名を入れます。例えば、www.hokuken.comの場合は、入力欄に 「hokuken」と入力します。 ② 使用したいドメイン（.com、 .jp など）にチェックします。 ③ 「チェックする」ボタンをクリックします。 ２． 取得ドメイン検索結果が表示されます。 自分の希望するドメインが「登録できます！」となっていましたか？ 登録できるようになっていれば、「登録できます！」ボタンをクリックします。 ３． ユーザー確認 「初めて」を選択して、「お申し込みフォームへ！」ボタンをクリックします。 ４． お申し込みフォーム入力 ① ユーザー登録 ムームーＩＤとムームーパスワードを入力します。 ムームーＩＤはお客様のお好きな名前を設定できますが、忘れないためにもドメイ ン名（例えば hokuken.com の場合「hokuken」）のご利用をおすすめします。 ② お客様情報 お客様の情報をご入力ください。 ③ 取得ドメインと契約期間 a. 情報の公開：Whois 情報（ドメインを取得している方の情報）を公開するサ ービスです。「弊社の情報を公開する」か「お客様の情報を公開する」を選 択します。 ※ ドメインの登録情報は第三者へも公開され、一般の人も確認できる状態 で公開することが義務付けられています。プライバシーの保護のため、 「弊社情報を代理公開する」をおすすめします。 b. 契約期間：契約する年数を選択します。（年単位） c. 支払い方法：クレジット決済、コンビニ決済、銀行振込、郵便振替から選択 できます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 13 Part1．Rental Server Service Agreement ※ 請求書・領収書の発行はされていないそうなので、金融機関およびコン ビニからの控えが領収書となります。法人・団体の方で経理の関係上、 会社名の入った領収証が必要な場合は、 「登録者名＋会社名」で銀行・郵 便局からお振込みすることをおすすめします。 d. 「ご請求金額」を確認して、「お申し込み内容確認」ボタンをクリックしま す。 ５． お申し込み内容の確認 お申し込み内容を確認してください。確認後、 「利用規約を確認する」ボタンをク リックします。 ６． 利用規約に同意する 利用規約をよく読んで、問題なければ「契約に同意します」を選択して「お申し 込み」ボタンをクリックします。 ７． 登録完了のメールをチェックする 「【ムームードメイン】新規契約のご請求案内 」というタイトルのメールがお客 様のメールアドレスに送信されます。 ※ 登録完了メールには、ご契約内容・ムームーID 情報・コントロールパネルへの ログイン方法、等の重要な内容が記載されています。このメールは大切に保管して おいてください。 ふ～～ 登録が終わった～！・・・ いいえ、まだこの時点では「ドメインの取得」は完了しておりません。 あともう少しだけお付き合いください！ ★ ひとくちメモ ★ ご入金後、ドメインの取得をお客様ご自身で行います。チェックしたドメインが仮登 録されませんので、ご入金などに時間がかかってしまった場合、お客様がご希望されて いたドメインが他の誰かに先に登録されてしまう可能性があります。 契約→入金→ド メインの取得 の作業は、できるだけ時間をおかずにしましょう。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 14 Part1．Rental Server Service Agreement ８． ご入金 ご入金方法によって、手順は異なります。ここでは、ベーシックな銀行振込の場合を 記載します。 ① ムームードメインのホームページ上にある「コントロールパネル」にアクセスし、 ログインします。 コントロールパネル：http://muumuu-domain.com/?mode=conpane ② 左のメニューバーにある「料金お支払い」を選択します。 ③ ご契約内容の入金状態が未入金となっています。ここで、「お支払い」ボタンをク リックします。 ④ ご契約情報が表示されますので、ご確認の上「契約確定」ボタンをクリックします。 ⑤ 表示される「振込先」へお振込ください。 ９． ドメインの取得 ご入金されてもまだドメインは登録されていません。ご自分で以下の方法で登録して いただく必要があります。 ① ムームードメインのホームページ上にある「コントロールパネル」にアクセスし、 ログインします。 コントロールパネル：http://muumuu-domain.com/?mode=conpane ② 左のメニューバーにある「ドメイン操作 - ドメイン取得」を選択します。 ③ 「ドメイン取得」ボタンが有効になっていればクリックして取得します。 ※ ドメイン取得ボタンは、ムームードメインがご入金を確認してから有効にな ります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 15 Part1．Rental Server Service Agreement ここまでがドメインの取得でした。おつかれさまです！これで、あなただけのドメイ ンが取得できました。 ・・・ でも、住所があっても家がないと生活できないですよね？ そこで、ホームページやメールが暮らす家（サーバー）を契約しましょう。 ムームードメインからロリポップ！レンタルサーバーへの契約方法 コントロールパネルからログインしてください。左にあるメニューバーより「レンタ ルサーバー契約 - ロリポップ！」を選択します。「お申し込みはこちら！」をクリック します。表示された画面の「データ送信」をクリックし、ロリポップ！の契約を行って ください。 ムームードメインからロリポップ！の契約をすることで、ロリポップ！の初期設定費用 が半額になります。 ロリポップ！でレンタルサーバーの契約 ロリポップについて ロリポップ！レンタルサーバーは低価格です。 また、10 日間のお試し期間がありますので、もし満足いかなかった場合でも契約をキャ ンセルすることができます。 サービスプランとして、サブドメインプランと独自ドメインプランが設けられています が、どちらのプランも料金は、1 ヶ月コーヒー１杯程度’(270 円弱)です。 さらにお得なキャンペーンとして、女性、学生、サーバー移転、ムームーユーザーの方 は初期設定が半額です。（※サービス内容は異なる可能性がありますので、詳しくは各 サービスでご確認くださいね。） サブドメインプランと独自ドメインプラン ロリポップ！のレンタルサーバー契約プランは、2 つのプランが用意されています。 それぞれのプランのメリット・デメリットを検討して、お客様にあったプランを選択し Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 16 Part1．Rental Server Service Agreement てください。 サブドメインプラン ロリポップ！が用意した、８５種類のドメインの中からお好きなドメインを選んでい ただけるプランです。 詳細については、下記の URL を参照してください。 http://lolipop.jp/service/domain/sub/ ホームページアドレス： http://○○○.lolipop.jp お好きな文字列 ロリポップ!の用意している ドメインから選びます メールアドレス： ○○○@△△△.lolipop.jp サーバー別に英数字が入ります メリットとしては、ドメイン取得費用・維持費用がなんといってもかからないことです。 気軽にサイト運営をしたい方にオススメのプランです。 デメリットとしては、ロリポップ！で用意されているドメインが、 「ナウでヤング」 なことです・・・。 事業の紹介や商品の広告などにご利用されるには、ちょっとあか抜けているかも・・？ （筆者が古い人間なのかもしれませんが） 少しだけ、怪しさが漂います。 お菓子メーカーとかはいいかもしれませんね！ サブドメインプランでご利用になれるドメイン： http://lolipop.jp/service/domain/sub/ Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 17 Part1．Rental Server Service Agreement 独自ドメインプラン お客様が取得されたドメインをロリポップ！レンタルサーバーで、運営することがで きるプランです。 ホームページアドレス： http://○○○.com ご自分で契約したドメイン メールアドレス： □□□@○○○.com お好きな名前 詳細については、下記の URL を参照してください。 http://lolipop.jp/service/domain/doku/ メリットは、完全に自分だけのオリジナルアドレスを手に入れた上で、低価格なことで す。また、ホームページを見ている人の信用度も比べものにならないほど高いです。 デメリットは、ドメイン取得費用・維持費用は別途必要なことです。 独自ドメインを新しく作られる場合は、ムームードメインを使いましょう。ロリポップ の初期設定費用が半額になります。 サービス料金は、以下の URL より参照ください。 http://lolipop.jp/service/ryokin/ レンタルサーバー契約 下記のＵＲＬよりお申し込みいただけます。 http://lolipop.jp/order/flow/ Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 18 Part2．Install and setting Part2． INSTALL AND SETTING Quick Homepage Maker インストールと設定 3 時のおやつを食べながら設置！ Quick Homepage Maker のインストール Part2 では、Quick Homepage Maker のインストールと初期設定について説明します。 レンタルサーバーの契約が終了していることが必須です。まだ未契約の方は、「Part1. Rental Server Service Agreement」をご参照ください。 なお、会員サイト内に「インストール方法」の動画を用意しています。 CONTENTS Quick Homepage Maker とは Quick Homepage Maker 設定の準備 インストール デザイン設定 プラスアルファの機能の設定 プラグインの設定 Google Map の設定 システムの更新 バージョンアップ その他 設定に関する質問 オリジナルデザイン作成 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 19 Part2．Install and setting Quick Homepage Makerとは Quick Homepage Maker は、Wiki と呼ばれる技術の一つです。Wiki とは、ホームペ ージに情報を書き込み、情報を共有する仕組みのことを指します。様々な Wiki が存在 しますが、日本人の手によって精力的に開発されているのが、PukiWiki です。PukiWiki は、PHP 言語を用いて作成され、日本の Wiki で最も普及しています。 Quick Homepage Maker は、この PukiWiki を改良し、ホームページ作成用のツール として公開しているものです。 PukiWiki に限らず、Wiki は、不特定多数の人々によってホームページを作る仕組み です。簡単にホームページが作れるように、工夫されています。HTML や CSS を覚え なくても、誰でも簡単にホームページに書き込みができます。 この Wiki は、活用次第で様々な道具に変身します。もちろん、Wiki 本来の使い方も 可能ですし、編集をロックすることで、ホームページ作成システムとして利用すること も可能です。また、社内ネットワークに Wiki を構築して、社内の情報共有に役立てる ことも可能です。つまり、使い方はあなた次第です。 しかし、好きなように使える事が逆に難しさを作っています。何でも作れる代わりに、 自分でルールを作る必要があります。Wiki を使い始めたときに分からなくなるのは、 「Wiki の書き方」ではなく、 「どのようなルールで使うか？」で迷ってしまうのです。 本書では、Wiki の編集をロックして、ホームページ作成システムとして利用します。 Quick Homepage Maker のデザインは、自動化されています。しかも、プロのデザイ ンを採用することで、商用のホームページとして十分活用できます。 PukiWiki は、GNU GPL ライセンスに基づいて開発されているオープンソースソフト ウェアです。PukiWiki プログラムを応用して作られたプログラムソースは、GPL ライ センスに帰属します。なお、サービスやマニュアルは、これに該当いたしません。 Quick Homepage Maker設定の準備 この Quick Homepage Maker に関するご質問は、PukiWiki Developer Team ではな く、北摂情報学研究所にお願い致します。 この章では、インストールの前提知識を簡単に説明しておきます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 20 Part2．Install and setting システムの設置の手順の全体像 早速、インストールの大まかな流れを説明します。 分からないことがあれば、ご遠慮なく [email protected] へどうぞ。 設置の全体像は、以下のようになります。 1. インストール先情報の入力(レンタルサーバーの準備) 2. 初期状態の Quick Homepage Maker をインストール 3. デザインの変更 4. サイト情報の設定 それぞれを、簡単に説明していきますね。 Pukiwiki あなたのレンタル サーバー 基本システム Install Install System System 通信 FTPサーバー名 FTPユーザー名 デザイン情報 デザイン情報 パスワード 設置先フォルダ 事前にご自身でレン タルし、ドメイン設定 などを行って下さい Install System内だけで処理 設定情報 設定情報 イメージ図 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 21 Part2．Install and setting 1. インストール先情報の入力 もう、レンタルサーバーの準備は整いましたか？ 設定の為には、レンタルサーバー契約をした際に得られる以下の情報が必要です。 z FTP サーバー名 z FTP ユーザー名 z FTP パスワード z 設置先フォルダ まずは、インストール時に使用する「インストールシステム」を表示させます。 会員サイトの左メニューの中にある「インストールと設定」と書かれたボタン（赤丸の 箇所）をクリックします。 ・・・ クリック 少し下へスクロールします 続いて開いた画面で「インストールシステムにアクセス」と書かれたホタンをクリック してください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 22 Part2．Install and setting クリック クリックすると、インストールシステムへのログイン画面が表示されますので、 ①から④までの必要事項を入力しログインします。 （※なお、最下部のホームページアドレスという項目は入力必須ではありませんので、 ホームページアドレスが明確にお分かりになる場合のみご入力下さい） ① ② ④ ③ 例えば、ロリポップであれば、以下のような情報がメールで送られてきます。レンタ ルサーバーから配布された情報を基に、ログインをしてください。 なお、まだレンタルサーバーと契約されていない方は、上図の空白が埋められませんの で、まずはレンタルサーバーと契約して下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 23 Part2．Install and setting ① ② ③ ログインできない場合、FTPサーバー、ユーザー名、パスワードが間違っています。 また、④の「設置先フォルダ」が見つからない場合も、ログインできません。 （※サブドメインやサブフォルダを活用する場合、事前に設置用のフォルダを作成してくださ い。 ） 設置先フォルダについて 主なレンタルサーバーとインストール先 レンタルサーバー 設置先フォルダ（初期インストール先） ロリポップ 何も入力しない Xserver 独自ドメイン名/public_html さくら www 特殊な設定が必要です（後述） レンタルサーバーによって異なりますが、ほとんどのレンタルサーバーの場合、管理 画面があり、管理画面から「サーバーの情報」を知ることができます。例えば、ロリポ ップであれば、 http://user.lolipop.jp/ にアクセスします。 インストール先のフォルダ(ディレクトリ)は、サーバーによって違います。ロリポッ プの場合でメインドメインに設置する場合は、特に何も入力・指定せずにインストール することになります。 Xserver(http://www.xserver.ne.jp/ )の場合は、「独自ドメイン名/public_html」 という Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 24 Part2．Install and setting フォルダにインストールすることになります。インストール先は、ご自身でお確かめ下 さい。 PHP(CGI版PHPも可)が利用できるサーバーなら、どこでも動きます。 ※ なお、サブドメイン、マルチドメインを利用する場合は、各レンタルサーバーの仕様に基づ いて設定してください。サブドメインの利用方法は別冊子でお伝えします。 2. 初期化インストール ログインが成功すると、以下のような画面になります。 まずは、「インストール」から行います。画面の説明を読み、インストールボタンを押 してください。 クリック インストールでは、Quick Homepage Maker 関連ファイルをすべて削除し、インスト ールを行います。既にホームページを設置されている方は、ホームページを間違って消 さないようにお気をつけ下さい。今までのデータが消えてしまいます。 インストールボタンを押すと、以下のような確認画面が現れます。インストール先を 確認して、インストールボタンを押してください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 25 Part2．Install and setting なお、オプションの index.htm （又は index.html） を削除する箇所についてですが、 Quick Homepage Maker は、index.php ファイルを使います。index.html, index.htm ファイルが存在していると、QHM のページが表示されません。そこで、ホームページ を公開するには、index.html や index.htm ファイルを削除、または名前を変更する必要 があります。 従って、予めご自身で「index.html」 「index.htm」を設置されている場合で、かつ、そ のファイルを残しておきたい場合は、「削除しない」を選択してください。 しばらく待つと、設置完了です。簡単ですよね？ Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 26 Part2．Install and setting 完了ボタンを押すと以下のような画面が現れます。 これだけで、サーバーへのインストール（設置）は完了なので、続いては、ホームペ ージのデザインを設定しましょう。 上図の「設定画面へ戻る」をクリックすると、以下のような設定画面が表示されます。 先程まではインストールしか表示されていませんでしたが、QHM のインストールが一 度完了すると、デザイン変更などを行えるようになります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 27 Part2．Install and setting ・・・ ３. デザイン設定 次にホームページのデザインを設定します。画面の説明を読んで、「デザインの変更」 ボタンを押して下さい。 「デザインの設定」という画面が表 示されます。 下にスクロールすると、68 種のデザ ・・・ インが見られます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 28 Part2．Install and setting この「デザインの設定」画面で、使用するデザインを決定していきます。 3.1 スタイルの選択 ここでは、ホームページの全体的な色遣いを決める「デザインの選択」を行います。 60 種類以上のデザインテンプレートを見ながら、決めることができます。デザインテン プレート（見本）を見ながら、使いたいデザインの名前の横のラジオボタンをクリック してください。 ラジオボタン ・・・ 好きなデザインを選んだら､一番下にある「確認」ボタンを押して下さい。 すると下の図のように、入力したロゴとスタイルが確認表示されますので、問題がなけ れば「更新」ボタンを押して下さい。 基本的に、「今すぐデザインを変更する」にチェックを入れておいて下さい。 「後で変更する」は、デザインをすぐには変更せず、QHM 内にデザインデータだけを 保存したい場合などのみにご利用下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 29 Part2．Install and setting 少し待つと、以下のような画面が表示され、デザインの設定が完了します。 （※もしエラー画面が表示された場合は、「デザインの設定」の画面でデザインの横の ラジオボタンにチェックが入っているかを確認して、もう一度設定し直して下さい。） 3.2 デザインを変更したくなった場合 やっぱり別のデザインを選びたくなった場合は、先ほど「デザインの選択」を変更して いった手順と同じように操作していって下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 30 Part2．Install and setting インストールシステムでの初期設置完了 基本的には、この「インストール」と「デザインの設定」が完了すると、インストール システムを使用したQHMの設置は完了です。あとは、あなたのホームページ上から、 細かい設定を行っていきます。 （※サーバーによっては、あと少し設定が必要な場合があります。詳細は後述しますの で今は、今後の操作の流れを見ていてくださいね） ホームページを表示させる 続いては、あなたのホームページから設定を行いますので、一度インターネットであな たのホームページのアドレスを入力して、初期状態の Quick Homepage Maker を表示 してみましょう。 アドレスバーに URL を入力 ごく希に、Yahoo!の検索からでしか、ホームページを開いた事がない人がいます。あな たのホームページが検索結果に出てくるには、「検索エンジン登録」が必要です。 従って、最初は、「あなたのホームページアドレス」を上図のように、ブラウザ（イン ターネットエクスプローラーなど）のアドレスバーに入力して、ホームページを開いて 下さい。 ホームページＵＲＬの入力間違いにご注意くださいね。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 31 Part2．Install and setting すると、以下のように初期状態のホームページが表示されます。 ホームページは表示されましたか？ まずは初期状態のホームページが表示されるよ うにしてくださいね。 【補足解説】正常にホームページが表示出来ない場合について ホームページが正常に表示出来ない場合は、原因として ・QHM を設置するフォルダが間違っている ・サーバーの設定による問題（PHP に未対応、特殊な設定が必要 など） といったことが挙げられます。対処法について、それぞれ詳しく解説します。 【原因１】QHMを設置するフォルダが間違っている ホームページには、サーバー毎に、「ホームページのデータを設置しなければいけない 場所」というのが決まっています。この正しい場所に設置しないと、いくらホームペー ジへアクセスしても正常に表示されません。 例えば、代表的なサーバーを例にすると、以下のようになります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 32 Part2．Install and setting サーバーのサービス名 データの設置先フォルダ ロリポップサーバー 指定なし Xserver ドメイン名/public_html さくらレンタルサーバー www ヘテムル web ハッスルサーバー www XREA public_html/ドメイン名/ ご覧のように、サーバーによってデータ設置先のフォルダは様々ですし、サーバーの仕 様変更などによって変わる可能性もありますので、上手く行かない場合は、お使いのサ ーバーのホームページをご覧頂き、ご確認ください。 データの設置先フォルダは、インストールシステムにログインする時の、「設置先フォ ルダ」の入力欄で指定することになります。 インストールシステムの 「設置先フォルダ」で、 どこのフォルダに設置するかを 指定しています 従って、設置先フォルダが間違っていないかを確認し、間違っていれば、再度インスト ールシステムへログインし直して、インストールを行ってください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 33 Part2．Install and setting （※サブドメインをご利用の場合は、設置先フォルダが、初期の設置場所とは 若干異なりますので、ご注意ください） 設置先フォルダが分からず解決出来ない場合は、会員サポートサイトのトップページに あります、問い合わせフォームから弊社にお問い合わせください。 【原因２】サーバーの設定による問題の場合（PHPに未対応、特殊な設定が必要） ・PHP に未対応の場合 QHM が動作するには、サーバーが PHP に対応している必要がありますが、プロバイダ から提供される無料ホームページスペースでは、PHP に対応していない事が多く、また 一部の有料レンタルサーバーでも稀に PHP に対応していない事があります。 （※一部のサーバーでは、PHP に対応していると明記していても実際には動作出来ない 場合があります。例：yahoo ジオシティーズ有料版 など） お使いのサーバーが PHP に対応しているかは、そちらのサービスのサイトをご覧頂い たり、サーバーのサポートへ直接お問い合わせ頂くことが最も確実です。 もしも、PHP に対応していない場合は、PHP に対応しているサーバーをご利用頂く必 要があります。 ※多くの有料レンタルサーバーでは、PHP に対応しています。 ・特殊な設定が必要な場合 サーバーによって、ホームページを表示させる為の設定が様々異なります。一部のサー バーでは、単に QHM をインストールするだけでは、正常に表示や編集を行えない場合 があります。 現在確認しているサーバーでは、「さくらレンタルサーバー」「お名前.com のサーバー」 などがあります。こちらの場合は、そのサーバー専用に特殊な設定を行って頂く必要が あります。後ほど解説する、 「サーバー別設定」という項目から行いますので、詳細は、 後述の「サーバー別設定」の解説をご覧ください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 34 Part2．Install and setting とりあえず、ここまでの段階でホームページを表示できましたか？ ホームページが表示できましたら、続いてホームページの細かい設定を行っていきます。 ロゴやサイト情報を設定する まずは、あなたのホームページへアクセスして、ホームページを表示させてください。 その後、ホームページの右下にある、「QHM」という箇所をクリックします。 QHM と書かれた箇所をクリックします すると、編集用のユーザーID とパスワードを入力する画面が表示されますので、ここに 予めこちらで設定している、初期ユーザーID とパスワード（ユーザーID：homepage パスワード：makeit）を入力します。 ユーザー名： homepage パスワード： makeit と入力します 入力ミスが無く、認証が正常に完了すると、「認証されました」という画面に変わりま Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 35 Part2．Install and setting すので、この画面内の「トップに戻る」をクリックしてください。 トップへ戻ると、下図のように、ページ左側に編集を行う為のボタンが複数表示されま すので、この中の「設定」ボタンをクリックします。 すると、ホームページの基本情報やロゴ画像を設定する為の画面が表示されます。 ここでは、以下の 3 つの項目だけを設定します。 ② ③ ① Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 36 Part2．Install and setting ① ユーザー名、パスワードの変更 ユーザー名、パスワードの変更をクリックすると、以下の画面が開きます。 ここで、お好きなユーザー名とパスワードを設定してください。 必要事項を入力して、 「設定を確認する」をクリックすると、確認画面が表示されます。 確認画面では、パスワードは表示されていませんが、正しく設定されますのでご安心く ださい。 パスワードの変更後は、再度ログインを要求されますので、変更したユーザー名とパス ワードを使用して、再度ログインを行って下さい。 （※編集用の ID とパスワードは、弊社では一切把握していませんので、お忘れになら ないようご注意ください。もしもお忘れになられた場合は、後ほど解説している「プラ グインの設定」から、パスワードを初期化してご対応下さい） ② デザインの変更 「デザインの変更」をクリックすると、ロゴ画像を設定することができます。 Quick Homepage Maker は、大別すると以下のような３つのパートでできています。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 37 Part2．Install and setting 上の図のロゴ部分に「画像を使う（イメージ）」のか、 「テキスト文字」を使うかを選 べます。画像を使う場合、ご自身でロゴ部分の画像を用意してください。 画像を使うと、弊社の販売ページ http://www.1st-easy-hp.com/ のように凝ったデザ インのロゴ部分を作ることができます。一方、テキスト文字を使うと、下の図のように 会社名などを表示するだけのシンプルなものになります。 図：画像を使うデザインと、テキストを使うデザインの違い 上の図では、左が画像を使ったもので、右がテキスト文字を使ったものです。 左の場合は、スキー場の様子を背景にして、北摂情報学研究所という文字を書き足し た画像を作成しました。その画像をつかって、ロゴ部分を作っています。 右のロゴは、テキスト文字です。左に比べればアピール力は落ちるもののシンプルで す。こちらは、ロゴを準備せずともすぐに設定できます。 「イメージ（画像） 」か「テキスト」どちらを使うかを決定して下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 38 Part2．Install and setting 使用する方に、チェックを入れる 「変更なし」では、現在使用しているロゴの設定をそのまま使用します。これは「ロゴ を変更せずにサイト全体のデザインテンプレートだけを変更したい」場合のみに使用し ます。 「画像を使う」場合は、チェックを入れた後に使用する画像を指定する必要があります。 参照ボタンを押して、予めご自身で用意しておいたロゴ画像のファイル名を指定して下 さい。 「テキストを使う」場合は、、ロゴ部分に表示したい文字を入力してください。なお、 テキストを使っている場合は、ページタイトルがそのままロゴ部分のテキスト文字とし て使われます。ですので、「ページタイトル」を変更したくない場合やイメージを使用 している場合には特に変更しなくて結構です。 「デザインテンプレート」の選択箇所には、現在保持している全てのデザインデータが 表示されます。インストールシステムの「デザインの変更」時に「後で変更する」を選 んだデザインが保存されています。サイト全体のデザインを変更したい場合は、変更し たいデザイン名を選択してください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 39 Part2．Install and setting （※なお、 「後で変更する」を選んでいない場合は、1 つのデザイン名しか表示されませ ん。） 【補足解説】ロゴ部分にイメージを使用する際の注意 イメージを使用する場合には、予めご自身で画像を用意して頂く必要があります。その 画像のサイズは、以下の図の通りにして下さい。 750px 図：ロゴ画像のサイズ 750px(ピクセル)以外のサイズにすると、画像がぼやけてしまったり、デザインがずれま すのでご注意下さい。 （※なお、g_green06 と、g_blue06 の 2 つのデザインのみ、横幅が少し大きくなって います。その為、この 2 つのデザインを使用する場合は、ロゴ画像を 786 px で作成し て下さい。） ③ サイト情報設定 次にホームページに関する情報を入力していきます。画面の説明を読んで、「サイト情 報変更」ボタンを押して下さい。 続いて、開いた画面（「設定ファイルのアップロード」）の項目を埋めていって下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 40 Part2．Install and setting スクロールすると 右の画面も表示されます 設定する項目は、「タイトル文字」「ヘッドコピー」といった計 16 個の項目です。そ れぞれ、簡単に役割を説明します。 • タイトル文字（ページタイトル） ブラウザのタイトルバーに表示されるタイトルです。ホームページのタイト ルを入れましょう。また、ロゴ部分を「テキストを使う」設定にしている場 合、このタイトル文字がロゴとして表示されます。 • ヘッドコピー ホームページの一行目に表示される文字です。あなたの「アピールポイント」 を書くと良いでしょう。検索エンジンにも使われる大事な部分です。 ページタイトル ヘッドコピー Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 41 Part2．Install and setting • サイト管理者、所在地、連絡先 Quick Homepage Maker では、全てのページの末尾にフッダーという場所があ ります。そこにサイト管理者の名前や会社名、所在地、連絡先を表示できま す。 所在地：会社やビジネスなどの場合は、会社の住所を書きます。個人（趣味 サイト）の場合などはアバウトに住所を書くと良いでしょう。 連絡先：会社などは電話番号、個人なら適当 (contact me by email など)で 良いでしょう サイト管理者：サイトの管理者名を入力します（会社名、組織名など）。 個人ならニックネームでも、何でもいいです。 • キーワード ホームページの内容に関連の深いキーワードを 20～30 語書き出します。 SEO 対策にも使用される、キーワードを設定します。 （<meta name="keyword"... を指定するのと同じことになります) 入力の際は、各キーワードを複数、半角文字のコンマ「,」で区切ります ホームページ,作成,ソフト,ソフトウェア,ツール といった感じです。 • 説明 あなたのホームページを紹介する文章を書いて下さい。なるべく大事なキー ワードを使うようにして、ホームページを見たくなるような内容にして下さ い。なお、文章は改行しないで下さい。 検索エンジンでの、検索結果に使われたりします。(<meta name="description" を設定することになります)。 • その他のタグ設定 head タグ内に特殊なソースを挿入する必要がある場合に入力します。例えば、 Google ウェブマスターツールなどを使う場合に利用します。しかし、基本的 には使用しませんので、空白のままで結構です。 • アクセス解析タグ アクセス解析サービスを利用したい場合は、ここに解析用のタグを導入して ください。最初から、アクセス解析を利用すると決めている方は、後で出て Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 42 Part2．Install and setting くるアクセス解析の項目を読んで、後ほどここ設定を書き込んでください。 アクセス解析を利用しない場合や、よく分からない場合は空白のままで結構 です。 • 管理者ページ 管理者用の別のサイトを持っていれば、そこへのリンクを書きましょう。な ければ、あなたのホームページのアドレス(URL)で構いません。 • 外部リンクのウィンドウの開き方 ホームページ内で外部リンクをした時に、リンク先を表示する際、ウィンド ウをどのように開くかを指定します。「別ウィンドウで開く」が標準的な方 法です。なお、外部リンクをクリックした時も、同じページ内で画面が切り 替わってほしい場合は、「別ウィンドウを開かない」を選んでください。ど れだけ外部リンクをクリックしても、別ウィンドウを、常に 1 つしか表示し ないようにするには、「特定のウィンドウで開く」を選んでください。 • 別ウインドウで開かない設定 特定のドメインのみ、別ウィンドウで開かないように設定できます。対象の ドメイン名をご入力下さい。（入力例：yahoo.co.jp） • 管理者認証へのリンク表示 ホームページを編集するために必要な、管理者ページへのアクセス方法を指 定します。こちらは、特にこだわりが無い場合は、「右下の QHM リンクから」 をお選びください。 • ライセンス表記 ホームページ右下に表示される QHM ライセンスの表示、非表示を設定します。 どうしてもライセンス表記を削除されたい場合にご使用下さい。 なお、ライセンス表記を非表示にした場合、認証ページへの隠しリンクも表 示されなくなりますので、編集時は、以下のルールに従った URL にアクセス して、ログインして下さい。 http://あなたのホームページアドレス/index.php?QHMAdmin • ショートカット 編集時に、ショートカットキーを使うか設定ができます。ショートカットキ ーとは、マウスを使わずにキーボードで素早く操作する方法です（パソコン 上級者向き）。例えば、Windows IE 系ブラウザの場合は、 「Alt+Shift + 以 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 43 Part2．Install and setting 下のキー」 を押して、Enter を押す事で操作を行えます。 「編集：e プレビュー：p ページの更新：s 」 他にもいくつかありますので、詳しくは会員サイトで「ショートカットキー」 と検索してみてください。基本的には「利用しない」で問題ありません。 • 自動リンク 基本的には「利用する」にして下さい。ページ名が長く、 「'」や「"」を利用 し、QHM が正常に動かない問題が発生した場合にご変更下さい。 必要事項の入力が終了しましたら、一番下の確認ボタンを押して下さい。 問題がなければ入力した項目の確認画面が表示されますので、 ページ下部の「設定する」ボタンをクリックして設定を行ってください。 設定が完了すると、以下のような画面になるので、 「ここをクリック」と書かれた箇所をクリックしてください。これにより設定が反映さ れ、設定完了です。 以上で、基本の設定は全て完了です。 お疲れ様でした。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 44 Part2．Install and setting ここまでの「初期化インストール」「デザインの設定」、「サイト情報の設定」が終われ ばホームページの基本設定が終了しましたので、実際にホームページの編集を行うこと ができます。 ここまでの手順を少し振り返りますと、まずはインストールシステムで、「インストー ル」と「デザイン設定」を行いました。そして、あなたのホームページ上で、パスワー ドの変更やロゴの設定、「サイト情報の設定」を行いました。 サイト情報変更やロゴ変更は変更する機会が多いので、変更の仕方を覚えておいて下さ いね。 インストールシステム上で行った設定 ホームページ上で行った設定 図．これまでに、行った設定 次に説明する、「プラグインの設定」や「サーバー別設定」などをする必要がない場合 は、以上で設定が終了です。以下では、今すぐに必要な機能ではないですが、インスト ールシステムのその他の機能について解説していきます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 45 Part2．Install and setting プラスアルファの機能の設定 ここまでの手順では、インストールシステムでは、「インストール」と「デザインの設 定」しか行いませんでしたが、インストールシステムにはその他にも、今後ホームペー ジを作成していく中で便利な機能を用意しています。 以下では、インストールシステムのその他の項目の詳細について解説していきます。 図．インストールシステムのその他の項目 1. プラグインの設定 プラグインとは、追加機能のことです。このマニュアルではよく使用する２つのプ ラグインの設定方法を説明します。 一つは、ホームページを編集する為のユーザーID とパスワードを忘れた場合に、パス ワードを初期化する為の設定方法です。 もう一つは高機能な地図であるGoogle Mapを使うための設定方法です。この地図を実 際に触ってみたい方は、 http://www.1st-easy-hp.com/?Map をご覧下さい。 では、実際に設定をしていく為には「プラグインの設定」を押して下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 46 Part2．Install and setting ・・・ 続いて、「パスワードの初期化」「GoogleMaps の設定」について説明します。 パスワードの初期化 QHM では、ホームページの編集をする時に、最初にあなたのホームページを表示させ、 直接そのホームページを編集していきます。 その際には、あなたしか編集ができないように、 「編集用の ID とパスワード」が必要に なります。QHM をインストールした直後は、以下のようになっています。 ユーザーID： homepage パスワード： makeit 編集用の ID とパスワードは、後ほど好きなものに変更できますが、ご自身で設定した 編集用の ID とパスワードを忘れてしまう人がとても多いです。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 47 Part2．Install and setting そこで、パスワードを忘れてしまった場合に、ID とパスワードを初期化する為の設定を 用意しています。もしもホームページ編集用の ID とパスワードを忘れてしまった場合 は、こちらから「パスワードの初期化」を行ってください。 再設定を行うことで、初期化できます。 Google Mapの設定 続いて、GoogleMap を使用する為に必要な設定について解説します。 Google Map を使うために認証コードを取得する必要があります。以下のホームペー ジから取得できます。 • Google Maps API Keyの入手 http://www.google.com/apis/maps/signup.html ページをスクロールして、利用規約に同意するためにチェックを入れ、あなたのホー ムページのURL(ドメイン)を入れます。例えば、http://www.hokuken.com/などです。 入力したら、「Generate API Key」ボタンを押します。既に Google アカウントをお 持ちであれば、Google アカウントを入力してください。初めて利用する場合は、Google アカウントを取得してください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 48 Part2．Install and setting 図：Google マップを利用するためのキーを入手する１ 図：Google アカウントでログイン。ない場合は新規に作る 図：Google マップを利用するキーを取得する アカウントがない場合、「今すぐアカウントを作成」をクリックします。その後、必 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 49 Part2．Install and setting 要事項を記入し、アカウントを作成して、ログインしてください。すると、キーを取得 することができます。最終的に、上の図のような状態になります。 Your key is: 以下のアルファベットと数字の羅列がキーです。このキーを使って設定 を行います。 Key を入手しましたら、以下のページを開いてください。 クリック 先ほど取得した Google Maps API Key を入力 入力したら、確認を押します 実際に、ホームページに地図を表示するには、上記の設定に加えて、ホームページを編 集していく必要があります。その説明は、会員サイト内で詳しく解説しています。 （※「GoogleMap を使う方法」というキーワードで検索するとすぐに見つかります） プラグイン設定の項目には、既に解説した「パスワードの初期化」と「GoogleMap の 設定」以外に、「携帯サイトの転送設定」という項目があります。こちらは、携帯電話 でホームページにアクセスされた際に、自動的に転送する URL を指定できます。 （※既 に携帯専用サイトをお持ちの場合などに便利です）画面の指示に従って、ご入力下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 50 Part2．Install and setting その他の機能につきましては、最新版 QHM では、QHM の機能として統合しています。 会員サイト内で詳しく解説していますので、検索ボックスなどで、検索しご参考になさ ってください。 2.「 システムの更新」と「バージョンアップ」 「システムの更新」と「バージョンアップ」は、弊社で行う QuickHomepageMaker へ の改良を、あなたの QHM へ反映させるために必要になります。改良を行った際には弊 社からメールで連絡致しますので、その際に「システムの更新」か「バージョンアップ」 を行って下さい。 ※「システムの更新」か「バージョンアップ」か、どちらを行うかは、あなたの QHM のバージョンによって異なります。お使いの QHM のバージョンは、ホームページの右 下の箇所で確認できます。 この数字を見てください Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 51 Part2．Install and setting 下図のように、現在の QHM のバージョンによって、どちらを行う必要があるかを明記 していますので、そちらを参考に最新版にシステムを更新してください。 「システムの更新」を押した流れは次の図のようになります。「システム更新」ボタン を押すと以下のような画面が表示されますので、「更新」ボタンを押して下さい。 少し待つと右の画面になりますの で，「完了」を押して下さい。 以上でシステムの更新は終了です。 「バージョンアップ」もほぼ同様の手順となります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 52 Part2．Install and setting ３．サーバー別設定 サーバー別設定は、お使いのサーバーの特殊な設定により、通常の QHM のインストー ルだけでは正常にホームページの表示や編集が出来ない場合のみ使用します。 例えば、さくらレンタルサーバーやお名前.com のサーバーなど、特殊なレンタルサー バーに対して設定を行います。まずは、「サーバー別設定」ボタンをクリックします。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 53 Part2．Install and setting さくらインターネットサーバー専用 「さくらレンタルサーバー」と「お名前.com のサーバー」の方は、単に QHM をインス トールしただけでは、ホームページが表示できません。そこで、上の図のように、「さ くら専用設定」をクリックし、設定をお願いいたします。 （※さくらレンタルサーバーと同じ設定になっているサーバーの場合も、この専用設定 を行うことで正常にホームページを表示できるようになります。） ・リンクが正常に動作しないサーバー専用 ・セッション認証が正常に動作しないサーバー専用 この 2 つは、サーバーの特殊な設定の影響で、ホームページは正常に表示されるけれど、 いざホームページを編集しようとした時に、正しい ID とパスワードを入力しても編集 画面に入れないなど、正常に編集できない状態の場合に使用します。 こちらの特殊な設定になっているかの判断は、少し難しいかもしれませんので、ホーム ページの編集が出来ない場合は、弊社にお問い合わせください。（※会員サイトのトッ プページに、問い合わせページへのリンクを設置しています） Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 54 Part2．Install and setting 通常の設定に戻す サーバー別設定で行った操作を、すべて初期化する為のボタンです。 ほとんど使用することはないでしょう。 ４．アンインストール アンインストールとは、作成した QHM のデータを全て削除することです。 1 からホームページを作成し直したい場合などに、 「アンインストール」を実行してくだ さい。 （※一度、アンインストールを行うと、2 度と以前のデータには戻せません。 実行される際には、くれぐれもご注意ください。） 以上で、ちょっと退屈なインストールシステムの解説は終了です。 続いては、いよいよホームページを編集していきましょう！ Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 55 Part3．Update your site Part3． UPDATE YOUR SITE ホームページ更新マニュアル いつでもどこでも更新できる！ 自分でホームページを更新する！ Part3 では、ホームページを更新する方法を説明します。Quick Homepage Maker の設 定は、すでに終了しているものとして進めていきます。インストール等が終わっていな い方は、「Part2．Install and Setting」をご参照ください。 この章は、細かく読むより、流し読みしてください。実際に作る作業をしながら読むと 理解が進みます。また、先に会員サイト内の「動画マニュアル」で動きを確認しておく と、理解しやすいです。そして、必要なことだけを「そのときに」学ぶと意識すると良 いでしょう。 CONTENTS Quick Homepage Maker の概観と仕組み 57 Quick Homepage Maker でホームページを作る手順 65 作りながら学ぶ 68 基本操作説明 72 ページの内容の書き方 77 便利な機能 86 枠・アクセスカウンター・目次・注釈・HTML 貼り付け・その他 画像を貼り付ける方法（詳細） 94 表の活用方法 101 公開予定表（カレンダー）を作る方法 104 Google マップを設置する 107 登録フォームの作り方 109 メールフォーム・まぐまぐ！フォーム Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 56 Part3．Update your site Quick Homepage Makerの概観と仕組み まずは、各部の名称などを説明します。何度も言いますが、覚えなくていいですよ。習 うより、慣れよの精神で読んでください。 ※ ここで紹介する方法は、北摂情報学研究所で改良されたQuick Homepage Makerが対象です。もとの PukiWikiとは、少し違います。不具合、質問などは、PukiWiki Developer Teamではなく、北摂情報学 研究所にお願いします。 [email protected] Quick Homepage Makerの全体像 Quick Homepage Maker は、全部で 7 つのパートに分かれています。 ロゴ ナビゲーター メニュー 本文 ツール(道具) ナビゲーター2 フッター Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 57 Part3．Update your site 「ロゴ」は、あなたの会社のイメージが入っています。ページが変わっても、このロゴ は常に表示されています。このページからロゴを変更することは、ありません。 「ナビゲーター」は、「ウリ」の情報にアクセスしやすいように作ります。ここは、自 分で変更可能です。 「メニュー」も、ホームページの情報にアクセスしやすいように作 ります。ナビ部分よりも更に具体的な項目を列挙すると良いでしょ う。 「本文」は、一番変更する頻度が多いと ころです。一度書いた文章も何度でも変 更可能です。画像も貼り付けることがで きます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 58 Part3．Update your site 「ツール」は、道具のことです。現在、表示されているページ を更新するには、このツール部分にあるボタンを押すと、編集 する状態になります。詳しくは後ほど説明します。 ツールはページの下部にも 1 行で表示されています。 この 7 つの中で、一番重要なのは「ツール」部分です。 「ツール」 部分の編集を使って、ホームページを更新します。更新された ページは、「本文」部分に反映されます。 部分 編集可能 編集頻度 備考 ロゴ × × 会社のトレードマーク ナビゲーター ○ △ 文書のガイド役（上部） ナビゲーター２ ○ △ 文書のガイド役（下部） メニュー ○ ○ 文書のガイド役（横） 本文 ○ ◎ 伝えたいメッセージ ツール × × 編集ボタンなど(重要) フッター × × 管理者に関する情報 本文の編集の様子 本文の編集方法の大まかな流れは、以下のようになります。 認証タイプによって、若干行う操作が異なります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 59 Part3．Update your site ①簡単タイプ ②簡単認証タイプ ③認証ページ非表示 タイプ 編集したいペー ジを開く ライセンス情報の 「QHM」をクリック 認証ページの URL を 入力し、移動する 初めての場合 は、認証 認証ページで認証 認証ページで認証 編集したいページを 開く 編集したいページを 開く 編集・更新 編集・更新 編集・更新 認証ページへのアクセス方法は、以下のいずれかになります。 ①「簡単タイプ」フッターに常に編集メニューを表示する ②ライセンスの「QHM」より認証画面へ ここから ③表記しない(QHMAdmin ページにてログインする) ※QHMAdmin ページで「名前を変更」を 行うと、更にセキュリティが高まります Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 60 Part3．Update your site 認証画面は、以下のようになります。 ここで入力するＩＤ，パスワードは、レンタルサーバーのものではなく、 「QHM を設置 した際に、あなたが設定したユーザーID とパスワード」になります。 【補足説明】 実際の認証方法や、編集用のユーザーID とパスワードは、 QHM をインストールした後に、あなたのホームページ上から行った、 「サイト情報の設定」や「ユーザ名、パスワードの変更」で 指定した方法になります。忘れた場合は、再度設定してください。 図．認証方法と、編集用 ID とパスワード設定時の画面 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 61 Part3．Update your site 認証が成功したら、下の図のように画面左側に「編集メニュー」が表れます。どのペ ージを表示しても、認証が通った後は、以下のようなページが開きます。 編集を行いたいページを表示させ、続いて編集メニュー内の「編集」ボタンをクリック します。すると編集画面が表示されます。 また、ログアウトをしたい場合は、下部に表示されている「ログアウト」からログアウトし てください。ログアウトすると、 「訪問者（お客さん） 」があなたのページを閲覧する状 態と同じになります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 62 Part3．Update your site 編集中のページ名 ページ内容 装飾に関するツールボタン 編集画面のボックスに文書を入れます。基本的な文字入力ができれば、十分ホームペー ジを作ることができます。文書を入力したら、「プレビュー」ボタンを押します。今書 いた文書が、どのように見えるかを確認します。確認して、間違いや抜けがなければ、 「ページの更新」ボタンを押すと、ホームページが更新されます。 ホームページを見る様子 作る側は、簡単にホームページが作れます。見る側は、統一されたきれいなデザインの ホームページを見ることができます。ユーザーがリンクをクリックすると、本文部分だ けが変化します。メニュー部分、ロゴ部分は変化しません。したがって、いつでも自分 の見たい他のページに移動しやすく、優れたデザインになっています。 例えば、以下のようになります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 63 Part3．Update your site ここをクリックすると 大企業や高いお金を出して 作ったシステムで動くホー ムページと同じ仕組み。 ここだけが変化 Quick Homepage Makerでホームページを作る仕組み QHM では、ホームページのリンクは、 「自動的に」作られます。普通、ページ名は英 語しか使えませんが、QHM では、日本語でページ名を付けることができます。 例えば、「商品一覧」というページを作ります。すると、本文中に「商品一覧」とい う言葉が現れると、自動的にリンクが作られます。使いやすいページは、たくさんのリ ンクが付いています。本文中に現れた「商品一覧」から、すぐに「商品一覧」ページに 移動することができます。 わざわざ、リンクを張るために<a href=”abc.html”>あいうえお</a>などと書き込む必 要はありません。たくさんリンクされると、検索で上位にランキングされやすくなりま す。これは、リンクが多いページが重要なページと認識するためです。ホームページ制 作代行会社では、数万円を取って、リンクをたくさん張る工夫を施します。この作業は、 手間がかかります。しかし、この最新の技術を使うことで、「素人でも」リンクがたく Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 64 Part3．Update your site さん張られて、「カッコイイ」ホームページが作れます。 後ほど詳しく説明しますが、簡単なマークを付けるだけで、ホームページの装飾ができ ます。採用したデザインによって、見栄えは変わってきますが、以下のようになります。 見え方 書き方例 * 会社情報 ** 問い合わせ先 すぐに反映できます ’’すぐに反映’’できます。 （※ ’が 2 つずつです） - 重要 -- プライバシーポリシー -- 法に基づく表記 赤い字で表したようなサインを付けるだけで、見出し、箇条書き、強調表示などができ ます。他にも、便利なマークが用意されています。 もちろん、マークを使わずに書いても綺麗なホームページができあがります。 Quick Homepage Makerでホームページを作る手順 ホームページを更新する手順は、5 ステップです。 1. 編集、更新したいページを開く 2. を押して、編集状態にする 3. 文書を入力する 4. で、出来栄えを確認する 5. を押して、反映させる ステップ 3 以外は、非常に簡単なことです。 1. 再編集、更新したいページを開く 「本文」を編集したいページに移動するには、ナビゲーター、メニュー、あるいは、リ Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 65 Part3．Update your site ンクをたどります。 2. を押して、編集状態にする 本文部分に、編集したい文書が現れたら、画面左側にある編集ツールの中の、 を押 します。 3. 文書を入力する 文書を編集する方法は、基本的なテキスト入力です。文書とマークによって、どのよう な見た目になるのかについては、次の章で説明します。 注意点は、間違って入力したときに、ブラウザ(インターネットエクスプローラー)の「戻 る」ボタンを押さないようにすることです。せっかく、書いた文書が消えてしまいます。 また、QHM の編集画面ではセキュリティの都合上、編集の有効時間が設けられていま す。その時間を超えると、入力した内容が反映されずに、編集前の状態（ログイン画面） に戻ってしまいますのでご注意下さい。 （※こちらの設定では、認証後 3 時間程度としておりますが、お使いのレンタルサーバ ーによって時間に違いがあります。QHM 側での対応が行えない為、ご了承下さい） 従って編集に時間がかかる場合の対処法としましては、こまめにページの更新を行うか、 別の方法としては、Windows に元々ついているメモ帳を使うことです。こちらに、予め 書いておいて、文章が完成してからコピー＆ペーストすると、間違って消える心配が少 しだけ減ります。 4. で、出来栄えを確認する 文書を入力し終わったら、プレビューボタンを押します。すると、次のような画面にな ります。この画面で、できあがりの雰囲気を確認します。ここで、まだ変更したければ、 文書を変更し、再びプレビューを押します。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 66 Part3．Update your site プレビュー(確認表示) 再編集できる を押して、反映させる 5. ボタンを押すと、更新されます。これで完成です。 ご苦労様でした。 メニューバー・ナビゲーターを変更する場合 本文の編集の時とは違って、メニュー、ナビゲーター、ナビゲーター2 の３箇所を変更 する場合は、 「 」から行う必要があります。画面左にある編集ツールの中から、 「メニュー管理」をクリックして下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 67 Part3．Update your site 「メニュー管理」を押すと、下のような画面に切り替わります。 3 つの中から編集したい所を押すと、編集画面に切り替わるので、あとは本文を編集す る時と同じように編集してください。 「 」は、メニュー、ナビゲーター、ナビゲーター2 を変更する際に使用します。 なお、この「メニュー管理」ページ自体は編集しないようご注意下さい。必ず、ナビ編 集、メニュー編集、ナビ 2 編集のいずれかのリンクをクリックして編集してください。 作りながら学ぶ まずはトップページを作りましょう。トップページは、あなたのお店の名刺などに書い たアドレスを入力して移動したときに、表示されるページです。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 68 Part3．Update your site ここにアドレスを入力して移動 最初に表示されるページ = トップページ ところで、ホームページを作る作業が大きく分けて２つあります。 ホームページのデザイン、装飾を作る ホームページの内容（コンテンツと言います）を考える 自分でホームページ作成ソフトを使って作ったときに悩む理由は、デザインを作るため の操作が分からないだけではなく、内容をどう書いていけばいいかが分からないからで す。この２つの問題は別次元です。混同しないように注意が必要です。 Quick Homepage Maker を使うことで、「デザイン、装飾のことを考えなくて済む」状 態になります。内容（コンテンツ）に意識を集中すればよいのです。 以下では、更新していく一連の方法を学びます。 どのお店、会社、研究室でも「問い合わせ先」は、必要です。その問い合わせ先を作る 様子を体験してください。図をたくさん載せますので、疑似体験してください。先に一 通りやり方を見ることが重要です。感じがつかめると思います。会員サイトの動画マニ ュアルも是非ご覧下さい。 ページの作り方 Quick Homepage Maker では「新規作成」というボタンはありません。先にリンクを作 っておいてから、リンク先がなければ、勝手に新規ページが作られます。ちょっと、分 かりづらいと思いますが、次の説明を見てください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 69 Part3．Update your site まず、画面左側の編集ツールの中に「メニュー管理」というリンクがあります。これを クリックします。 すると、次のような画面になります。 メニュー管理をクリック ナビ編集をクリック 続いて、 「ナビ編集」をクリックすると、SiteNavigator の編集状態になります。このペ ージを変更すると、ナビゲーター部分が変化します。 SiteNavigator の 編集と表示され ています 細かい部分は、後ほど説明します。疑似体験をするつもりで読んでください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 70 Part3．Update your site ナビゲーター部分に以下のように箇条書きで書きます。 [[ ]]で挟まれた文字がリンクに なります。 - [[トップ>FrontPage]] - [[問い合わせ]] 書き終わったら、 「プレビュー」をして確認を行い、 「ページの更新」ボタンを押します。 すると、下のような表示になります。 図．この部分がナビに反映される。 ？マークが出ます。これは「問い合わせ」というページがありませんという意味です。 まだ「問い合わせ」ページを作っていない状態で、リンクを作ると？マークがでます。 次にこの「？」マークをクリックします。すると、「問い合わせ」というページを編集 する状態になります。 問い合わせ の編集と表 示されます このページに問い合わせ内容を書き込みましょう。以下のように書き込んで、プレビュ ー、更新を行うとページが完成します。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 71 Part3．Update your site 「プレビュー」 ・ 「ページの更新」を行う ナビゲーター部分にも「問い合わせ」が現れました。クリックすると、「問い合わせ」 のページが表示されます。 大体雰囲気を掴めたでしょうか？ 重要： ページの名前は、「3 文字以上」にしてください。1 文字、2 文字でページは、 作れません。例えば、「釘」というページを作る場合、「釘の一覧」のように工夫して、 3 文字以上のページ名にしてください。 基本操作説明 ホームページを作る雰囲気を知ったところで、基本操作を説明します。一つずつ理解 するのではなく、最後まで読み切ってください。分からないところは、とばしてくださ い。後で分かってきます。また、使いながら再度読み直してください。 新しいページを作る Quick Homepage Maker では新しいページを作る場合、まず「リンク」を作ります。 そのリンク先がなければ、 「？」マークが出ます。 「？」マークをクリックすると、新し Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 72 Part3．Update your site いページが作られ、編集する状態になります。 一つ前の章で説明した通りです。 ページを作る場合は、 1. ページの内容を大体決める 2. ページ名を考える 3. リンクしたいページを編集し、ページ名を[[ ]]で囲んで、更新 4. ？マークをクリックして、新しいページを編集する 新しいページを作る場合、「ナビゲーター部分」、「メニュー部分」、「本文部分」のど こからでも結構です。編集状態にして [[新しいページ名]] でリンクを作成します。 ページを削除する ページを削除するには、書いた文書をすべて削除してください。何もない状態にして、 「更新」を行うと、ページが削除されます。その後、リンクを消してください。 ナビゲーター部分 ナビゲーター部分を編集するには、前述した通り、ホームページの一番下にある 「 」をクリックして、開いたページの「ナビ編集」をクリックしてください。 編集モードと、実際にナビゲーター部分の見た目は多少違います。気にせず編集して、 更新してください。 ナビゲーターの中に書くものは、リンクです。 ページ名を[[ ]]で括ると、リンクが作られます。既に存在するページであれば、リン クが作られます。なければ、？マークができて、新しいページを作る準備が行われます。 メニュー部分 メニュー部分を編集するときも、まずはホームページの一番下にある「 クリックして、開いたページの「 」を 」をクリックしてください。 メニューの文字と、表示の関係は下の図のようになります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 73 Part3．Update your site 図：メニューのデザインと、書き方の関係の例 メニューで、見出し 1(*)を使うと、大見出しが作れます。その下に見出し 2(**)を使う と、小見出しが作れます。それ以下の見出しは設定できません。もちろん、書いても構 いません。その場合は、リスト(-)を先頭に付けてください。 メニュー部分を作るときの「こつ」は、なるべくタイトルの文字数を少なくすること です。多くなると、折り返されます。それに「ぱっ」と見て分かることが理想的です。 そこで、次の節で説明する「リンク名」を変える方法を使うと便利です。 リンクを作る リンクを作る方法は、大きく分けて 2 つあります。 自動 本文中に、ページ名と同じ言葉が出てきたとき。 本文中に URL、Email アドレスを書いた場合。 [[ ]]で括った場合リンクが作られます。リンク先がなければ、？マーク 手動 が出ます。[[リンク名>リンク場所]]とすると、リンク先の名前を自由 に設定できます。 自動でリンクが作られるので、便利です。あるページにリンクしたい場合は、リンク先 のページ名を書くだけでリンクが作られます。一方、新規にページを作りたい場合は、 [[]]を使ってください。また、リンク先の名前を変更したい場合、(例えば、ページ名が 長いから、違う言葉で置き換えたい場合)は、[[リンク名>リンク場所]]とします。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 74 Part3．Update your site その一例を以下に挙げます。 書き方 見え方 理由・備考 [[詳しくはこちら>ホームページの仕組み]] 詳しくはこちら [[お問い合わせ>[email protected]]] お問い合わせ [[Google>http://www.google.co.jp]] Google 分かりやすいリンク名で表現した い。 メールアドレスを直接書かないよう にして、分かりやすくする。 クリックすると、メールソフトが立ち 上がる。 自社以外のホームページへリンク を作る場合。 本文の作り方 本文を編集するときの基本ルールを説明します。本文を書く場合、行の先頭に「半角 スペース」を入れないようにしてください。行の先頭に半角スペースを入力すると枠が 出来てしまいます。 行の先頭にスペースを入れたい場合（段落あけを行いたい場合）は、 「全角スペース」 を使ってください。全角スペースは、「日本語入力モード」でスペースキーを押せば、 入れられます。 本文は、様々な装飾を行ったり、画像を貼り付けたりできます。例えば、見出しであ れば、*を行の先頭に書けば、見出し 1 として装飾されます。同様に、’’強調したい文 字’’と書くと、文字が強調(太文字、蛍光ペンを引いたように)されます。 様々な表現方法ができます。すべてを一度に覚えるのは難しいです。徐々に慣れなが ら、使えるものを増やしていけば良いでしょう。よく使う表現は、限られています。 編集ツールについて このシステムで使える機能を簡単に説明します。ページの左側に機能へのリンクがあ ります。（既出の項目については、一部割愛しています） Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 75 Part3．Update your site z 「添付」は画像をページ上に貼り付けたい時に使います。（※あまり使用しません） z 「名前変更」は、ページの名前を変更できます。変更すると、リンクも変わります のでご注意下さい。 z 「複製」を使うと、既に作ったページと同じページを作れます。 z 「バックアップ」は、過去の変更履歴のすべてです。ファイルの容量が気になると きは、ここをクリックし、バックアップの削除を行ってください。 z 「差分」は、一つ前との変更点を確認できます。このシステムは、過去の変更履歴 を保存しています。それを利用して、変更点を確認できます。 z 「新規作成」からは、どこにもリンクしていないページを新しく作成できます。 z 「設定」では、サイト情報の設定や、ロゴの設定などホームページ全体の設定に関 わる変更を行います。（※重要な項目です） 他にも「サイトの一時的な閉鎖」や「バックアップ」などの設定を行えますが、こ ちらは機能拡張や、仕様変更などのおそれがあり、最新の情報をお伝えする為に、 本マニュアルではなく QHM 会員サイトの「各種設定」という項目でご説明してい ます。（「各種設定」というキーワードで検索すると、すぐに見つかります） 今すぐに設定する必要はありませんので、ある程度サイトの中身が完成し、必要で あれば導入してください。 z 「一覧」をクリックすると、現在までに作成したファイルの一覧が表示されます。 z 「マップ」からは、そのページがリンクしているページの一覧を見られます z 「単語検索」を使うと、ページ内で探したい単語を検索できます。 z 「更新履歴」をクリックすると、最近更新した順序で表示されます。 z 「ヘルプ」をクリックすると、ヘルプが読めます。もともとパソコンに詳しい人た Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 76 Part3．Update your site ちで使うように設計され、難しい説明の仕方になっています。しかし、ある程度理 解できると、こちらのヘルプで調べながら、書けます。本書では説明していない機 能が、まだまだあります。それぐらい高機能です。興味がある人は、こちらから使 い方を調べて活用してください。 z 「FWD3」をクリックすると、URL 短縮機能を使用できます。 z 「SWFU」をクリックすると、簡単画像アップロード機能を使用できます。 （※詳し くは後ほど解説しています） z 「ログアウト」をクリックすると、編集状態からログアウトできます。全ての編集 が終わったらログアウトを行ってください。 ページ内容の書き方 Quick Homepage Maker では、文字に簡単な印をつけることで、自動的にカラー設定 などを行う仕組みになっています。使っているうちに、この印になれてくると、自由自 在にホームページを作ることができます。 また、印を簡単に編集できるように下図のような「装飾ボタン」を用意しています。 これらを活用することで、本当に簡単に装飾が行えます。 ボタンの上にマウスのポインターを置くことで、説明が表示されます。 よく使う書き方だけを覚えて、どんどん作っていきましょう。 基本的によく使うものは、以下の５つです。統一感を出すためにも、過剰にカラーを 使わないようにしてくださいね。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 77 Part3．Update your site z 見出し z 強調 z リンク z 箇条書き z 画像貼り付け 見出し（文章を見やすく、メリハリを付ける） 本文の中で、見出しを作るとメリハリがつき、見やすくなります。見出しは、3 段階 あります。行の先頭に * を入れてください。スペースなどが入らないように気を付け てください。選んだホームページデザインによって見出しのデザインも異なります。 編集モード 見出し 1 * これは見出しです 見出し 2 ** これは見出しです 見出し 3 *** これは見出しです 表示 見出しを効果的に使うと、読みやすくなる上、検索エンジン対策(SEO)にも効果を発揮 します。 強調表示（大切な部分をアピールする） 基本の強調表現（太字） 強調したい文字をマウスなどで選択してから、 クリック 編集モード 表示 強調表示は、’’大事なところ’’に使います 強調表示は、大事なところに使います Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 78 Part3．Update your site 蛍光ペンの使い方 装飾したい文字を選択してから、クリック 編集モード 表示 ピンク &color(,pink){ピンクの蛍光ペン}; グリーン &color(,palegreen){グリーンの蛍光ペン}; 黄色 &color(,yellow){よく使う黄色の蛍光ペン}; &color(,paleturquoise){ちょっと便利な水色蛍 水色 光ペン}; 注意点。 ｝の後に；(セミコロン)を忘れないようにしてください。 枠で囲んで強調する 行の先頭に半角スペースを入れます。 編集モード 表示 枠で囲うとこんな感じ 斜字、取消線 斜字 文字を選択してから、 ボタンを押す 取り消し 編集モード 斜字 ’’’斜字’’’ 取消線 %%取消線%% 表示 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 79 Part3．Update your site 文字の装飾（カラーを付ける、大きさを変えて強調する） 色の変更 文字を選択して、カラーをクリックする 書き方 &color(文字色,背景色){色を付ける文字}; 編集モード 例1 &color(red,){赤の文字}; 例2 &color(,red){背景が赤}; 例3 &color(white,black){ポイント}; 注意点。 表示 ｝の後に；(セミコロン)を忘れないようにしてください。 使える色の種類は、RGB指定と名前が使えます。詳しくは、http://www.colordic.org/ を ご覧下さい。 大きさ ① 文字を選択 ② ボタンを押す ③ 大きさを入力 編集モード 表示 &size(20){20 ポイントの文字です}; 装飾は組み合わせて使えます。 編集モード ''&size(20){20 ポイントの文字です};'' 表示 20 ポイントの文字です &color(red、){&size(20){20 ポイントの文字です};}; Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 80 Part3．Update your site 段落と改行（段落と改行の違いと読みやすくする方法） 段落 空白行を空けると、そこで段落が分かれます。単に改行を行っても、段落は変わらず、 改行も反映されません。編集モードでは、行間があまり空いていませんが、実際にホー ムページに反映されると、行間が空きます。 編集モード 表示 改行 編集モードで改行した箇所で、改行が行われます。改行を適切に行えば、更に見やす いページになります。話題が一区切りしたときは、 「段落(空白行)」を入れると読みやす いでしょう。 編集モード Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 81 Part3．Update your site 表示 無理矢理改行することもできます。その場合は、&br; を使います。&br; を入れた場所 が、表示モードの時に改行されます。 編集モード 表示 配置(左、中央、右) なにも指定をしなければ、左になります。中央、右にするには、それぞれ行頭に CENTER:、 RIGHT:を書きます。: (コロン)を忘れないようにしてください。: の後にすぐ、文字を 書き始めてください。半角スペースを空けると、枠が表示されてしまいます。 編集モード 表示 LEFT:左寄せです。 RIGHT:右寄せです。 CENTER:''(重要)中央です'' CENTER: ちょっと失敗 もちろん、他のものと組み合わせることができます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 82 Part3．Update your site インデント(すこし下げる) > を使うとインデントを設定できます。> は、Shift+。キーです。インデントは、連 続して書くことで、つながります。下のように離すと、別のインデントが再開されます。 編集モード 表示 普通の位置はここです。 >すこし下げるとこうなります。 >すこし下げるとこうなります。 >すこし下げるとこうなります。 インデントは、3 段階まで下げることができます。 箇条書き（番号あり、なし） 番号なし箇条書き - (ハイフン)を行頭に書きます。必ず、先頭に書いてください。箇条書き中で改行したい 場合は、改行か、&br; を使ってください。箇条書きは、3 段階まで作れます。 -を４つ続けると水平線になってしまいます。 編集モード 表示 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 83 Part3．Update your site 番号あり箇条書き 編集モード 表示 チェックの箇条書き チェックの箇条書きは、オリジナルの拡張です。以下のような構文で書いてください。 編集モード 表示 ✓ (セミコロンを忘れずに)を書いて、改行します。 定義語＋説明文 編集モード 表示 区切り線 #hr と----を行頭に書きます。共に、行に単独で書いてください。例えば、「#hr あい うえお」のように#hr の後に文字を書かないでください。 編集モード 表示 ---#hr Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 84 Part3．Update your site ----は、幅一杯(100%)の区切り線を書きます。#hr は、80%です。状況によって、見やす くなる方を選んでください。 表を作る 表を作る場合は、「|」を使います。詳しくは、「表の活用方法」の章を参考にしてく ださい。 書き方 表示 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 85 Part3．Update your site 便利な機能 枠を作る QHM では文字や画像を囲む枠を簡単に作ることができます。枠内でも箇条書き（-）や 見出し（*）といった表現を使えます。 枠の作り方は、予め用意されている 15 パターンの中から選ぶ方法と、独自で枠の大き さや色を設定する方法があります。なお、独自で設定する場合には CSS の知識が少し 必要になってきます。 基本の 15 パターンから選ぶ方法 枠の種類は、下図のように枠有り、枠内の色などによりパターンが分かれており、青・ 赤・黒それぞれに５パターンずつ、計 15 パターンあります。 （※会員サイトでは、もっと多くの種類をご用意していますので、会員サイトで「枠」 についてご覧下さい） パターンの種類名 ・青（bluebox1 , bluebox2 , bluebox3, bluebox4, bluebox5） ・赤（redbox1 , redbox2 , redbox3, redbox4, redbox5） ・灰、黒（graybox1 , graybox2 , graybox3, graybox4, graybox5） 図．枠の例 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 86 Part3．Update your site 枠を 15 パターンの中から選ぶ場合は、「編集」画面で以下のような手順になります。 なお、種類名は上図の bluebox1 や bluebox2・・などです。 ① 「枠」をクリックする ② 枠の書式が挿入される ③ 種類名を変更して、 内容を入力する 例えば、bluebox1 を使う場合の書き方例と表示は、下図のようになります。 #style(class=bluebox1){{ - ここに内容 種類名を bluebox1 と入力 - ここに内容 - ここに内容 }} 図．記入例 青枠（bluebox1）で囲まれる 図．表示例 独自で枠を作る方法 CSS の知識があれば、枠の大きさや色などを自由に設定できます。この場合には、自分 で予め CSS を作成して、そのデザインを適用させることになります。 独自で枠を作る場合には以下のように書きます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 87 Part3．Update your site 基本的な書き方） #box(線色,線幅 px,線種,背景,横幅){{ (ここに情報) }} 具体例）緑色の 2 重の枠 の場合 #box(green,4px,double,#efe,75%){{ ここに文字を入れる ここに文字を入れる }} 簡易なアクセスカウンターを付ける アクセス人数をカウントできます。アクセスカウンターを付けたページは、「人気の 10 件」で表示することができます。アクセスカウンターが付いていないページは、ランキ ングの対象外です。 ①「0123」をクリック ②カウンターの書式が挿入される 図．このように表示されます 表示をこれ以外のものにしたい場合には、自分で直接好きなように書くことになります。 書き方と表示例をいくつか挙げておきます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 88 Part3．Update your site 書き方 表示 今日の人数 &counter(total);人 今日の人数 (3 人) アクセスカウンターはページの一番下につけると良いでしょう。 HTML貼り付け機能 Quick Homepage Maker では、HTML や CGI、CSS の知識なしで、簡単にホームペー ジを作れるように工夫しています。 しかし、場合によっては HTML を直接編集する必要があります。 例えば、 ・Google AdSense の広告を貼り付け ・Amazon の商品リンク ・外部フォームを貼り付け ・アフェリエイトリンクなどを貼り付け ・ポップアップの Javascript などを貼り付ける場合に重宝する機能が、HTML 貼り付け機能です。 この機能の具体的な活用方法は、アフェリエイトを作る章で説明します。 使い方 編集画面内の「HTML」をクリックして、挿入された書式の中に HTML タグを貼り付 けます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 89 Part3．Update your site ① 「HTML」をクリック ② HTML の書式が挿入されます ③ HTML タグを入力します。 なお、（ ）は必要ありません。 例えば、楽天でアフィリエイトを行う場合では、アフィリエイトタグを貼り付けると、 以下のように HTML タグを変更・入力します。アフィリエイトタグは楽天から与えら れますのでコピー＆ペーストで貼り付けを行うと簡単です。 このように表示されます 画像をクリックすると楽天の販売ページに移動します。 目次を付ける 目次を付けるには、「 #contents 」を使います。ページの先頭の方に書きます。目次 は自動的に作られます。その際、見出し(*、 **、 ***)の文字を使って見出しを作ります。 長文などを書く場合は、目次を付けると便利です。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 90 Part3．Update your site 注釈を付ける 注釈をつけるには、二重括弧「(( ))」で囲みます。二重括弧の場所に注釈用のリンク が作られます。注釈はページの末尾に書かれます。 書き方 表示 コメントを求める 「編集」をクリックして、編集画面の「コメント」をクリックします。 ①「コメント」をクリック ②編集画面に#comment2 と挿入されます。 ③「 」を行うと以下のように表示されます。 利用者から、ホームページ上に簡単なコメントを入れて欲しい場合に使います。利用 者との対話やアンケートなどに使えます。認証コードを入力する事で、コンピュータに よるスパム投稿を防ぐ事が出来ます。利用者は、名前とメッセージ、認証コードを入れ て「コメントの挿入」を行うだけで、簡単にページにコメントが付けられます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 91 Part3．Update your site 図：コメントを入れる様子 タイトルを変更する Quick Homepage Maker では、ページ名が自動的にタイトル名に利用されます。 タイトルとは、HTML コード内で、<title>ここにタイトル</title>で書かれているもの です。このタイトル名は、ブラウザ上では「ウインドウタイトル」に使われます。 例えば、「問い合わせ」という名前のページの場合、以下のように表示されます。 「問い合わせ」と表示され ています。 このタイトルを変更するには、編集画面に TITLE:ここにタイトル と書きます。TITLE:とタイトル名の間にスペースを入れないようにしてください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 92 Part3．Update your site 例えばこのように書くと タイトルが customSUPPORT に変 更されます。 この機能は、タイトルを変更したい場合や、英語名のページを作り、URL を短くした場 合に活用すると便利です。 顔のアイコンを表示する &heart; &oh; ⌣ &wink; &bigsmile; &sad; &huh; &worried; その他の操作 #article を使うと掲示板が作れます。使い方は、コメント(#comment)と同じで す。 [[Google:SEO とは]]とすると、Google で「SEO とは」を検索した結果へのリン クが作られます。[[SEO とは>Google:SEO]]とすれば、用語説明を書く必要がな くなります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 93 Part3．Update your site 画像を貼り付ける方法(詳細) 画像を貼り付ける方法は、よく使用するので重要です。詳しく画像を貼り付ける方法 を説明します。 QHM では、画像を表示する為に、 手順 1： 画像ファイルをサーバーに設置し、 手順 2： 編集画面内で画像ファイルを表示する為の記述を行う といった操作を行いますが、 この 2 つの手順を行う方法として、以下の 2 つの方法があります。 ・ 「簡単画像アップロード機能」を使用する （※推奨） ・ 「ページに画像を添付」して表示する 2 つの方法では、行う操作が大幅に異なります。 簡単画像アップロード機能を使用する方法が、ホームページの表示にかかる負担も少な く、便利です。基本的には、こちらの方法を使用される事を推奨していますので、マニ ュアルではこちらの方法のみ解説を行います。 まず最初に画像を準備します。使える画像のフォーマットは、JPEG、GIF、PNG です。 そのほかは使えません。これは、ホームページの世界規格に基づきます。 簡単画像アップロード機能で、画像を表示させる 編集画面の左上の編集ツール内にある、「SWFU」をクリックします。 画面全体が、SWFU の操作画面になります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 94 Part3．Update your site ②SWFU 画面に切り替わる ①SWFU をクリック 画像をサーバーに設置する 画像ファイルをサーバーに設置するので、左上にある「アップロード」をクリックしま す。続いて「Click」と書かれたボタンをクリックします。 ①クリック ②クリック Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 95 Part3．Update your site 画像ファイルを選択する画面が開くので、画像ファイルを選びます。 アップロードが完了すると、以下のような画面になります。 図：アップロード完了時の画面 画像一覧を表示する それでは、アップロードしたファイルを確認しましょう。 「ファイル一覧」や、「トップへ」などをクリックして先程の画像を探します。 ①クリック ②クリック Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 96 Part3．Update your site 画像を選択すると、以下の図のような、画像の詳細画面が表示されます。 この画面内で、編集画面への入力用記述を入手したり、画像の削除などを行えます。 ・・・ 最もよく使う項目は、「貼り付け」です。 「貼り付け」と書かれた箇所の内容を、コピーしておきます。 以下のような内容をコピーできるので、「画像の説明」という箇所だけ変更し、この記 述をホームページの編集画面に記述します。 例）&ref2(swfu/d/mobileimg.png,nolink,,画像の説明); Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 97 Part3．Update your site 「貼り付け」以外にも、画像を文章の横に回り込ませたい時の「回り込み」や、 画像をポップアップ表示する為の「greybox」「lightbox2」、 ダウンロードボタンを設置する為の記述方法などを、コピーするだけで簡単に入手・使 用できます。 なお、編集画面に戻りたい場合など、 SWFU の画面を閉じたい場合は 画面右上にある「Close」という箇所を クリックしてください。 以上が、簡単画像アップロード機能を使用した場合の、画像表示方法です。 実際に画像をアップロードしてみると、簡単さを実感して頂けると思います。 それでは、画像を表示させる際の注意点などについて、簡単に解説します。 文字が回り込むようにする場合の注意点 SWFU の画像詳細画面から、「回り込み」用の画像表示記述を入手できますが、 回り込ませる文字の終了位置に #clear を書いてください。書かなければ、回り込める だけ、回り込んでしまいます。 記述例） 左側に画像を表示 #clear させたい場合は、 と入力します right を left に 書 き換えて下さい Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 98 Part3．Update your site 表示例） 右寄せ、中央寄せ で表示したい 通常の「貼り付け」で画像を表示する場合は、表示位置を中央(center)、右(right)を 指定できます。使用するのは文字を中央寄せ、右寄せする時と同じ CENTER: RIGHT: と いう命令です。 記述例） 代替文字列を入れる 代替文字列とは、画像が何らかの理由で見えない場合、画像の代わりに表示するテキ ストの事です。また、画像をマウスの上にもっていくと、小さなメッセージが出ます。 これは、代替文字列です。書いておく方がよいでしょう。何も書かなければ、ファイル 名が使われます。 「画像の説明」と書かれた部分を、ご自身の画像に沿った内容に書き換えて下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 99 Part3．Update your site 複数の画像を横並びに表示させる 通常の「貼り付け」を使用すると、画像を横並びに表示させる事が出来ます。 その場合は複数画像の貼り付け用の記述を、改行せずに連続で記述して下さい。 画像の横幅の合計がホームページの横幅よりを超えない限り、横並びで表示されます。 記述例） 改行せず、続けて記述します 画像でリンクを作る方法 画像をクリックすると、違うページに移動できるようにする場合は、以下のようにし ます。このような表現を使うと、クリックしてもらいやすくなります。ただし、センス が無くなるぐらい変な工夫はしないように注意してください。 記述例） 画像を貼り付け、そのリンク先を「レポート申し込み」ページに設定しています。リン ク名を変更する方法の応用です。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 100 Part3．Update your site 表の活用方法 表組みもよく使います。ところで、あまりに複雑な表を作るのには向いていません。 複雑な表を使いたいときは、表自体を画像にして貼り付けると良いでしょう。 基本 表を作るときは、| (Shift + ¥)を使います。行頭を「|」で始めて、行末を「|」で終 了します。改行して続けると、次の表になります。下の図を見てください。書き方と表 示の一例です。 書き方 表示 4×3 の表を作りました。何も設定しないと、表自体は「中央」に配置されます。また、 ~(チルダ)を使うと、色が変化します。項目名を使う場合に利用してください。行末の「|」 の後にスペースなどが入ると、表になりません（下の図）。 図：編集モードで、見やすいようにスペースを入れて整理した様子 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 101 Part3．Update your site 編集モードで表を作るとき、上の図のように見やすいように整理しても、表示は変わ りません。ただし、|をそろえる場合は、半角スペースを使ってください。ところで、 表は中央に配置されます。今のところ、左寄せ、右寄せはできません。 ちょっと複雑な表 あまりに複雑な表は、画像で貼ってください。以下で説明する程度で実現できる表は、 是非活用してください。 セルを結合する 書き方 表示 「>」を使うと、右のセルに結合できます。左に結合する書き方はないので、項目内容 を右側に書き、結合したいセルに「>」を入れてください。「>」の前後には、何も入れ ないでください。結合を使わず、2 列、3 列をつなげてもうまくいきません（下の例） 書き方 表示 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 102 Part3．Update your site 下の例は、上下のセルを結合する例です。下のセルを上に結合できます。 書き方 表示 ~（チルダ）を単独で書きます。 料金表の例 料金表の例の中に、様々な方法を入れました。これを参考にしながら、ご自身で必要 なものを作ってください。結合は先に説明したとおりです。 は、書式設定です。最後に「c」を付けると書式設定のた めの行になり、画面上には表示されません。基本は中央に文字が配置されます。それを 中央、左、右と設定しています。すると、以下のようになります。 書き方 ※ 表示 ご要望をお寄せ下さい。オンラインマニュアルに例を随時挙げていきます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 103 Part3．Update your site 公開予定表（カレンダー）を作る方法 毎日のちょっとしたメモや、予定などを書き込むことができます。予約状況や、日替 わりメニューの予告、入荷状況などを書き込んで活用できます。 ※カレンダーは簡易的なものです。ちょっとしたお知らせなどに使 うと良いでしょう。本格的に毎日の情報を発信するなら、ブログを使 うことをお勧めします。 まずは、カレンダーを作るページを決めます。カレンダーは、ページに一つしか作れ ません。以下では、予約ページを作り説明します。 カレンダーを作る ページ一番下にある「 」をクリックして、続く画面の「 」でメ ニュー部分を編集します。適当な位置に** [[予約状況]]を入力します。その後、更新し ます。次に、「？」をクリックして、予約状況ページを編集します。カレンダーを作り たい場所に、#calendar2 を入力します。その後、更新をしてください。 図：予約ページを編集するまでの様子 カレンダーは、下の図のようになります。左にカレンダー、右に今日の情報が表示さ れます。図にあるように、今日の日付を使って、新しいページを作れる状態になってい ます(予約状況/2006-05-20?)。「?」をクリックすると、今日の記事を編集できます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 104 Part3．Update your site 図：カレンダーを表示した状態 カレンダーの編集 「?」をクリックして適当な記事を書きます。 更新 予約状況ページに戻ると 書き込みがあった、日時は強調表示されます。過去の記事や、予定も書き込めます。 書き込んだ日付が同様に、強調表示されます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 105 Part3．Update your site 書き込みを行いたい日をカレンダーから探し出し、クリックします。すると、編集状 態になります。後は、書き込んで更新してください。 書き込んだ予定を別の形で表示する 一つのページに、複数のカレンダー情報を表示することはできません。 未来の予定一覧を表示させる 書き方 #calendar_viewer(カレンダーを作ったページ名、一覧数、future) (例) #calendar_viewer(予約状況、10、future) 表示 自動的に作られる 今月の情報を表示させる 書き方 #calendar_viewer(カレンダーを作ったページ名、this、view) (例) #calendar_viewer(予約状況、this、view) 表示 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 106 Part3．Update your site Googleマップを設置する クイックホームページメーカーは、Google マップを利用することができます。利用す るためには、Part2 を参考に事前に設定を行ってください。 （※会員サイト内で、別の方法もご紹介しています。お好きな方で行って下さい） 準備 Google マップの標準の中心座標を決める必要があります。以下のホームページにアク セスして、あなたの会社、お店の場所を特定してください。 Geocoding http://www.geocoding.jp/ 最初に住所を入れます。次に検索ボタンを押します。 すると、以下のような地図が表示されます。 上の吹き出しに「緯度、経度」が表示されています。上に表示されている緯度・経度は、 現在の地図の中心座標です。座標の微調節をしたい場合は、拡大を行い、中心にしたい 場所を「ダブルクリック」します。すると、その地点が中心座標となります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 107 Part3．Update your site この緯度経度を控えてください（今回は、34.867473、135.600767） 設置 地図を設置したいページを開きます。ページを開いたら、「編集画面」にして以下の ように書きます。 &googlemaps2(width=500px, height=500px,lat=34.867473,lng=135.600767,zoom=15); width は地図の幅、height は地図の高さ、lat は緯度、lng は経度です。zoom は最初の 地図の縮尺倍率を表します。zoom は、1 から 19 まで設定できます。1 は、世界地図が 現れるぐらい縮尺が小さくなります。19 は最大限地図を拡大します。 ちなみに、この地図は、マウスでぐりぐり動かせます。 地図上にマークを付ける 弊社の位置をマークするには、以下のように書きます。 緯度 経度 吹き出しのタイトル - &googlemaps2_mark(34.867473,135.600767,title=(株)北摂情報学研究所,caption=近 くには摂津峡があります。事務所はクリエイティブな作業ができるように工夫していま す。); 吹き出しの説明 -を付けることで、箇条書きにしています。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 108 Part3．Update your site クリックすると吹き出しがでる。 タイトル 説明 マークが付く 同様にいくつもマークを付けることができます。Geocoding のホームページで緯度経 度を調べて、付け足してください。 以上で Google Map の設置が完了です。 登録フォームの作り方 メールフォームを埋め込む方法 QHM の機能でも、自動返信メールに対応したフォームを作成できますが、SSL（暗 号化通信）に対応した機密性の高いフォームを利用するには、あなたのホームページ自 体が SSL を導入する必要がありますので、独自サーバーが必要となり、また、年間の費 用もかかります。 そこで、手軽にSSL対応フォームを利用するには、フォーム専門レンタルサービスを利 用する事がお勧めです。例えば、 「フォームズ」( http://www.formzu.jp/)などで、フォー Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 109 Part3．Update your site ムを作ります。そのフォームをあなたのホームページ上に埋め込む形になります。 以下のように作ることができます。 まず、メールフォームの URL を控えます。フォームズであれば、以下のようになりま す。フォーム作成モードで、「保存して終了」を行うと確認できます。 http://www.formzu.net/fgen.ex?ID=P791345435 フォームを表示したい場所に、以下のように書きます。 #formzu(https://www.formzu.net/fgen.ex?ID=P791345435,280,550) URL 高さ 幅 高さは、何度かプレビューを行いながら微調節してください。また、幅は 550 がちょう ど良いです。フォームズの初期設定は 550 になっています。順序を間違って書くと、う まく動きません。上のように書くと、フォームが真ん中に表示されます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 110 Part3．Update your site 逆に表を左寄せしたい場合は、以下のように書いてください。 位置 #formzu(https://www.formzu.net/fgen.ex?ID=P79135435,280,550,left) URL 高さ 幅 同様の方法で、他のフォームもページ内に埋め込むことができます。 ちなみにインフレーム(iframe)を使っていますので、このことがわかると、もっと応用 方法があります。詳しくわかる人は、活用してください。 まぐまぐ！フォームを作る まぐまぐ！の登録フォームを作るには、会員サイトの「コード自動生成」を利用しま しょう。会員サイトの検索ボックスに「まぐまぐ 登録」と入力して検索すると、すぐ に見つかります。 メルマガ ID を入力するだけで、メニュー部分に貼り付ける HTML コードを自動生成 することができます。 特殊な使い方、実用的な使い方 QHM の実力は、計り知れません。便利な使い方、実用的な使い方が「会員サイト」 で多数解説しています。是非、こちらもチェックしてください。 その中でも、便利な使い方を１つ解説します。 作りかけの非公開ページ作成を作り、公開する手順 販売ページ（セールスレター）や、内容を吟味するようなページ、キャンペーンを開 始するページなどは、「事前に作っておいて」「時期が来たら公開」としたいですよね。 ところが、QHM でページを作成すると、自動的に「RSS 配信」と「更新履歴」に新 規ページが登録されてしまいます。これは、とても便利な機能ですが、「非公開で作り たい」場合に、困ります。 （ここで非公開とは、だれも URL を知らないため、アクセス Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 111 Part3．Update your site できないという意味です。パスワードを設定するページではありません）。しかし、QHM では、本当に簡単にこの問題を解決できます。 QHM では、: (半角コロン)で始まるページ名は、RSS、更新履歴に登録されないとい うルールがあります。この機能を活用し、非公開ページを作ることができます。 まず、認証済みの状態になり、その後、フッターの「新規作成」リンクをクリックし ます。半角コロンを付けた「:好きな名前」でページを作成します。このページは、非公 開になります。そして、自由に編集、更新を行います。 そのまま非公開で、限られた人にだけ URL を教えるなら、名前を変更せずにこのま ま使ってください。公開する際は、フッターの「名前変更」リンクをクリックし、:を削 除した名前を付けます。その瞬間に RSS に登録され、「公開」となります。 最後に 実際に書きながら学んでください。大切なのは「妥協」です。完璧なものを最初から 作るのではなく、まずは作ってください。その後、徐々に改善していくと良いでしょう。 また、使っているとよく使う表現が決まってきます。何度も書くと書式などを覚えて きます。 また、サポートサイトを活用してください。要望や質問を随時更新します。いろいろ な書き方例を示していきたいと思っています。 簡単にホームページを作ることができる仕組みは、 「PukiWiki Developer Project」に よって開発されています。PukiWiki は GNU GPL ライセンスによる無償のソフトウェ アです。 弊社が提供するマニュアルなどに関する質問を PukiWiki Developer Team に行わな いでください。弊社のお問い合わせフォームからお寄せ下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 112 Part4．Power up your site Part4． POWER UP YOUR SITE ホームページパワーアップマニュアル 無料でできる！ ホームページを強化する！ Part4 では、作成したホームページをもっと強化する方法についてご説明します。ホー ムページの強化というと検索エンジン登録が主と思われるかもしれません。もちろん大 事です！・・・が、それだけではもの足りません。ここでは、知っておくと得をする情 報も載せていますので、是非ご参考にしてくださいね。 CONTENTS ホームページをパワーアップさせるには 検索エンジン登録 一発太郎・Yahoo!・Google マップ 多くのホームページにリンクしてもらう ホームページの URL を短くする アクセス解析を無料でする Google Analytics をどう有する トラッキングコードの埋め込み 問い合わせフォームを作る Web 上に無料で 100MB の自分のスペースを作る ステップメールを活用する お支払い方法の工夫 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 113 Part4．Power up your site ホームページをパワーアップさせるには ホームページをパワーアップさせる方針は大きく分けて 2 つあります。1 つめは、 Quick Homepage Maker の弱点を克服すること。QHM は使いやすいツールですが、弱 点はあります。それを補う方向でパワーアップする方法を説明します。2 つめは、お客 を集めるためにできる技術的なパワーアップです。お客を集めるためには、お客に「欲 しい！」と言わせる商品、サービスを提供することが大切です。お客をその気にさせる プレゼンテーションも大切です。本書では、後者のような「中身」に関することは説明 しません。 「中身」に関しましては、http://www.1st-easy-hp.com/?RevieweBooksにて、お勧めの 書籍や商材を紹介しています。そちらをご覧下さい。 本書では、技術的な面からホームページをパワーアップする方法を提供します。例え ば、検索エンジンの登録方法、お問い合わせの作り方などです。どの方法も、無料で使 えるツールばかりです。 検索エンジン登録 検索エンジンとは何か？ インターネットには、膨大な情報があります。数百億ページ以上のホームページがあ ります。この膨大な情報を探し当てる方法で、もっとも有効なのが「検索」です。その 検索サービスを提供しているプログラム（Web サイト）のことを、検索エンジンと言い ます。 現在の検索エンジンの主流は、Google と Yahoo!(YST)です。玄人好みは、Google で す。日本のユーザーの多くは Yahoo!を利用します。 検索エンジンの役割は、利用者が欲しい情報を提供することです。利用者は自分が欲 しい情報に関連が深い言葉「キーワード」を入力して、検索ボタンをクリックします。 すると、そのキーワードが入ったページが検索結果に表れます。検索エンジンの仕事は、 検索結果を「並び替えること」です。単純にアルファベット順に並べても、役立ちませ ん。重要そうなページから順に並べることで、利用者の利便性をはかっています。この 順序づけのルールが検索エンジン毎に違います。細かいことは、専門の書籍をご覧下さ い。ここでは、「検索エンジンの役割は、並び替え」とだけ理解してください。 検索エンジンは、利用者が「検索した瞬間」にインターネットをうろうろ探し回って、 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 114 Part4．Power up your site 情報を集めてくるわけではありません。毎日定期的にインターネットを巡回して、情報 を集めて、整理しています。この整理された情報から、検索結果を返します。このこと から考えると、検索エンジンに情報が登録されていなければ、どうがんばっても検索結 果には表れないと言うことです。 そこで、「検索エンジン登録」が必要になってきます。 検索エンジン登録とは？ 後ほど詳しく説明しますが、無料で複数の検索エンジンに登録してくれるサービスが あります。 「一発太郎」というサービスです。このサービスを利用することで、大小様々 な検索エンジンに登録できます。 検索エンジン登録は、自分が知らない間に行われることもあります。大手の検索エン ジンは、ロボットと呼ばれるプログラムが、ホームページのリンクをたどって、情報を 自動的に拾ってきます。つまり、どこからかリンクされていれば、知らず知らずの間に 情報が登録されている可能性があります。しかし、ロボットを持たない検索エンジンも ありますので、登録作業が必要になります。 一発太郎で検索エンジン登録 検索エンジン登録をする場合、ホームページの説明文を考えておく必要があります。 この説明文は、具体的でかつ、お客にクリックさせる内容が求められます。更に、検索 されやすいキーワードを使うことが大切です。ただ、むやみに検索エンジン対策を行う よりは、本当のことを素直に書いて、単語を一般的なものに変えるだけで、まずは十分 だと思います。 登録するキーワードの準備 検索エンジンに登録する場合、あなたのホームページに深く関連するキーワードを一 緒に登録します。どのようなキーワードが良いのかは、以下のキーワードアドバイスツ ールを使って調べてください。使い方は、ホームページ上に動画で説明されています。 http://www.muryoutouroku.com/ 紹介文の作成 次に紹介文を作成します。ホームページの概要を表す説明です。同じ言葉が出てこな いように工夫してください。説明文の検索キーワードになります。説明文は、文字数が 限られているので、同じ言葉を書いて無駄遣いしないようにしてください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 115 Part4．Power up your site 一発太郎の登録方法 まず、http://ippatsu.net/TARO/ にアクセスします。その上で、説明を読みながら進め てください。 図：一発太郎のトップページ 上の図の矢印が指す「登録依頼」をクリックします。そして、ページの下にスクロール し、そこで登録情報を入力します。一発太郎に登録したメールアドレスに、認証コード が送られます。この認証コードを使って、次に進みます。後は、説明に従って検索エン ジン登録を進めてください。 Yahoo!の検索エンジンに登録しよう！ Yahoo!の検索結果は、大きく分けて３つ存在します。①スポンサーサイト、②登録カ テゴリサイト、③ウェブ検索サイトです。スポンサーサイトは、テレビ CM と同じ原理 です。検索エンジンの検索結果の周りに、表示されます。登録カテゴリは、Yahoo!のス タッフ自らが閲覧して、判断し登録したものです。簡単に言うと、Yahoo!スタッフのお 墨付きがあるホームページとなります。商用の場合、登録は有料です。約 5 万円です。 ウェブ検索サイトは、Yahoo!の検索エンジンが自動的に集めた結果です。 簡単に①、②、③の使い分けを説明します。 ①スポンサーサイトを利用するには、オーバーチュア社に申し込みをします。ワンク リック 9 円からになります。利用者が検索した結果の横に広告を出します。その広告を クリックされたときに、課金されます。成果報酬型の広告ですので、やり方次第では、 効率がよい広告方法になります。このようなものを利用する場合は、必ず「マーケティ ング」を学んでからにしてください。適当に広告を出しても、絶対にうまくいきません。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 116 Part4．Power up your site ②登録カテゴリサイトは、Yahoo!のお墨付きです。商用サイト（お店、会社）の場合 は、ビジネスエクスプレスというサービスを利用して審査してもらいます。ただし、審 査する前に十分な準備をしておく必要があります。情報が少なかったり、作りかけのペ ージが多かったりすると、登録してもらえず審査費用を丸ごと損します。 ③ウェブ検索サイトは、無料で載ることができます。上 2 つはお金さえ払えば、簡単 に利用者の目に触れさせることができます。ウェブ検索サイトは、良い情報を提供する ことで、上位に表示されます。ウェブ検索サイト登録は、簡単ですので、是非やって下 さい。必要なものは、Yahoo! ID です。Yahoo! ID を取得して、以下の URL から、登録 を行ってください。 http://submit.search.yahoo.co.jp/add/request Googleマップ（ローカルビジネスセンター）に登録しよう！ これからは地域の情報を検索する時代です。地域情報検索エンジンに登録しましょう。 今なら無料で Google マップに登録ができます。数年前までは Yahoo!の検索エンジン登 録は、今ほどお金はかかりませんでした。今はお金を払って審査してもらうことが当た り前になりました。審査してもらって、落ちることもあります。人気が出てくれば費用 が上がるのは、経済の原則です。 早めに準備しておけば、それだけチャンスも広がります。手順も非常に簡単なので、 今すぐ登録を行ってください。 まずは、Googleへアクセスし、「地図」 という箇所をクリックします 地図をクリック 図：Google マップの登録 1 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 117 Part4．Power up your site Google マップに掲載 をクリック 図：Google マップの登録 2 クリックすると、以下のような画面が表示されるので、「新しいビジネス情報の追加」 という箇所をクリックして、画面の指示に従い登録操作を行って下さい。 図：Google マップの登録 3 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 118 Part4．Power up your site 多くのホームページにリンクしてもらう 現在の検索エンジンの順序は、リンクが多いページが上位になりやすいです。そこで、 様々なサイト、ホームページからリンクしてもらうことが大切です。この方法は、コミ ュニケーション以外にありません。比較的簡単にリンクしてもらえる方法を紹介します。 地元の情報を集めているホームページにお願いする 地元が好きで、地元の情報を整理しまとめて発信している人が必ずいます。そのホー ムページを探し出し、メールをします。丁寧な感じで、ホームページの登録をお願いす れば、大体了承してくれます。その際、あなた自身のホームページにも、その人のホー ムページへのリンクを張らせて欲しいとお願いします。これでその人のホームページも リンクが増え、お互いに Win-Win となります。 自分の会社名で検索して、その結果のホームページにお願いする 会社一覧や、関連業者情報などをホームページに記載しているところがあります。何 らかの組合や協会に参加しているなら、必ずあるでしょう。そこで、あなたの会社名を Google、Yahoo で検索し、リンクが張られていなければ、リンクをお願いすることが基 本です。もちろん、相互リンクで申し込みをすると良いでしょう。 同業者で相互リンク 同様に同業者通しで相互リンクをすると効果的です。お互いにお客を交換し合うこと も可能でしょう。例えば、喫茶店オーナーが勧めるこだわりカレーというように、お友 達のカレーショップを勧めるという形です。 お友達にリンクしてもらう ホームページを作ったら、友達、知人に教えましょう。そしてリンクをして欲しいと お願いするのです。地道な努力ですが、大切なことです。 お客にリンクしてもらう お店を気に入ってくれたお客に、「よかったらホームページでリンクしてもらえませ んか？」とあっさり頼んでみるのも良いでしょう。ファンになっていれば、快く引き受 けてくれる可能性があります。今なら、ブログなどがありますから、簡単にリンクを作 ってくれる可能性があります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 119 Part4．Power up your site ホームページのURLを短くする Quick Homepage Makerの弱点は、URLが長い ホームページを簡単に作れる QHM ですが、弱点があります。それは、各ページの URL(アドレス)が非常に長くなることです。英語でページ名を使うとあまり長くなりま せんが、日本語名のページを作ると URL が長くなります。 表：URL が非常に長くなる様子 英語のページ http://www.hokuken.com/index.php?FrontPage 日本語のページ http://www.hokuken.com/index.php?%C9%D2%CF%D3%A5 %DB%A1%BC%A5%E0%A5%DA%A1%BC%A5%B8%BA %EE%C0%AE%A5%B7%A5%B9%A5%C6%A5%E0 お店の地図情報をパンフレットに書き入れる場合、困ります。そこで、URL 圧縮、URL 転送という機能を使います。そうすると、上の長いアドレスを http://www.hokuken.com/map のように置き換えることができます。 URLが短いことの 3 つのメリット URLが短いことの利点をあげます。一つめは、短いことで覚えやすくなります。地図 は、http://www.hokuken.com/map ということは、簡単に覚えてもらえます。２つめは、 短いことで、名刺やパンフレットに書いても場所を取りません。３つめは、メールで長 いURLを貼り付けると、クリックしてもうまく動かない事があります。このような状況 を避けることができます。 独自ドメインでの、転送URLの作り方 QHM では、自分の独自ドメインを利用した転送 URL を作成できる機能が付いてい ます。Fwd3 機能といいますが、そちらは、QHM3.60 以降のバージョンをインストー ルされた方には、標準で搭載されています。また搭載されていない場合でも、設置方法 や詳しい使い方について情報を用意していますので、会員サポートサイトから入手して ください。会員サイトの検索ボックスで「fwd3」と検索してお探し頂くとすぐにページ が見つかります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 120 Part4．Power up your site マニュアルがどこから入手できるかが分からない場合は、お気軽にお問い合わせくださ い。 これであなたも戦略家 転送 URL を使えば、違う URL から同じページにアクセスするという仕組みができま す。下の図のような仕組みになります。 A B C 図：違う URL(A、 B、 C)から同じページにやってくる あなたのホームページにアクセスする方法が、A、 B、 C の３つあります。例えば、A は、折り込みチラシ、B はパンフレット、C はメールマガジンとします。それぞれのど の媒体が、一番反応が良いのかが分かります。また、同じ折り込みチラシでも、3 つに 分け、A、 B、 C と違う URL を付けておきます。すると、効果が測定できます。こん な簡単な仕組みで、戦略家の第一歩を踏み出せます。 アクセス解析を無料でする アクセス解析とは アクセス解析とは、あなたのホームページを見に来た人の人数や時間帯、どこから来 たのか、あなたのホームページを見つける時に使ったキーワードなどを知ることです。 ページに簡単なカウンターを付けたものではなく、もっと詳細な情報を得ることができ ます。 アクセス解析をすることで、どのホームページから人が来るのか？どんなキーワード で検索されているのか？などが分かり、それを参考にホームページ内容を作り直したり Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 121 Part4．Power up your site できます。特に大事なのが、どこから来たか？です。これが分かれば、その媒体の情報 発信を強化すればいいのです。 Quick Homepage Maker に最適なアクセス解析サービスは？ カウンターを自分で付ける QHM を使う場合、各ページに &counter(total);を付けると、現在までの総アクセス 数をカウントできます。しかし、この方法は簡単ですが、延べ人数が分かるだけで、ど こから来たのか？いつ頃にアクセスが多いのか？などがよく分かりません。 Google Analytics を導入する 高度なアクセス解析を行う方法に Google Analytics があります。Google Analytics は、もともとアクセス解析専門の会社を Google が買い取り、無料サービスとして提供 しているものです。もともと月額 4000 円程度の価格のサービスですので、かなり高度 な機能が付いています。 すべてを使いこなすのは難しく、簡単なアクセス解析だけなら他のツールを使う方が、 わかりやすいかも知れません。しかし、Web を活用するなら最低限のアクセス解析は必 要です。 弊社で確認したところ、Google Analysis は、Firefox で快適に活用できます。Sleipnir などの IE 系のブラウザでは、正常に動作しない場合があります。次に進めない状況が 起こりましたら、Firefox を活用することをお勧めいたします。 ここでは、簡単に Google Analytics を導入する方法を説明します。 まず、以下の URL にアクセスします。更に「今すぐお申し込み」をクリックします。 http://www.google.com/intl/ja_ALL/analytics/ ※ Googleアカウントが必要です。https://www.google.com/accounts/NewAccount Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 122 Part4．Power up your site 次に、Google アカウントを入力します。Google アカウントをお持ちで無い場合は、 「今 すぐお申し込み」をクリックして新しく作成して下さい。既にアカウントをお持ちの 場合は、ログインをして「申し込み」を行って下さい Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 123 Part4．Power up your site 最後に、トラッキングコードを取得します。トラッキングコードとは、アクセス解析 のためにホームページに貼り付ける JavaScript のことです。とにかく、ここで取得で きるコードをテキストエディタか、メモ帳などに保存してください。 トラッキングコードの埋め込み トラッキングコードの埋め込みは、あなたのホームページ上から行います。 まずは、編集用の ID とパスワードで認証を行い、ページ左の編集ツールの「設定」 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 124 Part4．Power up your site をクリックします。続いて、「サイト情報の設定」をクリックし、「アクセス解析タグ」 と書かれた部分に、アクセス解析用のコードをコピー＆ペーストします。後は確認を押 し、設定を反映させます。 サイト情報の設定をクリック アクセス解析タグ欄に、入力 トラッキングコードが貼り付けられたら、ステータスの確認を行います。現状では、 「不 明」になっています。 上の設定を行ってから、3 分ほど待ってから、 「ステータスを確認」をクリックし、更新 します。（※ステータスの確認は、QHM 上ではなく、Google のサイト上で行います） Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 125 Part4．Power up your site ステータス確認がうまくいくと、以下のようなページなります。 「レポートビュー」を見ると、様々な情報を見ることができます。ただし、ある程度イ ンターネットマーケティングの用語が分からないと、難しいでしょう。 簡単にアクセス解析をするなら、その他のアクセス解析サービスもお試し下さい。 問い合わせフォームを作る 問い合わせフォームのないホームページは、単なるパンフレットです。訪問者から何 らかのレスポンス（反応）を得られるようにする方がよいでしょう。質問や、資料のダ ウンロードなどができると、ホームページは敏腕営業マンへ成長し始めます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 126 Part4．Power up your site 問い合わせのメリット 問い合わせフォーム を置くことに対するデメリットはありません。置けば、質問や 予約などを入れたい人が問い合わせやすくなります。電話で質問すると売り込まれるの ではないか？このように思うかも知れません。そんな人は、間接的な問い合わせを望み ます。 メールアドレスだけではダメな理由 メールアドレスだけを配置するよりも、メールを使わなくても問い合わせできる仕組 みが望ましいでしょう。もちろん、返事にはメールアドレスが必要なのですが、抵抗感 が随分違います。 メールアドレスだけを置いておくと、不親切なホームページと取られかねません。や っぱり、専用の問い合わせフォームがある方がよいでしょう。フォームは、用途に合わ せて複数持つのが理想的です。 無料サービス「フォームズ」を使う 便利な時代になりました。何でもかんでも、無料です。もちろん、問い合わせの設置 にも、無料で利用できるフォームズというサービスがあります。 フォームズ http://www.formzu.com/ フォームズを使うには、メールアドレスが必要です。フォームズのフォームから送信さ れた情報は、「登録したメールアドレス」に送られます。従って、メールフォームのメ ールアドレスは、問い合わせ先になりうるメールアドレスを入れてください。仕事とプ ライベートは分けた方が良いでしょう。なお、ロリポップサーバーは、簡単にメールア ドレスが作れます。大いに活用してください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 127 Part4．Power up your site 図：フォームズの様子 図：フォームズでフォームを作る様子 有料版フォームズをお勧めします リサーチをしていて発見しましたが、自力でフォームと作る方法などが、販売されて います。確か 1 万 5 千円ぐらいだったでしょうか。フォームズは年間 3800 円で使えま す。自力で作った場合、時間を浪費するだけでなく、様々な損があります。 フォームズなどのレンタルサービスを利用すると、自動返信メール、ログ管理、セキ ュリティチェック強化など、様々な利点があります。また、複数のフォームを作れるの で、お得です。ノウハウを買うぐらいなら、同じ価格で 3 年フォームズを借りるべきで しょう。 自動返信を使って、いろいろやってみよう あなたのホームページで、カタログ、無料資料、サンプルを提供しているとします。 申し込みが行われてから、即座にお客に提供できることが望ましいです。そこで、自動 返信メール機能を使用する事で、「ダウンロード先」や「ダウンロードのパスワード」 などを即座に素早くお客に提供する事が出来ます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 128 Part4．Power up your site Web上に無料で 100MBの自分のスペースを作る 大きなファイルをやり取りする方法 お客様や社員との間で複数のファイルを共有したい場合があります。この時、誰かの パソコンにデータを入れておいて、メールで送る、USB メモリで手渡すなどは、非常に 手間です。そこで、インターネット上でファイルを共有するサービスがあります。様々 なサービスが提供されていますが、いろいろ試した結果、一番使いやすかった、WebFile (http://www.webfile.jp/)を御紹介します。 WebFileとは 無料で 100MB の共有領域を使えます。ただし、一ヶ月に一回ログインが必要です。 無料で使えるといっても十分すぎる高機能です。機能について説明すると、キリがあり ませんが、一番のポイントは、高機能だが、「とても使いやすい」点です。 ファイルを人に送りたい場合、WebFile にファイルをアップロードします。次に、専 用メールフォームから送りたい人にメール通知します。この際、メールアドレスを登録 しておけば、簡単に送ることができます。また、複数のファイルを送ることも簡単です。 共有ファイルは、フォルダに分けて管理できます。 まずは、登録して使ってみてください。非常に便利です。 WebFileを利用してできること WebFile 上にファイルを置いて、配布することができます。自分のホームページ領域 とは別に 100MB 使えます。例えば、20MB のファイルを 3 つ配布したいとします。こ のファイルを自分のホームページ領域に置くと、60MB 使います。レンタルサーバーな どで容量が少ないところでは、50MB 程度しか無く、容量オーバーです。そんなときは、 WebFile を使えば便利です。 また、WebFile を使うことで、お客様とデータのやり取りが可能です。お客様に、あ なたの WebFile 領域にアップロードしてもらうことができます。自前で用意すると、大 変ですが、アウトソージング(WebFile)であれば、手間もコストもありません。 社内の情報共有にも一役買います マニュアルやホームページのパッケージの共有にも WebFile を活用できます。マニュア ルを変更したり、追加した場合、WebFile にアップロードして、常に WebFile 上のマニ Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 129 Part4．Power up your site ュアルを最新に保つことで、社員と簡単に情報を共有できています。 ステップメールを活用する ステップメールをご存じでしょうか？ ステップメールは、スケジュールに合わせて自動的にメールを配信する仕組みです。 ほとんどのステップメールは、名簿と連動して、○○のところを個人の名前にすること ができます。この機能によって、「直接メールをしているように」感じさせることがで きます。 ○○さん、こんにちは。 今日は、ホームページ作成について大事なお知らせがあります。 ○○さんは、・・・ まぐまぐ！などのメールマガジンと違うのは、ステップメールでは、登録した時から、 第 1 号のメールから、順次発送できることです。まぐまぐ！だと、途中から読み始める ことになります。 この仕組みを応用すれば、様々な事ができます。 お客様のフォローにも使えます。購入後、配信を開始します。 1 日目. 「お買い上げ有り難うございます」 2 日目. 「商品に不備はありませんか、あればすぐにお知らせ下さい…」 3 日目. 良くある質問と回答 1 週間目. 「もう一週間たちましたが、どうですか？」 2 週間目. ・・・ 1 ヶ月ぐらいフォローをすると、お客はファンになりやすいそうです。この作業を手で やると、毎朝リストをチェックしたり、カレンダーに予定を書き込んだりといった、と んでもなく面倒な作業が必要になります。このような手間をある程度軽減できる可能性 があります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 130 Part4．Power up your site また、無料レポートをダウンロードしてもらい、ステップメールを送ることも効果的で す。あなたも、その体験をしたことがあると思います。 実際に、私も契約しようと思って、色々調べました。その結果、初めての人にお薦めな のが、オートビズです。１つのシナリオでのステップ数が無制限です。一斉配信はでき ませんが、調べた中では、一番リーズナブルでした。 オートビズ http://autobiz.jp/ そのほかにも、 「メール商人」 「楽メール」｢アスメル｣などがあります。メール商人は、 月額 15、000 円程度かかります。かなりのリストがあって、メールマーケティングを実 施していこうと思われる方に最適です。リストが少ない間は、メール商人の様々な機能 の恩恵を受けることはないでしょう。 楽メールは、ソフトウェアを購入することになるので、更新費用がかからなくなります。 ただし、設置の手間がかかります。その他のデメリットとしては、ホームページにある タグを貼り付けておいて、閲覧されたときに楽メールが動くという仕組みを使います。 朝の 8 時にメールを配信したいと思っても、10 時頃にその日の訪問者が来ると、10 時 以降に発行となります。あまり時間まで気にしないし、毎日かなりの数の人が見に来る ページであれば、あまり問題が無いかも知れません。 お支払い方法の工夫 「お店のホームページにクレジット決済を付けなければいけない」と思っている人が いますが、必ずしも必要ではありません。直接売り切ったり、大量の注文が入るような 商売でなければ、簡単な他の方法でも構いません。 大きく分けて、2 つの方法があります。一つは銀行振り込みです。もう一つが代金引 換サービスです。 銀行振り込みの方法 銀行振り込みは昔からの方法です。よく OL が昼間に大量の通帳を機械に通している のを見かけます。現在、ほとんどの銀行が Web 通帳サービスを提供しています。Web Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 131 Part4．Power up your site で口座情報を見ることができます。これで、会社から銀行に行く手間も省けます。 是非、ご利用下さい。 一番簡単なクレジットカード決済の方法 利用者の為に複数の支払い方法を用意することが望ましいです。代金引換サービスを 利用すれば、簡単です。具体的には、佐川急便が提供している e コレクトがお勧めです。 e コレクトを使えば、お客側で支払い方法を選べます。クレジット一括、クレジット分 割、デビットカード、現金などが可能です。 支払いや集金、領収書の発行はすべて佐川急便側で行ってくれます。また、入金も次 の週ですから、キャッシュフロー的にも良いです。 インフォカート、インフォトップなどを利用する インフォカート、インフォトップ、インフォハウス等を利用すると、決済システムや 販売システムを代行できます。売上金額の 10%を支払うことになりますが、面倒な手続 きが全てありません。自分で全てを行うと、結局、労力がかかります。 インターネットで情報商材を売りたい場合は、検討すると良いでしょう。 各サービスの詳細は、各サイトをご覧下さい。（下のサービスほど後発サービスです） インフォカート：http://www.infocart.jp/ インフォトップ：http://www.infotop.jp/ インフォハウス：http://www.infohouse.jp/ インフォトップやインフォハウスは、アフェリエイターにとって使いやすいサービス になっています。アフェリエイターを活用した販売をされる場合に、お勧めです。 おわりに インターネット技術は、日々進化します。面白いサービスも次々出てきます。積極的 に、試してください。ほとんどが、事前にしっかり説明もありますし、無料で試せる場 合が多いです。 無料のお試しから始めて、良ければ徐々に有料化していくと良いでしょう。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 132 Part4．Power up your site 例えば、フォームズなどは有料サービスに申し込むと SSL という暗号通信を使えるよ うになります。お客様の情報をいただくときに、「SSL で暗号化されますので、安全で す」とアピールできます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 133 Part5．Killer page Part5． KILLER PAGE キラーページマニュアル 最後まで読んでもらう! キラーページ Part5.では、キラーページデザインを活用する方法をお伝えします。 まず、キラーページとは何か？どういう利点があるのか？既存のページデザインとの使 い分けなど、キラーページ自身の説明を行います。続いて、キラーページの構造の詳細 を説明し、フォント設定、バックグラウンド設定の方法を解説します。 これだけでは、単に使い方です。そこで、基本的な販売ページを作る具体的な作業手 順と、応用的な作り方、テストの方法などを解説します。あなたの利益を最大化し、お 客様にしっかりと提案を行うために、この章はとても役立つでしょう。 では、早速はじめましょう。 CONTENTS キラーページとは？ キラーページのまとめ 通常のページとの併用方法 KILLER PAGE を使う方法 キラーページデザインを作る方法 Word からページを写すコツ キラーページを作る方法、ワンポイント 応用編 キラーページの活用方法 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 134 Part5．Killer page キラーページとは何か？ キラーページとは、ある有名なマーケターが使った言葉です。私自身は、「ストレー トページ」と呼んでいました。しかしながら、お客さんの多くが「キラーページ」とい う言葉を使われていたので、キラーページデザインと呼ぶことにします。 通常の Quick Homepage Maker のデザインと比較するとわかりやすいですが、メニ ュー、ナビ、ナビ２など余分なものがなく、上から下にまっすぐ読ませるタイプのデザ インをキラーページと呼びます。 通常の 6 パートデザイン キラーページデザイン Quick Homepage Maker では、通常のデザインとキラーページを同時に簡単に使うこ とができます。さらにキラーページは、瞬時に「背景色」と「フォント色」「フォント の種類」を変更することができます。 このキラーページの目的は、「お客様に、読んでもらうか、閉じるか？」という閉鎖 的な状況を作り出すことができます。通常のデザインのページでは、メニューやナビな ど、目を奪うものが存在しています。様々な情報から選んでもらう場合、6 パートデザ Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 135 Part5．Killer page インは優れていますが、「提案」を行う場合には向いていません。 一方、キラーページは本文以外、何もありません。他のページに移動するリンクすら ありません。その結果、キャッチを見て、続きを読み続けるか、「閉じるか」の選択を 迫ります。その結果、読まれる率を高め、自然と上から下に読んでもらえます。 例えるなら、お客様と「一対一」で個室の中で営業するような状況をＷｅｂ上で作り 出すことになります。また、シンプルなデザインを心がけることで、「手紙」としての 雰囲気を作り出し、読みやすくさせる効果も持ちます。 これらのデザインは、結果をだしているマーケターがよく使うデザインでもあります。 このキラーページデザインのフォントサイズ、フォント色のパターン、フォントの種類、 ページ幅などは、たくさんの売れているページを調査し、その傾向を分析し、形にしま した。だれでも簡単に、トップマーケターと同じ、結果を残しているページデザインを 活用できるようになっています。 キラーページのまとめ 詳細な部分までを理解する必要はありませんが、簡単に Quick Homepage Maker の キラーページの仕組み、デザインを説明しておきます。 デザインについて ロゴ部分、ナビ部分、メニュー部分、ナビ 2 部分は、表示されません。本文のみのデザ インになります。 フォントは、 「明朝」 「ゴシック」から選べます。IE（Internet Explore）だけでなく、 Firefox や Opera、Mac の環境でも、正しく明朝、ゴシックを表示できるように設定さ れています。簡単にフォントの種類を一発変更できるので、試しながら、しっくりくる フォントを選んでください。 見出しのフォント色は、「赤」「青」「黒」など自由に選べるようになっています。た くさんのセールスレターを調べたところ、基本色がこの 3 色です。商材に合わせ、3 色 から選んでください。ちなみに、光の三原色というものがあり、ＲＧＢ(赤、緑、青)が Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 136 Part5．Killer page あります。緑はインパクトがないので除けば、赤、青、そして黒となります。人間に刺 激を与えやすい色なのかも知れません。 レイアウトについて フッターには「copywrite」の記述だけが表示されます。ページは「真ん中」に配置 され、幅は約 500px で折り返す設定です（白の部分は 600px 近く）。これも、多くのセ ールスレターを調べ、設定しました。 なお、詳しい方法は後述しますが、横幅などはご自身で変更が可能です。 統一感について 人間は無意識で様々な情報を受け取っています。その中でも、「感性的な情報」は、 無意識に影響を及ぼします。統一感を持たせることで、自然と安心感を与えることがで きます。このキラーページデザインでは、「キャッチコピー」の色と「サブキャッチの 色」は、同色に自動的に設定されます。同様に、キャッチ・サブキャッチのフォントも 同じものを使うように設定されています。 その他の機能 Quick Homepage Maker は、自動リンク機能が特徴です。ところが、キラーページ内 にリンクを作られると、クリックして、ページから出て行ってしまいます。お客に逃げ られる環境を作ってしまいます。 そこで、キラーページデザイン内では、「自動リンク機能」は無効になっています。 また、シンプルデザインを採用することで、ページの読み込み速度が速くなるように 工夫されています。 通常のページとの併用方法 あなたのメインページは「6 パートデザイン」を使うことをお勧めします。通常ペー ジの中で、アクセントをつけるように「キラーページ」を活用すると良いでしょう。例 えば下図のように、特定のリンクをクリックすると、キラーページが表示されるように 設定する事で、 「本気モード」に移行してもらい、そこで高い反応を得るようにします。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 137 Part5．Killer page KILLER PAGEを使う方法 キラーページを作るには、ページの「編集画面」内に、以下のようなルールで書きます。 キラーページデザインの基本的な書き方 キラーページ指定 KILLERPAGE2:redgg,gray キャッチ、見出しの色指定 本文のフォント black, blue, red などから選ぶ キャッチ・見出しのフォントを選ぶ。 g : ゴシック m : 明朝 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 138 Part5．Killer page 具体的には以下のような感じになります。 KILLERPAGE2: という文言に加え、必ず指定する必要があるのは、 上図の色が付いている 4 箇所です。 ・キャッチコピーやサブキャッチの文字色 ・キャッチコピーやサブキャッチの文字フォント（ゴシック又は、明朝） ・本文のフォント（ゴシック又は、明朝） ・背景の色 フォントについては、ゴシック（g）又は明朝（m）のどちらかを指定して下さい。 色については、CSS の色指定方法で指定する事で、あなたの好きな色を自由に設定でき ます。色と対応する CSS 形式の英数字は、以下のサイトで見つけられます。 http://www.colordic.org/ 特にこだわりが無い場合は、以下の記述をそのままご使用されると良いでしょう。 例 1： KILLERPAGE2:redgg,gray 例 2： KILLERPAGE2:redgg,#ccc 他の背景色などを設定したい場合は、背景色の見本や、予めこちらで用意している背景 用画像もありますので、詳しくは会員サイトでキラーページの解説をご覧下さい。 （※「キラーページ デザイン」というキーワードで検索すると、すぐに見つかります） Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 139 Part5．Killer page もっと細かく設定したい場合 また、もっと細かくこだわりたい方の為に、下図のように「全体の幅、余白、本文背景 色、本文フォント色」を自由に設定する事も可能です。 基本の書き方の後ろに、以下のような書式で記述を追加します。 KILLERPAGE2:redgg,gray[,幅,余白,本文背景色,本文フォント色] 例えば、特に多い要望が、「横幅の変更」です。 幅のみ変更したい場合は、以下のように書きます。 KILLERPAGE2:redgg,gray,800 これで、800px の横幅でセールスレターが作られます。 デフォルトの余白は、60px に設定されていますので、800(px)で設定すると、文字部分 は、800 - (60+60) = 680px となります。 幅と余白をうまく組み合わせて、最適な大きさを模索してみて下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 140 Part5．Killer page ロゴ画像設定 幅一杯のロゴ画像を使ってセールスレターを作りたい場合に使います。 通常の画像貼り付けの場合は、余白の中、本文部分にヘッドコピーが入ります。 ここでの設定を実行すると、ロゴ画像をめいっぱいに広げることができます。 - 書き方 KILLERPAGE2IMG:ここに URL 例えば、''swfu(簡単アップローダー)を使って、ロゴ画像をアップ''します。その上で、 ロゴ画像の URL をコピーし、貼り付けると便利です。 KILLERPAGE2IMG:http://hogehoge/swfu/d/logo_img.png 上記のような記述を編集画面に追記してください。 なるべく、http:// から始まる形を使ってもらうと、他のシステムと連動するときに便利 です。 背景画像設定 こちらで用意した物以外の背景画像を使いたい場合、設定します。 ただし、貼り付けた画像は、繰り返し表示になりますので、ご了承ください。 （※繰り返しを行いたくない場合は、直接プログラムを編集してご対応下さい） - 背景画像指定 KILLERPAGE2BG:ここに URL たとえば、''swfu 簡単アップローダー''を使って、背景画像を設置します。その後、URL を取得して、設定します。 KILLERPAGE2BG:http//hogehoge.com/swfu/d/bg.png 上記のような記述を編集画面に追記してください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 141 Part5．Killer page 特定の人だけに公開する場合 キラーページは、特定の人だけに公開したい場合があります。例えば、優待販売や、 ステップメールを読んだ後に誘導したい場合なのです。この場合、以下のように書きま す。 KILLERPAGE2:redgg,black1 NOINDEX: 「NOINDEX:」と書くことで、検索エンジン登録されなくなります。 また、どのページからもリンクを行わないようにする事で、リンクを辿ってページを閲 覧する事が出来ないので、キラーページの URL を知っている人しかアクセスできない ようになります。 ワンポイント！フォントの選び方 フォントの雰囲気は、一般的に「ゴシック」は、優しい感じ、どっしりした感じがで ます。一方、明朝は「真剣」な感じがとてもよく出ます。 しかし、フォントの設定ばかりは、実際に見てみないと分かりません。実際に設定し てみて、確認し決定してください。女性の意見を取り入れると良いかも知れません。理 想は２つ作って、テストすることですね。 キラーページデザインを作る方法 キラーページの内容は、とても重要です。コピーライティング、セールスレター、売 る文章の勉強をして、書き方をマスターしてください。現在、たくさんの書籍が出てい ます。まずは本を買って、そこに書いてあることを学ぶことから始めましょう。他にも、 たくさんの教材が販売されているので、一つ購入し、真剣に学ぶと良いでしょう。 キラーページを初めて作る場合、以下のような手順だと作成しやすいと思います。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 142 Part5．Killer page 1. 2. 3. 4. 5. 紙の上で、販売文章を考え練り上げる Microsoft Word 等を使って、レターを書き上げる Word で装飾を行い、デザインを固める Word を見ながら、Quick Homepage Maker に写す フォント、フォント色、背景、枠などを整え、完成させる Quick Homepage Maker で、ホームページにアップするのは「最後」です。いきなり、 Quick Homepage Maker 上でページを作らないでください。販売ページを作る場合、中 身を完璧に固めてから、書いて下さい。ページを作りながらでは、いいコピーは書けま せん。 Wordからページを写すコツ 先に Word 上で「見出し 2」などを使って作成しておき、QHM の編集画面に移す際に 見出し 2 は、** をつけます。見出し３には、***をつけます。 こういうことをするだけで、簡単にページを書き上げることができます。 キラーページを作る方法、ワンポイント デザイン的なアドバイス Quick Homepage Maker では、自動的にフォントなどを統一します。従って、無理に 改行などを入れなくても、自動的に折り返します。とにかく、細部にこだわらないよう にしてください。Quick Homepage Maker に任せておけば、有名マーケターと同じデザ インを利用できるようになります。 枠を使う Quick Homepage Maker では、枠を使えます。枠を効果的に使いましょう。弊社の場 合、枠は「商品」や「お客様の声」の時に活用しています。 画像について 大量の画像を貼ると、読み込みが遅くなります。写真に頼りすぎず、手紙として、言 葉で相手に迫って下さい。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 143 Part5．Killer page 文字の装飾 キラーページでよく使う文字装飾を紹介します。 z z z キャッチコピーは、* を使う サブキャッチは、** を使う 小見出しには、*** を使う 何度も繰り返しますが、できるだけシンプルに作るべきです。 z z z z 下線を活用する 蛍光ペンを活用する（なるべく、一色だけ） 太字を活用する 赤字を活用する Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 144 Part5．Killer page 手書き下線は、キラーページデザインの場合、「下線」に変わります。下線にすること で、ずいぶん読みやすさが変わってきます。 z z 枠を使う フォームを使う 枠を使うと、強調ができます。枠の使い方は、前章をご覧下さい。以下のように書きま す。 枠の設定 応用編 キラーページの活用方法 キラーページを活用するためのサイトの構成のヒントをお伝えします。弊社の販売サイ トでは、直接、Quick Homepage Maker のセールスレターにアクセスできないようにな っています。 まずは、レポートを用意し、興味がある人のメールアドレス、お名前を得るようにし Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 145 Part5．Killer page ています。そして興味がある人に、情報を送りつつ、販売ページにアクセスしてもらう ように作っています。 ホームページ メールアドレス登録 オファーページ メール [email protected] 販売ページ このような仕組みを作り上げる方法をお伝えします。 短いホームページアドレスを使う方法 オファーページや販売ページは、メルマガなどにＵＲＬを表示します。Quick Homepage Maker で日本語ページを作ると http://www.1st-easy-hp.com/index.php?%13%5E%D3 … と長いページ名になってしまいます。実は%13 で日本語 1 文字を表しています。こ れを URL エンコードと言います。 日本語では%5E%NE%32 となりますが、英語のページを作ることで、変な文字列を 避けることができます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 146 Part5．Killer page 例えば、オファーページをhttp://www.1st-easy-hp.com/index.php?HPEvol1 というペ ージ名で作成したと仮定します（※URLは実在しませんのでご注意下さい） 。HPEvol1 というページなら、このように短い URL（ホームページアドレス）になり ます。ちなみに、上の URL は、index.php をのぞいて、 http://www.1st-easy-hp.com/?HPEvol1 と書いてもＯＫです。 実際の方法としては、[[特別レポート>HPEvol1]] と書くことで、 「特別レポート」と書 かれたリンクをクリックすると、HPEvol1 ページに移動します。Quick Homepage Maker では、タイトルにページ名を使いますので、編集画面内に以下のように書く事で、 タイトルを自由に変えましょう。 TITLE:特別レポートプレゼント ちょっと説明が分からないかも知れませんが、読み進めれば分かるようになります。 次に進みましょう。 オファーページを作ろう オファーとは提案のことです。魅力的な提案をして、問い合わせをしてもらうことを 意味します。インターネット上であれば、無料レポートなどをプレゼントすると良いで しょう。このとき、オファーを受け取る代わりに、メールアドレスと名前をもらいます。 弊社の Quick Homepage Maker を購入するまでの仕組みを思い出して下さいね。 このオファーこそ、しっかり売り込むことが必要です。ここで手を抜くと、人が集ま りません。オファーは、「キラーページ」デザインで作ってください。 なお、内容については、アマゾンなどで、「セールスレター」と検索し、書籍を読み ながら学ぶと良いでしょう。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 147 Part5．Killer page メールフォーム オファーには、フォームが必要です。フォームを貼り付け、自動返信メールでプレゼ ント情報を案内すれば、手間が減ります。とにかく、省力化して、時間を作り、戦略、 マーケティングを考える時間を作ることです。 弊社では、以前「フォームズ」というサービスを利用して、自動返信、メール送信を 行っていました。現在は自社で作成したメールフォームを使用しています。 申し込みページを作る 申し込みページも、キラーページデザインで作ることをお勧めします。まさに、契約 書という感じで作れますので、かなり信頼度が増すと考えられます。 おわりに キラーページデザインは、成約率を上げるデザイン構成になっています。このページ のデザインは、十分機能することが分かっています。そこで、このページの自動装飾、 レイアウト能力に任せて、あなたは、 「ホームページの中身」だけに集中してください。 常に「一番大事なところ」から攻めていく癖をつけてください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 148 Part6．Afferiate link Part6． AFFILIATE LINKS 埋め込みアフェリエイトマニュアル 是非紹介したい商品には! アフェリエイト Part6 では、埋め込みアフェリエイトについてご説明します。 Quick Homepage Maker では、簡単にアフィリエイトプログラムを利用することができ ます。以下では、３つのアフィリエイトを取り上げます。 アフィリエイトの作り方は、動画マニュアルでも用意しています。是非、ご活用下さい。 ※動画マニュアル アフィリエイトリンクを貼り付ける方法 → http://www.1st-easy-hp.com/demo/afflink/afflink.html アマゾンアソシエイトを活用する方法 → http://www.1st-easy-hp.com/demo/amazonlink/amazonlink.html CONTENTS リンクするだけのアフェリエイト方法 高度なアフェリエイトタグ GoogleAdSense を利用する ※Google AdSense は付録もご覧下さい Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 149 Part6．Afferiate link リンクするだけのアフィリエイト もっとも簡単なアフィリエイトの使い方です。所定の URL を使ってリンクを作るだ けの場合、以下の機能を使います。 [[リンク名>アフィリエイトリンク]] これだけで、アフィリエイトリンクを作ることができます。 例えば、インフォカートへのアフィリエイトの場合、 [[インフォカート申し込みはこちら>http://www.infocart.jp/?e=hokuken]] と書きます。 また画像付で、アフィリエイトリンクを作る場合も、 [[&ref(画像名);>リンク先]] などと書きます。 高度なアフィリエイトタグ 楽天などのアフィリエイトは、 「HTML を直接貼り付ける形」になっています。Amazon の自動商品リンクも同様の仕組みです。これらを使う場合は、HTML 貼り付け機能を使 います。 #html{{ (ここにアフィリエイトのタグ) }} とするだけで、アフィリエイト商品を貼り付けることができます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 150 Part6．Afferiate link 楽天アフィリエイトを貼り付ける方法で説明します。 まず、楽天アフィリエイトにログインし、商品を探します。商品リンクをクリックし、 商品画像ごと貼り付ける場合は、「HTML タグ」をコピーします。 コピーする Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 151 Part6．Afferiate link コピーした HTML タグ を、この中に貼り付ける このように表示される Google AdSense 動画マニュアル（GoogleAdSense を使う方法） → http://www.1st-easy-hp.com/demo/googleadsense/googleadsense.html Google AdSsense の契約が必要です。契約の流れは、付録をお読み下さい。 まず、Google AdSsense にログインします。 https://www.google.com/adsense?hl=ja 次に、「AdSsense 設定」をクリックします。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 152 Part6．Afferiate link 今回は、「Google Adsense のコンテンツ向け」を選びます。他の方法も、基本的に同じ です。 Quick Homepage Maker のコンテンツ部分の寸法は、 幅 550px です。全体の幅は、750px です。従って、ナビ２に挿入する場合は、ビックバナーをお勧めします。コンテンツ内 には、バナーがお勧めです。メニューは、200px 程度ですので、縦型を選んでください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 153 Part6．Afferiate link コンテンツ部分に広告を挿入する場合、 「ページ毎に挿入」することになります。一方、 ナビ 2 や、メニューバーに挿入すれば、すべてのページで表示されます。 適当にパレットを選ぶか、独自の色を設定してください。 チャンネルの設定などの細かい情報は、その他の情報をご覧下さい。弊社では、ノウハ ウやサポートを行っていません。 次を押すと、広告コードが表れます。これは、HTML タグです。この HTML タグをコ ピーし、Quick Homepage Maker に貼り付けます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 154 Part6．Afferiate link すべて選択。 コピーする Quick Homepage Maker で、編集を押し、 「HTML」タグ埋め込みボタンを押し、この コードを入力します。 ②ここに貼り付ける ①クリック 後は、更新を押します。更新した瞬間は、英語ページになりますが、何度か「再読込」 を行うと、日本語の広告が出るようになります。以下のようになります。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 155 Part6．Afferiate link 同系色にすると、 目立たなくてお勧め 同様に、メニューバーに挿入してみます。 まず、広告選びで、「縦長タイプ」を選びます。160 の幅でもＯＫです。 今回は、 「ワイドスカイスクレイパー」を選びます。 「次へ」を何度か押し、広告コード を取り出します。次に、ホームページ左にある編集ツール内の「メニュー管理」を押し、 「メニュー編集」を選びます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 156 Part6．Afferiate link 先と同様に、「HTML 貼り付け機能」を使って、広告コードを貼り付けます。 すると、すべてのページに(メニュー上に)広告が表示されます。 表示される！ ナビ 2 にも同様に貼り付けることができます。ナビ 2 も、すべてのページに表示される ので、一度貼れば、ずっと広告が表示されます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 157 Conclusion CONCLUSIONS おわりに Quick Homepage Maker は、次世代のツールです。 コンテンツ・マネジメント・システムは、デザインを自動化するため、人は中身だけに 集中することができます。 そして、システムが得意なことを理解し、細かいことにこだわらないことで、 Quick Homepage Maker は、あなたの手に馴染む道具になります。 なれてしまえば、流れるように簡単にホームページを作り、立ち上げることができます。 思い立ったら、すぐに記事を書き、アップロードし、メール送信して、お客さんに見て もらうこともできます。 今までの常識を捨て、「本当に大事なものは何か？」を考えてください。 お客さんや、訪問者は、あなたのデザインを見に来たわけではなく、中身の情報を読み に来ています。 彼らにわかりやすいナビゲーション、読みやすい行間、すっきりとしたデザインを提供 しつつ、中身を提供する。 そして関係を築き、あなたの商品・サービスを広げてください。 最後にお願いがあります。 「必ず、Quick Homepage Maker を活用し、結果を出す」 ことを約束してください。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 158 Conclusion 私たちは、その応援する準備を整えています。 そして自らが販売するために必要とした仕組みを作り上げ、 その仕組みを提供していきます。 北摂情報学研究所 代表 亀田学広 スタッフ一同 以上です。 ※ 著作権をお守り頂きまして、ありがとうございます。このテキストの内容の著作権は、 すべて北摂情報学研究所にあります。このテキストの内容の無断複写、無断転載を禁じます。 Copyright © 2007 - 2010 北摂情報学研究所, Inc. All Rights Reserved. 159 Premium APPENDIX Premium APPENDIX 付 録 Quick Homepage Maker を活用するために、以下の付録があります。 ・ Google アドセンス契約の手順 Google アドセンスの登録方法の手順を説明しています。はじめて Google アドセン スを利用したい方は、ご覧下さい。 Copyright © 2007 - 2010 北摂情報学研究所，Inc. All Rights Reserved. Google AdSense by Copyright © 2007 北摂情報学研究所, Inc. All Rights Reserved. HOKUKEN Google Adsense 契約の手引き 不安な人のためにガイドします！ Google アドセンスと検索する Copyright © 2007 北摂情報学研究所, Inc. All Rights Reserved. 必要項目を入力 Copyright © 2007 北摂情報学研究所, Inc. All Rights Reserved. アンケート Copyright © 2007 北摂情報学研究所, Inc. All Rights Reserved. しばらく待つと、メールが来ます Copyright © 2007 北摂情報学研究所, Inc. All Rights Reserved. 後は、振込先のアンケートを答えて下さい。 Copyright © 2007 北摂情報学研究所, Inc. All Rights Reserved.