Webデザイナーとしての仕事～受注からサイト設計編～

今回は、webデザイナーとして、
お仕事を受注してからサイト設計までの流れをお伝えします。

スクールで技術を習った後にどのような流れで仕事をしていくか、また思っていたことと違うなんてことにならないように一緒に仕事の流れをみていきませんか。

では早速、仕事を受注してからサイト設計までの流れをお伝えいたします。

①受注：打ち合わせ、ヒアリング、見積、市場調査

まずは、どんなサイトにしたいのか、どんなお客様に来てほしいのかをヒアリングします。
そのあとに、お客様に見積書を送ります。
そして、いよいよ市場調査です。お客様の商品サービスの強みは何なのか、競合はどこなのか、競合と差別化できるポイントは何なのかを調べていきます。

②サイト設計：技術仕様書を作成、サイトマップ、ワイヤーフレーム

ここからいよいよサイトを設計するために、「見える化」していきます。

まずは、技術仕様書を作成です。
Webサイト作りは、一人ではなく複数人での作業になるので、技術仕様書という形でまとめておき、作業する人全員にわかるように共有しておきます。

内容は、目標達成、抱えている課題の解決などです。
そして、そのためにどの様なページやデザインが必要で、どんな機能があると良いのかといった具体的な内容を掘り下げていきます。
例えば、新しい事業を立ち上げるからお客様に来てほしいが、予算が限られているのであれば、絶対に必要なページやデザインは何になるのか、少なくともどんな機能は盛り込んだ方が良いのかなどです。

つまり、仕様書とは『実現することを整理したドキュメント』になります。
＜技術仕様書の主な役割＞
・情報を1か所にまとめて、誰が見てもわかるようにする
・制作するサイトのイメージや認識を共有する

次は、サイトマップです。
これは、WEBサイト全体の構成を図に表わした資料の事をいいます。
例えば『TOPページ』⇒『記事一覧』⇒『記事ページ』といったように階層的な構造のことです。全体の構造を把握しやすくするために作成します。

＜サイトマップの主な役割＞
・Webサイト全体の構造が把握しやすくなる
・作業をするメンバー間で認識共有ができる
・全体の作業量を決定できる

最後にワイヤーフレームです。
これは、各Webページのレイアウトを定めるための設計図のことです。
写真はどの位置でどんな大きさにするか、記事をどこに入れたら読んでくれそうかなどを決めていきます。
制作現場では『ワイヤー』と略して言われる事も多い程、Web制作者にとっては馴染みの深い仕様書でもあります。打ち合わせでアイデアを出しやすくするためのもので、デザイン制作前の 『たたき台』としての役割も持ちます。

＜ワイヤーフレームの主な役割＞
・Webページのどこに何を配置するのかを決める
・ページ内容を『見える化』し、できあがりイメージを共有する
・完成物のイメージを共有することでやり直しのリスクを無くす

いかがでしょうか。
今回は、仕事を受注してからサイト設計までをお伝えしました。
技術を磨くことはもちろんですが、技術取得した後のこともイメージすると、より深く学べるのではないでしょうか。
例えば、どんなジャンルを得意とし、どんなお客様と仕事をしたいのかなどです。
今回も読んで頂きありがとうございました！

ちょっと気になった、更に知りたくなったという方は、
ぜひ、気軽に相談できるMentaをしております。

Mentaでメンターサポート
https://menta.work/user/22914

ストリートアカデミーで毎月講座も開催しています
https://www.street-academy.com/steachers/198346

また、Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

webデザイナーもくもく制作サロンへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec

もくもく制作サロンの入会

サロンではチャットで制作の質問を受け付けたり、相談会を開いて直接現役のデザイナーになんでも聞けるコミュニティです。
月額500円となります。

入会条件
業界未経験、経験者、Webデザインエンジニアに興味がある方まで！
誰でも匿名参加OKです。

参加方法
こちらのWebデザイナーフリーランスマガジンの購読購入をいただき、下記にてSlackコミュニティにご招待させていただきます。