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