UI/UX・webデザイン・グラフィックデザイン・ライフハック・家事時短

Web制作-STEP3:ワイヤーフレームの制作方法

あや

今回はワイヤーフレームについて。ワイヤーフレームはWeb制作の骨組みを作る重要な作業。この製作法補についてご紹介します。
初心者の方向けの記事です!

まめまる

Web制作の流れ

情報を整理しサイトマップを作る

まず初めにWebサイトに掲載する内容を整理します。クライアントさんにもよりますが『構成から決めて欲しい』と言われることもあるので、自分なりにページ構成の提案パターン用意しておくのがいいと思います。

『Web制作:初回打ち合わせで聞いておきたい5つのポイント』の記事でも書きましたが、サイト制作の目的を踏まえた上で情報を整理していきます。

サイトに載せたい情報を洗い出した上で、カテゴリーごとにまとめていき、サイトマップを作っていきます。

サイトマップとは
サイトマップとは、「ページ構成図」とか「サイト構成図」とも呼ばれます。どんなページがあるのか、またそのページ同士がどうつながっているのかを表す図のことです。

サイトマップの一例

あや

サイトマップは、Webサイトのボリュームを把握するためにも使うので、見積もりと一緒に制作して提出することも多いよ

手書きでワイヤーフレームを書いてみる

ページの構成がきまったら、続いて各ページにどんな内容を記載していくのかを決めていきます。初めは手書きでおおよそのレイアウトを組むと全体のバランスがとれるのでおすすめです。

裏紙でもメモ帳でも手帳でもなんでもいいのですが、紙に書いておくと管理が面倒なので、最近はiPad+Applepencilを使っています。

手書きアプリとしては以下がとても使いやすいので、少し脱線しますがご紹介

参考 NoteshelfアプリAppstore

Noteshelfというアプリはメモアプリで1,220円(2020年8月現在)するのですが、とっってもおすすめです。ペンの種類や紙のテンプレートも豊富で、なによりとても書きやすい。

pdfやpng形式で保存も可能なので、pdfデータをNoteshelfで読み込んで、赤字を入れることも可能。。と、かなり脱線してしまいましたので、このアプリについてはまた別記事で…

手書きで大まかなレイアウトを決める

どこに文章が入り、どこに写真が入るか、大雑把にレイアウトを決めていきます。ボタンの装飾やフォントなど詳細のデザイン部分はデザインカンプで制作するので全て後回し。内容がざっくりイメージできる程度に留めておきます。


ソフトを使ってワイヤーフレームデータを整える

続いて、手書きで書いたデータをデザインソフトで整えていきます。手書きのままのクライアントさんに提出するデザイナーもいるのでここは人それぞれ。自分にあったやり方でいいと思います。

私がワイヤーフレームもデータ化している理由は以下の通り。

  • 修正がしやすい
  • 共有しやすい
  • そのままデザインカンプに移行しやすい

ソフトは『cacoo』『powepoint』『illustrator』『XD』『photoshop』などを使っている人が多いと思います。

以前はillustatorを使ってワイヤーフレームを使っていましたが、最近はXDで作っています。

こんな感じ▼

XDを使ったワイヤーフレームの一例

まとめ

情報を整理し、手書きでレイアウトイメージを掴んで、データに落とし込む。これがワイヤーフレーム制作の流れになります。

ワイヤーフレームで大体のwebサイトの構成がきまるのでとても重要な工程です。

数をこなしていくとすぐにかけるようになるので、ぜひいろいろ試してみてください!