creatersnest135

【まずはイメージしてみよう!】Webサイトが完成するまでの流れ


Webサイトの作成には多くの工程があり、完成までの流れをイメージして
つかんでおくことが大切です。
完成までの流れをつかんでおけば、複数人でサイトを作り上げる際にも
その流れを共有できます。
大きく4つの工程に分けることができますので紹介します。

仕様書を確認する

仕様書の見本

仕様書にはサイトを立ち上げるうえで重要な、様々な情報が記載されています。

会社概要

会社概要として知っておきたい情報は以下の通りです。
・サイトを新規に立ち上げる目的、理由
・ターゲット層の確認
・ロゴマーク
・コーポレートカラー
・コンテンツの確認
コンテンツとは、どんなページを作るのか、各ページはどんな内容を書くのか
といったことです。

ディレクトリ構成

ディレクトリ構成

フォルダ名と、その中に入るファイル名、保存場所を明記します。
ディレクトリマップとも呼ばれ、この構成図を作成することによって複数人で
作業するときに役立ちます。

サイトマップ作成

コンテンツがどのように繋がっているかを示します。このサイトマップに従って
リンクをつけていきます。

ワイヤーフレーム

各ページのレイアウトです。ビジュアル面でのデザイン要素は省き、レイアウトと
どこにどういった内容を書きこむのかを明記します。
このワイヤーフレームをもとにして、デザインを行います。

デザインする

Webデザイン

http://www.photo-ac.com/

会社のイメージをとらえる

Webサイトは、インターネット上でその会社の姿を表現します。
会社のイメージに合ったサイトを作っていくことは当然のことながら必要となりますので
会社概要を確認し、事業内容やどういったコンセプトの会社(またはお店)なのかを
把握するようにしましょう

併せてロゴマークの有無、コーポレートカラーも確認します。
コーポレートカラーが決まっていない場合は打ち合わせをして、3色ほど
決定しましょう。

企画を確認

作成するWebサイトの目的、ターゲット層、方向性を確認します。
Webサイトで何をしたいのか、目的をきっちりと把握しましょう。
ターゲット層の確認では、どのような年代、性別にアピールするかによって
好まれる画像のイメージや文章の書き方も変わってくるはずです。
また、Webサイトに盛り込むコンテンツ内容も非常に重要なので、きっちりと
確認してください。

デザインの作成

Webサイトの作成では、ページのデザインを効率よく、そして統一されたデザインで
作り上げていくことが重要です。
全てのページを1ページずつデザインするのは効率が悪く、統一性にも欠けてきます。

まずはトップページをデザインし、それをテンプレートとしてメニューページに
適用し、その他のページも作っていくと良いでしょう。
テンプレートとして活用する場合には、ヘッダー部分やサイド部分を残し、
コンテンツ部分は各ページごとに修正していきます。

コーディングする

コーディング

http://www.photo-ac.com/

スライス

出来上がったデザインの中で、画像として必要なところだけを見極めてスライスすることがポイントです。
画像を少しでも軽くするためにも、余白はcssで調整します。
簡単なイラストや単色のものはgif形式で保存し、グラデーションや写真などは
jpegやpng形式で保存します。

文書の構造

テキストを打ち込んだら、文書の構造を確認します。適切なhtmlタグでマークアップし、
文書に意味づけを行います。適切なhtmlタグでマークアップすることはseo対策の
基盤となりますので、htmlの文法に沿って正しく行いましょう。

css

<div>タグを使って、要素をグループ分けしていきます。ワイヤーフレームに沿った
レイアウトになるようにcssで調整しましょう。

また、Javascriptを使ってマウスオーバーを設定するなど、高度な技術も使えると最高ですね。

仕上げの作業

流れ

http://www.photo-ac.com/

リンクの設定

ページをリンクさせていく作業、つまりWebページ同士を結び付けていくことが仕上げの工程になります。

全てのhtmlファイルを開き、リンクを設定していきます。サイトマップを確認して
階層に注意いながらリンクを設定しましょう。

おまけ

完成したWebサイトをインターネットに公開するには、データをWebサーバーに
アップロードする必要があります。

レンタルサーバーを用意し、ffftpなどの転送ソフトを使用してアップロードします。

間違っても、デザインファイル(aiファイル、psdファイルなど)はアップロードしないでくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleWebサイトをレスポンシブにすべき理由とは?