【WebサイトリニューアルレポートVol.02】原稿とワイヤーフレーム（WF）の作成

前回の内容を踏まえ、原稿（各ページに掲載するテキスト）とサイトマップ、ワイヤーフレーム（WF）を作成しました。

サイトマップはこんな感じになりました。

Webデザイン事務所としてはオーソドックスな構成だと思います。

各ページの内容

各ページの内容は以下のような感じ。

ぱっと見（1〜2秒くらい）で何のサイトか分かるようにしたいので、ファーストビュー（FV）には事業内容を的確に表現したキャッチコピーを配置します。

FV直下にはコンセプトとして、うちが得意なことを粒立てて掲載します。

どんな人間がやっている事務所か分からないと話を聞いてもらえないので、自分のこれまでの経歴をまとめたコンテンツを先頭に、その下に職務経歴を設置します。
職務経歴は普段使っているキャリアシートの内容を流用予定。

その下に、第三者からどのような評価を受けているのかを示すため、クライアントにいただいた声を掲載します。

最後にミッションとして、事業を通して実現したいこと・目標などを書きます。
ここに共感してもらえれば、単なる業者と顧客の関係を越えたつながりに出会えることも期待できます。

このページからランディングしたユーザーに向けて、ページタイトル直下にはコンセプト（トップページのものと同じ）を掲載。

その後は制作の流れ、対応可能業務、よくある質問など、ユーザーの疑問に先回りして回答するコンテンツを用意します。

過去の案件情報をまとめたページ。
ユーザーがうちに依頼した場合に、どんな課題をどのように解決してくれるのかをイメージできるよう、案件の概要や課題・施策内容などを簡潔にまとめる。
あとは協業してくれるフリーランスさんの露出がちょっとでも増えるよう、クレジット的なものを記載。

お問い合わせページは導線のゴールとしたいので、極力ほかのページへのリンクを排除する。

以上を踏まえてワイヤーフレーム（WF）を作成しました。

WFとはサイトの情報を設計するためのもので、以下のようなことを確認するために作成します。

なお、WFを作る際のコツは、ビジュアルデザインは一旦排除して考えることです。

イラストやアイコン、画像素材を入れながらWFを作成してしまうと、肝心の情報設計が疎かになってしまいます。

この段階ではサイトの骨組みとなる情報をしっかり設計することが重要なので、シンプルな形状とカラーを使って作る方が、結果としてサイトの品質を高めることにつながります。

原稿を推敲しWFに当てはめてバランスを見ます。
テキストのボリュームを踏まえてレイアウトや見せ方を検討し、ビジュアルデザインに進みます。