2005 年 7 月 23 日神奈川県マンション管理士会講習会資料ホームページの立上げ方法内藤正裕 ※ 学習の目標この講習会では、受講者のみなさんが下記のことができるようになることを目標としています。 (1) ブログを利用したホームページを作れるようになること (2) HTML/CSS の基礎を知ること (3) ブログ作成ツール「Movable Type」について知ること (4) 独自ドメインの取得方法を知ること (5) SEO(検索エンジン最適化)対策について知ること (6) ホームページを開設するときのポイントを知ること多少難しい内容もあえて含めていますので、最初からすべてを理解する必要はありません。とりあえず「こういうことが出来るのか」ということを知っていただくだけでも十分です。「自分ではお手上げ」という方のための対処方法も最後にご紹介しますので、安心してご参加ください。すべてのファイルをサーバーにアップロードする作業の繰り返しで、非常に手間と時間がかかる。ホームページ全体のレイアウトや構成をリニューアルしようとすると、それこそ大変な作業で、今まで作った全ページに手を加えていかなければならない。結局のところ、いったんホームページ・ビルダーで作られたホームページは、手間がかかるために更新も滞りがちであり、時代遅れとなったデザインや構成を大きく変えることもできず、いったん入力したコンテンツを他のホームページに移し変えることもできない、という様々な問題を抱えている。 I. はじめに 1. なぜ「ホームページ・ビルダー」ではダメなのか？最近まで、個人がホームページを立ち上げるときには、「IBM ホームページ・ビルダー」等のホームページ作成ソフトを利用することが一般的だった。実際、筆者のホームページも、当初はホームページ・ビルダーによって作られたものであったし、ごく最近まではホームページ・ビルダーによって更新を行っていた。また、神奈川県マンション管理士会のホームページ (http://www.kanagawa-mankan.org/)もホームページ・ビルダーによって作られたものであり、現在でも更新作業はホームページ・ビルダーによって行われている。 2. なぜブログなのか？一方、最近流行しているのが「ブログ」である。ブログとは Web log(ウェブログ)の略で、日記形式のホームページの総称であるが、 HTML やプログラムに関する知識がまったく無くても、インターネットの電子掲示板に投稿する感覚で手軽に記事の追加や更新が出来ることが特長である。以前はコンピュータ業界のエンジニアなどがブログで情報交換や意見交換を行っていたが、 2000 年頃から米国で一般ユーザーの間でもブログの利用が広まり始め、それを受けた形でニフティやヤフー！などの大手プロバイダーがこぞってブログ開設サービスを提供し始めたことから、国内でも利用者が爆発的に増えている。総務省の調べによると、2005 年 3 月末時点の国内ブログ利用者数は延べ約 335 万人、月に 1 度はブログを更新しているアクティブブログ利用者数は約 95 万人、ブログ閲覧者数は約 1,651 万人という状況で、2007 年 3 月末にはそれぞれ約 782 万人、約 296 万人、約 3,455 万人に達すると予測されている。実際、マンション管理組合や管理組合役員が開設しているブログも増えつつあり、例えば「マンション管理組合日記」 (http://xss.jp/mkan/)などがある。たしかにホームページ・ビルダーを購入して、マニュアルを読みながら一通りの作業を行っていけば、比較的容易にホームページの開設はできる。しかし、問題はその後の更新作業である。その都度ホームページ・ビルダーを起動して、新たなファイルを追加したり、変更部分を更新したりした後に、 ※神奈川県マンション管理士会理事 1 ものである。芸能人やスポーツ選手などが開設しているブログも人気を博している。筆者のホームページ(http://www.m-naito.com/) も最近 Movable Type を利用してリニューアルされた。しかし、ブログは基本的に日記形式なので、そもそも商用目的にはあまり向かないものだった。ところが、Movable Type というデザインの柔軟性の高いブログ作成ツールが開発され、一見ブログには見えないホームページを容易に構築することができるようになったことから、これを利用したビジネスサイトも増えつつある。実際、最近開設された日経 BP 社の「マンション新時代」 (http://mansion.nikkeibp.co.jp/)のサイトは、Movable Type によって作られている。本稿では、上で紹介したように、ブログを利用しながらも、一見しただけではブログのように見えないホームページを構築するためのノウハウを紹介していく。マンション管理士では千葉県マンション管理士会の重松秀士氏のホームページ「マンションサポート・ドットコム」 (http://www.mansion-support.com/)がMovable Type による 2 「livedoor ID をいますぐ登録！」をクリックすると、登録情報を入力する画面になる。 II. ブログを利用したホームページの開設 1. 完成見本実際に livedoor の無料ブログサービスを利用して、ホームページの立上げを行った完成見本が下のものである。希望の livedoor ID や、個人情報等の必要事項を記入し、利用規約に目を通した後に、「利用規約に同意して入会する」ボタンを押すと、その場で ID が発行される。同時にその内容は上で登録したメールアドレスに連絡される。このようなホームページを構築する方法を以下で説明していく。 2. ホームページは 5 分で簡単に作れる (1) ID を取得まず livedoor ID を取得する必要がある。ライブドアのホームページ(http://www.livedoor.com/)を開く。 (2) ブログの作成 ID が取得できたら、「次へすすむ」をクリックすると、引き続きブログの作成が行われる。画面右の中ほどにある「ブログを作成」をクリックすると下の画面になる。タイトルや説明文などを記入して、「作成する」ボタンを押すと、内容の確認画面が表示される。 3 の内容で投稿する」をクリックすれば、最初の記事が投稿される。「ブログの管理ページへ進む」をクリックすると、管理ページが表示される。実際のホームページを確認すると次のような感じである。これでブログのホームページが作成された。今後ブログの投稿や設定変更などは、この画面から行う。とりあえず、ブログタイトルの「マンション管理士・行政書士川原一守事務所(見本)」をクリックして、ホームページを表示させてみよう。 6. カテゴリーを作ってみよう同じような調子で、いくつか投稿を続けよう。記事をカテゴリー分けするために、記事の入力画面で「新規カテゴリの追加」をクリックして、カテゴリを作成しながら、投稿をしてみる。いくつか記事を投稿した後に、実際のホームページを確認すると、下のような感じになる。ブログでは基本的に、最新の記事が一番上に表示される。最初はエントリーが何もない状態なので、タイトルと説明文があるだけである。しかし、これでも世界中のどこからでもアクセスできる立派なホームページである。 3. あとはコンテンツを入れていくだけとりあえず投稿してみよう。「ブログを投稿する」をクリックすると、入力画面が現れるので、タイトルと本文を記入して、アップする画像にあらかじめ用意した写真を選んで「こ 4. ブログっぽさをなくすためにブログを一般のホームページとして使う場合、トップページに表示される情報を固定したい場合がある。その場合、「投 4 下の例では、「シンプル」の中の「blueframe」を選んだ。これで、だいぶブログらしさが消えて、普通のホームページらしくなってきた。稿したブログを編集する」でトップページに表示したい記事を選び、「さらに詳しく設定する」をクリックする。投稿日時を例えば2005年12月31日23時59分のように、未来の日時に変更しておけばよい。これで、その日が過ぎるまでは、一番上に表示される記事は固定される。次に「ブログの設定/管理」でブログの設定を変えてみよう。デフォルトの設定から変更する部分は以下の通りである。 (1) トップページの表示形式を 1 件に変更。 (2) アーカイブの表示件数は「全て表示」に変更。 (3) コメント設定とトラックバック設定はいずれも「受け入れない」に変更。 (4) 広告の表示設定を「表示しない」に変更。 5. よりクールな見た目にするために余計な情報を消してみよう。まず「プラグインの設定」で、「ブログ検索」と「最新記事」の 2 つだけを残して、後はすべて削除する。そして「プラグインの追加」で、「カテゴリ別アーカイブ」を追加する。もう一度「プラグインの設定」を開き、プラグインの順番とタイトルを変更する。このあたりプラグインの追加や設定は、好みに合せて適当に変えればよい。出来上がったホームページは次の通り。このままでも十分ホームページとして通用する出来だ。さらに「デザインの設定」で好みのデザインのものを選ぶ。 5 6. より細かい改良を加えて上で出来たホームページでは、字の大きさが小さ過ぎると感じる人が多いだろう。また、個別の記事やカテゴリー別のアーカイブを開いたときに、プラグインが表示されないのも不満が残る。そこで、「ブログの設定/管理」の「デザインの設定」で、「カスタマイズ」をクリックして、「スタイルシート(CSS)」や「メインページ」等の変更にチャレンジすることにする。の<$ArticleDate$>を削除するか、または で挟んで、次のようにする。 <IfDateChanged><h2 class="date"></h2></IfDateChanged> また、同じ「トップページ」の HTML の中から、一番下のほうにある次の部分 <div id="links"> <$PluginList$> のすぐ下に  を加える。さらに、さきほどと同じ <div id="links"> <$PluginList$> の最後に</div>を追加したものを、個別記事ページの次の行 <div id="footer"></div> のすぐ前にペーストして、下のようにする。 <div id="links"> <$PluginList$> </div> <div id="footer"></div> カテゴリアーカイブについても、上と同じことを行う。以上の変更が終わったら、さきほどと同様に「ブログに設定を反映(再構築)」をクリックし、「全てのページ」を選択して、ブログを再構築する。これでほとんど見た目は普通のホームページらしくなった。まず、スタイルシートの中で「font-size:」という文字列を探していく。そして、以下のように 1 サイズ大きいものにすべて変更する。とりあえずスタイルシートの意味は分からなくてもよい。 xx-small Æ x-small x-small Æ small small Æ medium medium Æ large large Æ x-large x-large Æ xx-large 変更したら、上の内容を保存した後に、「ブログに設定を反映(再構築)」をクリック。「全てのページ」を選択して、ブログを再構築する。次に、トップページの投稿日や余計な情報を消すために、「デザインの設定」で「カスタマイズ」を選び、「トップページ」をクリックする。なお、上のように CSS や HTML を変更した場合、「デザインの設定」で別のデザインに切り替えると、その変更内容が失われてしまうので注意が必要である。必要ならば変更した内容をテキストファイル等でバックアップしておくこと。同様に、誤った変更で表示がおかしくなった場合には、もう一度同じデザインを選びなおせば、初期の内容にリセットされることも覚えておこう。 7. あとはひたすらコンテンツを増やしていくだけホームページのデザインが決まったら、あとはコンテンツを増やしていくだけである。カテゴリーを増やしながら、記事の投稿を続けていこう。トップページの HTML 文書が表示されるので、この中の の少し下にある、次の行 <IfDateChanged><h2 class="date"><$ArticleDate$></h2></IfDateChanged> 6 なお、画像の配置を左から右に変えたい場合は、投稿画像の <img> タグに含まれる align="left" の部分を align="right" に書き換えればよい。し、かつ弊社及び弊社の指定する者に対し著作者人格権を行使しないものとします。 (3) 広告が表示される場合がある最近のインターネット上の広告は、コンテンツの内容に合せた広告が表示される仕組みになっている。マンション管理士事務所のホームページの場合、マンション管理業者の広告などが表示されてしまうケースも考えられるため、注意が必要である。広告を消す設定ができる場合は、消しておくのがよい。 (4) アップロードできるファイルに制約がある livedoorブログは2.5GBものディスクスペースが与えられるが、アップロードできるファイルの形式やサイズに制限がある。具体的には画像ファイルしかアップロードできない。したがって、PDF ファイルや Excel ファイルなどはアップロード不可であり、また、サイズも 500kB が上限となっている。月額 262 円の livedoor ブログ PRO サービスを利用すれば、上の制限は解除される(ただしファイルのサイズは 100MB が上限となる)。一通りの投稿が終わったら完成！早速公開しよう。 8. 投稿者の設定をしよう livedoor ブログでは、複数の投稿者を設定できる。例えば事務所の職員などに日々の更新作業を依頼する場合、その職員を投稿者としてメンバー登録しておけばよい。そのためには、まずその投稿者もlivedoor ID を取得して、ブログを開設しておく必要がある。その後、「ブログの設定/ 管理」の「メンバーの追加/管理」の画面で、「新しくメンバーを追加する」をクリックして、投稿者として設定したいメンバーの livedoor ID を追加すればよい。 (5) 独自ドメインの設定はできないいかにホームページのデザインからブログ色を消しても、アドレスには「blog」という文字が残る。また、サービスプロバイダーの社名もアドレスに残るため、本格的なビジネスサイトとしての利用や、名刺にアドレスを印刷することに抵抗を感じる人もいるだろう。しかし無料ブログサービスでは独自ドメインを設定することはできない(livedoor ブログ PRO サービスでは可能)。 9. 無料ブログサービスの利用で注意すべきこと無料であるがゆえに、いくつかの制約がある。それらを十分に理解した上で利用してほしい。 (1) 商用利用が禁止されている場合がある Yahoo!ブログでは、その「ガイドライン」により、「商業目的や広告目的で利用すること」が禁止されている。 http://blogs.yahoo.co.jp/FRONT/guideline.html 一方、livedoor ブログでは、その利用規約により「弊社が、過度若しくは不適切と判断する商用目的の宣伝・広告行為」が禁止されている。 http://cms.blog.livedoor.com/rule.html?blog_id=1049482 マンション管理士事務所のホームページとしては、前者の利用は不可だが、後者は利用可と考えてよいだろう。 (2) コンテンツの無償利用を承諾させられる場合がある livedoor ブログでは、利用規約に以下の規定がある。ブログに投稿した記事は、ライブドア社に無償利用されることになるので注意が必要である。第８条（ウェブログの公開について）利用者が著作したウェブログとそれに付随するコメント及びトラックバックは当該ウェブログを著作した利用者に著作権が発生するものとします。但し、宣伝、利用促進、出版等を目的としウェブログサービスの著作物を使用する場合、利用者は弊社に対し、当該著作物を著作権法の規定に基づき無償利用することを期間無制限で非独占的に許諾 7 ただし、頭の中で結果をイメージしながらテキストで表を作るのは結構面倒な作業である。実際の作業ではホームページ・ビルダーなどのソフトを使って表を作成した後に、そのソースをブログに貼り付けるのが便利である。  コメント <div> ブロック要素 HTML 文書をいくつかのブロックに分割し、そのブロック内に適用する書式をスタイルシートで定めるために使う。一般に id または class 属性と一緒に使われる。 III. HTML と CSS の基礎を知ろう 1. HTML の基礎を覚えよう HTML は Hyper Text Markup Language の略語。ホームページ用の記述言語。実態は HTML タグの付いたテキストファイルである。ブラウザでホームページのソースを表示させると見ることができる。なお、HTML と CSS についての詳細は巻末の参考文献を参照してほしい。 (1) ホームページの基本的な構造どのホームページも以下の構造を持っている。<html>は、このファイルが HTML 文書であることを表す。そして、 <head>と</head>の間はタイトルなどを記述する部分で、 <body>∼</body>の間の部分が本文である。ただし、<html> や<body>は省略しても、大半のブラウザは正しく表示してくれる。 2. スタイルシート(CSS)の基礎を覚えよう Cascading Style Sheet の略語。ホームページの「見栄え」を定義するための技術。昔は HTML 文書の中に文字の大きさや色、レイアウトなどの情報を記述するのが一般的だったが、今はスタイルシートという別のファイルにそれらを記述する方法に変わりつつある。具体的には HTML のヘッダー部分に次の行を追加して、スタイルシートを記述したファイルを指定する。 <link rel="stylesheet" href="./スタイルシートのファイル名.css" type="text/css" /> このスタイルシートを使った書式の指定方法には、大きく分けて 3 つの方法がある。 <html> <head> ヘッダー部分 </head> <body> (1) タグ要素を指定した使い方例: HTML タグで指定された部分全体にスタイルを指定しているケーススタイルシート body{ margin:0; padding:0; color:#444; background:url(/images/side.gif); text-align:center; } 本文 </body> </html> (2) 覚えておくと便利なタグ以下のタグの中で、<title>だけがヘッダー部分に使うタグで、残りはすべて本文の部分で使うタグである。<title>以外はブログで投稿する際にも使うことができるので、覚えておくと便利である。 h1,h2,h3{margin:0;padding:0;} <title> タイトル(Title) <h1>, <h2>, …, <h6> 見出し(Heading) <p> 段落(Paragraph) <br>または<br /> 改行(Break) <b> 太字(Bold) <strong> 強調(Strong) (IE では太字) <em> 強調(Emphasis) (IE では斜体) <u> 下線(Under-line) <a href="http://www.acme.com/"> アンカー(Anchor) 新しいウィンドウを開きたい場合は、「target」オプションを使う。 <a href=”http://www.acme.com/” target=”_blank”> メールアドレスの場合は「mailto:」を加える <a href="mailto:[email protected]"> () <blockquote> 引用(Blockquote) (IE では前後が改行、左右に隙間) <table></table> 表(Table) 表作成のタグの使い方をマスターするのは難しいが、下の URL の例で覚えるとよい。 http://www.tohoho-web.com/html/table.htm (2) クラスを指定した使い方例: <div>で指定されたブロック領域をクラスでスタイルを指定しているケース HTML 文書 <div class=”title> マンション管理でお困りのことは信頼と実績の当事務所へ！ </div> <div class=”main”> マンションライフについて疑問、不安があったら気軽に当事務所に御相談ください。 </div> スタイルシート .title{ font-size:medium; color:#fff; font-weight:bold; padding:5px 10px; 8 background:#3d5286; IV. Movable Type を利用したホームページ作成 } 1. Movable Type とは Movable Type はブログを開設するツールだが、デザイン上の柔軟性が高いので、一見ブログには見えないホームページを自由に構築することができる。商用目的の場合はソフトウェアのライセンス料が発生するものの、無料ブログサービスに見られるような制約がないのがメリットである。 .main{ color:#333; font-size:small; padding:10px 0px 20px; } (3) ID を指定した使い方例: <div>で指定されたブロック領域を ID でスタイルを指定しているケース HTML 文書 <div id="banner"> <h1 class="blogtitle"> マンション管理士・行政書士川原一守事務所(見本) </h1> <div class="description"> 管理組合のためのマンション管理コンサルタント </div> </div> 作成例プロバイダーが提供するサービスの制約にとらわれない自由なデザインが可能。スタイルシート #banner,#subbanner{ color:#fff; width:773px; height:100px; text-align:left; margin:0 auto; font-weight:normal; background:url(/images/title.gif) repeat-x; } フォームメールやカウンターなどの設置も自由 (4) スタイルシートの属性と値の例上の例で現れる属性と値について、ごく一部を紹介する。詳細については、巻末の参考資料で紹介している「とほほの WWW 入門」を参照してほしい。 font-size: 文字サイズ xx-large, x-large, large, medium, small, x-small, xx-small font-weight: 文字の太さ bold(太字) または normal color: 文字色 red, green, white, #000000∼ffffff, #000∼#fff padding: 上右下左 px(ピクセル) background: 背景色 2. 必要なソフト Movable Type (非商用目的の「限定個人ライセンス」は無償、商用目的だと 26,250 円(1 サーバー・5 ユーザー)) FTP クライアント (例えばフリーウェアの「FFFTP」) (http://www2.biglobe.ne.jp/~sota/ffftp.html) UTF-8 コード対応のテキストエディター (例えばフリーウェアの「TeraPad」) (http://www5f.biglobe.ne.jp/~t-susumu/) 3. あると便利なソフト画像加工ソフト (Adobe Photoshop 等) 9 アイコン作成ツール (例えばフリーウェアの「@icon 変換」)(http://www.towofu.net/soft/) V. 独自ドメインの取得方法 1. 独自ドメインを取得しよう独自ドメインの取得作業は概ね以下の手順となる。ここでは詳しい説明は省略する。詳しくは「参考情報」の説明を見てほしい。 4. Movable Type を設置しよう Movable Type の設置作業は概ね以下の手順となる。ここでは詳しい説明は省略する。詳しくは「参考情報」の説明を見てほしい。 (1) 空きドメインの検索 (2) ユーザー登録 (3) 料金の振込み (4) 独自ドメイン取得 (5) レンタルサーバーの利用 (6) DNS 設定 (7) サーバー設定 (1) ソフトウェアのダウンロード (2) 設定ファイルの変更 (3) サーバーへのアップロード (4) ファイル権限の設定 (5) サーバー環境のチェック (6) システムの初期化 (7) Movable Type の起動 (8) 投稿者とパスワードの変更 (9) ウェブログの設定 VI. SEO(検索エンジン最適化) 対策の方法 1. SEO 対策とは Google や Yahoo!などの検索サイトで、検索結果の上位に来るようにするためのノウハウ。ただし、これが行き過ぎて検索エンジンを騙すようなテクニックを用いると、ブラックリストに載り、検索結果から除外されることもあるので、正しい知識をつけた上で行ってほしい。 5. Movable Type の管理画面 Movable Type にログインした直後に管理画面は下のようなものである。複数のブログを管理している場合は、それらがすべてこの画面上にリストアップされる。 2. SEO 対策の実際以下、SEO 対策として有効な主なものを紹介する。 (1) フレームを使わないフレームを使ったホームページとは、下の例のように上下または左右に画面が分割されたものである。画面の一部はどのページでも同じものが使えるという利便性があり、一時期この技術を使用するサイトが多数あった。 6. Movable Type の新規投稿画面「エントリーの投稿」ボタンを押すと、新規の投稿ができる。しかし、このようなフレームを使用すると検索エンジンに的確に情報を収集されないばかりでなく、「SEO スパム」の中にこのようなフレームを利用した手法があるため、SEO 対策としては大変不利になる。また、閲覧者がフレーム内のページに直接辿り着いてしまう場合もあるため、なるべくフレームは使わないほうがよい。設定変更などは、左側のメニューから選択して行う。 (2) タイトルを入れる検索エンジンは<title>タグに記載された情報を重視する。 10 ところが、ホームページ・ビルダーなどで立ち上げたサイトには、<title>タグに記載のないものが多い。忘れずに記入することが大事である。 (8) そしてひたすらコンテンツの充実に努めること (9) コンテンツが充実してきたら、Yahoo!に推薦しよう http://add.yahoo.co.jp/docs/include.html (3) H1 タグを使う <h1>タグに記載された情報も検索エンジンには重視されるが、これもホームページ・ビルダーなどで立ち上げたサイトには、使われていないものが多い。営利目的のサイトの場合、Yahoo! への推薦は 52,500 円以上の審査料が発生する。また、審査料を支払っても必ず登録が保証されるわけではない。 3. 自分で立ち上げるのが面倒なら (1) パソコンに詳しい友人や知人に作ってもらう (2) 業者に作成を依頼する (4) ヘッダー部分に、keywords と description を入れるトップページのヘッダー部分(<head>と</head>の間の部分)に、例えば下のような記述を追加する。 <meta name="keywords" content="マンション管理士,神奈川県" /> <meta name="description" content="メールでの無料相談に応じるマンション管理士。マンション管理に関する情報満載！管理組合役員さん必見のサイト。" /> 特に description に記述した文章は、検索結果の画面でそのまま表示されるので、ホームページについての簡潔な紹介文を記述することが大事である。専門業者に作成を依頼する場合は、ホームページ開設後のメインテナンスを容易にするために、必ず Movable Type での作成を指示すること。この場合、独自ドメインの取得から、 Movable Type のライセンス料、フルカスタマイズのホームページ構築、インストール代行等をすべて含めて 15∼20 万円程度の費用がかかる。ただし、これはホームページに掲載するコンテンツをすべて自分で用意できる場合であり、コンテンツの作成に関して専門家に相談を行えば、さらにコンサル料が加算されることになる。ただし、業者に立上げを依頼しても、その後の更新作業は自分の仕事である。それも業者に依頼するのであれば、記事を追加・修正するたびに、手数料が発生することになる。 (5) キーワードの出現率に注意するホームページに記事を掲載するときには、タイトルや本文のキーワードの出現率を意識するのがよい。あるキーワードで検索した際に、そのキーワードの出現率の高いホームページのほうが重視される。例えば、下の 2 つの例では Yahoo!でも Google でも次のような言葉に分解されて認識されている。 |マンション|管理|士|内藤|正裕|の|ページ| |マンション|管理|士|行政|書|士|川原|一守|事務所| したがって、「マンション管理士」という言葉で検索した場合に、前者のホームページは出現率が 3/7=43%と高いが、後者では 2/9=33%と低く、後者のほうが不利になる。 Yahoo!と Google が文章をどのように分解するかは、下記の URL で確認することができるので、参考にしてほしい。 http://www.su-jine.com/sujine_seo_words.php VIII. おわりにホームページは自己 PR の場である。単にホームページを作っただけでは仕事の依頼は来ない。以前はこのような自己 PR の場は、新聞・雑誌への投稿や、書籍の執筆、テレビ出演、講演会の講師などに限られていたが、インターネットの利用が一般化した今では、ホームページを立ち上げることによって、誰でも簡単に自己 PR の場が持てるようになった。しかしそれは同時に、せっかく立上げた自分のホームページが、インターネット上の膨大な情報の中で埋没してしまうことにもなり兼ねない。適正な管理がされていないマンションと同様に、更新のないホームページもやがてスラム化していく。そうならないためには、ホームページを立上げたら終わりというわけではなく、その後コンテンツをいかに充実させていくかという日頃の努力が必要になる。いずれにしても、ホームページがマンション管理士にとって有効な営業ツールのひとつであることは間違いない。自分という「商品」の価値を高めつつ、その良さをどのように売り込むかということを常に念頭に置きながら、ホームページを活用されることをお祈りする。 VII. ホームページを開設するときのポイント 1. ホームページを開設する前に (1) 何をホームページの目玉とするか考えよう (2) 自分をどのようにアピールするか考えよう (3) 写りの良い写真を用意しよう (4) 人のホームページをお手本としよう 2. ホームページを開設したら (1) Google にトップページの URL を登録しよう http://www.google.co.jp/addurl/ (2) 友人や知人、所属団体等のホームページからリンクしてもらおう (3) トラックバックを活用しよう (4) 名刺をいただいたら電子メールを送ってホームページを紹介しよう (5) 定期的な更新を怠らないこと (6) 掲示板にはこまめにレスを付けること (7) メールでの問い合わせには丁寧な対応を心掛けること謝辞この資料を作成するにあたっては、神奈川県マンション管理士会会長川原一守氏のご快諾を得て、下記のホームページのコンテンツの一部を利用させていただきました。厚く御礼を申しあげます。「マンション管理士・行政書士川原一守事務所」 http://www5e.biglobe.ne.jp/~kawahara/mankantop.htm 11 サイトマップサイトマップはそのホームページのすべてのコンテンツを一覧表にしたものである。これがあれば、サイトを訪問した閲覧者がコンテンツの在りかを容易に知ることができる。 (用語集) CSS Cascading Style Sheet のこと。ホームページの「見栄え」を定義するための技術。昔は HTML 文書の中に文字の大きさや色、レイアウトなどの情報を記述していたが、今はスタイルシートという別のファイルにそれらを記述して、HTML 文書の中で呼び出す形に変わりつつある。独自ドメイン「www.○○○.com」のように、世界中で自分だけに与えられる専用の URL アドレスのこと。最近は年間 990 円という格安料金で取得できるようになり、個人でも気軽に独自ドメインを持てるようになった。 FTP File Transfer Protocol の略語。作成した HTML ファイルをウェブサーバー上にアップロードしたり、ダウンロードしたりするための方法。Windows のコマンドプロンプトでも可能だが、FTP クライアントソフトを利用するのが便利。トラックバックブログが持つ特長で、他のブログの記事にコメントなどを行う場合、元の記事に自分のブログへのリンクを追加することができる機能。通常のリンクは自分のホームページの中に相手のホームページへのリンクを置くが、トラックバックは逆に相手のホームページの中に自分のホームページへのリンクを置くもの。これにより、ブログの読者は関連する話題を提供するブログを容易に見つけることができる。 HTML Hyper Text Markup Language の略語。ホームページ用の記述言語。実態はHTMLタグの付いたテキストファイル。ブラウザでホームページのソースを表示させると見ることができる。 URL Uniform Resource Locator の略語。ホームページのアドレスのこと。 Movable Type Six Apart 社の共同設立者である Trott 夫妻が開発したブログ作成ツール。自分でソフトをサーバーにインストールできるので、カスタマイズの柔軟性が高いことが特長。ホームページのカテゴリー分けやデザイン変更が容易に行えるため、一見ブログのように見えないビジネスサイトを構築することも可能。 SEO 対策サーチエンジン最適化対策。Google や Yahoo!などの検索サイトで、検索結果の上位に来るようにするためのノウハウ。ただし、検索エンジンを騙すようなテクニックを用いることは「SEO スパム」と呼ばれる行為となり、検索結果から除外される場合があるので、正しい知識をつけた上で行うことが必要である。アクセス解析アクセス解析とは、そのホームページにどの程度のアクセス数があったのか、どのページのコンテンツが読まれているのか、閲覧者がどこのサイトから訪問したのかなどの、解析を行うもの。カウンターはそのアクセス数を表示したものであるが、最近はあまり流行らないようである。アクセス解析には、閲覧者がインターネット上で行った行動を記録する意味があり、その情報の取扱いに関してはプライバシーの保護に対する十分な配慮が必要である。閲覧者に不安を与えないように、「個人情報の取扱い」などのページで、プライバシー保護に関する考え方を公表しておくのがよい。 12 フォームメールフォームメールは、ホームページ上に氏名やメールアドレス、コメントの入力フィールドがあって、送信ボタンを押すと、ホームページの管理者宛にメールが届く仕掛けである。単にメールを送信するだけでなく、送信者宛に自動応答する機能や、送信データをサーバー上に蓄積する機能を持ったものもある。ブログ Web log(ウェブログ)の略。日記形式のホームページの総称。 HTML やプログラムに関する知識がまったく無くても、インターネットの掲示板に書き込む感覚で簡単にホームページが立ち上げられることから、多くの個人サイトが誕生している。ホームページの更新や維持管理が容易なことから、最近ではブログ作成ツールを利用したビジネスサイトを立ち上げている企業も多くなりつつある。無料のブログサービスとしては、 2GB のディスクスペースが利用できる Yahoo!ブログや、 2.5GBのディスクスペースが利用できるlivedoorブログなどがある。レンタルサーバー自前のサーバーを立上げずに、業者が維持管理するサーバーを借り受けてインターネット上のサイトを立ち上げるもの。サーバー用のコンピュータ 1 台を丸ごと借り上げる場合と、サーバーのディスクスペースの一部を借り受ける場合がある。無料でレンタルサーバーを提供するサービスも数多くあるが、広告表示がされるなど、制約も多い。広告表示のない有料サービスも低価格化が進み、現時点では年間 2,400 円で 1GB のディスクスペースが利用可能なものもある。 (参考情報) 1. 独自ドメインの取得方法例えばバリュードメイン(http://www.value-domain.com/) を利用すれば、年間 990 円(税込)で取得可能。具体的な取得方法は以下の通り。 (1) 下記のドメイン登録ページで、空きアドレスを検索。 http://www.value-domain.com/regdom.php (2) 下記のユーザー登録ページに必要な情報を入力して、ユーザー登録。 http://www.value-domain.com/signup.php (3) 下記の入金方法に従って、銀行振込みやクレジットカードで必要額を入金。 http://www.value-domain.com/howto/index.php?action =payment (4) 下記のドメイン登録ページで、空きアドレスを検索し、「取得するにはここをクリックしてください」をクリック。 http://www.value-domain.com/regdom.php (5) 必要な情報を入力して、登録。実際にそのドメインが使えるようになるのは 24∼48 時間後になる。 2. レンタルサーバーの利用方法バリュードメインで独自ドメインを取得した場合、そこが提供しているエクスリアのレンタルサーバーを利用すれば、広告付きだと 50MB のディスクスペースが無料で使用可能である。広告なしの場合は 1,000MB のディスクスペースが年間 2,400 円(税込)となる。 (1) 下記のサーバーアカウントの登録・管理・購入ページにログインして、「無料ウェブアカウントを取得」の「取得するにはここをクリックして下さい」をクリック。 http://www.value-domain.com/web.php (2) 登録したいユーザー名とサーバー名を選択し登録ボタンをクリックして、登録完了。 (3) 広告なしにするには、まず必要な費用を入金。400 円/月、 1,050 円/3 ヶ月、1,800 円/6 ヶ月、2,400 円/年の 4 通りのプランがある。 (4) 上のサーバーアカウントの登録・管理・購入ページにログインして、「変更できるウェブアカウント」の「購入」をクリック。 (5) プランを選択して購入。 3. DNS の設定方法取得したドメインを使えるようにするには、そのホームページやメールボックスが、どのサーバーに存在するかという情報を、DNS(Domain Name System)と呼ばれるサーバー上に登録する必要がある。 (1) バリュードメイン(http://www.value-domain.com/)にログイン。 (2) 「DNS レコード/URL 転送の変更」をクリック。 (3) 変更したいドメインを選んで「変更」ボタン。 (4) 「自動設定」のところで、自分のサーバーを選択して、「変更」ボタンを押す。 4. サーバーへの登録方法取得したドメインにアクセスがあった際に、DNS で指定 13 されたサーバー上のどのディレクトリを開くかを設定する必要がある。 (1) 下記のサーバーアカウントの登録・管理・購入ページにログインして、「サーバー設定」の「ウェブ」のところをクリック。 http://www.value-domain.com/web.php (2) 「ドメイン情報入力」の「Main(public_html/):」の欄に取得したドメイン(www.○○○.com)を入力。 5. Movable Type の設置方法 Movable Type の入手と設置に関する具体的な方法は以下の通り。 (1) 下記の Type Key のページで、画面の指示に従って無料のアカウントを新規に作成。 https://www.typekey.com/t/typekey/?lang=ja (2) 取得した Type Key のアカウントを使って、Movable Type のダウンロードページからログオン。 http://www.movabletype.jp/download-mt.html (3) ダウンロードライセンス(26,500 円、1 サーバー・5 ユーザー)または個人限定ライセンス(無償)のページへ移動して、ZIP 形式でフル・パッケージをダウンロード。 (4) ダウンロードした ZIP ファイルを解凍する。 (5) mt.cfg を EUC 対応のテキストエディターで開いて、 Movable Type をインストールするディレクトリを指定する。例えば CGIPath http://www.hogehoge.com/mt/ (6) 上の例の場合、サーバーの public_html の下に「mt」という名前のフォルダを作成する。 (7) 上のフォルダの中に、(4)で解凍して出来たフォルダの中身をすべて FTP で転送する。 (8) *.cgi のファイルの権限をすべて「755」に設定する。 (9) mt フォルダの中に、「db」という名前のフォルダを作成して、権限を「777」に設定する。 (10) http://www.hogehoge.com/mt/mt-check.cgi にアクセスする。 (11) 「準備が整いました!」と表示されれば OK。 (12) http://www.hogehoge.com/mt/mt-load.cgi を起動する。 (13) 正常に動作していることを確認したら、サーバー上から mt-load.cgi を削除する。 (14) http://www.hogehoge.com/mt/mt.cgi を起動すれば、 Movable Type のログイン画面が表示される。 (15) 最初だけユーザー名「Melody」、パスワード「Nelson」でログイン。 (16) 「プロフィールの編集」で、ユーザー名とパスワードを設定。次回からはこのユーザー名とパスワードでログインする。 (17) 「設定」をクリックして、ウェブログの名前を入力。エクスリアのサーバーの場合、他の設定は下記の通り。ローカル・サイト・パス: /virtual/UserID/public_html/www.acme.com サイトの URL: http://www.acme.com/ ローカル・アーカイブ・パス: /virtual/UserID/public_html/www.acme.com/archives アーカイブの URL: http://www.acme.com/archives (18) 「基本設定」の右にある「設定」をクリック。 (19) 「ウェブログの説明:」に、ホームページの名前の下に (5) 「サイトの再構築」ボタンを押す。表示する説明文を入力。その他はとりあえずデフォルトの設定のままでよい。 (20) 「メインメニュー」に戻って、ホームページの名前と説明の変更が反映されていることを確認。 (21) 「サイトの確認」ボタンを押すと、出来上がったホームページが表示される。この段階ではまだエントリーは何もない。 9. フォームメールの設置方法注意が必要なのは、Movable Type の文字コードは UTF-8 なので、UTF-8 をサポートしたフォームメールでないと文字化けを起こすことである。使えるフリーウェアとしては、例えば Ezy-Mail がある。機能や設置方法などの詳細は下の URL を見てほしい。 http://web-up.cside.biz/ezy-mail.shtml 6. カテゴリーの並び順を変える方法 Movable Type のカテゴリーの並びは、そのままだとアイウエオ順である。自分で並び順を指定したい場合は、以下のようにする。 (1) カテゴリーのタイトルの先頭に、並べたい順番で 010、 020、030、・・・のように数字を入れる。 (2) カテゴリーの説明に画面に表示したいカテゴリーの名前を記入する。 (3) メインページのテンプレートの中にある 2 箇所の <MTCategoryLabel> を <$MTCategoryDescription$> に書き換える。 10. アクセス解析付きカウンターの設置方法フリーウェアとしては、例えば dopvSTAR*がある。これをメインテンプレートや個別アーカイブ等のテンプレートの適当な箇所に、設置すればよい。詳しくは、下記 URL を参照のこと。Movable Type での設置方法も紹介されている。 http://tech.bayashi.net/ds/ (参考文献) (1) ブログ「livedoor Blog」 (http://blog.livedoor.com/) (2) HTML/CSS「とほほの WWW 入門」 (http://www.tohoho-web.com/www.htm) (3) 独自ドメイン取得「バリュードメイン」 (http://www.value-domain.com/) (4) Movable Type「Six Apart」 (http://www.sixapart.jp/movabletype/) (5) SEO 対策「SEO 対策 Su-Jine」 (http://www.su-jine.com/) 7. アドレスバーにアイコンを表示する方法最近はブラウザのアドレスバーにアイコンが表示されるホームページが増えてきた。具体的には以下の方法で行う。 (1) ペイント等で 16x16、32x32、48x48 の 3 種類のビットマップ画像を作成する (2) @icon 変換(http://www.towofu.net/soft/)を使って、アイコンに変換して、favorite.ico と名前を付ける (3) FTP で index.html のあるディレクトリに転送 (4) うまく表示されない場合は、index.html のヘッダー部分に下の行を追加する <link rel="shortcut icon" href="favorite.ico" /> (5) それでもうまく表示されない場合は、IE のキャッシュをクリアする 8. サイトマップの設置方法 Movable Type では、例えば以下の方法でサイトマップを作ることができる。 (1) 「サイトマップ」という名前のテンプレートを新規に作成する。 (2) ヘッダー部分はメインのものをそのまま流用し、Body の部分に下記を記述する。 <h2>サイトマップ</h2> <MTCategories> <a name="<$MTCategoryLabel$>"></a> <h3><$MTCategoryDescription$></h3> <blockquote> <MTEntries> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> <br /> </MTEntries><br /> </blockquote> </MTCategories> (3) 出力ファイル名を「sitemap.php」とする (4) index.html の適当な場所に上の「sitemap.php」へのリンクを置く 14