Home > スポンサー広告 > きっとトラブルが起きにくい!ウェブデザインの制作順序を書きました。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

2013-05-05 Sun 01:24:29

このコメントは管理者の承認待ちです

2013-05-05 Sun 22:58:32

このコメントは管理者の承認待ちです

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/64-bf97e887
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > きっとトラブルが起きにくい!ウェブデザインの制作順序を書きました。

Home > デザイン > きっとトラブルが起きにくい!ウェブデザインの制作順序を書きました。

きっとトラブルが起きにくい!ウェブデザインの制作順序を書きました。

seisaku.jpg

ウェブサイトの制作には、いくつかのフェーズがあります。
企画→制作→構築→公開を何度もくりかえすこともあり、スパイラル方式なんて言われることもあります。
今回は、ウェブサイトの制作順序を書いてみたいと思います。

むかしはこういった文章をブログなどで書く方が多く、本もたくさんあったのですが
今は知識や技術に偏ったものがおおく、目に触れることが少なくなったのかもしれません。
もしくは、あたりまえのことだから言わなくなったのかもしれません。

しかしながら、ウェブを気持ちよく制作するために基本というのは重要なことだとおもい
再確認もこめてかきました。

ウェブ制作を行なっている人、
これからウェブの業界に入りたいとおもっている人、
これからウェブを発注する予定のある企業の方に読んでいただければいいなぁと思っています。




・ヒアリング

どんなサイトにしたいのかをお客様へお伺いします。
対象となるブラウザや、スマホ、ipadなどへの対応などもここで決定します。
他のサイトでよく似たイメージのものがあれば持ってきていただいたり
何もない場合は制作側からいくつかの案を持って行ってイメージを具体的にします。
資料や文言をどちらが提出するのかなどもこの時点で確認します。
サーバーの有無などもここで確認しておきましょう。


・サイトマップ作成

実際に作成するサイトの中でどんなページが必要になるのかを
ツリー状の図にします。
制作側も、お客様にもどれくらいの規模(ページ数)のサイトになるのかを確認し
共通認識とするためです。
サイトマップは、すでにお客様にて用意されている場合もあります。



・ワイヤーフレーム作成

ワイヤーフレームとは、簡単にウェブサイトの中身の配置がわかるようにした
骨組みだけのデザインレイアウト案です。
手描きで作るひともいれば、パワーポイントや、他のソフトで作る方もいます。
ヒアリングの時点でデザインのイメージについては聞けているので
今度は具体的に、ページ内のどの位置にどんなボタンや文章や画像を配置するのかを
決定していきます。

ワイヤーフレーム案ができたらお客様に確認していただき
その時点で訂正があれば調整を行います。

これで、全く違うイメージのデザインをしてしまった、というような
コミュニケーションのずれが少なくなります。

(間にディレクターさんが入っている場合は、この作業はすでに済んでいる場合もあります。)



・スケジュールの提出

何日までに、どの作業をするのかを日程にして提出します。
その日程に従って、「このページはこの日から作成するので
この日までに資料をいただきたいです。」等
お客様側でなぜその日までに資料が必要になるのかを理解してもらいやすくなります。

デザインの調整指示などによって、予定がずれ込む場合は
ほどよい間隔でスケジュールの訂正・更新を伝えていきます。



私の場合、サイトマップと、ワイヤーフレームと、スケジュールについては
同時に提出してしまうことが多いです。



・デザイン案の作成

スケジュールと、同意いただいたワイヤーフレームを元に
デザイン案を作成していきます。
他に必要な素材や資料が見つかったときは、その都度お客様と連絡を取り合います。

納品時、お客様側でデザインを変更される場合もありますので
作成に入る前にどのソフトで作成するのが最適か確認するのがいいとおもいます。

基本的にはphotoshopかfireworks形式になるとおもいますが
どちらかでしか作成できない場合は、その旨を先に伝えておくとトラブルが少ないかもです。

デザイン案は、jpgかpng形式で上から下まで(ヘッダーからフッターまで)を
書き出し、ページごとに確認してもらいます。

お客様側では、訂正がある場合そのファイルをもとに赤チェックなどで追記してもらい
フィードバックをもらうようにします。

お客様からOKがでるまで、ワイヤーフレームで作成したすべてのページを調整します。

一度に前頁を出すのではなく、
まずはTOPページ、次は下層ページでよく似た構成のものを数点
といった形で、デザイン案の作成自身もフェーズを分けて確認してもらうとトラブルが少ないです。



・コーディング / 実装

デザインが完成したら、次はコーディング(html化)に入ります。
Wordpressなどのテンプレートにする場合は、テンプレート化します。
Wordpressはローカル環境で構築することが多いです。
ネットショップなどサーバー上でしか触れないものに関しては
できるだけ別テンプレートを作成し、現状に影響がないようにすすめます。



・仮サーバーへアップもしくは、実際のサーバーへアップ

サイトの規模や、その時点での環境にもよりますが
仮サーバーか、実際のサーバーへのアップを行い、最終確認を行います。
ネットショップなどの場合は、テンプレートの切り替えを行う旨を連絡してから
切り替えを行います。
最終的なチェックがお客様側で終われば、納品となります。

納品は、サーバーでアップして納品となる場合と
デザインデータや、サーバーへアップしているhtmlデータなどをバックアップして
納品することで完了する場合もあります。



いかがでしょうか。
ウェブの制作は、思ったより何度もお客様と制作側での確認が行われた上で成り立っています。
お客様のやりたいことを汲み取りながら、よりよいサイトを構築できるよう
制作側も努めていかなくてはいけません。

上記のことも、すべてそのように「すべき」ということではありません。
あくまでも臨機応変に、負担のないよう、予算の範囲内で上手に案件自身を構築していくことが大事な気がします。

目的はお客様が希望するサイトを組み上げること。
その目的に向かって、お客様と一緒にすすんでいけるような
ウェブ制作をおこないたいものですね。


関連記事

Comments: 2

2013-05-05 Sun 01:24:29

このコメントは管理者の承認待ちです

2013-05-05 Sun 22:58:32

このコメントは管理者の承認待ちです

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/64-bf97e887
Listed below are links to weblogs that reference
きっとトラブルが起きにくい!ウェブデザインの制作順序を書きました。 from バニデザノート

Home > デザイン > きっとトラブルが起きにくい!ウェブデザインの制作順序を書きました。

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。