普段何気なく見ているホームページやWebサイトは、一体どのように作られているのか…
自分でWebサイトを作ってみたい！とか、Webを使って何かしてみたい！と思わない限り、わざわざ仕組みを知ろうとは思わないかもしれませんね。
Contents
ホームページとWebサイトの違い
そもそも、ホームページとWebサイトはイコールだと思っている方が多いのですが、これらには明確な違いがあります。
それぞれのページには、特定のURLが割り振られています。
たとえば、このページのURLは、
https://laptravel.com/web/website-making-procedures/です。
aboutページには、このサイトについての説明、profileページには、pikoのプロフィール情報を掲載しています。
これらは、それぞれWebページと言います。
全てのページに特定のURLがあり、それぞれがWebページとして機能しています。
Webサイトは、これらWebページの集合体のこと指します。
このlapTravel.comは、主にWeb系の記事で成り立つWebサイトです。
では、laptravel.comのホームページはと言うと…試しに下記のリンクをクリックしてみてください。
このサイトのホームページへのリンクです、URLはhttps://laptravel.comです
表示されたページがこのWebサイトのホームページです。このサイトの顔になるページで、最初に閲覧されることを想定しているページです。
他にも各種Webサービスの最初のページや、ブラウザのホームボタンを押した時に最初に表示されるページのことをホームページと言います。
Webサイトのことをホームページと呼ぶことの方が一般的に浸透しています。
ホームページとWebサイトには明確な違いがあることがわかったところで本題に入りたいと思います！
Webサイトが出来るまで
Webサイトが出来るまでの過程を説明します。
あくまで一例ですが…
STEP1 ヒアリング、要件定義
まずはクライアントがどんなWebサイトにしたいのかヒアリングを行います。
ただ単純にヒアリングをすれば良いわけではなく、要件定義まで行います。
例えば、設立190周年を迎える老舗梅干し専門店のWebサイトリニューアルを行うとします。
リニューアルの目的は、
- 20年前にWebサイトを公開したまま、更新もせず放置状態なので刷新したい
- 既存の顧客に向けて、新商品の宣伝などの情報発信が出来るようなサイトにしたい
- その他、社会貢献活動や海外グループ企業の取り組みなども発信していきたい
主にこの3点。活動内容が20年前と相違している可能性があるため、情報を新しくすることが真っ先に思いつくので、リニューアル後のサイトに必要な現在の情報と、不必要な情報を洗い出します。
さらに、新たに付け足すべき情報があるかどうかを追加でヒアリングを行い、情報をまとめていきます。
後の2点は、情報発信の仕組みが必要そうなので、ブログ（WordPressなど）機能構築と、新商品の宣伝ということであれば、コメント機能や、会員機能が必要かどうかを確認していきます。
やりたいことばかりが先行し、不必要な機能で溢れたWebサイトやWebサービスは、ユーザーにとって使いにくい印象を与えるだけでなくストレスまでも与えかねません。
必要な情報や機能の確認と、どうしてその機能が必要なのかの理由付けをしていくことが要件定義です。また、デザインの方向性やサイト構築までにどのくらいの納期や予算があるのか、などを確認していきます。
STEP2 ワイヤーフレーム（設計図）作成
次に、ワイヤーフレームを作成していきます。
ワイヤーフレームとは、どこに何が配置されるのか、情報の抜け漏れがないかどうか、を視覚で確認する（してもらう）ためのツールです。
例えばこんな感じで、サイドバーには新着情報がパッと見てわかるような配置にし、ブログの一覧ページには画像とテキスト、下の方にSNSシェアボタン、記事ページは記事が見やすくなるように文字を大きく配置するなどなど…
それぞれがWebサイト上のどこに位置するか、画像はどこに置くかなどの簡易的な設計図を仕上げていきます。
STEP3 デザイン制作
ワイヤーフレームをクライアントと一緒に確認し、次はいよいよデザインに着手。
制作者にもよりますが、Adobeは業界スタンダード。
PhotoshopやIllustratorを使ってデザインを行うことがメインです。
最近では、ワイヤーフレームの制作からデザインまでをAdobeXDで行うことが主流になりつつあります。
デザインでは、実際にどんな画像を使用するのか、画像の加工からアイコンの作成、フォントの色やサイトカラーなども全て決めていきます。
最近は、レスポンシブ対応といって、スマートフォンに最適化しているサイトがほとんどで、PCスマホそれぞれデザインを行います。要件によっては、PCサイトとスマホサイトを全く別のデザインで制作する場合もあり、他にもタブレット版のデザインをすることもあります。
STEP4 コーディング
デザインデータが完成したら、今度はコーディング。
コンピュータが文字情報を正しく読み取れるように、まずはHTMLから書いていきます。
見出しはh1やh2などの見出しタグ、段落はpタグなどで囲んでいき、終了したらCSSで色をつけたり、大きさを変えたり、位置を整えたりと、デザインデータと同じに見えるように、Webへの実装を行います。
必要であれば、JavaScriptや、jQueryで動きをつけていきます。
STEP5 システム導入
コーディングが終わったら、WordPressへの実装を行ったり、他にもPHPを使いお問い合わせフォームを実装したりします。
STEP6 サーバーアップロード（公開）
ローカルでの実装を終えたら、最終的にサーバーへアップロードし公開です。
エラーなどが出ていないかチェックをしたり、各ブラウザや異なる端末での表示などもチェックし、問題なければこれで完成です！
まとめ
ホームページとWebサイトの違い、そして基本的なWebサイトの制作手順について解説しました。
何事も基本が大事！興味があればぜひ自分でwebサイトを作ってみてくださいね！
