WEBデザインについて知ろう

WEBデザインを勉強するにあたって、まずはWEBデザインとはなにか?これからどういった事をしていくのかを確認してみましょう。

このページで勉強すること

  • WEBデザイナーとは
  • WEBサイトの仕組み
  • WEBサイトの種類
  • WEBサイトを作るには
  • WEBサイトを作成〜公開するまでの具体的な手順

WEBデザイナーとは

WEBデザイナーとは何をする人なのでしょうか。
一般的には「WEBサイトを作る人」というイメージを持つ人がほとんどだと思います。

最近は技術の進歩によってWEBサイト上で様々な事が行えるようになりました。
そのため、ひとつのWEBサイトを作るのにも様々な技術が必要になってきます。
デザイン、コーディング、プログラミング、Flashアニメーション作成などなど。

01概要
その中で「WEBデザイナー」が担当する代表的な仕事は以下の2つになります。

WEBデザイナーの代表的な仕事
・見た目のビジュアルを作る(デザイン)
・ブラウザで見れるようにHTML・CSSを使って組み立てる(コーディング)

上記はあくまで代表的な仕事です。制作現場の規模や状況によって変わってきます。人によってはデザイン専門の人、コーディング専門の人だったり、すごい人だと上記2つに加えてプログラミングまでこなしてしまう人など様々です。「WEBデザイナー」という言葉の使い方は人によって違う部分もあるので、はっきりとした定義は難しいのが現状です。

WEBサイトの仕組み

WEBサイトはHTMLとCSSというプログラムのようなもので作られています。現在インターネット上に公開されているサイトのHTML・CSSを確認することもできます。

HTMLとCSS、それぞれの役割は以下のようになります。

HTML…レイアウト枠を作り、テキストや画像を表示させるもの。
CSS…HTMLで作ったレイアウト枠やテキストに対して、サイズや色など見た目のデザインをするためのもの。

02_HTML_CSS
実はHTMLを使って細かいレイアウトをしたり色をつけたりすることもできるので、HTMLだけを使ってWEBサイトを作っていた時期もありました。しかし、管理や機能の面から現在はHTMLとCSSの両方使って作るのが一般的です。

実際にWEBサイトを作成する際は、見た目のデザインを画像で作ってからHTMLを使って組み立てていきますが、インターネットはもともとテキストを表示させるための仕組みだったため、あくまでHTMLがベースになっています。

ちなみに、HTMLとCSSを使ってページを組み立てることを「コーディング」と呼びます。

WEBサイトの種類

WEBデザインをするにあたって、まずはインターネット全体のことについて考えてみましょう。現在WEB上には様々な種類のサイトが存在します。代表的なものを上げると…

・通常のWEBサイト(企業や公共機関などの一般的なサイト)
・BLOG(アメブロ、FC2など)
・SNS(Facebook、mixi、Twitterなど)
・ショップサイト(Amazon、楽天など)

などがあります。BLOGやSNSなどは既存のサービスにユーザー登録すればすぐ使えます。では、通常のWEBサイトはどうすれば作れるのでしょうか。

WEBサイトを作るには

BLOGやSNSなどのサービスを使わずに、自分でWEBサイトを作成するにはいくつかの方法があります。
難易度順に方法をあげてみます。

・無料スペースを利用する
・自分でレンタルサーバーを借りる
・自分でサーバーを設置する

それぞれの特徴を見てみましょう。

無料スペースを利用するFC2Yahoo!など)

お金がかからないので一番お手軽な方法です。ただしサービスによっては広告が入ったり、WEBサイトに特殊な機能を持たせるためのプログラムが使えなかったりなどの制限もあります。
無料なので趣味でWEBサイトを作るのに重宝します。企業などでも時々利用している場合があります。

自分でレンタルサーバーを借りるロリポップhetemlなど)

お金を払ってWEBサイトを公開するスペースを借りる方法です。各種設定が必要になるので少し難易度が上がります。そのかわり、独自ドメイン(自分専用のドメイン)を設定したり、そのドメインでメールアドレスを沢山作ったりできます。
本格的にWEBサイト運営を行う場合はこの方法が一般的です。

自分でサーバーを設置する

上記2つではWEBサイトを設置するスペースを業者から借りるという方法でしたが、この方法はそのスペースを自分で作ってしまおう!という方法です。自宅にあるPCをサーバーとして利用するので、幅広い知識がないとできません。
WEBサイトを置く場所そのものを自分で設置するので、様々な事ができるようになります。

WEBサイトを作成〜公開するまでの具体的な手順

WEBサイトを作成し、公開するまでの手順をおおまかに見てみましょう。

01.WEBサイトの目的・ターゲットを明確にし、コンセプトを決める。
02.サムネイルを作成する
03.ワイヤーフレームを作成する
04.デザインを作成する
05.スライスをする
06.コーディングをする
07.アップロードをする

ではもう少し具体的に各手順を確認してみたいと思います。

01.WEBサイトの目的・ターゲットを明確にし、コンセプトを決める。

まずはこれから作ろうとしているサイトについて目的をハッキリさせないといけません。
情報を公開するだけなのか、ものを売るのか、サービスを提供するのか、などなど。
さらにサイトを訪れる、又は訪れてほしいユーザーはどういった人たちなのか。
最終的な目標はなんなのか。
これらはお客さんと一緒に決めていくことが多いです。
このへんはマーケティングやその他の分野も関わってきます。

02.サムネイルを作成する

サムネイルとはラフスケッチのようなものです。
(実際は大きい画像を小さく表示したものをサムネイルと呼んだりもします。)
まずは手描きでどんなサイトにするのかをスケッチしてみましょう。
この時点ではこまかい書き込みは必要ありません。
サイトの方向性やレイアウトなどがだいたい分かる程度で大丈夫ですので沢山描いてみましょう。

03.ワイヤーフレームを作成する

ワイヤーフレームとはWEBサイトの設計図のようなものです。
文字や写真などをどこにどのように配置するのかをまとめます。
お客さんに見せることも多いので、なるべく綺麗に作りましょう。

参考ページ:使えるワイヤーフレームの書き方
参考ページ:Webサイト設計図 – ワイヤーフレームの作り方

04.デザインを作成する

Photoshopなどのグラフィックソフトを使用して実際にデザインを作っていきます。場合によってはIllustratorでロゴやイラストを作成したり、Flashで動きをつけたりなどの作業も必要になります。

05.スライスをする

WEBブラウザでWEBサイトを表示させるためには、HTMLを使ってページを組み立てなければなりません。しかしPhotoshopで作成したデザインデータは、そのままでは使用できません。そこで「スライス」という機能を使って、ボタンなどのパーツを切り分ける必要があります。
スライスする必要があるのは、ボタンなどの画像、写真やイラスト等の画像、グラフィック処理をしたテキストです。本文などのテキストはHTMLを使って表示させるのでスライスは必要ありません。

06.コーディングをする

WEBブラウザで表示できるように、HTMLとCSSを使ってコーディングをしていきます。ここで、05でスライスした画像を使います。
各種ブラウザで正しく表示されるようにチェックする作業も必要です。

07.アップロードをする

FTPという仕組みを使って、インターネット上にWEBサイトのデータをアップロードします。最近ではブラウザ上でアップロードできる機能もよく見かけますが、Dreamweaverなどを使うとより効率よくアップロード、ファイル管理ができます。Dreamweaver以外だとFFFTPといったソフトも存在します。

上記以外にも、お客さんによるデザインの確認や動作チェックなど細かい作業が実際には行われます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です