レイアウト・デザインを確定することの重要性

2023.08.24　Posted by nakai.n

その他

Webサイト制作が理想通りとなるかは、企画～リリースまでの工程において、「構成/レイアウト設計」と「デザイン作成」が重要な要素となります。Webサイト制作における全体的な工程は、次の通りです。

STEP1：企画
STEP2：構成/レイアウト設計
STEP3：デザイン作成
STEP4：実装・開発、コーディング
STEP5：リリース

企画段階では、Webサイトの運営目的やゴール、対象ユーザーを丁寧に決めていきます。その後、構成/レイアウト設計でユーザー体験についてしっかりと考えていきます。そのユーザー体験を実現するために必要なのが、理想を実現するためのデザイン作成となります。

どれだけ理想としてイメージできていても、デザインとして表現できなければ、満足のいくサービスやコンテンツは提供できません。そのため、今回はサイト制作において「構成/レイアウト設計」と「デザイン作成」の仕事を確定することの重要性についてわかりやすく解説していきます。

Webサイトの構成設計

STEP1の企画では、どのようなサイトを作るのか、ターゲットは誰なのか、目的は何なのかを決めていきます。STEP2の構成/レイアウト設計では、企画で得た情報を基にサイトの枠組みを作っていきます。
例えば採用サイトを制作する場合はどういった働き方をしているのか、といったコンテンツが必要ですし、採用応募ボタンが必要でしょう。

サイトの制作目的によってこのSTEPで必要なものは様々ですが、必須のものとしては次の２つのものです。

サイトマップ
ワイヤーフレーム

・サイトマップ：サイトマップとは、Webサイトの構造や階層を示す視覚的な図またはリストのことです。Webサイトのサイトマップは、一般的にはWebページの階層構造を示し、特定のWebページへのリンクや関係性を示すために使用されます。

サイトマップは、ウェブサイトの設計やナビゲーションの計画に役立ち、特定のページに直接移動するための手段を与えることができます。

・ワイヤーフレーム：ワイヤーフレームとは、Webページのレイアウトを決定する設計図のことです。そのため、構成案とも呼ばれます。どのようなコンテンツをどこに配置するのかを決定するために使用されるもので、通常は白黒で画像やイラストは使用しません。

簡単にいえば、ワイヤーフレームとは完成イメージを可視化したものです。家の設計図や間取りと似たものとお考えください。

これら２つは、サイト作りにおいて基礎になる重要な工程で、サイトの設計図となり、ここでしっかり”決定”することが絶対に欠かせません。ここをしっかりと決定していないと、家を建ててから、やっぱりこの部屋を移動したい、増やしたいといったように、あとになって大がかりな工事が必要になってきます。

Webサイトの場合、そうなると制作期間が長びいたり、追加料金が発生する原因となるので注意が必要です

デザイン作成

しっかり基礎となる設計図を決めたら次は、デザインを考案します。デザインは、クライアントにとっても、サイトのユーザーにとってとても大事な一番気になるところです。

STEP1の企画段階時にターゲット層や目的、お好みから”色・雰囲気・希望に近いサイト”などを決めます。それと設計図に沿ってデザイン作成を行います。

まずはTOPページから作成します。それ以外のページ(下層ページ)は、TOPページのデザインを踏襲するため、TOPページのデザインが確定してからのデザインとなります。ここで大事なのがTOPページのデザインを確定させることです。

後からTOPページのデザインが変わると下層ページにも影響が出るため、最初からデザインをやり直しということになります。TOPページのデザインは、時間をかけてもいいので、提出されたデザインをしっかりご確認ください。

気になる点、もっとこうして欲しいというご希望があれば修正点をお伝えください。どのようなデザインにするか迷ってしまう..そんな時もウェブラボではTOPページのデザインを2案作成し、お選びいただくことが可能ですのでご安心ください。デザインのお悩みがございましたら是非ご相談ください。
*ご依頼内容によっては1案のみのご提案となります。