静的サイトと動的サイトの違い、目的に合わせたツールの選び方を知ろう！

クライアントワークをする中で、案件ごとに「どの仕組みで作るべきか」を判断する場面にはほぼ毎回直面します。そして悩みの種になります😭

しかし、クライアントはその辺りをきちんと把握・理解しているわけではないですし、選んでもらうのも酷な話になってしまいます。なので、そこも自分でリードする意識が重要になります💪

こんな悩みを解決していきましょう！

静的サイトと動的サイトの違いとは？

静的サイトについて

静的サイトとは、HTMLファイルをそのまま表示するという仕組みのWebサイトのことを言います。

ブラウザでURLを叩くと、見たいファイルが置いてあるサーバーへアクセスし、表示するHTMLファイルを受け取ります。受け取ったHTMLファイルに書いてある指示に従ってその他に必要なCSSやJavaScriptも読み込んで画面に情報を表示させます。

常にサーバーから返されるものは同じなので、誰が見ても同じように表示されるというのが特徴です。

動的サイトについて

動的サイトは、アクセスするたびにデータベースとやりとりをし、HTMLを都度生成して表示する仕組みのWebサイトのことを言います。

ブラウザからサーバーにアクセスした後、サーバー内の対応ファイルの記述を実行します。データベースにアクセスして必要なデータを取得し、サーバーからも必要なファイルを受け取り表示するHTMLが生成されます。

この仕組みを利用した代表的なシステムをCMS（コンテンツマネジメントシステム）といい、さらにその代表としてWordPressがあります。

WordPressで例えると、記事ページは同じデザイン・形式で表示されるよう同じテンプレートファイルを参照しますが、ユーザーがクリックしたものによって表示する内容が変わるのでデータベースの参照場所が変わるというイメージです。

これらを踏まえて、静的サイトと動的サイトはどう選ぶ？

結論、動的か静的かは要件に「お知らせ」「ブログ」や、「毎年テキストを入れ替えるページ」などの更新が伴う要素があるかどうかで判断するようにしましょう！

例えば、お知らせもなければサービス内容も数年変わらないというようなWebサイトをWordPressで管理してもオーバースペックになりがちです。不必要に表示を遅らせる原因になったりセキュリティリスクも上がることがあるので、あまり良いとは言えないでしょう。

このような場合、もしも必要になったら後から静的サイトを動的サイトにリニューアルするということもできるので、最初は静的サイトで用意するというのが良さそうですね！

（※リニューアルに関しては後述します）

開発（コーディング）VS ノーコード（ローコード）、どっちにする？

次に、開発（コーディング）をすべきなのか、ノーコード・ローコードの構築でも問題ないのかといった点に注目して選び方を考えていきましょう🙌

前提として把握しておきたいこと

大前提、開発を伴うサイトとノーコードベースのサイトとでは柔軟性が大きく違います。

※Webアプリのように1から動的サイトを開発することは可能ですが、コストが激高になります。

開発や静的コーディング、WordPressを使用したWebサイトは、コードを書くので柔軟性は高く様々なタイプのWebサイトに対応しています。一方でノーコードベースのStudioではほぼコードを書かない（書かないことが目的のことが多い）ので、デザインの再現や持たせられる機能の制限が多くなります。

※捉え方によってはWordPressもコードもノーコードと言えます。ですが、コードそのままインストールして使用する仕組みなのでカスタマイズ性は高いです。

どのようにして選ぶのが良い？

正直なところ、クライアントにとってはどのような仕組みで表示されてどのようなツールを使って作成されているかは関係ありません。要件に沿ったWebサイトがあれば何でも良いです。

なので、静的・動的のどちらにするのか、開発・WordPress・Studioのどのツールを選択するかはこちら側で選択して最適な提案をするものだと心得ておきましょう！✨

判断基準のポイントとして、各実装方法の柔軟性の違いを早見表にしました👇

※0からの開発は高コストで滅多に使用されないので割愛します

WordPressとStudioで迷う時はどうする？

簡単な固定ページと投稿機能が欲しくてクライアント自身で更新できればいいんだけどどっちがいいかな…そんな時は以下の点で確認しましょう！

①更新の要望がある箇所を確認する

シンプルなお知らせ・ブログだけのような、投稿の方向性が1種類の場合はWordPressでもStudioでもどちらでも良いです🙆この場合は構築や運用の予算で考えるのが良いでしょう。

固定ページ（常に変化のないものとして使用するページ）に「毎年」「季節ごと」といった比較的短いスパンで定期的に変更する箇所があるといった場合はどちらかと言うとStudioが扱いやすいです。（WordPressでもAdvance Custom Fieldなどを使用すれば直感的に操作できます）

また、投稿機能は必要ないが固定ページに変更箇所が発生するという場合にはStudioが扱いやすいです！（WordPressではオーバースペック気味の可能性大）

②複数の投稿タイプが欲しい

投稿タイプを複数（お知らせと実績掲載などで、詳細ページのテンプレートを変えたい場合など）用意したい場合は圧倒的にWordPressが便利で使いやすいです。

最低限かかる費用がサーバー・ドメイン代のみになる他、表示の柔軟性が高かったり、投稿タイプやカテゴリ・タクソノミーの追加に制限がなかったりと、クライアントが「増やしたい」と思ったタイミングですぐカテゴリを追加することができます。

Studioでも可能ではありますが、料金プランによってできることが大きく異なるので、Studioの料金プランについて説明していきます。

様々な違いがありますが、今回は「投稿」に絞って確認していきます👀

非常に難しいのがStudio CMSの「アクティブモデル数」の概念です。

例えば以下のような投稿タイプ・カテゴリーを用意したいとします。

2つの投稿タイプとそれぞれに使いたいカテゴリを2つずつ用意した場合、このアクティブモデル数は6というカウントになります。なので「運用予算が月2,000円を超えたくない」といった制限があればこの構成で構築することができません。

カテゴリーを一つ消して運用したとしても、もし数年後に「こんな投稿の種類を増やしたい！」という要望が出た時に同じプランでは維持できなくなります。その場合、プランをアップグレードしなければいけなくなったり、このような問題が起きなくとも契約しているプランに変更が出る可能性もあります。

また、このような投稿の種類とカテゴリー以外にもモデルの種類もあるので構築時に注意が必要です。

※公開アイテムはものすごくざっくり言うと「記事の数」になります。

よって、将来的にWebサイトの規模を少しずつ大きくして「投稿タイプ」や「カテゴリ」を増やしたいという未来が見えている場合は、最初からWordPressを選んでおくのが無難です。

要件整理の段階から投稿に複雑な機能を抱えている場合はWordPressで作成する方がコストも安く済むことが多いです🙆

③予算が少なめ

この場合はWordPressでもStudioでも良いですが、Studioでテンプレートを使用するという方法が予算が少なくなる傾向にあります。（コードを書かないor極力書かないという選択ができるため）

ただし、投稿類に関する希望要件が複雑な場合はWordPressに落ち着くほうが後々のことを考えると良いことが多いです。更に低予算でとなればWordPressのテーマを使用する構築で、ローコード（ノーコード）での構築が可能です。

※見積もり方法によってはテーマを使用する方が高くなる例もあります（合う有料テーマが高価、など）

予算を第一に考えるクライアントの場合は、構築・運用の予算を総合してStudioのプランを検討→厳しそうならWordPressに変更or投稿に関する要件を絞るという流れで検討していくのが良いです！

他に考えるべきポイントは？

クライアントがツールを指定してくる場合

稀にですが、クライアント自身から「WordPressで作ってほしい！」とツールを指定してくることがあります。

基本的にはその通り対応するのが顧客満足度は高くなりますが、「なぜそのツールが良いのか」「本当にそれを使用する必要性があるのか」は慎重にヒアリングした方が良いことがあります。

例えば、1枚物で投稿や更新をする予定のないWebサイトを作成する際にWordPressがいいとなった場合、それはオーバースペックとなり表示速度やセキュリティの面で静的サイトに劣ってしまうといった状況になります。

この状況だと、表示速度が遅くなってしまうことやセキュリティの面を説明して静的サイトでの制作を打診する方が、結果的に予算が抑えられるということに繋がるなどクライアントへのメリットも増える可能性があります。

どれが正解とは言い切れませんが、「クライアントに思わぬデメリットが増えそう」という場合は、しっかりと説明して検討するようにしましょう！

ハマりがちなイメージ

「WordPress = 万能」というイメージがあると思います。確かに、想像以上に出来ることがおおく便利ではあります。しかし、今までにも解説した通りオーバースペックのままWordPressでWebサイトを維持するのも様々な危険性があるので、安直に「WordPressでいいや！」と決めるのは要注意です。

一方で「STUDIO = 扱いやすくて直感的」というイメージも世間的にはあると思います。操作性も直感的で、見て「どこがどう変わるか」と言うのが分かりやすいのでテキストの変更をクライアントがする際にも便利です。しかし、再現できるデザインや機能に制限があったり、運用予算によっては希望の構築ができない可能性もあるので、「予算安いからStudioで！」と他の選択肢をすぐ排除するのは注意が必要です。

結論、ツールの選択は名前と印象で決めるのではなく、どちらにするか迷う場合は要件や必要な機能、予算を総合して最適なものを選ぶというのを忘れないようにしましょう！✨

クライアントにどう説明する？

クライアントにとっては何度もお伝えしている通り「動的か静的か」「どんなツールを使用しているか」はぶっちゃけあまり分かりません。

なので、「動的」「静的」「サーバー」「データベース」というようなWeb界隈専門用語も伝わらないか、誤って理解してしまう可能性もあります。

という訳で、実際にお話しする際に使える例文集を用意しました🙌

※他にも「こういう時なんて言おう？！」という質問がありましたら追加するので教えてください！

リニューアル案件を受ける時、どうしたらいい？

今回は「静的→動的」のリニューアルに絞って紹介します！！（※WordPress→WordPressのリニューアルもコラム作成中です🙌）

まず初めの分岐として、「デザインも刷新してリニューアルする場合」はページの要素から変える場合も多いです。なので、新しくWebサイトを作るという場合と同じようにディレクトリマップを作成するところから始めるで問題ないです。

静的サイトのデザインをそのままにWordPressにしたいという場合は、現状のファイルを維持したまま制作を進めることになります。この場合は気を付ける点が多いので順に解説していきます！

使用するプラットフォームを決定する

まず初めに、使用するプラットフォーム（WordPress、Studio、Shopify…）を決定します。

打診を受けたタイミングでヒアリングを設定し、どういった理由で変更すべきなのかを確認します。多くの場合は現状のWebサイトにお知らせ機能を追加したい・毎年変更する点を自分たちで管理できるようにしたい、という理由に落ち着きます。

静的ではできなかったことがあるために動的にしたいが、予算もあまりないしできれば最低限にしたいという要望もあるので、このようなご依頼はけっこうあります🙆

ShopifyやStudioを使用する場合は、いまのデザインを出来るだけ再現しながら構築するという流れになります。

WordPressの場合はいまあるファイルを保持しながら作成するのが最もやりやすいです。ここからはWordPressになった場合で解説を進めていきます！

現状のWebサイトの作り、レンタルサーバー・ドメインを調べる

どのように作成するかが概ね決まったら、現状どのような作りでどのような構成になっているのか、Webサイトを設置するに足りる条件を備えているかを確認します。

※よく名前を聞くところの標準のプランでは問題ないことがほとんどです。異様に安い場合や初めて聞く会社の場合はより慎重に確認しましょう。

※DNSがどこにあるかに関しては、ドメインを取った場所（お名前ドットコム等）にあるのか、サーバーと同じ場所にあるのかによって後の工数が変わるので注意が必要です！

※StudioやShopifyを使用する場合は100％DNSを触ることになるので慎重に確認しましょう！

基本的にはサーバーもドメインもそのまま使用する場合が多いですが、プラン的に弱い場合はサーバーだけ新たに契約したり、ドメインも変えたいという場合は新たにレンタルサーバーを契約して得点で無料ドメインをもらう等の選択肢もあります🙆

稀に制作会社の持っているサーバーにファイルを置いているという場合もあるので、その時は契約時・公開時にもらっているはずのドメインの情報等の資料をもらうようにしましょう。

要件を詰めて、軽く設計をする

頭の中に描いた構成で再現をすると抜け漏れが出てくるので、必ず可視化しましょう！特にパートナーに依頼する場合は正確に要件を伝えるためにも必須です🙆

Webサイトを1から構築する際のガチガチ設計（トレーニング編のような）でなくても良いですが、最低限ディレクトリマップは用意しましょう。また、固定ページにクライアント自身が編集する場所がある（カスタムフィールドを使用する場所がある）場合は、最低限そのページのコンテンツマップも作っておきましょう。

現状のWebサイトの全ページをスクリーンショットし、Figma等に並べておくと直感的に分かりやすくなります！ページ数はファイル数と同じなので分かりやすいです👍

また、お知らせ機能だけ新設するという場合はデザインが必要になります。デザイナーさんに依頼することもできますし、ご自身で作成されても良いです🙆トンマナが既に決まっているので進めやすかったり、依頼する場合でも安く済んだりします。

コードを編集する

ここまできたらようやくコードの編集です！

デイトラを卒業したコーダーさんなら上級編を思い出して、既存パーツを動的に置き換える作業を進めていきましょう。

デイトラWeb制作コースメンターのはにわまんさんが書かれた記事もあるので、簡単におさらいもできますよ🙆

はにわまんさんの記事はこちら

書籍であれば『HTMLサイトをWordPressにする本』が分かりやすかったです👍

テスト環境での確認と本番環境へのアップロード

新設のWebサイト同様、テスト環境を作成してきちんと動作するか確認しましょう。

クライアントが契約しているサーバーのプランによっては、この段階にくるまでの間にプランの変更やバージョンの更新などを済ませておく必要があるので、作り始めの段階で案内しておきましょう。

大抵のレンタルサーバーはWordPressを新しくインストールするとルートディレクトリの「.htaccess」や「index.html」というファイルはリセットされることが多いので不具合は起きにくいです。もし表示されないエラーが起こるとルートディレクトリの「.htaccess」や「index.html」が原因のことが多いので確認しましょう。

WordPressを新設する場合は「All in one WP Migration」や「WPvivid」といった、データ丸ごと引っ越し系のプラグインが便利です！

ファビコンやOGP、タイトルとディスクリプションなどは設定をし直さなければいけない可能性もありますし、セキュリティ面でサーバーの設定をした方が良いこともあり得るので、この辺りは新設サイト同様にチェックしてあげると良いです。（ロードマップ編の納品のあたりを参照してください！※9月23日時点で未公開です）

予算や費用はどう考える？

正直なところ、費用に関してはWebサイトの規模によって大きく変わってきます。ただ、100ページを超えるようなWebサイトを静的サイトで維持するということは少ないとは思います。

まず見積もりを作成する際にページ数だけさっと確認するようにしましょう🙆

基本的には「時給 × かかる時間」で見積もりをするでOKです。とは言っても「どれくらい時間がかかるの？」という方もいらっしゃるかもしれないので、5～7ページくらいの規模のWebサイトでの目安をお伝えします👇

ひとまず、これらをざっくり何時間程度かかるか計算して時給で考えます。

それからクライアントと交渉し調整が入ったりそのまま実行したりとなります。

🌟更に確認ポイント🌟

このようなご依頼の場合は調査の段階でサーバーのログイン情報をいただかないといけなくなるので、ざっくり概算を用意しておいて「大体このくらいだが、内容によっては前後する可能性がある」ということを説明し、着手前に契約を済ませてしまうのが安心です。

まとめ

本編では静的サイトについてはほとんど言及していませんが、もちろん場合によっては静的サイトで作成することもあります🙆圧倒的に動的サイトのリードをする方が大変ですし機会が多いので本編では動的サイトベースに書いていますが、ヒアリングをしてみて「静的か動的か」を判断できることは大事です。

また使用ツールに関しても分岐がたくさんあるので、制作するWebサイトの要件を整理して一番合うものを選んであげましょう👍

仕組みを理解したうえで、「何を選べばクライアントのビジネスに合うか」を一緒に考えられる人を目指しましょう～🙌