WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

WEBサイトをデザインするまでに行うサイト設計とワイヤーフレーム

サイト設計の手順

HTMLとCSSの基本が理解できたら次はWEBサイトはどのような手順で制作されているかを覚えましょう。まずはクライアントとどのようなWEBサイトを制作するのかの打ち合わせを行いページ内容を決めます。その後WEBサイトの骨組みであるワイヤーフレームを制作し、Photoshopで本格的なデザイン作業に入ります。

この作業は主にWEBプロデューサーやWEBディレクターの仕事になりますが、WEBデザイナーを目指す人もWEB制作の全体像を把握することで、作業を円滑にすることが可能になります。特に未経験者でWEBデザイナーを目指す方はポートフォリオで仮のサイトを制作して技術をアピールしなければいけませんので、一連の流れを覚えましょう。

WEBサイト制作

デザイナーLevel:2 「アルバイト採用レベルのWEBデザイナー」目次

WEBサイトの内容をクライアントと打ち合わせる

クライアントとの打ち合わせ

担当

WEBサイトを作るときにはクライアントの課題の抽出からスタートします。
分かりやすいようにクライアントを料理宿「和亭」という仮のものにします。
まずは現状の問題点と、どのように改善していきたいのかのヒアリングを行い最適なコンテンツ設計を行います。

WEBサイトを作る上で必要な要素を集める

会社名はもちろんですが、競合他社とくらべてどのポジションにいるのか。集客が目的ならば売上が伸びない理由の掘り起こしを行います。

サイトが達成するべき目標に対して行うこと

WEBサイトで解決できるものを探す

問題の掘り起こしが終わったら、WEBサイトを制作し解決するべき問題をまとめていきます。ヒアリングを元に競合他社に勝てる部分を全面に押し出し、弱い部分を補うのが基本的な考え方です。ジャンルによっては強みのみを押し出した一点突破という戦略もあります。

これは競合他社のWEBサイトを徹底的に分析し、そんなで売上を上げるために必要な手段として考えます。例えば老舗旅館であればターゲットを富裕層の30歳以上に絞り込んだ高級感のあるWEBサイトの構築というもの有効な手段です。

個人客を料理の魅力で予約につなげることで、売上を上げると同時にリピーターを増やしていくという戦略を取ります。
それを実現するためのサイト設計をWEBディレクターが行いWEBデザイナーはデザイン作業をすることになります。

作るべきページを決める

目的を達成するためにWEBサイトにはどにょうなページが必要かを決めます。旅館「和亭」のトップページは競合他社に勝てる料理を全面に押し出します。お客様の声のページも作成して料理に関する感想を集めて説得力を増す戦略です。また旅館としてユーザーに最低限使えなければならない客室や館内施設のページ作成も行います。

ディレクトリマップとサイトマップの制作

担当

いきなりPhotoshopでデザインを始めたり、HTMLを書いたりはしません。
イメージだけでサイトデザインを開始して、後々メニューを数個追加するといったことになると、ナビゲーションメニューの作りなおしになってしましますよね。
このような二度手間が起きないように、必要な要件だけは確定させてからWEBデザイン案を作ります。

どのようなページをどのように作るのかの設計書、これがディレクトリマップとサイトマップです。

ディレクトリマップ

ディレクトリマップの作成

Excelファイルのダウンロード

ディレクトリマップは多くの人に見てもらい、コメントや修正をもらうことがあるためExcelで作れるようになると便利です。WEBサイトをチームで作るときはWEBディレクターがディレクトリマップを作成し、ページタイトルをSEO担当者が行うなどの分業があるからです。

サイトマップ作成

ディレクトリマップを視覚的にわかりやすくしたものがサイトマップです。ユーザーが使用しやすい導線が作られているのかがわかりやすく、UX(ユーザー体験)IA(インフォメーションアーキテクチャ)の情報設計でよく使われます。

Illustratorでサイトマップを作る

Illustratorでサイトマップを作る

サイトマップダウンロード(illlustrator)

WEBデザイナーを目指す未経験の方は勉強の一環としてIllustratorでサイトマップを作ってみてはいかがでしょうか。Adobe Creative Cloudのコンプリートプランに同梱されていますし、扱いに慣れておくとDTP作業をするときに混乱せずにすみます。

無料WEBサービスでサイトマップを作る

無料のWEBサービスCaccoでサイトマップを書く

サイトマップを作るWEBサービスはCaccoが使いやすくWEB開発の現場で多く使われています。WEBディレクターなど、実際にデザイン作業をすることがない人でも直感的に操作ができます。テンプレートにサイトマップがありますので、それを流用すれば作業時間の短縮になります。

Cacco

ワイヤーフレームの制作

ワイヤーフレーム

担当

どのページを制作するかをディレクトリマップ・サイトマップで確定させた段階で、デザイン作業に入ります。最初に作るのはワイヤーフレーム(WF)と呼ばれる枠組みだけで作るレイアウト案です。おすすめなのはロディアのメモ帳をボールペンで書いていく手法。

ロディアの方眼のメモ帳はWEBデザインの基本であるグリッドデザインと同じためレイアウトがキレイに書きやすいこと。消せないボールペンを使用することで書き直しがおきないため大量のレイアウト案を出すことができることの2つが理由です。

最初にトップページのワイヤーから書いていくのが基本です。ボタンの数やバナーサイズ感などを入れていきます。ディレクターが細かく仕様を決めすぎてしますとデザイナーが仕事をしにくくなるので、あくまで枠組みです。

思いついた要素をどんどん書いていき、ユーザーの使いやすいレイアウトになるまで何度でも繰り返します。

ワイヤーフレームの清書

担当

ワイヤーフレームの清書

ワイヤーフレームのダウンロード(Illustrator)

デザイン作業に入るための指示書であるワイヤーフレームを清書します。ナビゲーションや写真の数を指定するものでデザインに関して指示を出すものではないことに注意してください。これを元にWEBデザイナーはデザイン作業を行います。

ワイヤーフレームはWEBサイトの制作の基本

クライアントとの打ち合わせやディレクトリマップの制作はデザインの現場に入るとWEBデザイナーが行うことは少なくなります。しかしワイヤーフレームだけはどの現場でもWEBデザイナーが携わります。WEBデザイナーが書くことがなくても、書いた経験があることでWEBディレクターがどのようなことをやってほしいのかの意図を汲み取ることができるようになります。

WEBデザインをこれから始めるひとはまず、どのようなWEBサイトをつくるかをサイトマップで作り、ワイヤーフレームを書くことからはじめましょう。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST