cotoc

BLOG

  1. HOME   > 
  2. BLOG   > 
  3. Webサイトってどうやって作っているの?

BLOGブログ

Webサイトってどうやって作っているの?

2016.05.31

blog02Main

こんにちは!!少し間があいてしまいましたが、ブログ第2回を書きます。

さて本日のテーマは「Webサイトってどうやって作ってるの?」です。
お仕事はWebデザインをやっていますって言うと、「どんなことやるん?」「ホームページって何で作るん?」みたいな感じでよく聞かれるので、ざっくりとですがこの記事でご説明したいと思います。

1Webサイトの種類

先に、Webサイトにはどんなものがあるのか代表的なものを挙げておきます。

  • ・企業などの公式Webサイトである「コーポレートサイト」
  • ・インターネットショッピングに特化した「ECサイト」
  • ・ブランド認知やイメージ構築のための「ブランディングサイト」
  • ・キャンペーンの告知や宣伝のための「キャンペーンサイト」
  • ・Yahoo!のような様々なコンテンツにアクセスできる「ポータルサイト」

など、いろんな種類があります。
ちなみに普段私たちがよく使う「ホームページ」という言葉は、コーポレートサイトの通称として使われていることが多いかと思います。
これらの中から目的用途にあったWebサイトを作ります。今回はカフェのWebサイトを作る想定でご説明します。
それでは次の項目から、実際に作る流れを書いていきますね。

2打ち合わせ(企画・提案)

最初はやはり打ち合わせです。
まずはクライアントさんから、Webサイトを作ることになった経緯&目的をヒアリングします。

例えばカフェだったら、「食べログだけじゃなくて自分のお店のWebサイトやブログを作って情報発信したい」とか、「メニューや店内の写真をWebサイトでしっかり見せたい・お店のコンセプトをしっかり伝えたい」とか、「インターネットでお店を宣伝して集客をアップさせたい」などでしょうか。
そういったヒアリング内容をもとに、Webサイトで何を一番伝えたい(アピールしたい)か、情報として何を載せるか、サイトのページ数や構成はどうするか、などを話し合って決めていきます。

それと合わせて、新しく作るWebサイトではどういった層のお客さんをターゲットにするのか?をしっかりとヒアリングします。
性別、年齢、職業、趣味嗜好、住んでいる場所、何を求めてその企業やお店のサービスを利用するのか、などなど。
こうしたターゲットとなるお客さん(Webサイトの利用者)を専門用語で「ターゲットユーザー」と呼んでいます。

Webサイトを作る上で重要なのは、ターゲットユーザーに「必要な情報・伝えたい情報を」「閲覧環境(パソコン、タブレット、スマホなど)に応じて」「正確に」提供できるサイトを作ることです。
見た目の「デザイン」は情報を的確にかつスムーズに伝えるための手段として機能します。
(最低限の文字だけでももちろん情報は伝わりますが、デザインを加えることでその効果は飛躍的にアップします)
なので、伝えたい情報やターゲットユーザーに合わせてデザインを作る必要があります。

あとは同業種の他サイトではどういうやり方をしているのかを調査したり、デザインやレイアウトで参考になりそうなサイトをクライアントさんに見ていただいたりして、どういうWebサイトを作りたいかをしっかり話し合います。

全体の方向性と構成がここで決まりますので、最初の打ち合わせはとても重要です。

3デザイン作成

今回この記事用のサンプルとして、カフェのWebサイトデザインを作ってみます。

打ち合わせでWebサイトの方向性が決まったら、次に「ワイヤーフレーム」というものを作ります。(ワイヤーフレームを作らずにいきなりデザインに入ることもあります)
これはWebサイトのレイアウト設計図(どこに何の情報を配置するかの図)のことで、こんな感じのものを作ります↓

sampleWF

そしてワイヤーフレームのレイアウトをベースにデザインを作成していきます。
デザインは主に「Adobe Photoshop」や「Adobe Illustrator」というグラフィックソフトを使用して作成します。

サンプルサイトは木をテーマにしたナチュラル系カフェの想定で、下記のような感じでデザインを作ってみました。
(もちろんサンプル用ですので実際には存在しません。テキストはそれっぽいものを適当に入れて、写真は主に「無料写真素材 写真AC」から使用させていただきました。)

架空のお店ではありますが・・・
ナチュラルテイストの雰囲気が伝わるように、木を連想させる配色や装飾、優しい雰囲気のフォントを選び、さらにメイン写真でお店をしっかり見せています。コンテンツとしては簡単な紹介文、おすすめメニュー、各種サービスなどを掲載し、Webサイトを閲覧したお客さんにどういうお店なのかをサイトトップページでしっかり伝えることを目的としました。
ターゲットユーザーは「年齢20~30代、ナチュラル系雰囲気のカフェや雑貨店が好きな、どちらかというと女性が多い、健康志向、ランチやカフェタイムに利用」みたいな感じで考えました。

sampleDesign

先ほど②でも書きましたが、デザインは「Webサイトで伝えたい情報&ターゲットユーザー」に合わせた、配色・文字フォント・装飾を用いて作成します。(たとえば女性をターゲットにした化粧品サイトで、男性的な重厚な色合いや力強い太文字を使用したら、イメージとかけ離れてしまって正しく情報が伝わりませんよね・・・)
また、Webデザインにおいては、Webサイトを閲覧している人がページ遷移やクリックなどの動作に困らないよう、使い勝手もきちんと考慮する必要もあります。

サンプルはトップページだけですが、他のページのデザインももちろん作ります。

4コーディング・プログラミング

デザインが確定すると、次は作成したデザインを「Webブラウザ」に表示させるための作業を行います。
「Webブラウザ」というのは、Internet Explore、Safari、Google Chrome、FireFoxなどの「インターネットを閲覧するためのアプリケーションソフト」です。

Webブラウザで見るとWebサイトは綺麗に見えていますが、実はその中身はこんな風になっています↓
(見た目が難解に見えるので、こういうの苦手な方は画面で見せるとウゲーッていう反応をよくされます笑)

sampleHTML

ちょっと見づらくてすみませんが、これらはHTMLという言語で書かれています。
HTMLが記述されたファイルを作成することで、Webブラウザに文書や画像を表示させることができます。
さらに装飾やレイアウトを行うための言語(CSSと言います)を書くことで、デザインを反映させることができます。

この「HTML・CSS」を書く作業をコーディングと言います。そしてここでWebサイトの各ページをコーディングしていきます。

さらに写真を自動で切り替えたいとか、簡単なアニメーションを入れたいなど、要望に応じて他の言語でプログラミングを行います。

5サーバーにアップロード

コーディングとプログラミングが終わると、WebブラウザにWebサイトを表示できるようになりますが、
この段階ではまだ他の人は見れません。(作成したHTMLデータが入っているパソコンからしか見ることができません。)

インターネットで公開してみんなに見てもらうためには「サーバー」という場所にデータをアップロードする必要があります。

サーバーは基本的にサーバー会社が提供しているレンタルのものを利用します。(参考:さくらのレンタルサーバー
クライアントさんにサーバーをレンタルしていただき、そこにデータをアップロードします。
合わせてWebサイトアドレスの独自ドメイン(http://の後ろの、○○.comとか○○.jpなど)の登録設定も行います。

6公開!!!!!

サーバーにWebサイトのデータがアップロードされると、インターネット上で誰でも閲覧できるようになります。
これで正式に公開です。
Webサイトから世界に向けて情報を発信できるのです。インターネットってすごいですね!!!
もちろん公開したらそれで終わりではなく、継続的に運営&更新していくことが重要です。
このブログももう少し更新がんばります。m(__)m

browser

以上だいたいの流れはこんな感じです。今回はざっくりとですのでいろいろ端折ってますがご了承くださいませ。
何か参考になればと思いブログとして書きました。

最後まで読んでいただきありがとうございました!!!

CONTACTお問い合わせ

お仕事のご相談はメールで受付しております。
お気軽にご相談ください。

CONTACT

PageTop