Webサイト作成手法比較
Posted: June 10, 2024
Last updated: June 28, 2024
こんにちは。 今回はWebサイト作成手法について調べたことをまとめていこうと思います。
手法選択についての結論
最初に結論を書いておきますが、
- 無料でやりたい
- 凝ったデザインにしなくてもよい
- 収益化とか資産性とかはそこまで考えてない
っていう条件であれば、無料ブログサービス でよいと思います。 今だとはてなブログとかですかね。アメーバブログもテーマによっては見かけるかな。
有料でもよいから、ある程度凝ったデザインや収益化を見据えるなら、WordPress+有料レンタルサーバーが主流です。
本サイトは上記の条件に当てはまるので正直それでやってもよかったのですが、 まあせっかくならちょっと小難しいやり方も調べてみるか、コーディングの環境と最低限のコーディングのスキルはあるし。 って感じで手法選択をしました(デバッグに結構苦労しているので後悔してます)。
調べる前の知識レベル
- 昔FC2ブログ使ってたなあ、アメーバブログとかもあるっけ？
- Qiitaにはよくお世話になってる
- ノーコード、ローコードでの作成が流行ってるらしい、WordPressって聞いたことはあるぞ
手法の比較
おおまかに調べた手法の比較を書いていきます。 詳細な比較はガチで書いているサイトにお任せするとして(このあたりが詳しそう) 、ざっくりそれぞれのメリデメを書いていこうと思います。
| 項目 | 無料ブログサービス | 無料レンタルサーバー + CMS | 有料レンタルサーバー + CMS | 無料レンタルサーバー + 自前コーディング | 有料レンタルサーバー + 自前コーディング |
| 価格 | 〇 | 〇 | × | 〇 | × |
| 広告表示 | × | × | △ | 〇 | 〇 |
| 収益化 | × | △ | △ | 〇 | 〇 |
| カスタマイズ性 | × | △ | 〇 | 〇 | ◎ |
| 独自ドメイン | × | × | 〇 | 〇 | 〇 |
| SEO対策 | × | × | △ | 〇 | 〇 |
| 導入難易度 | ◎ | △ | △ | ×× | ×× |
| 作成難易度 | ◎ | 〇 | 〇 | × | × |
表の修正しました。 結局markdown記法のまま表示する方法がわからなかったので、ここはhtmlで書いています。 実は取り消し線についても同様です。markdownのまま使えるものとそうでないものの差がわからん。 取り消し線ぐらいならいいけど、表はめんどくささが結構違うのでなんとかしたいところです…。
全体的な傾向としては、簡単かつ無料だと制限が多くて、難しいor有料だと制限が減っていく感じですね。まあ世の常です。
独自ドメイン
まずドメインについて説明します。
ドメインというのは、ネット上での住所のようなものです。
URLの一部になっているものです。〇〇.comみたいなのが一番有名だと思います。
本サイトでは「brotherfutsal.zapto.org」がそれにあたります。
このドメインには、「共有ドメイン」と「独自ドメイン」の2つがあります。 共有ドメインとは、その名の通り他の人と共有するドメインです。 ドメインが住所のようなものなので、マンションなどの集合住宅のイメージですね。 たとえばはてなブログだと「〇〇.hatenablog.com」がそれにあたります。 〇〇の部分は作成者が自由に決めれますが、末尾の.hatenablog.comは全員共通になります(有料プランだと独自ドメインを設定できるみたいですが)。 それに対して、独自ドメインとは他の人と共有することなく独自で使用できるドメインです。 家でいうと一軒家のイメージですね。 本サイトのドメインは独自ドメインの方です。
それぞれのメリデメについて説明します。 共通ドメインの方のメリットは、以下が挙げられます。
- 基本無料
- 設定が不要
基本的に共通ドメインは無料ブログサービスを使用するときに使われるもので、 使用の際にも特段難しい設定は不要です。〇〇.△△の〇〇の部分は自分で決めるので、それを入力するぐらい。
一方、デメリットとしては
- 所有者がサービス停止するとサイトがなくなってしまう
- 利用規定の影響を受ける
- Googleからの評価が低いので検索結果の上の方に出づらい(らしい)
あたりが挙げられます。 最後の項目については、調べたらそういう情報が出てきましたが正直真偽は不明です。 共有ドメインは無料ブログサービスで使用され、 無料ブログサービスだと同じブログサービスを使っているユーザーの訪問があったり、 無名な独自ドメインに比べある程度信頼性があったりで訪問数に有利に働 く要素もあるので一概にデメリットとはいえないかもしれません。
独自ドメインのメリデメは共有ドメインと逆ですね。 挙げたデメリットを回避できる分、有料だったり設定が多少難しかったりします。 価格については、無料で取得できる独自ドメインもあります(本サイトのドメインも無料で取得してます)。 設定については、DNS設定が多少めんどうです。 HTTPS用の証明書も手動で設定が必要な場合があるのかな？本サイトで採用している方式では不要でした。
必要なもの
Webサイトを作成、公開するうえで最低限必要なものは2個あります。 1つ目はWebサイト本体です。 本体という表現が適切かはあやしいですが、レイアウトとか、コンテンツとか、そういったものを全部ひっくるめたもののことです。 2つ目はサーバーです。 作成したWebサイトを世界中に公開するためには、サーバーが必要です。 このあたりは検索すればいろいろ出てくると思いますが、比較するときの観点になるのは
- 価格
- 広告の有無
- 自分が使うWebサイト作成方法(多くはWordPress等のCMS)が対応しているか
- 収益化の可否
あたりになると思います。 大体は無料だと広告が表示されて収益化できない、有料だとその逆って感じですね。
無料ブログサービス
無料ブログサービスについて説明します。
といっても、早い段階で選択肢から外れたのでそこまで詳しくは調べていません。
特徴としては先述の表のように、始めるのも簡単、コンテンツ作成も簡単で費用もかからないけどいろいろ制約があるよって感じです。 はてなブログが一番メジャーなにおいがして、芸能人とかだとアメーバブログもあるってイメージですね。 あと技術系は大体Qiitaですね。ちょっとジャンルが違うかもですが。
本サイト作成の際は、まず最初にWordPress.com(≠WordPress.org)で作成しました。 変更した理由としては
- 広告表示が邪魔
- カスタマイズ性が低すぎる(背景色を変えるのも有料だった)
の2点が大きかったですね。 まあレイアウトとかはイメージがついたので0からコーディングするより1回このステップを挟んだのはよかったのかも。
これらは後述するレンタルサーバーとCMSの機能を持っているものになるので、いろいろ登録したりの手間がかからずにさくっと始められます。 とにかく無料で労力をかけずに作りたいという人以外にも、 後でお金かけたり時間かけたりする可能性もあるけど、まずは1回形にしてイメージを膨らませたい、みたいな人も使ってみるとよいかも。
レンタルサーバー
無料ブログサービス以外でWebサイトを作成しようと思うと、必ず必要になってくるのがサーバーです。 Webサイトを作成しても、自分のPCに入れているだけでは他の人が見ることができません。 サーバーにアップロードしてようやく見れるようになります。
そしてほとんどの人が自前でサーバーの用意はできないと思うので、レンタルサーバーを借りる必要があります。 そのため、いろんなレンタルサーバーを検索して選定していくことになります。
レンタルサーバーを選ぶポイントとしては
- 価格
- 自分の使いたい機能があるか
- サポート体制
- アクセススピード等のスペック
- 容量等の制限
あたりがメインになるかと思います。 具体的なレンタルサーバーの比較は詳しいサイト(この辺り)を参照いただくとして、 よく売り文句としてあることとして、 申し込み時に独自ドメインが無料でもらえるというものがあります。
独自ドメインの節で述べたように、独自ドメインは共有ドメインと比較し何かとメリットがありました。 基本的に無料で取得できる独自ドメインは本サイトのようにマイナーなドメインに限定され、.comなどのメジャーどころは取れません。 ただ、このレンタルサーバー申し込み時にもらえる独自ドメインにはそういったメジャーどころも含まれるようです。 ドメインがマイナーだとそれだけでユーザーに警戒されてアクセスされないということもあると思うので、 独自ドメインが無料でもらえるところに申し込むのはあり だと思います。 会社によっては独自ドメインを永久無料で取得できるところもあるようです(普通に取得すると年いくらといった支払いです。数千円程度ですが)。
無料のレンタルサーバーもあるにはありますが、選択肢はかなり少ないです。 私が情報収集しているときは、このサイトを参考にしました。 が、広告表示がうざそうだったり、コンテンツ作成に癖がありすぎたり(WordPressが使えない)、 他のサーバーからの移転しか受け付けていなかったり、無料なのが期間限定だったりだったので没としました。
次の節のCMS(特にWordPress)を使う場合は、広告表示を受け入れて無料サーバーを使うか、有料サーバーにするかという選択になります。 無料サーバーだと収益化できるかという部分も調べる必要はあります。
本サイトのようにWebサイトをコーディングする場合は、無料サーバーでいくつか選択肢があります。 私が本サイトを作成する際に試したものとしては、GitHub PagesとNetlifyです。 ただ、これらは静的サイトしか対応していないため、 たとえばFlaskなどのPythonフレームワークを使ったWebアプリなんかを公開するときは有料サーバーしか選択肢がないのかなと思います (もしご存じの方がいればご教授いただきたく)。
静的サイト、動的サイトの違いなんかはそのうち書くかもしれません。がちょっと長くなってきたのでここでは割愛します。
CMS
Contents Management Serviceの略でCMSです。 その名の通り、コンテンツを管理するシステムです。 現在ではCMSといえばほぼWordPressのことを指すようです。 WordPressはレンタルサーバーにインストールして使う感じになるようですが、私はやっていないので詳しくはわかりません。
一つ注意点として、WordPressにはWordPress.orgとWordPress.comがあります。 前者がここで述べているCMSにあたるものです。これをレンタルサーバーにインストールして使うことになります。 後者は無料ブログサービスに近いものです。先に触れましたが、私が本サイト作成の初期段階で使ってみたのがこちらです。 ものとしては、WordPressがすでにインストールされている無料サーバーって感じです。 WordPressの使い方を学んでからWebサイト作成をするかどうか検討したい場合はこちらを使ってみてもよいかもですね。
もちろん、CMSはWordPress以外にもいろいろあります。 まだ詳しくは調べれていませんが、本サイトにも使えるようなものもありそうなので、コンテンツが増えてきたら導入を検討しようかと思います。 ちょろっと調べた感じだとContentfulがGatsbyとシナジーがよさそうなので、使うとしたらそれかな。 mdxファイルがうまくレンダリングできない問題が解決しそうにない場合もそちらに移行するかも…。
自前コーディング
最後は自前でのコーディングです。 書いていると長くなりすぎたので、ここはさくっと紹介だけにします。
文字通り自前でコーディングして作成する手法です。 主にHTML, JavaScript, PHP等を自分でコーディングする手法と、(静的サイトに限られますが)静的サイトジェネレータを使う方法があります。 主にというかそれ以外を私が知らないだけです。
前者は一つ一つ書くのが結構大変かと思いますが、現代は生成AIなんて便利なものがあるので、ChatGPTくんに投げればある程度作ってくれます。 そこから細かいところを修正していくのが楽そうだなと思います。
後者は導入の学習コストがそれなりにあるのかなという感じです。 本サイトは後者を採用していますが、馬鹿正直に公式ページのチュートリアルを一通りやっていたらそれなりに時間がかかってしまいました。 そのうえ直せない不具合が割とある…。
〆
ものすごく長くなってしまいましたが、「Webサイトってどうやって作る？」という話でした。
最初にも結論で少し書きましたが、
- 無料でそれなりにやりたいなら無料ブログサービス、
- お金だしてもいいから収益化を見据えてノーコードで作りたいならWordPress+有料レンタルサーバー、
- コーディングの環境とスキルはあるし勉強がてら作るってスタンスなら自前コーディング+無料レンタルサーバー(静的サイトの場合)
という感じですかね。
まあここまで全部読んでいただけているとは思っていないので 最初の結論と興味ある節だけ読んでいただけて何かためになる情報が拾えていただけていれば幸いです。
完全に余談ですが、ページネーションってどうなんですかね。 最近のWebサイトでは必ずと言っていいほど見る、記事の途中でページが分かれてて「前のページ」「次のページ」というリンクが下の方にあるあれです。 個人的にいちいちリンクを押すのがめんどくさいのと、記事の量がぱっと見でわかりづらいので好きじゃないんですよね。 あと大手のWebサイトのそれらは、ユーザーのためというよりどう考えてもPV稼ぐためだろみたいなページネーションが溢れてますし。
ただ今回結構な長さになったことで、ページネーションした方が見やすいのかなあなどと考えたりもしました。 私の考えが変わったり、何か意見をもらえればページネーションも検討するかも。 あとはPV稼ぐために闇堕ちした場合も…。
ということで、次の記事はもう少し短めの内容でまとめれるようにがんばります。 あと表とかの不具合も早く直したいなあ。ChatGPTくんがくれた修正案どれも直らないんだよなあ。