サイト制作

Webデザインの流れ【初心者向け】

今回はWebデザインの流れをお伝えします。

基本的にはWebデザインの流れは以下のようになります。

①企画

②サイト設計

③ワイヤーフレーム制作

④モックアップ制作

⑤コーディング

それぞれどういったことをするのか説明しますね。

Webデザインはなぜ必要か【Webデザインの概要とサイト設計で大事なこと】 Webデザイナーを目指して思っているみなさん。 そもそも「Webデザイナとは何か」と思っている方も多いかもしれません。...

 



CodeCamp
スポンサーリンク

企画

Webサイトを作るきっかけは、他者からの依頼などで始まります。
新しく作る場合や、既にあるWebサイトのリニューアルなどもあるかもしれません。

まずクライアントの要望を把握します。
  • サイトの目的
  • ターゲットユーザー(年齢・性別・職業など)
  • ターゲットユーザーがサイトを利用する理由や行動の予測

これを具体的にしておかないと、「なんとなく作ったサイト」になってしまいます。

意外と知らない?Webサイトの種類 Webサイトの制作にあたって、Webサイトの種類を知っておくことは必要になります。 今回は「Webサイトの種類」について解...
Webサイト制作の流れ【企画について詳しく教えて】Webデザインをするとき、一番最初に行うのは「企画」です。 と思っている方も多いのではないでしょうか。 そも...

サイト設計

サイト設計では、Webサイト上に作るコンテンツを整理し、分類分けします。
そのために、

「サイトマップ」を作ります。

サイトマップとは、1つのWebサイトにあるWebページを一覧にして構造化した設計図のことです。

このように、Webサイトの中に、どういったページやコンテンツを入れ込むかという構造を決めます。

ワイヤーフレーム制作

サイト設計をしても、いきなりデザインに取り掛かるわけではありません。

ワイヤーフレーム制作でサイトの設計図を作ります。

ワイヤーフレーム制作とは「Webサイトのデザインの下書き」のようなものです。

色や細かい装飾はしない設計図です。

  • 何をどこに置くか
  • 写真はどこに入れるか
  • どこでアイコンを使うか
  • 入れる文字は何か

そういったことを決めていきます。

 

こういった、ワイヤーフレームを作れるツールはいくつかありますが、私はcacooを使用しています。
ちなみにこのワイヤーフレームは、cacooの既存テンプレートをそのまま貼りつけています。
cacooには、サイトマップやワイヤーフレームのテンプレートがいくつか入っており参考にできます。
余談ですが、私は図や何かを制作するときはよくこのcacooを使います。

cacooはWebサイト制作以外にも役に立つ便利なツールです。

細かい配色まで行かなくても、枠組みを考えていくことで、細かいデザインを考えるうえで楽になります。

便利なツール「cacoo(カク―)」を紹介 Webデザインなどで使用している方はご存じかもしれません。 Webデザインのサイト設計や、ワイヤーフレーム制作によ...

モックアップ制作

モックアップ制作は、完成したデザインのデザイン起こしをします。

モックアップを制作することで、完成デザインのイメージが出来るため、基本的な機能なども確認することが出来ます。
「モックアップを見れば完成品がわかる」くらいのものである必要があります。

一般的なモックアップのことは、「デザインカンプ」と呼ばれる場合もあります。
静的なデザインカンプを作るのに、photoshopが使われるケースが多いです。
photoshopを使うと、綺麗にデザインされたものを作ることができるためよりイメージが湧きやすいです。

モックアップ制作の方法は、他にも色々あります。
今お話しした、「デザインカンプ」が一般的ですが以外には「ブラウザデザイン」「ペーパープロトタイピング」と呼ばれるものもあります。
ここではそれらの説明は割愛しますが、方法がいくつかあるということだけ頭の隅に入れておいてください。

コーディング

完成品がイメージ出来たら、実際にコーディングしていきます。

HTMLやCSSを使い、作り上げていきます。

まとめ

Webデザインはこのようにして進めていきます。
流れはイメージ出来ましたでしょうか。

1つ1つの細かい解説や実践についてはまた別の機会でお話しします。

また、「Webデザインはなぜ必要か」「サイトを設計する上で大事なこと」はこちらの記事を参照ください。

Webデザインはなぜ必要か【Webデザインの概要とサイト設計で大事なこと】 Webデザイナーを目指して思っているみなさん。 そもそも「Webデザイナとは何か」と思っている方も多いかもしれません。...
スポンサーリンク

ABOUT ME
アバター
ミキ
看護師をしながら海外生活を目指し、Webデザインと英語を勉強中。看護師関連、海外渡航関連、Webデザインなど幅広く発信中。世界中どこにいても仕事出来るようになるのが夢。