Web制作を学ぶ

クリエイター・プログラマーを目指している人のためのメディアくりぷろメディア-クリエイター・プログラマーを目指している人のためのメディア

2021.10.25更新

Web制作の大まかな流れをつかむ

Web制作の大まかな流れをつかむ

Webサイトとして公開されるまでの制作の流れ

はじめに、わたしたちが普段見ているWebサイトがどのような流れで制作されているのかを確認してみましょう。

最初はもちろん、どのようなWebサイトを制作するのか戦略を練ったうえで企画し、市場調査などを行ってWebサイトの計画を立てます。

その際には、

Webサイトのゴールは何か?
ペルソナは?

など、何のために、誰にために、どのようなサイトを作るのか?を企画していきます。

この工程は実は、制作以上に時間をかけることもあって、とても大切な工程です。 ですが、今回はこの企画の段階が終わってからの流れを確認していこうと思います。

【Web制作の流れ1】Webサイト制作でデザインに入る前に作るべきワイヤーフレームとサイトマップ

企画の段階で作成されているサイトマップやワイヤーフレーム、その他の仕様書を基に、Webサイトをデザインしていきます。 ところで、サイトマップ、ワイヤーフレームなのですが、ここで簡単に確認しておきましよう。

サイトマップとは

サイトマップとは、Webサイト全体の構成を示した見取り図です。サイトマップを作ることで、どんなページが必要なのか、サイトの規模など、全体像を把握することが可能です。

サイトマップはIllustratorなどのアプリで作成することもあれば、Excelなどで作ることもあります。 全体像を把握するためのもので、そのあとの作業で直接使いまわすわけではありません。使いやすいアプリで作成するとよいでしょう。

ワイヤーフレームとは

ワイヤーフレームとは、Webサイトの骨格だけを現した図です。色や文章は書かず、Webページに含める情報要素をまとめたものです。

ヘッダーはどこに配置する?
グローバルナビゲーションは横に並べる?縦に並べる?
写真は何枚必要?

など、大枠を表現したものです。

色や文章がないぶん、情報の整理、情報の配置に集中することができます。

また大枠がわかることで、そのあとのWebデザインの作業をスムーズに進めることができるようになります。

【Web制作の流れ2】Webサイトの原型であるモックアップを作成する

サイトマップ、ワイヤーフレームを基に、Webページの原型を作り上げていきます。この原型のことをモックアップと呼んでいます。

モックアップの詳細度をどの程度にするのかはプロジェクトによって異なりますが、個人的には写真や画像、文章もすべて配置し、見た目は本物と同じ完成度で作り上げていったほうが、後々の工程で手戻りが少ないように思います。

また、完成したサイトと同じ見ためで確認ができるので、お客様との打ち合わせでも利用することが可能です。 誰が見ても「このようなサイトができあがるんだ」と確認ができる、わかりやすい資料でもあります。

モックアップはIllustratorPhotoshopXDなどのアプリを使いながら作成します。

【Web制作の流れ3】Webサイトのデザインを基にコーディングを行う

モックアップの見ためは、完成したWebサイトとほとんど大差がありません。そのままWebサイトとして公開すればいいように感じるかと思います。

ですが、Illustrator、Photoshop、XDなどのアプリで作成されたモックアップは、そのファイルをそのままWebサイトとして公開することは不可能です。

これらのデザインを基にして、コーディングを行う必要があります。

Webサイトは最低限でもHTMLとCSSで書かれたプログラムが必要です。

なぜなら、Webサイトを表示するGoogleChromeやEdgeなどのホームページを閲覧するアプリである「ブラウザ」が、HTMLとCSSを解読して、わたしたちにWebサイトとして表示してくれているからです。

この「ブラウザ」が認識できる形でWebサイトを制作しなければ、公開することができません。 これらHTMLやCSSなどのプログラムのことを「ソースコード」「ソース」と呼んだりします。そしてソースコードを記述することを「コーディング」と呼んでいます。

HTMLで文章の構造を現す

例えば、人間が文章を見たとき「この部分は見出しだな」「この部分は本文だな」「この部分は箇条書きだな」と無意識に理解しながら読んでいると思います。

ですが、コンピュータには「ここが見出しだよ」「ここが本文だよ」と教えてあげないと、文章の構造を理解することができません。

何も教えなければ「文字の羅列」としか認識できません。

コンピュータに文章の構造を伝えるために、HTMLを使って表します。

HTMLはタグという記号で文章を囲んで、骨格を現していきます。

例えば、<h1>というタグは「ページ内で一番トップの見出し」を表すタグです。

<h1>クリエイター・プログラマー学習者のためのメディア くりぷろ</h1>

と表せば、「クリエイター・プログラマー学習者のためのメディア くりぷろ」が見出しです、とコンピュータに伝えることができます。

文章の骨格を現すタグはたくさん存在しています。

Webコーディングを行うには、このタグの種類を覚える必要があります。

CSSで見栄えをデザインする

HTMLで文章の骨格を現すのですが、HTMLだけでは見た目を魅力的に仕上げることはできません。

一応、ブラウザの方で標準のデザインが設定されているので、HTMLで記述したタグに合わせて、ブラウザが見ためを自動的にデザインしてくれます。

例えば、h1は見出しっぽく、大きな太字で表示されることが多いです。 その他のタグも、多少のデザインはされます。HTMLで構造を現すことで、コンピュータにとっては理解しやすい文章にはなるのですが、ブラウザ標準のデザインのままだと味気なく、人間にとっては単調で魅力のないサイトになってしまいます。

魅力がないサイトを見続けることは、誰にとっても苦痛なことです。

きれいだったり、素敵だったりするサイトを見たいと感じる人が多く、そのサイトに引き付けることができます。

HTMLを工夫して見ためを整えることも不可能ではありません。

しかし、HTMLはコンピュータにとって文章の構造を知るためにとても大切なファイルです。

なので、見た目に関してはHTMLと切り離して記述することが適しています。

そのためにCSSが用いられるのです。

CSSは文章の構造を示すことはできませんが、Webサイトの見ためを整えて、デザインを行うことができます。

写真の大きさを変えたり、背景の色を変えたり、フォントの種類を変えたり・・・できることは様々です。 CSSを書くことはそれほど難しくはありませんが、できることが多いこと、CSS独特なルールを覚える必要があります。

【Web制作の流れ4】サーバーにアップしてWebサイトを公開する

HTMLやCSSを作成しても、自分のパソコンの中で表示させることができるだけで、自分以外のパソコンで表示させることはできません。

Webサーバーというコンピュータにファイルをコピーすることで、初めて外部に公開することが可能となります。

Webサーバーは自分で用意することも可能なのですが、外部に公開するものなのでセキュリティ的に不安があります。

たいていの場合は、料金を支払ってサーバーをレンタルすることが多いと思います。

レンタルサーバーを借りると、URLが与えられます。

Webサイトを見るとき指定する「http://」で始まる、アドレスのようなものです。

もちろん与えられたURLを利用して公開することも可能ですが、そのままのURLではGoogleなどの検索エンジンの上位に表示させることが難しいといわれています。

検索エンジンの上位に表示させる対策をとることをSEOと呼んでいますが、SEO的に弱い、ということです。

これは致命的です。

たいていのユーザーさんは、検索エンジンからWebサイトに到達する人がほとんどだからです。 検索エンジンに表示されないということは、せっかく制作したWebサイトが誰にも見てもらえない、ということになります。

少しでも上位に表示させるために、通常は独自ドメイン、というものを取得します。URLの「google.co.jo」「sample.com」などの部分をドメインと呼んでいますが、パソコンの名前のようなものです。

こちらもお金を支払って購入することになります。

そして購入したドメインを、レンタルサーバーに設定する必要があります。

・・・と、まだ手順はたくさんあるのですが、実はWebサイトを運用するということは、デザインやコーディングができるだけでは知識不足です。 ネットワーク周りの知識も勉強しておく必要があります。

レンタルサーバー、ドメイン、SSLの設定などに関しては、別の記事にまとめていますので、よろしければそちらをどうぞ。

Web制作は想像以上の多くの知識と技術が必要

Web制作の大まかな流れをお話ししましたが、いかがでしたでしょうか?

想像以上に多くの知識が必要そうだな、と思われたのではないでしょうか?

ここに書いたのはほんのわずかです。

ほかにも今回省略した市場調査や企画について、著作権などの権利についてなど、必要となる知識は幅広いです。 このサイトを参考にしていただきながら、効率よく必要な知識を習得していただければいいなと思います。