目から鱗

カリキュラムの冒頭、気づかされたのは、HPは、お店を知っている人に向けて作っていませんか？という事。最初は、そうでもなかったかもしれませんが、最近は、良くご利用して下さる方に向けた、投稿しかしていなかったと自覚しました。営業時間の変更、営業日カレンダーの更新など、単に営業時間などの告知だったり、良くて新メニューのお知らせ、などしか無かった気がします。

HPなんて、マンションとかに掲示している掲示板みたいなもんだと、思い込んでしまっていました。

そのため、ブログの投稿機能を使って、お知らせしたい記事だけを更新していき、しかも、TOPページが投稿画面になっているので。常に告知の記事しか表示されない状態でした。

これは、スキル的な問題の方が大きかったかもしれません。

HPを簡単に作れるWordPressというプログラムを使っていたので、どうしても型にはめた作りしか出来ませんでした。

それゆえに、お店を知っている人向けのページになってしまっていたので、”お店を知らない人に知ってもらう”ために作るものというのが、目から鱗でした。

カリキュラムを終えて

このカリキュラムは、技術的な話ではなく、考え方を口頭で話しているだけだったので、言っている事はわかった、では、実際どう作ればいいかまでの案内は、ありませんでした。

WordPressのテンプレートの案内は、あったので、技術的な事は、そのサイトのサンプルを見ながら、どのテンプレートが自分に合っているかを、見極めるのに時間を費やしました。

Diviで構築

このサイトは、DiviというWordPressのテーマを使って作っています。

アメリカの会社が提供している有料テーマなので、基本英語、まずそこのハードルをクリアーするのに苦戦しました。

使用できるテンプレートが沢山あるので、その中から飲食店向け用のテンプレートから見た目が気に入ったものがあったので、それをインストールして使っています。

操作は、テンプレート内のテキスト、写真などを変更していくだけなので、比較的簡単に変更ができます。ただ、新たなモジュールを追加する際には、思ったように設定できなくて苦労はしました。

ここからは、力業で、ゴリゴリ設定していくだけなのですが、やはり綺麗に仕上げたかったので、綺麗な写真も必要になります。

レンタルしたカメラを使ったり、機種変更したiphoneを使って、必要な写真を撮影しました。

写真撮影後に、待ち受けているのは、写真の加工です。

トリミング、サイズ変更などが必要となります。写真加工は、迷ったあげくPhotoshopをサブスクリプションで契約をしました。

もう何十年も前に使った事はありましたが、最新バージョンはやはり機能が充実していますね。ただ、今は必要な機能を覚えて使うのが精一杯です。

力業で、どうにか公開できるまでは、完成しました。

ドメインの移行に失敗

既存のＨＰを稼働させながら、別の仮サブドメインで、ニリューアルしたHPを製作していて、完成後、既存のドメインに変更する予定でしたが、上手く移行できなく、移行を断念して、別のサブドメインで稼働させる事にしました。

既存のページにアクセスしたら、リニューアルしたページに飛ばす処理を追加して、どうにか、リニューアルしたページを表示させる事ができました。

しかし、既存のページにアクセスできなくなってしまったため、検索サイトで検索すると、既存のページが検索結果に表示されるのですが、アクセスするとページが表示できなくなってしまいました。

古い情報だから、諦める事にします。

検索サイトも学習して、検索結果にも表示されなくなるでしょう。

アクセス測度が遅い

表示の確認をした時に、使っているパソコンでは、気にならなかったのが、初めてアクセスする携帯などでは、なかなか表示されないので、なんでかな？と思いながらも、Wifiが遅いのかな？とか勝手に思い込んでいました。

色々調べていくうちに、やはりページが表示するまでにかなりの時間が費やされている事が分かりました。

原因を調べると、Divi自体が遅いという結果が…

愕然としました…

時間を掛けて作った結果がこれか…

もっと、最初に調べるべきだったと、嘆いてしまいました。

落ち込みながらも、早く表示させるテクニックを解説してくれているサイトを発見して、対策にチャレンジすることにしました。

画像サイズの縮小

一番最初に対処したのが、写真サイズの圧縮。

デザインをするにあたり、印刷物を作る事が多かったので、PNG形式のファイルを多用していました。

そのため、ＨＰにもPNG形式で使っていました。

Webでは、PNGがサイズが大きいので、使ってはいけないという基本が分かっていませんでした。撮影した写真をそのまま使っている場合は、JPEG形式だったので良かったのですが、写真を加工した際に新たにファイルを作成した時に、ＰＮＧ形式で保存していました。

最終的には、「WebP」という次世代フォーマットを採用する事にしました。欠点としては、表示非対応のブラウザーがあるとの事です。

IEは、非対応という事ですが、IEの利用者も激減し、IE自体も今後サポート体制が終結するという事も考え、この「WebP」を採用する事にしました。

問題は、画像の変換でしたが、幸いPhotoshopがサポートしているので、対応できました。

変換して、サイズが激減したことに、びっくり。

時代は進化しているのですね！

さらに圧縮させるために、画像サイズの縮小です。ここでもPhotoshopが大活躍です。

もう、これ以上は…というレベルまで圧縮させる事に成功しました。

因みに、全てが希望どおり圧縮される訳ではなく、PNGでも対して変わらない場合もありました。

Webサーバーの設定

次に、対処したのが、サーバーの設定。

WordPressを稼働させるために最適な設定というものがあるらしく、サーバーの初期設定から変更することで、対処できるらしいのです、変更しました。

究極は、物理的に早いサーバーに移行というものでしたが、レンタルサーバーまで変える事は、現実的ではなかったので、今後の参考にする事にしました。

因みに、早いと評判なのが、「エックスサーバー」らしいです。

このサイトは、ロリポップサーバーで稼働しています。

アクセス解析ツールで見える化

次に、導入したのが、Webページのアクセス解析のツールです。

これは、ページを指定して、アクセスしてからページが表示するまでを解析してくれるものです。

凄いのが、ページが表示されるまでにどのようなデータが流れているかが時系列で分かる事です。

しかも、ファイル毎にかかった秒数までが表示されるため、何がネックになっているのかが、一目瞭然です。

解析するのに、大変助かりました。

しかし、これは、見える化してくれるだけなので、ネックになっているファイルを改善する必要があります。

因みに、利用した解析ツールは、「GTmetrix」というサイトです。実用的に使用するには、ユーザー登録が必要になります。

日本語のダウンロード回避

最後の難関！

解析ツールで見える化した結果、ネックになっているファイルが判明しましたが、そのファイルを転送させないようにするのに苦労しました。

Diviが遅い理由が、日本語のフォントがダウンロードされるのが主な原因だということです。

確かに、飛びぬけて容量が大きいファイルが３つもありました。

Googleのフォントファミリーから、日本語フォントのRegular,Medium,Boldの３種類がダウンロードされています。

このフォントを使用すると、お洒落なフォントが使用できて良かったのですが、見た目より速度を優先するようにしたかったので、このファイルをダウンロードさせないようにするのに、苦戦しました。

参考にさせて頂いているのが、ネットの投稿、Youtubeで配信されている動画なのですが、最初に見つけたネットの投稿で教えてもらった内容を設定したのですが、一つのファイルの転送は止まったのですが、残り２つは変わりませんでした。

この内容は、数年前の投稿で、複数見つかりましたが、この方法しか見つかりませんでした。内容は、cssファイルを追加する方法です。

Youtubeの動画も同様な内容のものがありましたが、沢山の動画が投稿されていて、似たような内容の動画が別の動画でアップデートされている事に気づいて、その内容で設定したら、解決しました。

一時は、諦めかけていましたが、あきらめず根気強く、パソコンに向き合って解決できた事。有益な情報を教えて下さった事に感謝です。

想定外　その３

ＨＰの高速化に成功して安心していて、気づかなかったのですが、フッター部に営業日をお知らせしている、カレンダーをウィジェットに追加していたのが、表示されなくなっていました。

対策をしている中で、何かかが影響してしまったと考察します。

現在、原因不明につき、カレンダー表示は諦めて、別の方法でお知らせをするしかないかと、考えています。

最後に

これだけ、膨大な時間を費やしてホームページをリニューアルしましたが、まだ目標は達成できていません。

何のために、ホームページをリニューアルしたのかというと、「圭縁（どどえん）」を知ってもらうためです。

知ってもらって、何か感じてもらって、お店に来て下さり、良いご縁に繋がるのが最終的な目標です。

そのために、気づいてもらう手立てを沢山作るのが、当面の課題です。

最後まで、お読みい頂きありがとうございました。