ITで最高の体験を。いざフルスタックエンジニアへ

「UX/UIデザイン」と「web運営」、たまにプログラミングや意識高い系の記事を発信

”3分”でわかるサイト制作フロー。顧客のデザインをするだけはNG

 

こんにちは!

色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)

現在UXデザイナーとして海外渡航を目指してるりゅーやです。

 

webのUXデザインをする上で、

重要なことが2つあります。

 

1つ目は、

いかにユーザー目線で物事を捉えて設計をするか。

他のビジネスでもこの"ユーザー目線"は当たり前かもしれませんが、

体験を創造していく上では、

何よりも重要なことです。

 

そして2つ目は、

”仲間(チーム)のことも考える”です。

少し予想外でしたか?w

web開発を全て 1人で実施することはかなり厳しいです。

 

UXデザインを設計するにも、

営業の方がただ”カッコいいサイト”、

”青色が好きみたい”といった

情報しかくれなかったらwebの見た目を作るだけでも厳しいですよね?

 

ということで、

チームにも貢献していくため

今回はweb制作の流れについて知っていきましょう。

 

サイト制作

web制作の流れ

目次

1.サイトのポリシーを決めよう

サイト制作の根底になる部分です。

・なぜサイトを作るのか?

・目的は?

・ターゲットは?

・どのような情報を発信していくのか?

といった事柄を明確にしていきます。

 

このサイトポリシーがもし制作途中でずれてしまったら、

また1から作成し直すといった自体になりかねません。

 

クライアントは、

自身が求めていることは全て把握してはおらず、

 

むしろ、サイトポリシーを決める際には

疎通の違いが内容にしっかりとヒアリングをし、

クライアントが本当に求めていることはなんなのかを

聞き出していきましょう。

 

2.コンセプト、企画書の作成

サイトの方向性が定まったら、

企画書を作成します。

 

企画書内容 例

・サイトの趣旨

・競合サイトを分析した結果

・デザイン、レイアウト構成、機能の提案

・キャンペーンと連携させるか

など

 

企画書が完成したら、

最終確認はクライアントと共に行うことが必須です!

 

3.仕様書、ワイヤーフレームの作成

そしてついに、

ここからサイト設計に入ります。

 

クライアントと共に決定した、企画書を元に

サイト設計の下書きを行います。

 

この下書きのことを、仕様書

もしくはワイヤーフレームと言い、

まだ下書きの段階なので紙に書くのもOK、

Excelなどのツールも使って、とにかくアウトプット。

 

*クライアントとの確認は必須ではないので、

必要に応じて対応をしていきましょう。

 

4.デザイン作成

さあ、

デザイナーの出番がきました!!

仕様書を元にデザインを考えていきます。

 

ただ綺麗に見せるサイトのみならず、

クライアントが求めている役割を達成できるものにしましょう。

 

そして、必ず”ただ見た目の収まりがいい”でデザインはしないように。

 

5.コーディング、プログラミング

コーディングまではデザイナーが行うのがほとんどですが、

大規模サイトの場合はプログラマーが担当します。

 

正確かつ他のプログラマーが編集しやすいコードを記述し、

デバッグなどのテストも実施。

 

6.サーバーアップロード、運用

そして完成したサイトをサーバにアップし、

アクセス解析やコンテンツを更新していきます。

 

サイト運用に関しては、制作側が行う場合もありますが、

個人的にはクライアントが一番自分たちのサービスを知っているので

自分たちで運用することが当たり前にできるのが理想かなと常々感じて

います。

 

まとめ

webサイトの簡単な流れを説明しました。

 

デザイナーが着手するフローは

主に4と5のデザイン、コーディングの部分。

”クライアントの目的を見える化”するのが担当です

チームメンバーがデザインを見て、

意図をしっかり伝えられるデザインを制作しましょう。

 

仮にコーディングは、他の人がする、

デザインはクライアントと一度確認する

といったこともよくあります。

 

ここで、説明が求められる場合

”デザインができていない”、

UXデザインなんて

科学されていないも同然です。

 

クライアントと打ち合わせをする人、

コーディング、プログラミングをする人が

スムーズに業務に取りかかれる成果物を作りましょう。

 

そうすれば、

自ずとクライアントも納得する

デザインが作れるはず。

 

 

 

 

 

 

 

 

 

 

 

【スポンサーリンク】