Webサイト制作の4ステップ

Webサイト制作の4ステップ – STEP2. 情報設計 –

こんにちは!ブダペスト在住Webデザイナーのみほこです。

今回はWebサイト制作のステップについて、4回に分けて簡単に説明してみたいと思います。
サイト制作を依頼したら実際どのように進んでいくのか?をイメージしやすくなっていただければと思います。

なお、当事務所では、やり取りは基本的に全てオンラインで行っております。

今日はSTEP2. 情報設計!

情報設計ってなんぞや?という方も多いと思います。
Webサイトにおける情報設計とは、サイトに訪れた人が情報を見やすいように、目的を達成できるようにするための構造を設計することです。
いわゆる整理整頓ですね。

実際に行う作業は下記になります。

1. サイトに掲載したい内容を洗い出す
2. どのようなページを作成するか決める
3. サイトマップを作成する
4. 各ページのワイヤーフレームを作成する

これらは全て、STEP1で決めた、サイトを作成する目的に従って設計されます。

例えば、お問合せがもっと欲しいのであれば、お問合せフォームまでの導線をどうするか、
お問合せをしてもらう前に見てもらいたいコンテンツは何なのか、といったところを考えて設計していくのです。

Webサイトの設計におけるサイトマップとは、このようにページがどのような配置になっていて、どこからどのようにリンクして遷移するかを、俯瞰して見れるもの。こちらを作成することによって、サイトの全体図を把握することができます。

なお、サイトのリニューアルの場合だと、問題点を洗い出すためにまず最初に現状のものを作成してから、新しく設定した目標に見合った構造に改善したものを作成する、といった流れで行うことが多いです。

Webサイト設計時のサイトマップ

ワイヤーフレームとは、掲載したい内容を実際のページにどのようなレイアウトで配置していくか決める作業です。
これは全てのページに対して作成されます。

私が自分自身のサイトをリニューアルする時に作成した実際のワイヤーフレーム。

これを作成することで、実際にページに掲載したときに、どのような順番がいいか、写真はあったほうがいいのかどうか、テキストの長さがどれくらいが適切かなどを決めることができます。

デザインというのはレイアウトありき。デザインのあとでレイアウト変更をしてしまうと、それがページの一部であっても、ものによっては丸々とデザインを変更しないといけない場合も。そういったことを防ぐためにも、ワイヤーフレームは作成しておくべきものです。

さて、こちらでWebサイトにどのような内容で掲載するかが決まってきました。
お次はデザインです。

それでは、また!

オーナー・Webデザイナー・ディレクター・髙田美保子
Writer

- 髙田 美保子

Design studio M. 代表
/Web Designer & Director

Web業界で20年近くにわたり、大手ECや多様な企業のWebディレクションおよびデザインを担当。
現在は、独自の美意識や世界観を大切にするアトリエ、アートスクール、文化系事業者を中心に、Webサイト制作から日々の保守・運用、マーケティング戦略までを一貫してサポートするパートナーとして伴走している。
Free Consultation

メール無料相談

Webサイトやマーケティングの現状について、メールで気軽にご相談いただけます
「今の保守体制や運用が最適かわからない」「リニューアルすべきか迷っている」など、貴社のWeb環境に関する疑問やお悩みをメールでお送りください。
20年の実績を持つWebディレクターがサイトを拝見し、客観的な視点から所見をお返事いたします。
<記入例>
・現在のサイトが運用しづらく困っている。改善方法があれば教えて欲しい。
・何かマーケティング的な施策をやる必要があると思うが、具体的にどこから手をつけていいかわからない。
など

Recentry Articles

  • reaf
問い合わせ

Webサイトから問い合わせが来ないのはなぜ? -原因を「4つの要素」で正しく切り分ける-

オフィス

Webマーケの今・中小企業はどう戦略を組んでいくべきか

AIを使うときは「自己満足」に注意