Webデザインとは？Webサイトの作り方を知ろう！
「Webデザイン」と聞いてあなたはどんな事をイメージしますか？まずはWebデザインとはなにか、Webデザインをするには、そしてWebサイトを作るにはどのような事をすればよいのかを確認しましょう。
Webデザインとは
Webデザインとはパソコンやスマートフォンで表示されるWebサイトのレイアウトや色、画像などの見た目や、Webサイトの使いやすさを設計する事です。Webデザインを仕事とする人を「Webデザイナー」と言います。ではWebデザイナーとは具体的にどんな事をするのでしょうか。
技術の進歩によってWebサイト上では様々な事が行えるようになりました。そのため、ひとつのWebサイトを作るのにも、デザイン、コーディング、プログラミングなど、様々な技術が必要です。
Webサイトの仕組み
Webサイトは主にHTML・CSS・JavaScriptで構成されます。
現在はHTMLやCSSを使わなくてもある程度のWebサイトが作れる「CMS」や「ノーコードツール」といったものもあります。
HTMLとCSS、それぞれの役割は以下のようになります。
| HTML |
Webページの内容や構造を作る言語です。 |
|---|---|
| CSS |
Webページの見た目やデザインを整える言語です。 |
| JavaScript |
Webページに動きや反応をつけるためのプログラミング言語です。 |
HTMLで文字や画像などの部品を表示させただけでは部品が上から下に並ぶだけですが、CSSを使えば見やすくレイアウトをしたり、文字の色や大きさなど細かい部分の調節をすることができます。そのため、このふたつはセットで覚える必要があります。
昔はHTMLだけを使ってレイアウトやサイズ・色の変更などもしていました。
しかし、管理面や機能面の関係で現在はHTMLとCSSの両方使って作るのが一般的です。
実際にWebサイトを作成する際は、FigmaやPhotoshop、Illustratorといったグラフィックツールを使って完成イメージ図（デザインカンプ）を作ってからHTML,CSSを使って組み立ててく作業（コーディング）を行います。
Webサイトの種類
Webデザインをするにあたって、まずはWebサイト全体のことについて考えてみましょう。現在インターネット上には様々な種類のWebサイトが存在し、大まかに分類すると以下の4つに分けることができます。
・通常のWebサイト（企業サイト、公共機関サイト、など）
・BLOG（Amebaブログ、はてなブログ、Livedoorブログ など）
・SNS（X、Instagram、Facebook、mixi、など）
・ショップサイト（Amazon、楽天など）
このページでは初心者でも比較的簡単にできる「通常のWebサイト」の作り方について見てきましょう。
Webサイトを作って公開するには
ではどのようにWebサイトを作って公開すればよいのでしょうか。
Webサイトを公開するまでの手順をかなりザックリとまとめると以下の3つの手順になります。
- デザインの作成
- コーディング、プログラミング
- 公開
1.デザインの作成
デザインツール（Figma、Photoshop、Illustrator）を使ってデザインを作成します。
作成したデザインから画像として使用する箇所をパーツごとに切り出します。
2.コーディング、プログラミング
ChromeなどのブラウザでWebサイトを表示できるようにするために、HTMLやCSS、JavaScriptを使ってコーディングを行います。ユーザー登録、ショッピングなど特別な機能をもたせる場合はプログラミングを行います。
「1.デザイン」で作成した画像やテキストを部品として使いWebサイトを組み立てていきます。CSSを使うことでスマートフォン用とPC用でデザインを切り替えることもできます。
3.公開
完成したWebサイトはそのままだと自分のPCでしか見ることができません。
そこで、インターネット上にあるサーバーと呼ばれるデータを保存しておく場所に、自分で作ったWebサイトのデータを送信します。これで初めてWebサイトを世界中に公開することができます。
Webサイトを公開するまでの具体的な手順
ではもう少し具体的にWebサイトの作り方〜公開するまでの手順を見てみましょう。
- Webサイトの目的・ターゲットを明確にし、コンセプトを決める
- サムネイルを作成する
- ワイヤーフレームを作成する
- デザインを作成する
- スライスをする
- コーディングをする
- アップロードをする
- 完成!!
1．Webサイトの目的・ターゲットを明確にし、コンセプトを決める。
まずはこれから作ろうとしているサイトについて目的をハッキリさせないといけません。情報を公開するだけなのか、ものを売るのか、サービスを提供するのか、などなど。さらにサイトを訪れるユーザー、又は訪れてほしいユーザーはどういった人たちなのか。最終的な目標は何なのか。
仕事でWebサイトを作る場合は、これらの情報をクライアント（仕事を依頼してくれるお客様）と相談をしながら決めていきます。
2．サムネイルを作成する
サムネイルとはラフスケッチのようなものです。（実際は大きい画像を小さく表示したものもサムネイルと呼びます。）まずは手描きでどんなサイトにするのかをスケッチしてみましょう。この時点ではこまかい書き込みは必要ありません。サイトの方向性やレイアウトなどがだいたい分かる程度で大丈夫ですので沢山描いてみましょう。
3．ワイヤーフレームを作成する
ワイヤーフレームとはWebサイトの設計図のようなものです。文字や写真などをどこにどのように配置するのかをまとめます。お客さんに見せることも多いので、なるべくきれいに作りましょう。
参考ページ：Webサイト設計図 – ワイヤーフレームの作り方
4．デザインを作成する
Figmaなどのグラフィックツールを使用してデザインを作っていきます。場合によってはPhotoshopで画像加工を行ったり、Illustratorでロゴやイラストを作成したり、様々なツールで素材を作成することもあります。
5．部品を書き出す
デザインツールで作成したデータを、そのままWebサイトとして公開することはできません。WebブラウザでWebサイトとして表示させるためには、HTML,CSSを使ってページを組み立て直さなければなりません。
テキストはデザインデータから抜き出して使用すればOKですが、画像素材はバラバラのパーツにして書き出す必要があります。書き出す必要があるのは、写真、イラスト、バナーなど画像として扱いたい箇所全てです。テキストの箇所でも特殊なデザイン処理をしている場合は画像として書き出す必要があります。
6．コーディングをする
ブラウザで表示できるように、HTMLとCSSを使ってコーディングをしていきます。ここで「05.部品を書き出す」で書き出した画像を使います。各種ブラウザやスマートフォンでも正しく表示されるかチェックする作業も必要です。
7．アップロードをする
FTPという仕組みを使って、インターネット上のサーバーにWebサイトのデータをアップロードします。ブラウザ上でアップロードできる機能もありますが、専用ソフトを使うとより効率よくアップロード、ファイル管理ができます。
上記以外にも、お客さんによるデザインの確認や動作チェックなど細かい作業が実際には行われます。
8．完成!!
これで完成となります。
完成後も気になる点などがあれば随時修正してWebサイトとしての目的が果たせるように改善していく必要があります。
サーバーを利用する方法
Webサイトを公開するにはサーバーにアップする必要がある事が分かりましたが、ではサーバーはどのようにして利用すればよいのでしょうか。サーバーの利用方法には大きく分けて3つ方法があります。
- 無料スペースを利用する
- 自分でレンタルサーバーを借りる
- 自分でサーバーを設置する
それぞれの特徴は以下のとおりです。
無料スペースを利用する（GitHub Pages など）
お金がかからないので一番お手軽な方法です。
サービスの種類によっては広告が入ったり、Webサイトに特殊な機能を持たせるためのプログラムが使えないなどの制限もあります。無料なので趣味でWebサイトを作るのに便利です。最近はSNS、ブログ、Youtubeなどが主流になっているので、無料ペースは減少してきています。
自分でレンタルサーバーを借りる（ロリポップ さくらのレンタルサーバー など）
お金を払ってWebサイトを公開する場所を借りる方法です。
細かい設定が必要になるので少し難易度が上がりますが、独自ドメイン（xxx.comやxxx.jpといった自分専用のURL）を設定したり、そのドメインでメールアドレスを複数作るなど様々なことができます。本格的にWebサイト運営を行う場合はこの方法が一般的です。
自分でサーバーを設置する
上記2つはWebサイトを設置するスペースを業者から借りるという方法でしたが、この方法はそのスペースを自分で作ってしまおう！という方法です。自分のPCをサーバーとして利用するので、幅広い知識がないと実現できません。Webサイトを置く場所そのものを自分で設置するので、様々な事ができるようになりますが、セキュリティ面などの対策も行わなければならないので一番難易度の高い方法です。