【サイトトップ】>【その他】>【ホームページ作成】 平成 28 年 05 月 11 日 ホームページを作成しよう！ 簡単なホームページの作り方 －定年退職した私が１か月でホームページを作成した体験記－ 柳川 行雄 内容 １．ホームページを作ろう ................................................................................ 2 （１）ホームページを作るための知識 ........................................................... 2 （２）ホームページを作るための費用 ........................................................... 2 ２．ホームページ作りを決意する ...................................................................... 4 ３．ホームページの基本を調査する .................................................................. 5 （１）サーバの選択 ....................................................................................... 5 （２）独自ドメイン ....................................................................................... 6 ４．HTML について学習................................................................................... 7 （１）HTML の基本を学ぶ ........................................................................... 7 （２）ホームページ作成ソフトを入手する .................................................... 7 （３）ホームページを実際に作成する。 ....................................................... 8 ５．いよいよ最終仕上げとアップロード（パブリッシュ） .............................. 9 （１）タイトルバーの作成 ............................................................................. 9 （２）HP のアップ ...................................................................................... 10 （３）その他 ................................................................................................ 11 1 １．ホームページを作ろう （１）ホームページを作るための知識 定年を過ぎてから、自分のホームページ（HP）を作りたいと思っておられる 方が、世の中にそう多いとは思わないが、私が思ったということは、他にも同じ 思いをしておられる方はかなりおられるだろうと思う。 また、士業（司法書士、社会保険労務士、行政書士など）の事務所などを創設 して、事務所の HP を立ち上げたいと思っておられる方もおられるだろう。 私は士業の事務所を創設しようとしたわけではないが、HP を開設したいとい う気持ちは前から持っていた。しかし、さすがに公務員時代に仕事と関係のある 内容の HP を開設するわけにはいかない。ところが、いよいよ定年となって、で は HP をということになったわけである。 私は、どちらかと言えば、思いついたら行動するタイプで、考えてから動くと いうのはどうも性に合わない。そこで、とりあえず作り出したわけだが、実際に やってみると、プロのデザイナーが作るようなものは無理にしても、意外と簡単 にできることが分かった。確かに、多少の HTML の知識は必要だが、HTML の 知識を得てから作るというのではなく、作っているうちに必要な知識が自然に 得られるという方が正しいと思う。 実際に、私は定年を過ぎて、ほぼ１か月で HP を立ち上げることができた。そ こで、「HP を作りたいが、この年齢では・・・」などと逡巡しておられる方の ために、私の体験を書いてみたいと思う。 もちろん、HP を作るとなれば、技術的なことよりもコンテンツの方が重要だ と思う。しかし、それは、定年まで企業の中で培ってきた知識・ノウハウや、個 人的に趣味で得た知識をアップすることになろう。私には、その点について助言 できることはない。 しかし、技術的なことが分からなければ HP など立ち上げようがないことも 事実である。あくまでも、本稿は技術的な内容についてのことである。 （２）ホームページを作るための費用 すでにパソコンを持っていて、ネットにつながる環境があるなら、必要なコス トも、それほどのものではない。その気になれば無料でも可能である。パソコン 2 とネットにつながる環境を除けば、必要なものは次のようなものである。 【必須のもの】 ● サーバーのレンタル（無償のサーバーもある） ● ホームページ作成ソフト（無償のソフトもある） ● パブリッシュ（サーバーへのアップ）用ソフト（無償のソフトがある） ● セキュリティ対策ソフト（通常はすでに所有しているであろう） 【ほぼ必須のもの】 ● Microsoft Office ● 画像処理ソフト（無償のソフトもある） 【あった方がよいもの】 ● 独自ドメイン ● PDF 作成ソフト 必須のものについては、いずれも無償のものがある。しかし、レンタルサーバ は有償のものにした方がよいと思う。この費用は、よほど特別なことを考えてい るのでもない限り、月 1,000 円以内でできる。 詳細は後述するが、私自身は、ホームページを作成するためのソフトと作成し た HTML をレンタルサーバにアップするためのパブリッシュソフトは、無償の ものを使用した。有償のものでも、ホームページ作成ソフトは、個人が使うよう なものは高くても１万円以内で入手できる。パブリッシュソフトは、ホームペー ジ作成ソフトに添付されているが、無償の定番ソフトがあるのでそれを使用す ればよい。 なお、セキュリティ対策ソフトは、WEB サイトを作成する場合でなくとも、 必要なことはいうまでもない。 この他、 “Microsoft Office”と画像処理の２つは、絶対になければならないと いうわけではないのだが、ほぼ必須といってよいと思う。 私の場合は、 “Microsoft Office”と画像処理ソフトはパソコンにプリインスト ールされていたものを用いたので、特別に HP 作成のための支出は発生しなか った。 “Microsoft Office”はともかくとして、画像処理ソフトは、私の HP では 高価なものは必要ない。しかし、これは立ち上げる HP の内容にもよろうかと は思う。いずれにせよ、私の NEC のパソコンにはかなり高度な画像編集ができ る“Corel PaintShop Pro X4”が添付されていた。 3 ただ、PDF 作成ソフトだけは、“Microsoft Office”に添付された“Microsoft print to pdf”の性能があまりよいとは思えなかったので、ジャストシステムの “JUST PDF3”を購入した。 結果、レンタルサーバの１年間の使用量を含めて、初期費用は全体で１万円程 度であった。つまり、士業の事務所のために凝ったものを作ろうというのでもな い限り、コストのことはそれほど気にしなくてよいということだ。 ただし、士業の事務所のための凝った HP を作ろうとする場合は、専門の業 者に頼んだ方がよいかもしれない。 ２．ホームページ作りを決意する 2016 年３月末、私は永年務めた厚生労働省を定年退職した。悠々自適で生き ていける状況ではないので、当面は職探しをしなければならない。しかし、比較 的、時間は十分にある。何もしていないと、頭が鈍ってきそうである。 永年、厚生労働省でお世話になる中で、私も、産業保健に関しては一定の知識 を有していると自認している。そこで、その知識を世の中に還元して役立てて頂 くために、WEB で発信してゆこうと考えた。 個人が WEB で何かを発信しようとしたとき、選択肢としてあるのが、ブロ グ、ソーシャルネットワークサービス（SNS）、そして HP だという程度の知識 は、そのときの私にもあった。 ただ、私の場合、基本的に PDF ファイルで情報を発信したいという意識があ り、一部については EXCEL ファイルなども用いたいと考えていた。 当初、ブログではこの条件をクリアするのは難しいように思えた。PDF ファ イルを公開しているブログというものを見たことがなかったからである。しか し、調べてみると実際にはブログに PDF ファイルをアップすることは可能だっ た。 ただ、ある公的な機関で、内部の LAN でブログが見られないように設定して いる例があることを知っていた。どうもブログでは内容を信用してもらえない 可能性があるようだ。また、トップページからサブページへリンクを貼るような 4 ことも難しそうである。そこでブログは選択肢としては考慮から外した。 実は、最初は、SNS のフェイスブックにしようと思ったのである。内容が信 頼されるようにするためには本名を使う必要があるだろうし、ある程度は経歴 を明らかにする必要もあるだろうとは思っていた。だから、フェイスブックが本 名を原則としていることは私には問題にならなかった。しかし、フェイスブック では、PDF や EXCEL ファイルをアップするためには、Docs が提供しているよ うな共有アプリを使わなければならないことが分かった。これでは誰でも見る ことができるというわけにはいかないように思える。 そこでフェイスブックも選択肢から外した。いずれフェイスブックも立ち上 げて HP と連携することもできるだろう。なお、フェイスブック以外の SNS は 個人的な好みに合わないので調べなかった。 そうなると残るは HP である。しかし・・・。当時の HP に関する私の知識と 言えば、 ・ HP は HTML という言語で記載されている。 ・ HTML を記載するためのソフトが存在している。 ・ HP を公開するためには、サーバをレンタルする必要がある。 という程度のことだった。 そもそも、HTML ファイルというものがあることを知らなかった。そのため、 ・ HP に用いる HTML はサーバのどこかに書き込むのか。 ・ パソコンで HTML を作ってから、サーバにアップするのだとすると、わ ずかな HP の修正でも、HTML や PDF ファイルをすべてアップし直さな ければならないのか などという、今から思えばばかばかしい疑問もわいていた。 ３．ホームページの基本を調査する （１）サーバの選択 どちらにしても、サーバはレンタルしなければならない。調べてみると無料サ ーバもいろいろあるようだ。これもいいかなと思った。ところが無料サーバは概 して表示速度が遅いらしい。しかも、広告が入るのである。まあ、それはそうだ ろう。 5 当時の私の知識で考えても、HTML より PDF ファイルの方が重いことは分 かる。そうなると PDF を多数アップすることを考えている以上、表示速度の問 題は致命的だ。しかも、お色気系の広告でも入ったら目も当てられない。 私がインターネットを利用するために契約しているブロバイダも、付加的に レンタルサーバーサービスはしていた。しかし、一般にこの種のものは表示速度 が遅いらしい。また、将来、ブロバイダを変更しようとすることがあれば、HP の URL が変わってしまう。そういったことを考えると、やはり避けた方が賢明 だろう。 しかも、調べてみると有料サーバとはいっても、有名な会社のものでも、個人 用なら月当たりコストは千円程度だと判った。だったら悩むことはない。いくつ かのレンタルサーバをネットで調べてみて、人気が高くて値段の手ごろなサー バを３つまで絞ってみた。 ・ ・ ・ さくらインターネット X サーバー ロリポップ！ このうち、ロリポップは、名称に若干の抵抗を感じ、やや若者向けという気も したので外し、価格と性能の面からさくらインターネットのスタンダードを選 ぶことにした。 （２）独自ドメイン サーバを有料にするのであれば、次に考えるのが独自ドメインである。独自ド メインとは、HP の URL がまったく独自のものになり、他から見る限りレンタ ルサーバを借りているとは分からなくなるものとでも言えばよいだろうか。独 自ドメインを取れば、メールアドレスも＠マークの後ろを独自ドメインと同じ にすることが可能である。 例えば私の HP「実務家のための産業保健のサイト」の URL は http://sryanagawa.sakura.ne.jp/だが、これが http: //sr-yanagawa.com（途中に空白を 入れた）などになるし、メールアドレスも XXXXX＠sr-yanagawa.com などに できるわけである。 独自ドメインを確保しなくても HP の作成には問題はない。ただ、後で独自 ドメインを確保すると URL が変わってしまうから、アクセスして頂いた方に迷 6 惑がかかることになる。だから、この選択は HP 開設前に、１回しかできないと 思った方がよい。 私の場合、希望していたドメイン（上記）が空いていることが分かり、かなり 迷った。しかも必要な価格もそれほどでもない。だが、そこまですることもない かと思い、独自ドメインの取得は見送ることとした。 ４．HTML について学習 （１）HTML の基本を学ぶ 息子の大学のテキストの中に、若山芳三郎著「学生のための情報リテラシー」 というのがあるのを見つけた。その中に HTML に関する章もあったので、これ はと思い、そのテキストの演習問題などをみて簡単な WEB サイトを作ってみ た。しかし、さすがにこれでは公開できるようなサイトを作ることは無理だとす ぐに分かった。 ただ、こうした過程を経たことで HTML とは何かの基本を理解することがで き、その後の作業がかなりスムーズになったと思う。あまりにも基本的なことは、 WEB には書かれていないので、WEB で知識を得ようとしても、初心者には理 解しにくい面があるのだ。また、CSS ファイルというものの存在を知ったのも この本によってである。なお、CSS ファイルとは、文章中の文字や枠線などの フォントの色や大きさなどの書式を指定するためのファイルである。これは HTML ファイルの中でもできるのだが、CSS ファイルで設定する方が様々な利 点がある。 （２）ホームページ作成ソフトを入手する HTML の知識だけで、素人が HP を立ち上げるのは困難だとなると、ホーム ページ作成ソフトを入手する必要がある。ホームページ作成ソフトで有名なも のはホームページビルダーであろう。このソフトを使う最大のメリットは、解説 書が豊富なことだ。WEB でも数多くの解説サイトが公開されている。私も、当 初は、これを購入しようと思っていた。 しかし、調べているうちに、Microsoft 社の“Microsoft Expression Web 4” が無償化されたことが分かり、とりあえずこちらをダウンロードして試してみ 7 ることにした。ワープロソフトなどと異なり、気に入らなければ途中で、いくら でも他のソフトに変更できるのだ。なお、ダウンロードの方法は、ここをクリッ クしてもできるが、不安であれば AllAbout デジタルの記事でダウンロードの方 法を説明しているので参照して頂きたい。 （３）ホームページを実際に作成する。 ここで、考えておかなければならないことは、スマホでアクセスしてくる方に 対応するかどうかである。もし、広告料金収入を期待するなら常識的にはスマホ 対応は必須ともいえる。しかし、私は PDF ファイルでの情報提供を主体にしよ うと思っており、また広告収入も当面は考えていないので、スマホ対応はとりあ えずしないことにした。 さて、HP を作る過程で、私は２つの失敗をしてしまった。ひとつは、いきな り HP の本体を作り始めてしまったことである。そして、もうひとつは、サイト に書くべきコンテンツを、いったん Word で作成してから、Windows の“コピ ー”と“貼り付け”の機能で、Microsoft Expression Web 4 に流し込んだことで ある。 さて、私がいきなり HP の本体を作り始めたのは、Microsoft Expression Web 4 を用いて HP を作る方法を分かりやすく解説しておられるサイト「工房 CanAAn」を見つけたのが理由である。このサイトの説明の通りにすれば、数日 で基本的なところは作れてしまう。実を言えば、私の HP「実務家のための産業 保健のサイト」はこのサイトに負うところがかなり大きいのだ。ただ、今にして 思えば、まったく HP というものの作り方が分からない状態で、いきなり本体 を作成し始めるのではなく、練習程度にとどめておいた方がよかったかもしれ ない。 というのは、ある程度 HTML が判ってから作らないと、後で HTML を見た ときに分かりにくいものになってしまうのだ。こうなると改良がしにくくなっ てしまう。私の場合、ある程度完成してから、コードをかなり整理はして見やす くなるようにした。それでも、後でサイドメニューのボタンをスクロールしない ようにしようとしたのだが、HTML の構造が分かりにくくなっていて、かなり 難しかった。 また、HP については様々な無償のテンプレートが準備されており、それを修 正する方が見栄えの良いものができた可能性がある。本体が完成近い状態にな ってからそのことに気づいたのだが、今さら作り直そうという気にはならなか 8 った。 さらに、検索サイトで上位に上げるためには、ページは形式ごとにまとめるの ではなく、内容ごとにまとめる方がよいことも後に分かったのだが、これも後で 修正しようとするとかなりの労力を要することになる。 なお、Microsoft Expression Web 4 については、詳細に解説しておられるサ イトとして、「ワニ chan のうぇぶわーるど」の中の「Expression Web 4」がと ても参考になった。私の HP 作りでも、かなり参照させて頂いた。また、サイド メニューのボタンをスクロールさせない方法や、全体を中心に寄せる方法など、 個別の技術的な事項を解説したページも、ほとんどの場合、検索によって見つけ ることが可能である。 さて、もうひとつの失敗は、サイトの内容を Word で作成して、“コピー”と “貼り付け”で、Microsoft Expression Web 4 に流し込んだことであるが、今度 こそ HTML のコードが完全にこんがらがってしまった。HTML の文章は自分 でコードを書けば、ボックスモデルといって、自然に整然となるのだが、Word の文書を流し込んだのではそうはならず、しかも CSS ファイルに書き込むべき スタイルが HTTP ファイルに多数書き込まれてしまった。 これについては、そのままでも見た目にはあまり変わらないのだが、後で大変 になるので、やむを得ず苦労してコードを解析して、整理するとともに、様式は CSS ファイルに移した。 ５．いよいよ最終仕上げとアップロード（パブリッシュ） （１）タイトルバーの作成 さて、私のホームページにはあまり画像は使われていないが、タイトルバーだ けは画像を使わないわけにはいかない。また、私の場合、PDF ファイル内で画 像を使うケースもある。 もちろん、タイトルバーに画像を使わなければならないというわけではない が、画像なしではあまりにも寂しいし、タイトルバーは HP の玄関口なので、誰 しもこだわりたいところであろう。 そのために画像ソフトが必要になるわけである。ただ、それだけのために専用 の画像ソフトを買う気にはならないのが普通だと思う。私の場合は、前述したと 9 おりパソコンが NEC の LaVie で、Corel PaintShop Pro X4 がプリインストー ルされているのでそれを使用した。LaVie 以外のパソコンでも、画像ソフトはパ ソコンにプリインストールされていることが多いと思う。また、高性能のフリー のソフトも数多く公開されている。有名なところでは GIMP がある。 ただ、気に入った写真や画像なら、なんでも良いというわけにはいかない。著 作権を侵害するようなことをしてはならないことはいうまでもないが、人物が 写っていれば肖像権の問題がある。個人の家や車が写っているものも、変な誤解 を受けることがあるので避けた方がよい。 そこで、公的な施設又は野生の動植物を自分で撮影したもので、かつ人物の写 っていないものということになる。 私の場合、何枚かの写真をコラージュしたり、フラッシュプレイヤーで自動的 に切り替えようかとも思い、実際に作り始めたが、かえってうるさくなったので 破棄した。トップページにはルーブル美術館で写した写真を選び、サブページに は国内の写真を配したが、一部の写真では人物を消去している。ただ１枚だけは 孫悟空の人形の写真を使用した。深い意味はない。 （２）HP のアップ さて、コンテンツを作成してしまえば、HP をアップすることになる。この HP をレンタルしているサーバにアップすることをパブリッシュという。操作は驚 くほど簡単である。 ただ、実際にパブリッシュする前に、少なくとも Edge、IE、Firefox、Chrome の４つのブラウザで、かつ 1366＊768 と 1024＊768 の２種類の解像度で表示と リンクを試しておいた方がよいと思う。ページ内のリンクなど、IE では正常動 作しても Firefox と Chrome では動作しないなどということもあるので注意が 必要だ。 私自身の経験では、最初にパブリッシュしたときは、なにしろ本名で書いたも のを一般の目にさらすことになるわけだから、かなり緊張した。だが、これはす ぐに慣れてしまう。むしろ、なんとかもっと見せたいと思うようになる。 さて、パブリッシュは Microsoft Expression Web 4 でもできるのだが、フリ ーソフトの“FFFTP”の方が使いやすいかもしれない。私もパブリッシュには 10 FFFTP を使用している。 FFFTP は、Vector からでも窓の杜からでもダウンロードできる。exe 版と zip 版が公開されている。これらのサイトではウイルスの心配はほとんどないが、不 安なら zip 版をダウンロードすればよい。私もそうした。かなりの定番のソフト のようで、レンタルサーバの側でも、このソフトを使ってパブリッシュする方法 を解説しているケースが多い。 （３）その他 その他、検索の順位を上げるための工夫が必要になる。 最低限でも、タイトルに分かりやすいキーワードを入れること。キーワードは あまり多くない数にすること、ディスクリプションは一般の方が読みたくなる ような記述にすることなどは最低でも必要だ。 ちょっとした工夫では、例えば、私のサイトの PDF ファイルにはハイパーリ ンクが多数含まれている。実を言うとこれは検索サイトで順位を上位に挙げた い場合には、あまり得策ではない。私は読者の便宜を考えて多用しているが、多 くとも 100 程度にとどめるべきで、理想は 20 以下である。 検索順位の上昇の技術も WEB で調べるといろいろ出てくるものである。 この資料は「実務家のための産業保健のサイト」に掲示されています。よろしけ ればサイトの方にもご訪問ください。 11
© Copyright 2024 Paperzz
