福岡・筑紫野市のホームページ制作会社「WEBプラネット」。
WordPress(CMS)×スマホ対応(レスポンシブWebデザイン)の
ホームページを福岡を中心に全国対応で制作!

ホームページ制作の知識初級編

ホーム » ブログ » ホームページ・サイト制作 » ホームページ制作の知識初級編
2022-04-04
ホームページ制作の知識初級編

サーバー – Webサイトを公開する場所 –

サーバーは「Webサイトを公開する場所」のこと。Webサイトを作っても、サーバーにアップしなければ表示されません。そのため、まずはサーバーを取得する必要があります。Webサイト制作においては必ず必要になる物理的なデバイスですが、目にする機会はほとんどないでしょう。

基本的にサーバーは、レンタルサーバーにて取得します。月額または年額で費用を払い、場所を借りるイメージです。こうしたサーバーは、種類や機能によって費用が異なります。
レンタルサーバーには、さくらサーバー、エックスサーバー、お名前.comサーバー、カゴヤサーバーなど様々なものがあります。また、最近はAmazon Web Service、Google Cloud Platformなどクラウド系サーバーも増えてきています。
クラウドサーバーは拡張性や機能が非常に多く、慣れれば多くのことができるようになります。しかし、複雑で覚えることも多いので、一旦はレンタルサーバーを検討してみてください。

ドメイン  -Webサイトの場所を示す住所-

ドメインは「Webサイトの場所を示す住所」のこと。普段、見ているサイトにはすべてドメインがあります。そのほとんどがサイトに関係した名前です。

例えば、当サイトのドメインは「webplanet-jp.com」です。
こうしたドメインを「独自ドメイン」と呼び、そのサイトだけの住所となります。ただし、ドメインは早い者勝ちのため、必ず欲しいドメインがある訳ではありません。

細かい話をすると、「webplanet-jp.com」を「○○○.webplanet-jp.com」にすることでサブドメインという形になります。Webサイトを複数展開していく際に使う機会があるかもしれないので、言葉だけ覚えておいてください。

まずは、自社名やサービス名などで独自ドメインが取得できるか確認しましょう。ちなみにドメインもレンタルサーバーのように借りて使用するため、一定の費用がかかります。

HTML・CSS -Webサイトを構成する基本言語-

Webサイトを構成する基本的な要素が「HTML」と「CSS」です。この2つはマークアップ言語に属します。

「HTML(HyperText Markup Language)」は、Webサイトを作る上で欠かせない要素です。Webサイトの基本的な文書構造を規定しており、これをもとにサイトを制作していきます。
「CSS(Cascading Style Sheets)」は、Webサイトのデザイン部分を担う言語です。HTMLのままでは、文章や画像がただ並んでいるだけです。そこでCSSを使うことで、レイアウトを変更し、文字や画像に装飾を行います。

使い方としては、HTMLで規定した文書構造に、CSSを反映させる形となります。これにより、Webサイトにデザイン性が生まれ、だれもが見やすい状態になるのです。

最近は後述するCMSや、こうしたマークアップを行うエディター(メモ帳のようなもの)の進化のおかげで、あまり細かく覚えなくてもWebサイトを構築できるようになりました。
いきなり全部のタグの意味や構文などを覚えようとすると大変に感じてしまうと思いますので、理解しよう、覚えようとする前に、まずは書いてみる、作ってみることから始めましょう。

Javascript・JQuery -Webサイトを動かすスクリプト言語-

Webサイトの動きを構成する要素が「JavaScript」です。こちらはスクリプト言語に属します。

Webサイトは「HTML」と「CSS」だけでも作れますが、これでは動きほとんどないシンプルなWebサイトになってしまいます。そこでJavascriptを導入することで、スライドショーやアコーディオンメニューなど、Webサイトに躍動感を持たせられます。ただし、マークアップ言語に比べて、スクリプト言語は難しいです。

そんな中、支持を得ているのが「JQuery」の存在。こちらは簡単にJavascriptを記述できるライブラリのようなものです。

すでに使いやすく拡張されているため、本来数十行のコードが、わずか数行で済みます。手軽に動きを付けたいときは、JQueryで記述すると簡単です。現在も多くのWebサイトがJQueryを導入しています。

PHP・SQL -Webサイトを構成するプログラミング言語-

Webサイトの動きを構成するもうひとつの要素が「PHP」です。こちらはプログラミング言語に属します。先ほど紹介したJavaScriptとの違いは、「どこでコードが実行されるか」という点です。

例えば、JavaScriptはクライアントサイドつまり「Webブラウザ上で実行」される言語、一方PHPは「サーバーサイド側で実行」される言語です。

PHPは、サーバーサイド側の言語なので、他人からコードを見られる危険性がありません。そのため、セキュリティが重要な「会員登録」や「問い合わせフォーム」などの動きに使われます。

また、この際重要な情報を保存するデータベースを「SQL」といいます。PHPだけでは、受け取った情報を保存できないので、SQLにデータを保存し管理します。

ちょっと難しくなってきましたね。繰り返しになりますが、理解しよう、覚えようとするよりも、まずは何でもいいので書き始める、作り始めることです。難しく感じるでしょうが、今使われているマークアップ言語やプログラミング言語は、先人たちの努力によって非常にわかりやすく、直感的に使えるようになっています。実際にやってみれば、案外簡単なことに気づくと思います。

画像編集 -PhotoshopやIllustratorやFirework-

Webサイト制作には、多くの画像やイラストを使います。その際、一般的に使われているのがAdobe社の「Photoshop(フォトショップ)」や「Illustrator(イラストレーター)」や「Firework (ファイヤーワーク) 」です。どちらも画像編集が可能で、Webサイト制作に役立ちます。

これまでシリーズで紹介してきたロゴやバナーはもちろん、Web全体のデザインも可能です。ノンデザイナーとして利用する場合、ある程度のコストがかかりますが、今後デザインのスキルを上げたいなら必須ツールです。
決して安いツールではありませんが、月額数千円で利用できる、Adobe Creative Cloudというサービスもあるので、検討してみてください。

CMS -初心者はWordpress一択-

ここまで紹介してきたHTMLやCSS、Javascript、PHPなどは、初心者にとって非常にややこしい存在です。そのため、いきなりWebサイトを作ろうと思っても、挫折してしまうかもしれません。

そこで導入したいのがCMS(Contents Management System)です。CMSなら、Webサイトの構築や管理、更新に前述したような専門知識はほとんど必要ありません。

例えば、CMSの中で有名なのは「Wordpress(ワードプレス)」です。専用の管理画面からテキストを入力してブログを更新したり、画像をアップロードして貼り付けたりできます。
また、国内外問わず多くのテンプレートが提供されているため、自分の理想に近いWebデザインをすぐに実現できます。もし、一から勉強をするのが難しいと感じたら、Wordpressの導入を考えてみてください。