Tips: デザインの共通化によるWebサイト構築の省力化

Webサイトのリニューアルやコンテンツの追加では、多くのページの作成と、それに伴うデザイン作業が発生します。今回は、そんなWebサイト構築時のデザイン共通化の効用をご紹介します。

 

Webサイト構築で用いられる手法として、「ワイヤーフレーム」の活用があります。「ワイヤーフレーム」とは、いわばWebページの下書きのようなものです。1ページ1ページデザインをする前に、輪郭線（ワイヤーフレーム）のみのラフスケッチを作り、構成要素の検討や、文章・図表のレイアウトを決めていくことから、こう呼ばれています。

 

このワイヤーフレームを活用して、Webサイト構築を省力化しようというのが、今回のテーマです。

 

今回の手法の活用に先立ち、サイトの中でキャンペーンページのように演出デザインを凝るページと、商品紹介のように、大量に同じ項目を掲載する、あるいは同じレイアウトが流用できるページを区別して洗い出しておきます。

 

そのうえで、同じレイアウトが流用できるページについては、ワイヤーフレームを"ラフスケッチ"とせずに、文章レイアウトやボタンなどのページ構成要素を詳細に盛り込んで、そのままHTMLに使える程度まで具体化・精緻化します。

こうしてワイヤーフレームの段階で共通化を図った上で、テキストや写真などの各ページの情報を流し込み、Webページのデザイン・制作に取り掛かるのです。

 

制作する上でのメリットは、1ページ1ページデザイン確認をする必要が無くなる点にあります。つまり1ページ1ページPSDでデザインデータを起こす必要が無くなるため、デザイナーのスケジュールを空けることが可能です。

 

またコーディングに関しても、デザインを共通化した全てのページを共通の文書構造でコーディングします。よって1ページ1ページ一からコーディングする必要がなくなり、コーダーのスケジュールを空けることもできます。

 

これは社内でWebページを制作する場合だけでなく、外部業者に制作を委託する場合にもメリットがあります。先ほどの制作上のメリットにより、スケジュール、コストの大幅なカットが可能になるのです。

（もちろん、ページの共通化について外部業者あるいは発注企業側がしっかりとコーディネートできることが前提です）

 

一方のデメリットとしては、デザインが画一的になる可能性があり、しっかりと見せたいページが目立たない恐れがあります。しかし、この点は目立たせたいページを切り分けた上で別途デザインすれば対策は可能になります。

 

つまり使い方が重要であり、かけるべきところにコストをかけ、かけなくてもいいところにはコストをかけない、Web制作する上で非常に正しい構築法と考えられます。

 

今回のTipsのポイントをおさらいしておきましょう

●デザインを共通化するページ、しないページを事前にしっかり決めておく

●事前に関係者に説明をして、デザイン共通化の趣旨を理解してもらう

●ワイヤーフレームの構成に基づいてHTMLを作成するため、予め精度が高いものを作る

 

この手法は、大規模なWebサイトリニューアルで活用し、スケジュールの短縮などに大きな成果を上げています。

（土井）