背景バー
背景バー
背景バー

60歳過ぎのホームページ作成記

ページ
トップ


パソコンを見てショックを受ける

定年退職後、まったくの素人だった私が1箇月でホームページを作成した記録を紹介しています。

60歳を過ぎていても、その気になればホームページの作成は可能だということを説明しています。




1.ホームページを作ろう

執筆日時:

最終修正:


(1)ホームページを作るための知識

定年を過ぎてから、自分のホームページ(HP)を作りたいと思っておられる方が、世の中にそう多いとは思わないが、私が思ったということは、他にも同じ思いをしておられる方はかなりおられるだろうと思う。

また、士業(司法書士、社会保険労務士、行政書士など)の事務所などを創設して、事務所のHPを立ち上げたいと思っておられる方もおられるだろう。

私は士業の事務所を創設しようとしたわけではないが、HPを開設したいという気持ちは前から持っていた。しかし、さすがに公務員時代に仕事と関係のある内容のHPを開設するわけにはいかない。ところが、いよいよ定年となって、ではHPをということになったわけである。

私は、どちらかと言えば、思いついたら行動するタイプで、考えてから動くというのはどうも性に合わない。そこで、とりあえず作り出したわけだが、実際にやってみると、プロのデザイナーが作るようなものは無理にしても、意外と簡単にできることが分かった。確かに、多少のHTMLの知識は必要だが、HTMLの知識を得てから作るというのではなく、作っているうちに必要な知識が自然に得られるという方が正しいと思う。

実際に、私は定年を過ぎて、ほぼ1か月でHPを立ち上げることができた。そこで、「HPを作りたいが、この年齢では・・・」などと逡巡しておられる方のために、私の体験を書いてみたいと思う。

もちろん、HPを作るとなれば、技術的なことよりもコンテンツの方が重要だと思う。しかし、それは、定年まで企業の中で培ってきた知識・ノウハウや、個人的に趣味で得た知識をアップすることになろう。私には、その点について助言できることはない。

しかし、技術的なことが分からなければHPなど立ち上げようがないことも事実である。あくまでも、本稿は技術的な内容についてのことである。


(2)ホームページを作るための費用

すでにパソコンを持っていて、ネットにつながる環境があるなら、必要なコストも、それほどのものではない。その気になれば無料でも可能である。パソコンとネットにつながる環境を除けば、必要なものは次のようなものである。

【必須のもの】

  • サーバのレンタル(無償のサーバもある)
  • ホームページ作成ソフト(無償のソフトもある)
  • パブリッシュ(サーバへのアップ)用ソフト(無償のソフトがある)
  • セキュリティ対策ソフト(通常はすでに所有しているであろう)

【ほぼ必須のもの】

  • 画像処理ソフト(無償のソフトもある)
  • カメラ(スマホでも十分)
  • 独自ドメイン

【あった方がよいもの】

  • Microsoft Office
  • PDF作成ソフト

必須のものについては、いずれも無償のものがある。しかし、レンタルサーバは有償のものにした方がよいと思う。この費用は、よほど特別なことを考えているのでもない限り、月1,000円程度でできる。

詳細は後述するが、私自身は、ホームページを作成するためのソフトと作成したホームページをレンタルサーバにアップするためのパブリッシュソフトは、無償のものを使用した。有償のものでも、ホームページ作成ソフトは、個人が使うようなものは高くても1万円以内で入手できる。パブリッシュソフトは、ホームページ作成ソフトに添付されているが、無償の定番ソフトがあるのでそれを使用すればよい。

なお、セキュリティ対策ソフトは、WEBサイトを作成する場合でなくとも、必要なことはいうまでもない。

この他、画像処理用ソフトとカメラは、絶対になければならないというわけではないのだが、ほぼ必須といってよいと思う。

画像処理ソフトは、特別なサイトは別としてあまり高価なものは必要ない。しかし、これは立ち上げるHPの内容にもよろうかとは思う。いずれにせよ、私のNECのパソコンにはかなり高度な画像編集ができる"Corel PaintShop Pro X4"がプリインストールされていたので最初はそれを用いていた。現在は、パソコンを他社製品に買い替えたので、有償のもの購入して用いている。

独自ドメインについては後述する。

私の場合、最初の頃はコンテンツをPDFファイルでアップしていたので、 "Microsoft Office"とPDF作成ソフトが必要になった。現在では、コンテンツは原則としてHTMLファイルで作成しているが、図表の作成にパワーポイントやEXCELを用いることもあり、"Microsoft Office"は不可欠だと思う。

またPDFファイルもまれに用いる。最初に、"Microsoft Office"に添付された"Microsoft print to pdf"の性能があまりよいとは思えなかったので、ジャストシステムの"JUST PDF3"を購入した。

私の場合、レンタルサーバの1年間の使用量を含めて、初期費用は全体で1万円程度である。つまり、士業の事務所のために凝ったものを作ろうというのでもない限り、コストのことはそれほど気にしなくてよいということだ。

ただし、士業の事務所のための凝ったHPを作ろうとする場合は、専門の業者に頼んだ方がよいかもしれない。やすい場合でも30万円、高ければ数百万円は必要だが・・・。


2.ホームページ作りを決意する

2016年3月末、私は永年務めた厚生労働省を定年退職した。悠々自適で生きていける状況ではないので、当面は職探しをしなければならない。しかし、比較的、時間は十分にある。何もしていないと、頭が鈍ってきそうである。

永年、厚生労働省にお世話になる中で、私も、労働安全衛生に関しては一定の知識を有していると自負している。そこで、その知識を世の中に還元して役立てて頂くために、WEBで発信してゆこうと考えた。

個人がWEBで何かを発信しようとしたとき、選択肢としてあるのが、ブログ、ソーシャルネットワークサービス(SNS)、そしてHPだという程度の知識は、そのときの私にもあった。

ただ、私の場合、基本的にPDFファイルで情報を発信したいという意識があり、一部についてはEXCELファイルなども用いたいと考えていた。

当初、ブログではこの条件をクリアするのは難しいように思えた。PDFファイルを公開しているブログというものを見たことがなかったからである。しかし、調べてみると実際にはブログにPDFファイルをアップすることは可能だった。

ただ、ある公的な機関で、内部のLANでブログが見られないように設定している例があることを知っていた。どうもブログでは内容を信用してもらえない可能性があるようだ。また、トップページからサブページへリンクを貼るようなことも難しそうである。そこでブログは選択肢としては考慮から外した。

実は、最初は、SNSのフェイスブックにしようと思ったのである。内容が信頼されるようにするためには本名を使う必要があるだろうし、ある程度は経歴を明らかにする必要もあるだろうとは思っていた。だから、フェイスブックが本名を原則としていることは私には問題にならなかった。しかし、フェイスブックでは、PDFやEXCELファイルをアップするためには、Docsが提供しているような共有アプリを使わなければならないことが分かった。これでは誰でも見ることができるというわけにはいかないように思える。

そこでフェイスブックも選択肢から外した。いずれフェイスブックも立ち上げてHPと連携することもできるだろう。なお、フェイスブック以外のSNSは目的に沿わないので調べなかった。

そうなると残るはHPである。しかし・・・。当時のHPに関する私の知識と言えば、

【当初のホームページ作成に関する知識】

  • HPはHTMLという言語で記載されている。
  • HTMLを記載するためのソフトが存在している。
  • HPを公開するためには、サーバをレンタルする必要がある。

という程度のことだった。

そもそも、HTMLファイルというものがあることを知らなかった。そのため、

【当初の馬鹿げた疑問】

  • HPに用いるHTMLはサーバのどこかに書き込むのか。
  • パソコンでHTMLを作ってから、サーバにアップするのだとすると、わずかなHPの修正でも、HTMLやPDFファイルをすべてアップし直さなければならないのか
  • HPを修正している間に、HTMLを閲覧されたらどうなるのか

などという、今から思えばばかばかしい疑問もわいていたほどなのである。


3.ホームページの基本技術を調査する

(1)サーバの選択と契約

どちらにしても、サーバはレンタルしなければならない。調べてみると無料サーバもいろいろあるようだ。これもいいかなと思った。ところが無料サーバは概して表示速度が遅いらしい。しかも、広告が入るのである。まあ、それはそうだろう。

当時の私の知識で考えても、HTMLよりPDFファイルの方が重いことは分かる。そうなると当時、PDFを多数アップすることを考えていたので、表示速度の問題は致命的だ。しかも、お色気系の広告でも入ったら目も当てられない。

私がインターネットを利用するために契約しているブロバイダも、付加的にレンタルサーバサービスはしていた。しかし、一般にこの種のものは表示速度が遅いらしい。また、将来、ブロバイダを変更しようとすることがあれば、HPのURLが変わってしまう。そういったことを考えると、やはり避けた方が賢明だろう。

しかも、調べてみると有料サーバとはいっても、有名な会社のものでも、個人用なら月当たりコストは千円程度だと判った。だったら悩むことはない。いくつかのレンタルサーバをネットで調べてみて、人気が高くて値段の手ごろなサーバを3つまで絞ってみた。

【検討したサーバ】

このうち、ロリポップは、名称に若干の抵抗を感じ、やや若者向けという気もしたので外し、価格と性能の面からさくらインターネットのスタンダードを選ぶことにした。(※)

※ さくらのレンタルサーバはコストパフォーマンスに優れているのだが速度が遅いという難点がある。今なら間違いなくXサーバを選んだと思う。正直言ってXサーバへの移転も検討している。


(2)独自ドメインの入手

サーバを有料にするのであれば、次に考えるのが独自ドメインである。独自ドメインとは、HPのURLが独自のものになり、他から見る限りレンタルサーバを借りているとは分からなくなるものとでも言えばよいだろうか。独自ドメインを取れば、メールアドレスも@マークの後ろを独自ドメインと同じにすることが可能である。

例えば私のこのサイト「実務家のための労働安全衛生のサイト」のURLは「https://osh-management.com/」だが、当初は独自ドメインを入手しなかったため、さくらのレンタルサーバの初期ドメインを使用した「http://sr-yanagawa.sakura.ne.jp/」となっていた。なお、現在でも、このURLで私のサイトを読むことは可能である(※)

※ ホームページは、いくつかのURLで読めるようになっている。ただし、ばらばらなURLで読まれると検索順位などに悪影響を与えるので、強制的にひとつのURLに統一してしまう。私のサイトも初期ドメインで読みに来ても、独自ドメインに変更してしまうようになっている。たぶん、利用者はそのことに気付かないだろうが。

独自ドメインを確保しなくてもHPの作成には問題はない。ただ、サーバを変更したような場合には、ドメインが変わってしまい、元のドメインではアクセスできなくなる。そのため、アクセスして頂いた方に迷惑がかかることになるので、最初から独自ドメインにしておいた方がよい。

私の場合、途中でドメインを独自ドメインに変更した。先述したように、サーバを変更しない限り、元のドメインでもアクセスは可能なのだが、サーバを変更すると元のドメインではアクセスができなくなる。


4.HTMLについて学習

(1)HTMLの基本を学ぶ

息子の大学のテキストの中に、若山芳三郎著「学生のための情報リテラシー」(※)というのがあるのを見つけた。その中にHTMLに関する章もあったので、これはと思い、そのテキストの演習問題などをみて簡単なWEBサイトを作ってみた。しかし、さすがにこれでは公開できるようなサイトを作ることは無理だとすぐに分かった。

※ 若山芳三郎著「学生のための情報リテラシー」(東京電機大学出版局2014年)

ただ、こうした過程を経たことでHTMLとは何かの基本を理解することができ、その後の作業がかなりスムーズになったと思う。あまりにも基本的なことは、WEBには書かれていないので、WEBで知識を得ようとしても、初心者には理解しにくい面があるのだ。また、CSSファイルというものの存在を知ったのもこの本によってである。なお、CSSファイルとは、文章中の文字や枠線などのフォントの色や大きさなどの書式を指定するためのファイルである。これはHTMLファイルの中でもできるのだが、CSSファイルで設定する方が様々な利点がある。


(2)ホームページ作成ソフトを入手する

HTMLの知識だけで、素人がHPを立ち上げるのは困難だとなると、ホームページ作成ソフトを入手する必要がある。ホームページ作成ソフトで有名なものはホームページビルダーであろう。このソフトを使う最大のメリットは、解説書が豊富なことだ。WEBでも数多くの解説サイトが公開されている。私も、当初は、これを購入しようと思っていた。

しかし、調べているうちに、Microsoft社の "Microsoft Expression Web 4"(※)が無償化されたことが分かり、最初はこのソフトをダウンロードして使用した。ワープロソフトなどと異なり、気に入らなければ途中で、いくらでも他のソフトに変更できるのである。

※ Microsoft Expression Web 4を入手するには"Microsoft Expression Web 4"をクリックするとダウンロードします。

このソフトはHTMLを知らなくてもホームページが作れるという利点があったが、修正されないので、その後、あまりにも古くなりすぎた。そのため、私は、Adobe社のBracketsというHTMLを直接打ち込むエディタに切り替えた。さらに、現在はMicroSoft社のVisual Studio Code を愛用している。


(3)ホームページを実際に作成する。

ここで、考えておかなければならないことは、スマホでアクセスしてくる方に対応するかどうかである。もし、広告料金収入を期待するなら常識的にはスマホ対応は必須ともいえる。しかし、私は当初は、PDFファイルでの情報提供を主体にしようと思っており、また広告収入も当面は考えていなかったので、スマホ対応(※)はとりあえずしないことにした。

※ HTMLの技術力が身についた後で、私の友人のために「平児の社会と政治を語る」というサイトの枠組みを作成した。このサイトは、メディアクエリーという表示幅に併せてデザインが変わる方式を採用した。個人のサイトであれば、この方法が現実的である。大手企業のサイトなのでは、パソコン用とスマホ用に2つのサイトを構築するケースもある。

しかし、これは失敗だったと思う。スマホ対応は、これからホームページを作成するのであれば必須と考えた方がいい。

さて、HPを作る過程で、私は2つの失敗をしてしまった。ひとつは、いきなりHPの本体を作り始めてしまったことである。そして、もうひとつは、サイトに書くべきコンテンツを、いったんWordで作成してから、Windowsの"コピー"と"貼り付け"の機能で、Microsoft Expression Web 4に流し込んだことである。

私がいきなりHPの本体を作り始めたのは、Microsoft Expression Web 4を用いてHPを作る方法を分かりやすく解説しておられるサイト「工房CanAAn(※)を見つけたのが理由である。このサイトの説明の通りにすれば、数日で基本的なところは作れてしまう。実を言えば、私のHP「実務家のための安全衛生のサイト」の初期のバージョンはこのサイトに負うところがかなり大きい。ただ、今にして思えば、まったくHPというものの作り方が分からない状態で、いきなり本体を作成し始めるのではなく、練習程度にとどめておいた方がよかったと思う。

※ ただ、今となってはMicrosoft Expression Web 4そのものが時代遅れとなってしまった。なお、Microsoft Expression Web 4を、詳細に解説しておられるサイトとして、「ワニchanのうぇぶわーるど」の中の「Expression Web 4」がとても参考になった。この他、サイドメニューのボタンをスクロールさせない方法や、サイト全体をモニタの中心に表示する方法など、個別の技術的な事項を解説したページも、検索によって見つけることが可能である。

というのは、ある程度HTMLが判ってから作らないと、後でHTMLを見たときに分かりにくいものになってしまうのだ。こうなると改良がしにくくなってしまう。私の場合、ある程度完成してから、コードをかなり整理して見やすくなるようにした。それでも、後でサイトを改良しようとすると、HTMLの構造が分かりにくいために難しいということになってしまった。

また、WordPress(※)でホームページを作成すれば、様々な無償のテンプレートが準備されており、それを修正する方が見栄えの良いものができた可能性がある。本体が完成近い状態になってからそのことに気づいたのだが、今さら作り直そうという気にはならなかった。

※ 本来は、CMS(コンテンツ・マネジメント・システム)という、HTMLの知識がなくても通常のホームページのようなデザインのサイトを構築することが可能な技術である。ただ、本来はブログ作成の技術であり、デザインが制約を受けるし、ある程度のHTMLの知識がないと本格的なサイトの構築は難しい。

さらに、検索サイトで上位に上げるためには、ページは形式ごとにまとめるのではなく、内容ごとにまとめる方がよいことも後に分かったのだが、これも後で修正しようとするとかなりの労力を要することになる。

さて、もうひとつの失敗は、サイトの内容をWordで作成して、"コピー"と"貼り付け"で、Microsoft Expression Web 4に流し込んだことであるが、これによってHTMLのコードが完全に複雑怪奇になってしまった。HTMLの文章は自分でコードを書けば、自然に整然となるのだが、Wordの文書を流し込んだのではそうはならず、しかもCSSファイルに書き込むべきスタイルがHTTPファイルに多数書き込まれてしまった。

ただ、そのままでもサイトの見た目はあまり変わらないのだが、後で修正が大変になるので、やむを得ず苦労してコードを解析して、整理するとともに、様式はCSSファイルに移した。


5.いよいよ最終仕上げとアップロード(パブリッシュ)

(1)キービジュアル(ヘッダーの画像)の作成

さて、当初、私のホームページにはあまり画像は使われていなかった。しかし、さすがにトップページのキービジュアル(ヘッダーの背景の画像)を作成しないわけにはいかない。また、初期のPDFのコンテンツでも画像を使っていたケースもある。

もちろん、キービジュアルとして画像を使わなければならないというわけではないが、画像なしではあまりにも寂しいし、トップページはHPの玄関口なので、誰しもこだわりたいところであろう。

そのためには画像ソフトが必要になる。ただ、それだけのために専用の画像ソフトを買う気にはならないのが普通だと思う。私の場合は、前述したとおりパソコンがNECのLaVieで、Corel PaintShop Pro X4がプリインストールされているのでそれを使用した。LaVie以外のパソコンでも、画像ソフトはパソコンにプリインストールされていることが多いと思う。また、高性能のフリーのソフトも数多く公開されている。有名なところではGIMPがある。

ただ、気に入った写真や画像なら、なんでも良いというわけにはいかない。著作権を侵害するようなことをしてはならないことはいうまでもないが、人物が写っていれば肖像権の問題がある。他人の家や車が写っているものも、変な誤解を受けることがあるので避けなければならない。

そこで、公的な施設又は野生の動植物を自分で撮影したもので、かつ人物の写っていないものということになる。

私の場合、何枚かの写真をコラージュしたり、フラッシュプレイヤーで自動的に切り替えようかとも思い、実際に作り始めた。しかし、フラッシュプレイヤーは時代遅れな技術で、コラージュした写真はかえってうるさくなったので破棄した。トップページにはルーブル美術館で写した写真を選び、サブページには国内の写真を配したが、一部の写真では人物を消去している。ただ1枚だけは孫悟空の人形の写真を使用した。深い意味はない。


(2)HPのアップ

さて、コンテンツを作成してしまえば、次はHPの公開(サーバへのアップ)である。このHPをレンタルしているサーバにアップすることをパブリッシュという。その操作は驚くほど簡単である。

ただ、実際にパブリッシュする前に、少なくともEdge、IE、Firefox、Chromeの4つのブラウザで、かつ1920×1080、1366×768と1024×768の3種類の解像度で表示とリンクを試しておいた方がよいと思う。ページ内のリンクなど、IEでは正常動作してもFirefoxとChromeでは動作しないなどということもあるので注意が必要だ。

私自身の経験では、最初にパブリッシュしたときは、なにしろ本名で書いたものを一般の目にさらすことになるわけだから、かなり緊張した。だが、これはすぐに慣れてしまう。むしろ、なんとかもっと見せたいと思うようになる。

さて、パブリッシュはMicrosoft Expression Web 4でもできるのだが、フリーソフトの方が使いやすいかもしれない。私もパブリッシュには最初は"FFFTP"を使用していたが、作者による更新が終了したので、現在は"filezilla"を使用している。

filezilla は、Vectorからでもオリジナルサイトからでもダウンロードできる。かなりの定番のソフトのようで、レンタルサーバの側でも、このソフトを使ってパブリッシュする方法を解説しているケースが多い。


(3)その他

その他、検索の順位を上げるための工夫が必要になる。

最低限でも、タイトルに分かりやすいキーワードを入れること。キーワードはあまり多くない数にすること、ディスクリプションは一般の方が読みたくなるような記述にすることなどは最低でも必要だ。

ちょっとした工夫では、例えば、私のサイトのコンテンツには他のサイトへのハイパーリンクが多数含まれている。実を言うとこれは検索サイトで順位を上位に挙げたい場合には、あまり得策ではない。私は読者の便宜を考えて多用しているが、多くとも100程度にとどめるべきで、理想は20以下である。

検索順位の上昇の技術もWEBで調べるといろいろ出てくるものである。


プライバシーポリシー 利用規約