WEBプロデュース作業工程2「サイト設計」

WEBプロデュース作業工程１「企画」の続きです。

企画がしっかりしていれば、サイト設計も楽です。サイト設計の考え方が明確だともっと楽です。サイト設計に頭を悩ませていらっしゃる、中小企業のWEBマスターの方にも参考にして頂ければと思います。手順は以下の通り。

1.集客戦略をベースにしたページ構成とキーワード配分
2.コンテンツ・情報デザイン
3.ビジュアルデザイン
4.素材確保・技術確認
5.プログラミング・コーディング

1はページの構成ですね。普通はTOPページから、書き出していくわけですが、その前に前記事でも書いた「集客キーワード」を書き出し、どのページをどのキーワードのランディングページにするかを考えながら書き出します。複数のキーワードの受け皿を1ページでまかなうこともできますが、ライバルの多いキーワードは1ページ1キーワードで拾っていきます。もちろんトップページが一番強いですから、重要なキーワードをトップページにもっていきます。こうすると、TOPページから、書き出していくのとは違うサイト構成図になります。そして、必要なコンテンツも明確になってきますね。

2は1で決めた各ページに必要な内容を箇条書きにし、1から優先順位を付けていくのです。必要な項目とは、コンテンツだけでなく、メインメニューの内容やサイト内のリンクも含みます。優先順位ですので、同列はだめです。WEBページは縦長ですし、画面のサイズは限られています。サイトのロゴ、重要なメインメニューのリンク、特集ページへのリンクバナー、プライバシーポリシーへのリンクが同じ大きさの横並びのリンクになっていたらユーザーは困惑します。重要な順番に上から並べ、重要なほど目立つデザインにしなければならないのです。ソースの上に書くのか下に書くのかで、SEOにも関連してきます。これができれば、ヘッダー／フッター／メインメニュー／サイドメニュー／メインコンテンツ／等の基本的なフレームワークが自ずと決まるわけです。絵を書く前に、箇条書きと優先順位決め。これが凄く肝心です。これをやると、1サイト1サイト、適切なフレームワークが違う事に気づくはずです。そして、各ページがランディングページである事も念頭に各ページ内要素の優先順位を決めて下さい。

3でPhotoshopのようなソフトが登場するわけですね。いきなりコーディングという強者もいらっしゃるのでしょうか。2で決めたフレームワークを元に、デザインをしていきます。もうレイアウトは2でほとんど決まっているので、あとはデザイナーのセンス次第でしょうか。ポイントは、2で決めた重要度をビジュアルでも明確にユーザーに示す事です。大中小。派手普通地味。と、明確にすることが大切です。企業からすると全部見てもらいたいし、あれもこれもとなりますが、明確に扱いの差ををつけないと、ユーザーは困惑し、離脱してしまいます。

4は3の一環ですが、写真素材や必要なグラフィックの用意と、想定している機能が技術的に／予算的に可能かという部分です。写真やグラフィックはサイトによってはその質が、サイトイメージやユーザーの購買意欲の向上に非常に大事な要素になります。物販サイトの場合等、プロカメラマンによる撮影が安い投資となる事も多く、弊社では重要視している部分です。また、機能の技術的な問題に関しては、この時点で解消しておくべきです。コーディングしてから、これは大変だ。無理だ。というのでは影響が大きいため、想定している機能の実現方法は確認しておくべきです。

5そしてコーディングです。ここまでしっかりと手順を踏めば、やるべき事が明確な上後戻りや、デザインの右往左往が少なく、短時間で終わります。

-----------------------------------------

読んで頂いた通り、WEBプロデュースは普通の制作と似ていますが、実際には大きく異なります。制作費用の見積もりを出すまでに大半の仕事が終わってる様な物ですので、普通の制作会社はやりません。ですから、本気で弊社と共に成功を歩もうと考えて下さる方からしか、受注できないのです。

また、WEBサイトの制作費、リニューアル費の相場？にも書いた様に、制作費用の御見積もりというものは、弊社にとっては「形式」でしかなく、「その金額でお客様のビジネスを成功に導く」というのが、本筋であり、弊社の仕事と考えております。