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

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

※　イメージ図（©photoAC）

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

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

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

図のクリックで拡大します

実際に、私は定年を過ぎてから作成を始めて、ほぼ１か月でこの HP を立ち上げることができた^（※）。図は、このサイトを立ち上げた３箇月後のトップページである。この当時は、レスポンシブデザインではなく、キービジュアルも固定画像でスライドショーとはしていなかった。

※　もちろん、現在のようなデザインになったのは、かなり後のことである。

ただ、ほぼこのサイトの原型は完成している。そこで、「HPを作りたいが、この年齢では・・・」などと逡巡しておられる方のために、私の体験を書いてみたいと思う。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

※　イメージ図（©photoAC）

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

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

ただ、私の場合、その当時は基本的に PDF ファイルで情報を発信したいという意識があり、一部についてはEXCELファイルなども用いたいと考えていた。最大の理由は HTML ファイルを自由に作成する技術力がまだ低かったからである。

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

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

※　当時は WordPress の存在を知らなかった。これはブログ作成用のソフトだが、テンプレートを使えばかなり高度な HP の作成もできる。当時、このことを知っていれば WordPress を使用していたかもしれない。

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

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

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

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

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

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

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

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

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

※　独自ドメインを使用していればそんなことにはならないが、当時はそう思えたのである。

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

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

※　さくらのレンタルサーバはコストパフォーマンスに優れているのだが速度が遅いという難点がある。今なら間違いなくＸサーバを選んだと思う。当サイトも、その後2023年１月にＸサーバに移転した。

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

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

※　前述したように当サイトはＸサーバに移転したため、契約の切れる2023年６月以降は、さくらのレンタルサーバーの初期ドメインは使えない。なお、ホームページは、一般にいくつかのURLで読めるが、ばらばらなURLで読まれると検索順位などに悪影響を与えるので、強制的にひとつのURLに統一して表示する。このサイトもさくらのレンタルサーバーの時代も、初期ドメインで読みに来ても、独自ドメインに変更してしまうようになっていた。たぶん、利用者はそのことに気付かないだろうが。

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

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

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

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

ただ、こうした過程を経たことで HTML とは何かの基本を理解することができ、その後の作業がかなりスムーズになったと思う。あまりにも基本的なことは、WEB には書かれていないので、WEB で知識を得ようとしても、初心者には理解しにくい面があるのだ。

また、CSS ファイルというものの存在を知ったのもこの本によってである。なお、CSS ファイルとは、文章中の文字や枠線などのフォントの色や大きさなどの書式を指定するためのファイルである。これは HTML ファイルの中でもできるのだが、CSS ファイルで設定する方が様々な利点がある。

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

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

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

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

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

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

しかし、これは失敗だったと思う。スマホ対応は、これからホームページを作成するのであれば必須と考えた方がいい。そのため、2022年に入ってから、かなり苦労してこの HP をスマホ対応化することになる。このときの記録は「本サイトのレスポンシブ化の記録」に示してあるので、関心のある方は一読いただきたい。

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

私がいきなり HP の本体を作り始めたのは、Microsoft Expression Web 4 を用いて HP を作る方法を分かりやすく解説しておられるサイト「工房CanAAn」^（※）を見つけたのが理由である。

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

このサイトの説明の通りにすれば、数日で基本的なところは作れてしまう。実を言えば、私の HP「実務家のための安全衛生のサイト」の初期のバージョンはこのサイトに負うところがかなり大きい。

ただ、今にして思えば、まったく HP というものの作り方が分からない状態で、いきなり本体を作成し始めるのではなく、練習程度にとどめておいた方がよかったと思う。

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

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

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

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

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

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

さて、当初、私のホームページにはあまり画像は使われていなかった。しかし、さすがにトップページのキービジュアル（ヘッダーの背景の画像）を作成しないわけにはいかない。

※　初期のコンテンツでもPDFファイル内に画像を使っていたケースはある。

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

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

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

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

私の場合、何枚かの写真をコラージュしたり、フラッシュプレイヤーで自動的に切り替えようかとも思い、実際に作り始めた。しかし、フラッシュプレイヤーは時代遅れな技術で、コラージュした写真はかえってうるさくなったので破棄した。

トップページにはルーブル美術館で写した写真を選び^（※）、サブページには国内の写真を配したが、一部の写真では人物を消去している。ただ１枚だけは孫悟空の人形の写真を使用した。深い意味はない。

※　最初は、トップページにスライドショーは設置せず、固定した写真を用いていた。

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

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

※　現在は、IE について動作を調べる必要はない。2022年６月15日以降は、Edge の IE モード以外では使用できなくなる。

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

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

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

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

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

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

SEO の技術も WEB で調べるといろいろ出てくるものである。