未経験からWebデザイナーになるには?あっきー転職ノート

Webサイト制作の流れ

初めてのWebサイト制作。
まずは、どのようにWebサイトが作られていくのか流れを把握しましょう。

こちらの記事でも、Webデザイナーの業務の流れとして触れていますが、
Webデザイナーとは?Webデザイナーの業務内容と仕事の流れ

ここでは、実際にこれをご覧になっているあなたが、今からWebサイトをイチから作っていくために、どういう流れでやっていけばよいのかをお伝えしていきたいと思います。

Webサイト制作の工程

1.企画
何のサイトを作るのかを決めて、作るサイトの競合・市場の調査をする
ターゲットユーザーもここで決めておく
STEP1:Webサイトを企画する

2.仕様策定
どんなコンテンツを盛り込むか、具体的に内容を決めていく
STEP2:Webサイトの仕様策定

3.サイト構成作成
どこに何を配置していくか、ページごとに詳細な構成図を作る
STEP3:サイト構成書 / 構成図を作る

4.デザイン作成
1~3の内容を元に、サイトのデザインを考える
STEP4:Webサイトのデザインを制作する

5.コーディング
HTML組みやフォームの作成

6.サーバーの設置(5の段階と平行して行う?)
ドメインの取得、サーバーの設置を行う

7.デバック
リンクミス、テキストの誤字脱字、フォームにエラーなどないかチェックして修正作業

8.リリース

9.リリース後のいろいろ
アクセス解析の設置など

以上、Webサイト制作の流れはこのようになります。

この一連の流れをどれくらいの日数をかけて行うかは、サイトの規模によるのですが、
大型プロジェクトだとそれこそ半年とか1年とかかけて行われたりすると思いますし、
小さな案件だと数日でリリースまでもっていくものもあります。

わたしが勤めている会社だと、早いもので1~2週間、少し大きめのサイトになると1~1.5ヶ月かけて1つのサイトをリリースする運びとなっています。

Web業界は移り変わりの速い世界なので、とにかくスピードが求められます。
期日が決められた中で、どれだけ満足できるものを作れるかが鍵となってきます。

時間をかければ良いものが作れるのは当たり前です。
それを、短い時間で良いものを作っていくのがプロです。

出来るだけ完璧なものを作りたいところですが、限られた時間の中では時に妥協することも必要になってきます。
それにより悔しい思いをすることもありますが、そうなったらさらに勉強を重ねて技術力をつけて補っていくしかないのです。

いまこれをご覧になっていて、まずはWebサイトを作ってみるぞ!と思って行動に移そうとしている方。それでは、この一連の流れを10日間でやることを目標にがんばってみましょう!

なぜ10日間か?
それは、わたしが未経験で一連の勉強をした期間が10日間だったからですw

サイト制作の流れについて参考になった本

わたしはこの本を読みながら、サイト制作の進め方を勉強しました。

Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
 

仕事の進め方や、仕様構成書について、その他Webデザイナーとして押さえておきたいデザインの基本、HTMLやCSSなど一通り網羅していて、これからWebサイト制作の勉強を頑張ろう思っている方には参考になる一冊だと思います。

  1. 独学でWebデザイナーになるための第一歩
  2. Webサイト制作の流れ
  3. STEP1:Webサイトを企画する
  4. STEP2:Webサイトの仕様策定
  5. STEP3:サイト構成書 / 構成図 / ワイヤーフレーム(モックアップ)を作る
  6. STEP4:Webサイトのデザインを制作する
  7. STEP4-2:Webサイトデザインの基礎ルールやポイント

この記事を読んだ人は他にも次の記事を読んでいます

記事公開日:2012年9月10日
最終更新日:2013年5月13日

7 comments

  1. こべぞー より:

    はじめまして!
    私もWebデザイナーに興味があるのですが、分からないことだらけで不安だったので、このサイトに出会えてとても嬉しく思っております。

    そこで質問がございます。
    第一歩として、Webサイトをつくるとありますが、あっきーさんははじめどのようなサイトを制作なさったのでしょうか?
    私は、ブログもやっておりますがどんなサイトを作っていけば良いのか分からないので、アドバイス頂ければと思います。

    よろしくお願い致します。

    • akki より:

      >こべぞー
      コメントありがとうございます!

      おぉ、なるほどです。
      右も左もわからない頃に作ったサイトなので、作りとしてはまったく参考にならないのですが、こんな感じでもWebデザイナーになれましたよ、という意味で紹介したいと思います。

      いずれかの記事に追記しようと思いますので、書きましたらまたここでお知らせさせて頂きますね。

      あとは、、作りとしても参考になるような具体的なサイト事例を紹介したほうがわかりやすいですよね。そのあたりも今後、わかりやすくしていきたいと思いますっ

      これからもよろしくお願いします!

    • akki より:

      >こべぞーさん

      当時、わたしが作ったサイトをこちらの記事に追記しましたので、よかったらご覧頂ければと思いますっ

      ⇒「独学でWebデザイナーになるための第一歩

  2. ライチ より:

    初めまして!
    現在、WEB業界で就職を目指している者です。面接に持っていく作品がダメっぽくて、いいアイデアがないか探していた所、このサイトに出会いました。

    質問がございます。
    WordPressを勉強しようと思うのですが、WordPressで作った作品を面接に出してもよろしいでしょうか?

    • akki より:

      ライチさん

      コメントありがとうございます!
      WordPressで作った作品を面接に出すことは、全く問題ないと思いますよ!
      むしろ、WordPressを扱えるというアピールポイントが増えて良いと思います。

      応募先の会社がどんなサイトを制作しているのか、そういったところも意識しておくといいかもしれません(´Д` )

      • ライチ より:

        お返事ありがとうございます。

        WordPressを学んで作品を作りたいと思います。
        後、どんなサイトを制作しているのか意識していきたいと思います。

        今後も就職活動に役だてるために、ご質問が増えると思いますので宜しくお願いします。

こべぞー にコメントする コメントをキャンセル

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

WP-SpamFree by Pole Position Marketing