ウェブサイト作り方まとめ
この記事の主なターゲットはコーポレートサイトのようなホームページを作りたい人向けです。
HP制作にあたっての基本知識とキーワードをまとめました。
このページではできるだけ簡潔にわかりやすく書くことを心がけました。
説明として不十分な部分もあるかと思いますので、
ぜひ気になったワードで検索してさらに深く調べてみてください。
目次
静的と動的(ウェブアプリ)
ウェブサイトにはざっくりわけて動的なものと静的なものがあります。
動的ウェブサイト(ウェブアプリ)
動的なものはウェブアプリと呼ばれることもあり、スマホアプリやPCアプリのように
様々な「機能」を提供するものが多いです。
例: Twitter、Facebook、Google検索など
静的なウェブサイト
一方で情報がウェブに置かれており誰でも同じものが閲覧できる静的なウェブサイトもあります。
例: 会社や団体のコーポレートサイト、多くの個人ホームページなど
他にも・・
また、閲覧者からすると誰もが同じ情報を受け取れる静的なウェブサイトに見えるが、実際には動的なウェブサイトというものも存在します。
多くのブログがこの方法をとっており、閲覧者から見えないサーバー側を動的にすることで、
記事の更新を簡単にしたり、プラグインなどで機能を追加して運用しやすくしています。
同様にコーポレートサイトであってもそのメンテンス性から採用している場合もあります。
例: WordPressやその他CMSを使用したサイト（詳細は後述）など
必須知識 HTML/CSS/JavaScript
動的、静的に問わず最終的にはウェブブラウザで表示します。
そのウェブブラウザにウェブサイトを表示する時に使用される言語は原則以下の３つです。
HTML
主にウェブページの文字情報とその文字情報がどんな意味を持つものかが記述されています。 これだけでもウェブページとして成立します。
CSS
HTMLに記述された文字情報をスタイリングするためのものです。
文字色、サイズを変更するなどに始まり、今日ではサイドバーやボタン装飾など様々な表現が可能です。
JavaScript(JS)
HTMLとCSSだけでも見栄えのするホームページを作ることは可能です。
ここでのJavaScriptの主な役割はさらにページ上のパーツをアニメーションさせたり、
ボタン連動でHTMLの要素を変更したりなど、よりインタラクティブなホームページを実現することです。
本格的なプログラミングを組めばページ上で動作するゲームを作ることも可能です。
基本的には上記3種類によりウェブページは成り立っています。
もちろんそれぞれをそのまますべて記述し作成することもありますが、
昨今ではより効率よく扱うために様々工夫がなされています。
jQueryとBootstrap
jQueryとBootstrapはウェブサイトを効率よく、かつ見栄え良く作成する際によく使用されます。
これらはHTMLに、それぞれ本体の場所（アドレス）を記述して読み込み、使用する事が多いです。
jQueryはJavascriptでHTMLの要素を扱う際により直感的にわかりやすく記述できるようにしています。
Bootstrapは見栄えのするようスタイリングされたボタンや入力フォームなど用意されており、
制作するサイトで簡単に使うことができます。
その他の言語や技術について
ウェブ開発ではHTML、CSS、JavaScriptの他にも様々な言語を使用することがあります。
それらはほぼすべてHTML、CSS、JavaScriptを動的に取捨選択、変更などをして閲覧者に提供するために、
サーバー側で使用されます。
例えばfacebookのようなサイトの場合、閲覧者はサイトにアクセスするとまずログインページが表示されます。
この時サーバー側ではアクセスしてきた閲覧者に対し、これは「ログインしていないユーザだ」という判断をしてログインページを表示させています。
続いて閲覧者がIDとパスワードを入力して送信します。
サーバーはその情報受け、アカウント情報をデータベースで確認し、正しいものと確認できれば、そのユーザのマイページのHTML、CSS、JavaScriptを構築して表示させます。
これらサーバー側での処理を様々なプログラミング言語によって行っています。
とはいえ最終的に出力されているのは上記にあるようにHTML、CSS、JavaScriptです。
作り方の種類
ウェブサイトを構成しているのはHTML、CSS、JavaScriptである。
と書いていきましたが、それぞれを効率よく扱うためには様々な方法があります。
代表的なものは以下の通りです。
素のまま
素のままのHTML、CSS、JavaScriptを直接書く方法です。
管理のしやすさや制作効率などから今日では
テストや学習のため、または極々小規模な制作の場合などにしか使われません。
CMSを使う
CMS(コンテンツマネジメントシステム)。
もっともメジャーなものはブログ管理システムのWordPressです。
記事情報などをデータベースに格納し、アクセスしてきた閲覧者ごとにデータベースから呼び出し、
予め用意されたHTMLテンプレートに合わせて出力するという使い方が多いです。
メリットはノンプログラマーでも扱いやすいよう設計されているものが多く扱いやすいです。
その一方、データベースや、CMSで扱う言語が動作するサーバーが必要なため、サーバー維持費が高くなったり、
動作が遅くなったりセキュリティ面で弱くなる場合があります。
例: ブログ特化のWordPressのほか、ECサイト（通販サイト）向けなど多数あります。
ウェブフレームワークを使う
ウェブフレームワークは特定の言語を使用してウェブアプリを作成する手助けになるものです。
CMSもウェブフレームワークを使用して作成されているものもあります。
著名なウェブアプリもウェブフレームワークを使用して作成されているものも多くあります。
自由度が高い反面、作成・保守には高いプログラミングスキルを要します。
コーポレートサイトなど静的なもので事足りる場合は使用されません。
例: Ruby on Railsなど言語ごとに無数にあります。
SSGを使う
SSG(静的サイトジェネレーター)。
近年になり少しずつ注目されている方法です。
本来ブログやコーポレートサイトなどは結局記事ページを閲覧できればいいので動的である必要性が薄いです。
そのため、効率よく記事作成できながらも静的なウェブサイトを作成できる方法として確率しました。
主なメリットとして、表示が高速、セキュリティに強い、サーバー費が安くできるなどがあります。
一方でまだまだSSG自体の扱いがCMSと比較して難しくノンプログラマーにはハードルが高いかもしれません。
例: Jekyll、Hugoなど。（当サイトはHugoを使用しております。）
デザイナーとエンジニアの役割について
ウェブ作成においての職種は大きくデザイナーとエンジニアに別れます。
デザイナーは主にHTML、CSSを中心とした"見栄え"を担当し、
エンジニアは主にサーバー側の"処理"を担当します。
JavaScriptはどちらも担当する事が多いです。
とはいえ、どちらもある程度できる人も多く、
もっとも多く使われているサーバー側の言語のPHPは扱えるデザイナーや、
Bootstrapなどを使った最低限のデザインはできるエンジニアも多いです。
HPを運用するサーバーについて
昔は国内のレンタルサーバーを借りたり、個人規模では無料のホームページサービスを使用することが多かったですが、
近年ではAmazonのAWSに代表される海外のクラウドサービスを使用することが増えてきています。
比較的安価で用途に合わせてプランが用意されている、管理しやすいなどの理由から主に法人用途でよく採用されているようです。
そのプランなどで動的である必要がない場合安くできることが多いです。
使用ソフトについて
実際にデザイナーやエンジニアが制作する際に使用するソフトはフリーのものから非常に高価なものまで様々です。
上記にあるように最終的にHTML、CSS、JavaScriptが作成できればいいので基本的には各々の好みや会社の方針で構わないと思います。
なかでもデザイナーがよく使うソフトはAdobe Dreamweaver。
エンジニアは言語ごとにソフト(IDE・統合開発環境)を変える場合も多いです。
代表的なものはEclipseやJetbrains社製のものなど。
(ちなみに僕はMicrosoft製のVisual Studio Codeをよく使っています。)
使用料金とライセンス
HTMLやCSS、JavaScriptを含めてほとんどのものにライセンス規約が存在します。
さらにIT界隈ではそのほとんどは無料で使うことができるものが多いです。
ただし表記が必要だったり改変に制限があったりする場合も多いので実際に扱う際には要確認です。
また、CMSは有料のものも少なくありません。
有料だからといって悪いわけではなく、その分サポートを受けやすかったりメリットもあります。
デザインのトレンド
レスポンシブデザイン(スマートフォンへの対応)
今日ではウェブサイトを作成する際にはスマートフォン対応が必須になってきています。
「スマートフォンはコチラ」というようにそれぞれ別々のページを用意する場合や
動的サイトで端末の種類ごとに振り分ける方法もありますが、
単一ページでPCにもスマートフォンにも対応できるほうが理想です。
その実現には少し高い技術が必要となりますが、CMSなどを利用することで製作者が意識しなくても対応することができます。
フラットデザイン
光沢やグラデーション豊かなリッチなデザインとは対局にあるシンプルで平坦なデザインのことです。
シンプルゆえにわかりやすいのでスマホにも取り入れられています。
パララックス
日本語では視差効果なんて言います。
スクロールすると文字と背景のスクロール速度がズレて奥行きが感じられるようにデザインされたものを指します。
おっ！と思わせることができるので昨今のウェブデザイナーはよく使ってる印象です。
おすすめ
最後にざっくりと用途ごとにおすすめ(というより今僕が作るなら)の作り方を記述します。
ブログを作りたい
断然SSGです。なかでも動作が速いHugoがおすすめ。
コーポレートサイトや個人のホームページ
これもメンテナンス性などによりSSGです。
簡素なウェブアプリを作りたい
できるだけシンプルに扱えるPHPがおすすめです。
他言語を使用したいならウェブフレームワークから作成者が一番慣れている言語で人気があってシンプル志向のものがいいと思います。
(僕の場合だと今ならPythonのFlaskかな)
本格的なウェブアプリが作りたい
上記と同様に作成者が一番慣れている言語で人気があって、今度はフルスタックと呼ばれているものがいいと思います。
(僕の場合だと今ならPythonのDjango)
