【初心者必見!】Webデザインで必須のワイヤーフレームを解説

ロードマップ

「Webデザインの勉強をすすめていくと、よく聞くワイヤーフレームってなに?
「サイト制作になんでワイヤーフレームがないといけないのか、わからない…」

Webデザインの勉強中によくワイヤーフレームというワードがでてきますが、ワイヤーフレームがそもそもどうゆうものなのか、なぜ必要なのかよくわからない方も多いと思います…

そこで本記事では以下についてまとめました。

  • Webデザインでワイヤーフレームが必要な理由
  • ワイヤーフレーム作成時に気をつける事とは?
  • Webデザイナ−が実際に使用しているワイヤーフレーム作成方法

この記事をみるだけで、Webデザイナーとして案件を進めていく為にワイヤーフレームが欠かせないということを理解でき、実際に作成する際に必要な知識を得ることができます。

ぜひ最後まで読んでみてください。

ワイヤーフレームとは?

Designed by Creativeart / Freepik

Webサイトを制作するにはデザインを作成する以外にもいろいろとすることがあります。

イラストやデザインを作成していくのにもぶっつけ本番で作成する人は殆どいないと思います。

デザインを作成するのに欠かせないワイヤーフレームを理解していきましょう。

  • ワイヤーフレームとは
  • ワイヤーフレームは誰が作成するの?

ワイヤーフレームとは

ワイヤーフレーム(wireframe)とは、Webページのどこに、何の項目をどのように配置するか、レイアウトを定める設計図のことです。

ワイヤーフレームはシンプルな線や図で構成されていることがほとんどです。

デザインの下書きだと思うとわかりやすいとおもいます。

ワイヤーフレームは誰が作成するの?

では、ワイヤフレームは誰が作成するのが一般的なのでしょうか?

会社やチームですと一般的にはWebディレクター主導で行う場合が多いです。

クライアントからのヒアリング内容を元にして必要なコンテンツを組み立てるのは、ディレクターの担当である場合がほとんです。

フリーランスのWebデザイナーの場合は打ち合わせをした自身で作成しています。

働き方によって担当する人が違くなってきます。

Webデザインでワイヤーフレームを作成する理由

Designed by Creativeart / Freepik

ワイヤーフレームとは何なのか、Webデザイン作成には必ずあるものなのはわかったけれど、そもそもなんで必要なのか、わかっていない方も多いと思いますので、もう少し深く以下で理由を説明していきます。

  • Webサイト制作のレイアウトを決めるため
  • 製作者で共有するため

Webサイト制作のレイアウトを決めるため

ワイヤーフレームを作成する第一の目的は、Webサイトのレイアウトを決めることです。

Webサイト制作をする際に、まずは入れたいコンテンツをリストアップし、ワイヤーフレームを用いてレイアウトを組み立てていきます。

これをしていくことで、足りないコンテンツはないか、見やすい動線になっているかなどを把握しユーザーにとって、見やすいサイトを作成することができます。

製作者で共有するため

Webサイトを作成するには、ディレクター、ライター、デザイナー、コーダーなど複数の制作者がいる場合も多いです。

クライアント側の意向やサイトのレイアウトに入れ込む機能、多数の人ですり合わせた内容を皆で共有するためにも、ワイヤーフレームは役に立ちます。

ワイヤーフレームで情報を共有することで、追加修正や認識ズレなどのトラブルの予防に繋がります。

ワイヤーフレーム作成時の注意点

Designed by Creativeart / Freepik

実際にワイヤーフレームを作成する際に注意していることをピックアップしてみました!

はじめてワイヤーフレームを作成する方はまず、この4点を取り入れて作成してみると良いとおもいます。

  1. 作成ページを決める
  2. 2パターン作成
  3. ワイヤーフレームを作り込みすぎない
  4. 迷ったら競合サイトを参考にする

作成ページを決める

Webサイト制作となるとトップページと、会社情報、実績情報などがのっている、下層ページが数ページになってくるとおもいます。

下層ページはデザインに統一をもたせることがほとんどなので、トップページ1ページと下層ページ1ページ、2ページ分のワイヤーフレームを作成することが多いです。

2パターン作成

スマートフォン版とパソコン版の2パターンのワイヤーフレームを作成するのが良いです!

スマートフォン版はパソコン版に比べて画面の横幅が狭くなるためレイアウトの変更が必要になってきます。

パソコン版のみの作成だと、スマートフォンで読み込んだ際にレイアウトが崩れてしまい、ユーザーに「見づらい」「ページが壊れている」といった印象を与えてしまいます。

ワイヤーフレームを作り込みすぎない

ワイヤーフレームはあくまでレイアウトを決定するためのもので、下書きのようなものです。

ワイヤーフレームの段階で中途半端にロゴや文字の大きさ、用いる写真などを決定してしまうと、その後のデザイナーの仕事の幅を狭めてしまうことになります。(クライアントの意向ですでに、決定しているものは入れるとわかりやすいです。)

迷ったら競合サイトを参考にして作成

いきなりワイヤーフレームを作成しようとしても、どんなレイアウトにすればいいか悩みますよね…

以前の記事で紹介したPinterest【Webデザイナーへの第一歩!Photoshopでバナー作成をしてみよう!手順を解説】を使って、競合サイトのコンテンツや配置、見せ方を参考にワイヤーフレームを作成していくのがおすすめです。

Webデザイナーが実際に使用している、ワイヤーフレーム作成ツール

Designed by Creativeart / Freepik

ワイヤーフレームを作成する際に使用するツールは数多くあります。

よく使用されているツールとおすすめのツールを紹介していきます!

  • Googleスライド
  • figma
  • AdobeXD
  • おすすめのツールは?

Googleスライド

Googleスライドは無料のツールでパワーポイントの操作感と似ています。

オンラインでリアルタイムの共同編集が可能で、スマートフォンやダブレットからでも作業しやすいので使用している方も多いです。

しかし、較的シンプルな構成のワイヤーフレームにしか対応できないというデメリットがあります。

figma

figmaは無料で使用できるツールです。

オンラインでリアルタイムの共同編集が可能ですが無料プランだと色々と制限があり、編集人数を増やしたりする際には有料にする必要があります。

又、figmaは英語表記になるので日本語化するにはChromeの拡張機能を入れたりと少し手間がかかります。

Webに詳しくないクライアントに共有する際には不便になってしまうかもしれません。

Adobe XD

ワイヤーフレームの作成だけではなく、UI/UXデザイン、プロトタイプ作成、共同編集までこれ1つで完結できるツールです。

Webに詳しくないクライアントでも、PhotoshopやIllustratorの名前は聞いたことある方がほとんどだとおもいます。

同じAdobeから出ているXDは名前だけでも聞いたことあるかもと安心感をもってもらえます。

デメリットとしては単体プランで1,298円(税込)/月額料金がかかってしまうことです。

おすすめのツールは?

結論から言うと…おすすめなのはAdobeXDです!!

  • Webに詳しくないクライアントでも安心
  • 共同編集可能
  • ワイヤーフレーム作成からデザイナー、コーダーまで共有がしやすい

以上の点から、有料というデメリットを踏まえてもAdobeXDをおすすめします。

もちろん人によって使いやすさ使いにくさあると思いますが、Webデザイナーを目指していて、PhotoshopやIllustratorを使用できる人であれば公式チュートリアルを見ればすぐに使えるようになります。

ワイヤーフレーム作成例

上の画像は手書きのワイヤーフレームです。

実際にAdobeXDで作成したワイヤーフレームの例をご紹介します!

手書きで作成したワイヤーフレームとAdobeXDで作成したワイヤーフレームの違いをみて、クライアントによって作り込み具合を変えていくと良いと思います。

AdobeXDで作成したワイヤーフレーム

左側がワイヤーフレームで、右側にはクライアントに伝わりやすいように参考サイトのイメージ画像を置いています。

今回はテキストや画像が一部決まっていたので内容が伝わりやすいように、ワイヤーフレーム内にすでに配置してあるものが多くWebに慣れていないクライアントにもわかりやすい、伝わりやすいように設計してあるワイヤーフレームとなっています。

ワイヤーフレームで内容が固まったら、実際に色をつけてデザインを作成していきます。

まとめ|【初心者必見!】Webデザインで必須のワイヤーフレームを解説

本記事では【初心者必見!】Webデザインで必須のワイヤーフレームを解説について以下の内容をご紹介しました。

  • ワイヤーフレームとは?
  • Webデザインでワイヤーフレームを作成する理由
  • ワイヤーフレーム作成時の注意点
  • Webデザイナーが実際に使用している、ワイヤーフレーム作成ツール
  • AdobeXDで作成したワイヤーフレーム

いかがでしたでしょうか?

Webデザイナーとして活躍していくためには、ワイヤーフレームが欠かせないということを理解でき、実際に作成する際に必要な知識を得ることができたと思います。

Webデザイナーとして活躍していくために、一歩ずつ進んでいきましょう!

コメント

タイトルとURLをコピーしました