サイト内に広告が挿入されています

サイトの常時SSL化とモバイルファースト化!サイトのリニューアルについて

8月24~26日の週末仕事で、当サイトの技術的な更新工事をいたしました。日中は妻や子の相手をしながら夜になったら書斎に篭り夜な夜な作業をしていたので、妻からはエロサイトかなんかを見ているのではないかという冷たい疑惑を掛けられながらの作業で、そのような面では精神的に辛いものがありましたが、作業自体はやってみたら案すんなり進みほっとしております。

実施した作業は大きく分けて3つ。

  1. 巷では”まだ対応していなかったのかよ”感が強い、、、サイトの常時SSL化
  2. スマートフォンやタブレットといったモバイルツールからのアクセスをしやすくなるためのモバイルファースト化
  3. サイトのカテゴリー構造やインターフェイスなどサイト構造の変更

結構前からこれらの3点はどうにしかないとな、と思っていた点ではあるので、奥歯に挟まっていたのがついに取れた!、、、という感じです。どのような点が変わったのか紹介したいと思います。

1.サイトの常時SSL化

これはいまさら感がある作業なので、若干恥ずかしい気もしますが、サイトを常時SSL化しました。常時SSL化というのは「常時SSLサーバ証明書を利用して、ウェブページすべてをHTTPSで表示させること」、、、らしいです。が、私もよくわかっていません。ネット上のサイトのデータがあるサーバと訪問者の端末間の通信のセキュリティが高くなったんだろうなーということくらいしかわかりません。そんな中なぜ常時SSL化をしたかというと、googleが

「検索結果として表示されるサイトはSSL化したサイトを優遇するよ?」
HTTPS をランキング シグナルに使用します
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報

と言っているので、、、。

これをやらないと、せっかく情報を発信したりサイトを作っても、検索サイトに相手にされないという恐ろしいものです。

私もSSL化の話は結構前から横目で見ていて知ってはいたのですが、忙しさにかまけて対応していませんでした。が、いよいよ最近になってブラウザのGoogle Chromeの新仕様ではSSL化されていないサイトはすべてブラウザで↓警告表示されるようになりました。

超遅ればせながらこのサイトも対応させたのです。

私のサイトでも↑の警告表示が出ていたのですが、常時SSL化したあとは、

とURL欄に表示されるようになりました。

ブログサイトの常時SSL化の作業は上述したようなgoogleの動きもあり、解説サイトも多く出ております。サーバーの設定をごにょごにょしたりもありますが、思ったよりすんなりと簡単にできたので、もっと早く対応しておけば良かったなーと思いました。
このサイトは13年間の怨念が積もっており、1000ページ以上あります。中には完全にSSL化されていないページも残っているように思いまが、さすがに1000ページ以上を手動確認する元気は残っていません。ぼちぼちやっていきます。

2.モバイルツールからのアクセシビリティの向上・モバイルファースト化

このサイトで、管理人の私自身が不満に思っていたのが、スマホやタブレットからこのサイトが超見にくい、ということ。世の中にブログはたくさんあれど、スマホで我がサイトより見にくい&情報を検索しにくいサイトは見たことがない、というレベルの使い勝手の悪さだったのです。

このサイトはもともと無料ブログサイトのFC2で開設していたものを、レンタルサーバに引っ越して、wordpressで作成しています。

ブログから大規模サイトまで作れる CMS - WordPress.org 日本語
簡単に美しいサイト、ブログ、アプリを作成するのに使えるオープンソースソフトウェア。

数年前からレンタルサーバになり、制約もほぼ無くなったので、快適は快適なのですが、設定は自分でやらなきゃならないことが多いのです。サイトをいじるのは基本的にPCで行います。なのでPC版はともかくスマホやタブレットのことまでは手が回らないぞ、、、ということで、モバイルツールへの対応はwordpressの無料プラグインで一応スマホ・タブレット版を用意はしていました。これがまた使い勝手が悪かったのですが、それでも「スマートホンの小さい画面でサイトを見に来る人なんて少ないだろう。。。」と高をくくっていました。

そして時代は進み、2018年現在。サイトの訪問者の約6割の方がスマートホン、1割がタブレット、残り3割がPCという恐ろしい状態に。。。

考えてみれば当たり前のことで、インターネットのインフラが整備されて、私自身が通勤の合間にスマホやタブレットでサイトを見たりしていますしね。まぁ時代に取り残されていたオッサンもいいところです。そりゃ13年前からこのサイトやっていますからね・・・。

しかしサイトの訪問者の7割がモバイルツールという現実に、さすがにまずいと思い、サイトのモバイルツールへの適切な対応を考えていたのです。

この対応では、当初「PCモバイルツール快適なサイトにできたら」と考えていましたし、これが理想であることは間違いないでしょう。

一方で最近になって「モバイルファースト」なる言葉を知りました。モバイル第一主義とでも訳すのか、PCよりモバイル機器を優先にするという考えだと思います。かのgoogle社も

「今までデスクトップPC前提で動いてきたけど、これからはモバイルツールを優先させるわ。」
モバイル ファースト インデックスを開始します
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報

という方針に2018年から切り替えました(と私は理解しています)。

このモバイルファーストに時代は進みつつあることを頭に置きつつ、ようやくモバイルツールへの対応のためのサイトの更新作業を行ったのでした。ひとまず、googleのモバイルフレンドリーテストで問題無しのようなので良しとしましょう。

Overview  |  Lighthouse  |  Chrome for Developers
Learn how to set up Lighthouse to audit your web apps.

3.デザインや構造の一新

上の二つは内部の地味目な事ではあるのですが、3つ目はサイトの使い勝手や見た目、構造を大きく変えました。

2018年8月より前のサイトはこんな具合↓

スクリーンショットを取り忘れてデザイン変更作業をしてしまったため、googleのキャッシュからイメージ画像作成しました。画像が一部ありませんがご了承ください。

2018年8月よりこちら↓

レイアウト自体は多少シンプルになって今風になったかなーという気がします。
心情面でも結構な転換をしています。「海獣記」というサイト名のとおり、海獣情報へのアクセスをメニューの一番目立つところに置いていたのですが、その海獣の情報も古くなっているし、私自身も海獣から遠ざかっていること、またアクセス数も海獣関係より書斎の話、旅の話や団地関連の普段の生活話の方が圧倒的に多いのです。当時は画期的(今でも類似情報は無いと思っていますが)な海獣情報よりも、おっさんの日常に興味を持ってくださるのも複雑な気がしないでもないけどそれはそれ、ありがたい話です。
ということで、若干寂しいですが、メニューやカテゴリ表示の順番も海獣関係よりニーズが高いコーナーを優先表示させることにしました。

しかし、このデザイン変更は、wordpressサイトのビジュアル的なものを一括で制御するテーマという物を全く別物にしたのですが、文章を作る時も文字の装飾機能が簡単に使える(こんな風にするのも超簡単です!あまりやりすぎるとうざいと思いますが、楽しい)し、段落や引用も簡単にしかも綺麗に打つことが出来てびっくりしています。いろいろ時代は進化しているのだなと。。。ちなみにこのサイトのテーマはわいひらさん作成のテーマ・cocoonをちょろちょろっといじって使っています。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

あとは見た目だけではなくサイトの中身を充実させていこうと思います!

コメント

タイトルとURLをコピーしました