【2020年版】今どきのホームページの作り方 | 押さえておきたいポイントとトレンドを徹底解説
ホームページの作り方は、時代によって変わってきます。
HTMLやCSSを使うという点は昔も今も変わりませんが、20年くらい前は「テーブルレイアウト」という、テーブル（表）を利用してページをレイアウトする方法が一般的でした。
その後はCSSによるレイアウトが主流となり、スマートフォンの登場によって現在ではレスポンシブWebデザインが一般的となっています。
そして今後もさらに、ホームページの作り方は時代とともに変化していくはずです。
ということで今回は、今どきのホームページはどのようにして作るのか？ また今後のホームページ制作において押さえておきたいポイントやトレンドについてご紹介していきたいと思います。
今どきのホームページの作り方
新しい技術の誕生やそれに伴うニーズの変化によって、ホームページの作り方は変わってきました。
今現在の状況としてポイントとなるのは、
- 検索アルゴリズムの変化（E-A-Tの重視）
- 5Gの誕生
- スマートフォン市場の成熟
辺りではないかと思います。
今回は特にこの3つを踏まえて、今後のホームページに取り入れていきたい機能や技術、考え方について触れていきます。
WordPressによる構築
すでに知っている人も多いと思いますが、HTMLなどの知識を必要とせずブログ感覚でWebページを編集できるCMSによってホームページを制作するケースが多くなっています。
CMSの中でも、特に人気なのがWordPress（ワードプレス）です。
現在インターネット上にあるウェブサイトの25～35%はWordPressで作られていると言われており、
- 無料で導入できる（ライセンス料不要）
- トラブルシューティングや開発Tipsなどの情報が充実している
- HTMLなどの知識が必要ないため技術者でなくても運用可能
などが、WordPressがここまで普及した理由ではないかと思われます。
ちょっと前に「WordPressはオワコン」みたいな話が盛り上がっている人がいましたが、実際にはオワコン化するのではなく「インフラ化」していくはずです。
WordPressがオワコンと言っているのはプログラマーとかエンジニアなどと呼ばれる人たちで、シンプルに言えば「仕事としてうま味がない（稼ぎにくい）」ということです。
WordPressは技術的にそこまで難しいことはなく、PHPという言語をある程度理解できれば扱えてしまいます。
そのため制作案件ということで考えれば、単価が上がりにくいというわけです。
また逆に言えば、エンジニアにとっておいしくないということは、非エンジニアにも十分扱えるものであるということでもあります。
そもそもホームページとして大事なのは難しい技術が使われているかではなく、「ユーザーのニーズに応えられているか？」ということです。
そしてそのためには、HTMLなどの知識を必要とせずにコンテンツの編集が可能であるWordPressは、現状もっとも適しているツールの一つであると言えるでしょう。
違いが出るのは情報設計の部分
WordPressに限らずですが、ホームページを作るには「誰に向けた情報をどのように伝えるか？」という情報設計が重要になってきます。
そこができていなければ、どんなに優秀なエンジニアやデザイナーに依頼しても成果の出るサイトを作ることはできませんし、WordPressさえ使っていれば成果が出せるというわけでもありません。
また情報設計には、「UI/UX」と呼ばれるようなサイトの「使いやすさ（ユーザビリティ）」も含まれます。
- ユーザーが求めている情報にスムーズにたどり着ける
- ユーザーが求めている情報を誤解や混乱なく受け取れる
ためには、情報をまとめたり整理するだけではなく、Webページ上にどのようにレイアウトするかも大切になってくるわけですね。
そして従来はそういった作業をするのにHTMLやCSSなどの知識が必要だったわけですが、WordPressであれば管理画面からマウス操作だけで完了させることも可能になります。
「ホームページで成果を出す」という点で考えれば、制作に関するスキルよりもマーケティング的な思考ができるか？の方がより重要になってくるでしょう。
「WordPressはSEOに強い」という誤解
もう一つ注意したいのは、「WordPressはSEOに強い」という言葉を誤解しないことです。
WordPressを使ってさえいればSEOに強いわけではなく、「WordPressを使えばSEOに強いサイトを作ることができる」というのが本当のところです。
つまりWordPressを使っていたとしても、SEO対策が十分にされていないテーマ（テンプレート）であれば強いことはないということです。
なおWordPressテーマには有料のものと無料のものがありますが、有料だからSEO対策が十分されている、無料だからされていないということにはなりません。
無料でも丁寧にSEO対策されているテーマもありますし、見た目はキレイだけどSEO対策はイマイチというものもあります。
もっともWordPressでは見た目（デザイン）の部分はテーマ、機能的な部分はプラグインにて実装することを推奨されているため、テーマ制作者によってはSEOをはじめから重視していないケースもあります（SEOプラグインの導入を前提として）。
しかしSEOにあまり詳しくない人にとっては、プラグインの設定でも骨が折れる作業だと思います。
そのためSEO対策にあまり自信がないという人には、あらかじめSEO対策が施されているテーマを使用することをおすすめします。
レスポンシブWebデザイン
冒頭でスマートフォンの登場によりレスポンシブWebデザインが普及したと書きましたが、現在ではさらに重要度が増しています。
「レスポンシブWebデザインとは何か？」ということに簡単に触れておくと、一つのHTMLソースをデバイスの画面サイズによって、CSSでレイアウトやデザインを切り替えるという手法です。
以前は一つのドメイン内にパソコン用サイト（例：https://example.com/）とスマホ用サイト（例：https://example.com/sp/）をそれぞれ用意して、ユーザーが使用しているデバイスによってどちらを表示するか切り替えるという方法が一般的でした。
しかしこの方法だと、
- 更新時にパソコン用・スマホ用の両方を編集しなければならない
- URLが別々になるため、SNSでシェアされたときに被リンクが分散されてしまう
などのデメリットがあります。
また現在では、パソコンよりもスマートフォンからのアクセスの割合が大きいサイトがほとんどです。
それに伴ってGoogleは、サイトの評価を（パソコンではなく）スマホでアクセスされたときの表示を基準にするモバイルファーストインデックスを採用しました。
パソコン用ページとスマホ用ページを別々に用意すると、双方に差異があることが普通で、しかも多くの場合はスマホ用ページのコンテンツはパソコン用ページの簡易版のような内容になってしまいます。
そうなるとモバイルファーストインデックスで評価されるのは、コンテンツを省略したスマホ用ページということになってしまい、SEOにおいて不利になる恐れが出てきます。
レスポンシブWebデザインでは同じページのデザイン・レイアウトをデバイスごとに切り替えるため、コンテンツの差異やURLの分散を気にする必要がなくなります。
そのため、特別な理由がない限りはレスポンシブWebデザインを採用することをおすすめします。
動画などの大容量コンテンツの活用
5Gの普及によって今後より一層、大容量コンテンツの利用が活発になると予想されています。
「大容量コンテンツ」というと漠然としていますが、今後ホームページで活用されるのは動画や高解像度の画像などです。
現在でも背景に動画を設置したサイトをよく見かけるようになりましたが、今後はさらに増えると考えられます。
また今のところは外出先での通信環境などに配慮して画像ファイルをなるべく軽量化することが推奨されていますが、これも今後はより鮮明な画像を安心して使えるようになるでしょう。
次に、最近よく聞くVR（仮想現実）やAR（拡張現実）などの技術も、近い将来ホームページのコンテンツとして導入されると言われています。
たとえば、不動産情報サイトなどでは、物件の写真が掲載されています。
そこにVRやARの技術を導入すれば、内見に行かなくても実際に部屋を訪れるような感覚で物件を確認したり、家具のレイアウトを検討したりということが可能になりそうですよね。
またGoogleが提供しているストリートビューなども、VR/ARの技術を活用すればよりリアルなものになるとイメージできます。
正直VRなどの技術が浸透すれば、
- ホームページでどのようなことができるようになるのか？
- そもそもホームページという媒体は生き残るのか？
など想像できないところもありますが、現状ではとりあえず、動画や鮮明な画像をより快適に利用できるようになると考えておけばいいかと思います。
ちなみに、5Gについては以下の動画が分かりやすいです。
「5Gって何？」という人は一度見てみることをおすすめします。
シングルページデザイン
コンテンツを1ページにまとめたホームページをよく見かけるようになりました。
正式名称が分からないのですが、「シングルページデザイン」とか「シングルページレイアウト」などと呼ばれているようですね。
5年くらい前まではシングルページと言えばLPというようなイメージだったと記憶していますが、現在ではコーポレートサイトやプロダクトサイト、ブランドサイトなどさまざまなジャンルのサイトで見かけるようになりました。
シングルページデザインのメリットは、
- コストを抑えられること
- スマホに適したレイアウトであること
だと思います。
その反面、コンテンツの構成によってはSEO的に不利になることもあるので、サイト設計には経験やノウハウが重要になってきます。
- オフラインでの業績が堅調で、とりあえず会社案内的にホームページを公開しておきたい
- 集客はリスティング広告の運用を想定している（LPとして活用する）
という場合には、メンテナンスの手間も少なくて済むのでおすすめかと思います。
シングルページデザインだと単調になりやすいためか、CSSアニメーションやパララックス効果、そして上で挙げた動画コンテンツなどを活用して動きを出しているサイトが多いようです。
CSS3によるアニメーション
以前はホームページに動きをつけるというと、JavaScriptを利用するのが一般的でした。
しかし現在は、CSS3によってより手軽にアニメーションの実装が可能になりました。
アニメーションにはユーザーの目を楽しませるだけでなく、ユーザーの操作に対する反応、いわゆる「マイクロインタラクション」という役割も担っています。
例えばそれがボタンであるとユーザーに伝えるために、ボタンにマウスホバーすると色が変わったりボーダーの太さを変えてボタンが押されているような表現がされているサイトがありますよね。
そういう感じで、
- ユーザーの操作に対する反応
- 現在の状況（メッセージの未読通知など）
をアニメーションやデザインで伝えることを言います。
現在はCSSによる表現の幅が広がったため、画像をあまり使わなくてもアニメーションを実装することができます。
過剰な演出は邪魔になってしまいますが、「どうすればユーザーにとって快適か？」という視点で考えられれば、効果的にアニメーションを活用できるでしょう。
リアリティのある写真を使う
最近はユーザーの目が肥えてきて、ストックフォトサイト（写真素材サイト）にあるような写真では説得力に欠けるようになってきました。
またGoogleの検索エンジンでも、オリジナリティの高い写真や画像を評価する傾向があるため、できる限りリアリティのある写真を使うようにしましょう。
つまり、写真素材を購入して間に合わせるのではなく、実際に写真を撮影して使った方がいいわけですね。
最近のカメラは性能がいいので、プロのカメラマンに頼まなくてもそこそこのクオリティの写真が用意できます。
またスマートフォンのカメラの性能も現在では侮れません。
「カメラを用意するのはちょっと……」という場合には、スマートフォンでもいいのでオリジナルの写真を用意することをおすすめします。
なお写真にこだわりたいなら、やはりプロのカメラマンに依頼するのが確実です。
カメラマンによって費用などの条件はさまざまですが、案外リーズナブルに依頼可能なこともありますので探してみるといいでしょう。
僕の方でもカメラマンを紹介することができますので、ご希望の方はご連絡ください。
SEO不要の時代到来？SEOはこれからどうなるのか
「検索エンジンの性能が向上して……」みたいな話、よく聞きますよね？
昔は検索で引っ掛けたいキーワードを無意味にたくさん入れたり、上位表示させたいサイトに自作自演リンクを送ったりする（被リンク）ことでSEO的な評価を高めることができました。
しかし現在では不自然なキーワードや被リンクはペナルティの対象となっています。
つまり、より自然な状態で有益なコンテンツであるか否かを、検索エンジンが判断できるようになってきているわけですね。
そもそもなんですが、SEO対策をして検索順位に影響を与えられるというのがおかしな話なわけです。
本来は「その情報がユーザーの役に立つのか？」が順位を決める唯一の要因であるべきなのですが、では何によって役に立つと判断するのかという基準を決めるのが困難であるために、SEO対策というものが成り立つわけです。
そのため、
- タイトルや見出しにキーワードを入れましょう（＝それについて書いてあるはずだから）
- 長文を書きましょう（＝網羅的な情報である可能性が高いと判断される）
- 被リンクをたくさん獲得しましょう（＝役に立つ記事はいろんなところで紹介されるはずだから）
というようなことで、検索結果の上位を狙うという手法が生まれたわけです。
しかしそうなると、本当に有益な情報を発信している人の記事よりも、SEO対策のうまい人の記事が上位に表示されるというケースが増えてしまうわけです。
実際に、一時期はゴミのような記事で検索結果の上位が埋め尽くされていたこともありました。
Googleもそれをヨシとするはずはなく、定期的にアルゴリズムを変更したりして、現在でも改善を繰り返しているわけですね。
自然に書けば成果が出る時代になりつつある
そしてこのままいけば、将来的にはSEOという考え方自体あまり意味がなくなると唱えている人も結構います。
たとえば、タイトルや見出しにキーワードを入れるというのはSEOの定石ですが、検索エンジンの性能がよくなるにつれ、コンテンツの内容からユーザーの検索意図に合わせた記事を上位に表示させることが可能になってくるわけです。
また検索意図に合わせて結果を表示できるようになれば、網羅的な記事を上位に表示させる必要はなくなります。
当たり前ですが、ユーザーにとってみれば必要のない情報をダラダラ見せられるより、知りたいことをピンポイントで教えてくれる方が有益です。
そのため、長文であるかどうかは評価の対象ではなくなってきています。
重要なのは、ユーザーのニーズに応えられているか？ということです。
そのためにはキーワードから検索意図を読み取り、その答えとなる情報を用意してあげることです。
現状ではまだ、SEO的なノウハウがまったく不要とは言えません。
しかし近い将来には、おそらく不要になるだろうと思います。
キーワード選定とメタディスクリプションは今も大事
SEOが不要になったとしても、キーワード選定とメタディスクリプションの重要性は変わりません。
「キーワード選定」と聞くとライバルの強さなど難易度ばかり気にしてしまうかもしれませんが、もっと大事なのは「ユーザーが何を知りたがっているか？」ということです。
そこが自分のターゲット顧客とズレていたり、自分の書きたいことだけ書いていてもなかなか成果にはつながりません。
またメタディスクリプションは、検索結果のタイトル下に表示されるテキストです。
ユーザーはここを読んでクリックするか判断しますので、しっかりと作り込んでおいて損はないでしょう。
とはいえ、最近ではディスクリプションを設定していても記事本文から抜粋されているケースもあるため、今後不要になる可能性もゼロではないです。
現在の検索エンジンでは「E-A-T」が重視されている
現在の検索エンジンは、サイト上のコンテンツが有益か否かの判断基準として「E-A-T」を重視しています。
E-A-Tとは
- Expertise（専門性）
- Authoritativeness（権威性）
- Trustworthiness（信頼性）
の3つのことで、これらが認められたコンテンツは、検索結果の上位に表示されやすいと言えます。
これはアフィリエイトサイトなどで専門的な知識のない人が適当なことを書いた記事が上位表示されたりして、検索結果が荒れていることが問題視されたためです。
それを改善するために、専門的で正確な情報を検索上位に持ってくるために、E-A-Tという基準が設けられたと言われています。
ですので、専門性・権威性・信頼性を意識してコンテンツを作成しましょうという話なのですが、実際のところいきなり権威性や信頼性は手に入りません。
まずは専門性の高い情報を発信して、それを積み重ねることで権威性や信頼性を獲得していくことを考えましょう。
ナビゲーションメニューの簡素化
スマートフォンでは横幅のあるナビゲーションメニューの表示が難しいため、「ハンバーガーメニュー」などと呼ばれるバーを3本重ねたメニューが多くのサイトで導入されました。
数年前まではこのハンバーガーメニューに対する認知があまりされておらず、操作に馴染みのないユーザーもたくさんいました。
しかし現在では十分に浸透したため、一部のサイトでは従来のようなナビゲーションメニューを廃止し、ハンバーガーメニューのみを実装しているものも見かけるようになりました。
とはいえ、従来のナビゲーションメニューではすぐに目的のリンクをクリックできるのに対し、ハンバーガーメニューの場合は「ハンバーガー」をクリックしてメニューを開くという動作が増えてしまいます。
そのため、当面はレスポンシブWebデザインで従来の形とハンバーガーメニューを切り替えるか、両方を導入してユーザーの好みによって使い分けてもらうようにしておくのがいいでしょう。
ダークモード
スマートフォンの登場により、デバイスの使用時間や画面を見る時間が大きく伸びました。
それによって問題になったのが、デバイスのバッテリー消費と画面のライトが目の健康に与える影響です。
それを解決する手段として、Google ChromeなどのWebブラウザで「ダークモード」が導入されました。
画面を暗いカラーにすることでバッテリーの消費を抑え、また目にも優しいというわけですね。
このダークモードがWebブラウザだけでなく、2019年頃からアプリやWebサービスなどでも導入されているケースがあります。
今後はこのダークモードを導入するサイトが増えてくる、という意見もあります。
とはいえ、中小企業や個人事業主が自社サイトにライトモードとダークモードを実装するのは、費用対効果が高いとは言えません。
そのため、もしデバイスのバッテリーやユーザーの目の健康に配慮するのであればサイト自体のデザインを暗めのカラーで制作するというのも選択肢の一つかもしれません。
まとめ
以上、今どきのホームページはどのようにして作るのか？ そして今後のホームページ制作において押さえておきたいポイントやトレンドについてお伝えしてきました。
はじめの方でも言いましたが、ポイントは
- 検索アルゴリズムの変化（E-A-Tの重視）
- 5Gの誕生
- スマートフォン市場の成熟
の3つです。
これにより
- SEO対策不要の未来
- 動画などの大容量コンテンツの活用
- スマホファーストの設計
が現在重要、または今後注視すべき点ではないかと思います。
とはいえ、SEOが完全に不要になるにはかなり高度な技術が必要になるでしょうし、VRやARなど含めて大容量コンテンツの活用は、今後いろんな人がアイディアを形にしていくはずです。
そうした動向を見逃さず、自社サイトに活かせるものはないかアンテナを張っておくことをおすすめします。
