ホームページ制作について

パソコンとスマホ
自分で言うのもナンですが、私はウェブ制作者として稀有な存在だと思います。
私が作ったサイトのSEOの強さ、表示速度の速さなどは我ながら素晴らしいと思っています。

SEOに関してはGoogle側のアルゴリズムの変更(順位決定ルールのアップデート)によって順位が変動することがあるため、そのスキルを明確に証明しにくい面があります。
しかし表示速度に関しては、今ご覧になっているこのサイトの速さがそのスキルの証明になっています。

サイト表示速度は制作技術の総合点のようなものです

インターネット
ウェブサイトは以下から紹介する様々な技術によってできています。

「表示速度」というものはそれらのトータルでの結果として顕れるものであるため、どれか一つでも雑に作ったり制作スキルが低い場合、それが出来上がるサイトの表示速度のボトルネック(遅くなる要因)になってしまいます。
逆に言えば、後から改善するにも限度があるものだと言えます。

私が他社が制作したサイトを見ていて思うのは、私ほど以下の一つ一つを丁寧に作っている職人のような業者はいないので、このサイトの表示速度が他社に抜かれることは今後もおそらくないでしょう。(少なくともHTTP/3が普及するまではまず抜けないでしょう)

もちろん、私が制作したお客様のサイト(ココとかココとか)も同等の速さでできています。

HTML(ページの構造を示す言語)

HTML
インターネット上のページは基本的にHTMLという言語でできています。
HTMLは比較的簡単な言語ですし、多少の文法エラーがあったとしてもブラウザが自動的に補完してくれるため、そのスキルの差が出にくい部分ではあります。

しかし、HTMLに無駄があればその分ページ容量は増え、画面描画の処理時間が増します。

  1. それぞれの文書の意味を正しくHTMLで示せているか?
  2. 不必要にdivが入れ子になっていないか?
  3. 文法エラーがないか?

など、細かな点まで気を遣ってHTMLを書いている業者は限られるでしょう。
上記1がきちんとできていなければ検索順位の悪いサイトになります。
それどころか現実には上記3すらきちんとできていないサイトが8~9割を占めるのではないでしょうか?

CSS(ページのデザインを設定する言語)

デザイン
ページのデザインはCSSという言語で記述します。
このCSSもHTMLと同じく、無駄な記述があればその分ページ容量が増え、画面描画の処理時間が増すことになります。

「無駄なく、最小限に」書くことが重要です。
ちなみにCSSに関しても文法エラーがあるサイトがほとんどなのが現実です。

簡単に文法エラーをチェックできるサイトもあるのに、おそらくチェックすらしていないのでしょう。HTMLとCSSに関してはエラーがあったとしてもブラウザが自動補完してくれますから。

しかし、以下から紹介する言語は自動補完されないものとなるので、習得・制作難易度が少し上がります。

JavaScript(ページ内の動きなどを実現する言語)

JavaScriptのコード
JavaScriptはページ内の動きを実現する言語です。
例えばこのサイトだとページ最上部にあるメニューの開閉アニメーションや、ページ最上部に戻るためのスクロールアニメーションなどが該当します。

上で紹介したHTMLやCSSとは違い、JavaScriptはプログラム言語なので習得難易度が少し高く、「ホームページ制作業者」の中でJavaScriptまでをきちんと書くことができるところは限られます。

そのため、たいていの制作業者はネット上に無料で公開・配布されているライブラリ(完成品)を自分のサイトに組み込む形を採っているところがほとんどでしょう。
そのやり方が悪いわけではありません。制作作業の効率化のためにはむしろ良いやり方だと言えます。

ただ、JavaScriptはコードの書き方による処理時間や動作タイミングなど奥が深く、ページ表示速度のボトルネックなっているケースが非常に多いです。

PHP(サーバー側での処理を実現する言語)

PHPのコード
PHPはサーバー側での処理を実現するための言語です。
これもプログラム言語なのでHTMLやCSSより習得難易度が少し高く、扱うことのできる制作業者は限られます。

PHPでできているものとして一番わかりやすいのはWordPressが挙げられます。
WordPressサイトを作る場合は以下の二択になるわけですが、

  1. ネット上で無料配布 or 有料販売されているテーマをカスタマイズするか?
  2. テーマを白紙から独自で作るか?

後者はPHPを理解できることが必須となります。
WordPressは「表示速度が遅い」というのが最大のデメリットですから、いかにしてそれを最小限に抑えることができるかはPHPを読み書きできることが必要になります。

なお、前者のやり方の場合はPHPどころかHTMLやCSSすらわからない人でもウェブサイトを一応作れてしまうのが魅力なのですが、そのような人が作ったWordPressサイトは表示がクソ遅かったり、細かなカスタマイズはできなかったりすることになるでしょう。

デザイン

デザイン性
サイトのデザインは人それぞれの好みによる面がありますが閲覧者の印象を決めるものなので、デザインだけを重視してサイト制作を依頼するケースがほとんどでしょう。

逆に言えば、上で解説したような様々な言語は一般の方には見えない部分なので、作り方が雑 or 制作スキルが低かったとしても顧客(依頼者)にはバレないのです。
だからこそ「デザインは良いのにSEO(検索順位)が悪い or 表示速度がクソ遅い」というサイトが数多く存在するのです。

実際のところ、サイトのデザインが表示速度に影響する面は少なからずあります。
しかしぶっちゃけ言ってしまうと、そのような考え方でデザインを考えている制作業者は少なく、ほとんどは「依頼者が満足するかどうか?」でデザインを考えていることでしょう。

なぜなら依頼者が納得しない限りその仕事はいつまで経っても終わりませんし、制作料金ももらえないですからね。仕方ないと言えば仕方ないのです。
でもそのせいで上記のようなデメリットが発生し、その不利益はサイト運営者である依頼者自身に跳ね返ることになってしまいます。

画像(写真)

写真
サイトのデザインを構成する要素として画像(写真)が挙げられます。
画像というのはテキスト(文字)に比べて数百倍以上の容量があるため、どこまで圧縮をするか、また掲載の仕方によってページ表示速度に大きく影響します。

綺麗に見せるだけならバカでもできます。大きなサイズのままページ内に貼り付ければいいだけですからね。でもその分ダウンロード時間が長くなり、ページの表示は遅くなります。
「なるべく綺麗に見せながら、かつ、容量を極限まで下げる」のにはそれなりのスキルが必要になります。

  • 画像形式はJPGが良いか、それともPNGか?またはWebPやAVIFにするか?
  • PCだけでなくスマホやタブレットの時の表示サイズ(解像度)はどうするか?

などまで考えてきちんと実装できているサイトは1割以下でしょう。そこまでやると作業工程が何倍にも増えますからね。(少なくとも3倍以上にはなります)
仮にできるスキルがあったとしても安い金額ではやってられないのです。

制作料金が安くないのはそれだけの理由があるのです

私が制作するサイトは上記すべての作業を丁寧に実施しています。
だからこそ「SEOに強く、表示速度が速い」サイトが作れるのです。

そのぶん手間が多くかかるため料金を安くすることはできませんが、他社がやっていない or できない作業をしているとお考え下さい。
こんなふうに職人が手作業で一つ一つ丁寧に作っている制作業者は稀有なのです。

【余談】
私は上で紹介した言語を誰よりも綺麗に書くことを10年以上前からサイト制作時のこだわりとして実践していましたが、それは一般の方には見えない部分なので、それが評価や依頼に繋がることは今までありませんでした。

「SEOの強さ」には繋がっていましたが、このページの冒頭でも書いたように検索順位は常に変動するし、ページに掲載している内容にも大きく影響されるものなので、そのスキルを明確に証明しにくかったのです。
(ページに掲載する内容は私が決めるものではなく、依頼者が決めるものなので。)

しかし、このページを書いている2021年現在は「ページの表示速度」というものが今まで以上に重視される時代になり、上記の技術が「表示速度」という形で明確にアピールしやすい時代になりました。

表示速度は「PageSpeed Insights」や「Pingdom Tools」のような測定サイトで計測すればハッキリとした数値で出ます。

10年以上培った技術が日の目を見られるようになって良かったな。と今は思っています。

提供サポートなど