緑色のシダの葉の写真左
知らないと損するWebサイトの基礎知識のタイトル画像(01 BASICS)
 

3. Webサイトの基本的な仕組み

 
 
 
SNSロゴ SNSロゴ SNSロゴ SNSロゴ
 
 
 
  「Webサイトの制作」を「マイホームの建築」にたとえてみましょう。 Webサイト(=ホームページ)を作ることは、マイホームを建てるのに似ています。 まず必要なのは「土地」です。これはインターネット上でデータを置く場所=サーバーにあたります。 次に必要なのは「家の設計と建築」です。Webサイトを構成する主な要素は以下の4つです。

1. HTML(家の骨組み・構造)
2. CSS(外観や内装のデザイン・装飾)
3. JavaScript(スイッチ、自動ドアなど=人が操作すると反応する仕組み)
4. PHP(お問い合わせフォーム、ログイン機能など=サーバー側で動く仕組み)

この4つがそろって、ようやくマイホームが完成します。

マイホームが完成しても、その住所を公開したり案内しなければ誰も来てくれません。Webサイトも同じで、ただ作っただけでは誰にも見てもらえないのです。FFFTPソフトなどを使って、Webサイトをサーバーにアップロードすることで、ようやくインターネット上に「建てたマイホームの場所」が知られ、世界中の人に見てもらえるようになります。
 
     
     
     
  Webサイト制作をマイホーム建築にたとえたイラスト  
     
     
     
 

Web制作ソフトを使ったDIY作業が最もコストを抑える方法だが・・・

 
  マイホームの建築をはじめ、外観や内装の修繕・リフォーム、リノベーションをしたい場合、さきほどの1. HTML、2. CSS、3. JavaScript、4. PHPを変更するための「Web制作ソフト」が必要になります。コーディングやプログラミングの知識や経験がある人は、Web制作ソフトを使って自分でDIY(Do It Yourself)作業を行えば最もコストを抑えることができます。AdobeのWeb制作ソフトは、専門業者向けでサブスクリプション料金がかかるため、コストを抑えたい人には不向きです。サブスクを敬遠する人が増える中、無料版や買い切り型のWeb制作ソフトの需要が高まっています。一方、自力で作業できない場合は、大工さん(=Web制作業者)に依頼する必要があります。  
     
     
     
  DIYでWeb制作するか、業者に依頼するかを選ぶ流れの説明図  
     
     
     
 

Web制作ソフト比較一覧(無料版と有料版の買い切り / サブスク)

 
 
種別 ソフト名 HTML CSS JavaScript PHP 画像
写真

ピクセル
拡大・縮小で劣化
ロゴ
アイコン

ベクター
拡大・縮小で劣化せず
備考
無料 Visual Studio Code × × 拡張機能で多言語対応
オープンソース
Phoenix Code × × ライブプレビュー
オープンソース
GIMP × × × × Photoshop代替
ピクセル編集
Inkscape × × × × Illustrator代替
ベクター編集
有料
買い切り
Pinegrow × × ビジュアル&コード
両対応
Affinity Photo × × × × Photoshop代替
ピクセル編集
Affinity Designer × × × × Illustrator代替
ベクター編集
有料
サブスク
Adobe Dreamweaver × × ビジュアル&コード
両対応
Adobe Photoshop × × × × ピクセル編集
定番
Adobe Illustrator × × × × ベクター編集
定番
 
     
     
     
 

導入が簡単な無料CMSの大きな問題と落とし穴

 
  「すべて大工さん(Web制作業者)に頼むのは嫌だ、できるところは自分でやりたい」という人たちにとって登場した便利なツールがCMS(=Content Management System / コンテンツ管理システム)です。1. HTML、2. CSS、3. JavaScript、4. PHPの知識がなくても、誰でも簡単にWebサイトを作ったり、編集したり、更新できる仕組みです(と表向きには謳われています)。

ところが・・・導入が簡単な無料CMSには大きな問題と落とし穴があります。

CMSは基本的にサーバー上で動くPHPという言語(+HTML、CSS、JavaScript)で作られているため、PHPに関する基本的な知識がないと、自力ですべてを完結させるのは非常に難しいのです。結局は大工さん(Web制作業者)に依頼することになり、「マイホームのどの部分を自分で編集・更新したいか」という設計もお願いしなければなりません。さらに残念なことに、自由なレイアウトやデザインで設計を依頼するのは難しかったり、そもそもできない場合も多いのです。さらにプラグインやアプリで拡張機能(=利用制限のないお問い合わせファームなど)を追加するには別途料金が加算されることになります。
 
     
     
     
  導入が簡単な無料CMSの大きな問題と落とし穴を描いた図  
     
     
     
 

素人には知られたくない業界の裏事情と明かされたくない秘密の1つ

 
  CMSを利用すれば、基本的にどの端末(スマートフォン、タブレット、パソコン)でWebサイトを閲覧しても、できるかぎり同じようなデザインやレイアウトで表示される「レスポンシブ対応(メディアクエリなど)」が適用されます。けれども、それは完璧ではありません。CMSを使っても、閲覧する端末の種類や、縦向き・横向きといった表示方向によって、すべての画面でまったく同じように表示させることはできません。各端末の画面サイズ(縦×横のピクセル数)は異なるため、それに伴いデザインやレイアウト、さらには表示されるコンテンツの見え方も変わってしまうのです。そのため、レスポンシブ対応において細かな調整が必要となり、結果として、手間と時間のかかる作業を大工さん(Web制作業者)に依頼せざるをえない状況に陥るのです。

WordPressなどの無料CMSやWeb制作業者が独自に開発したCMSは、簡単に導入しやすいものの、有料ホスティングサービスとの一体化が進み、最終的にはWebサイトを制作する「あなた」だけが得するようなツールなどではなく、むしろ、大工さん(Web制作業者)や彼らが効率的に儲けるためのツールとも言えるのです。これこそが、素人には知られたくない業界の裏事情であり、明かされたくない秘密の1つなのです。
 
     
     
     
  素人には知られたくない業界の裏事情と明かされたくない秘密の1つを描いた図  
     
 
 
SNSロゴ SNSロゴ SNSロゴ SNSロゴ
 
2. 無料・有料プランの違いとは? < BACK / NEXT > 4. SEO・Web解析・マーケティング
 
緑色のシダの葉の写真右