Webディレクターになるには

本当に活躍しているWebディレクターだけが知っているメソッドを紹介

当サイト管理人&インタビュアー Webディレクター 福田 祐太郎
当サイト管理人&インタビュアー
Webディレクター 福田 祐太郎

ワイヤーフレーム

Webサイト制作のプロセスで必要となるワイヤーフレーム。このワイヤーフレームを作成するのは、一般的にWebディレクターです。ワイヤーフレームの目的や具体的な作成方法をまとめたので、ぜひチェックしておいてください。

ワイヤーフレームとは?

ワイヤーフレームとは、サイト全体の構成を記載した「設計図」。制作するWebサイトのバナー・テキスト・メニューといった要素を、どこにどう配置するかをシンプルな線だけで表します。スタッフやクライアントとの認識を合わせるために利用するもので、どのようなプロジェクトでも作成するのが基本です。

Webディレクターはクライアントと打ち合わせを行い、その内容を整理してワイヤーフレームを作成するのが仕事。あくまでも簡単な設計図ではありますが、スムーズにプロジェクトを進めるためにもしっかりと作成を行いたいものです。

なぜワイヤーフレームが必要?

「ワイヤーフレームなんて作らない」などというWebディレクターもいるようですが、スムーズに作業を進めるためにも必ず作るべき!その理由を紹介します。

イメージの共有

Webサイト制作には、クライアントをはじめ多数のスタッフが携わります。その関係者すべてとサイトの完成イメージを共有するのに、ワイヤーフレームは重要な役割を果たすのです。

ワイヤーフレームは簡単な図ではありますが、サイトの完成イメージをビジュアルで確認できます。言葉だけの打ち合わせだとイメージの認識がすれ違い、デザイン案のチェック時に「サイドバーは左の方がいい」「コンテンツを増やして欲しい」といった要望がクライアントから出るなどで、急な修正に追われることがあります。

チームプレーが円滑になる

サイト制作にはスタッフ間のディスカッションが欠かせませんが、このときにもワイヤーフレームがあると便利です。図を見ながら具体的な作業内容を確認できるため、「誰がどの作業を担当するか」などが明確になり、チームプレーが円滑に。ムダな作業や修正を減らすことにもつながり、コストも抑えられます。また、サイトの要素を可視化できるため、入れるべきコンテンツや機能が抜けていた…などというトラブルの防止にも役立ちます。

ワイヤーフレームの作り方

Webディレクターとして押さえておきたい、一般的なワイヤーフレームの作り方を解説します。

構成要素の洗い出し

まず、Webサイトに掲載したい要素を洗い出します。サイトによって内容は異なりますが、基本的にはロゴ・メインビジュアル・告知バナー・新着記事・問い合わせボタンなどです。何を掲載したいかはクライアントからの要望も加味する必要があるので、ヒアリング時にしっかりと聞き取りをしましょう。

レイアウトを考える

レイアウトとは、画面を分割して要素の配置を決めることです。まず構成要素を洗い出したら、それぞれに優先順位をつけます。次に優先順位を基準とし、サイトの目的や使い道を考慮しながら適切なレイアウトを決定します。

下書きをする

紙と鉛筆を使い、サイトのレイアウトを図に起こします。下書きができたら、ユーザーの目線で情報の掲載場所が適切か、見やすいかどうかをチェック。書いたり消したりを繰り返し、理想のレイアウトを目指しましょう。

ツールを使って完成させる

ワイヤーフレームを下書きしたら、ツールを使って清書します。ツールにはオンラインツールとオフラインツールがありますが、スタッフ間だけでなくクライアントとも共有しやすい形で作成しましょう。また、PC用だけでなくスマホ用のレイアウトも同時に考えておくと後々便利です。

ワイヤーフレームが作れるツール

ワイヤーフレームを作成するにあたっては、これから紹介するようなツールが役立ちます。操作性や共有性の高さなどから、プロジェクトに合ったものを選んでみましょう。

パワーポイント・エクセルなどMicrosoft Officeソフト

馴染み深いMicrosoft Officeのパワーポイントやエクセルは、実はワイヤーフレーム作成に役立つツールです。
会社から支給されるPCにあらかじめインストールされていることも多いため、新たなソフトのインストールや追加費用を申請することなく、すぐに使えるのが最大のメリットといえるでしょう。

普段から使い慣れている方も多いため、新たな操作法を覚えずに扱えるのもうれしいポイントでしょう。
四角や三角、直線など基本的には簡単な図形で構成されるワイヤーフレームですから、パワーポイントやエクセルで充分作成できるはずです。ただし編集はひとりずつしかできないことを覚えておきましょう。

Adobe XD

Adobe社が提供するAdobe XDは、ワイヤーフレームやデザイン作成を行うことに特化したツールです。
オンラインで共有できるため、確認時に気になったことがあれば作成者にコメントを残したり、自ら編集したりすることも。(編集はAdobe XDがインストールされているPCでのみ可能です)

日頃からパワーポイントを使っている方であれば、操作性にもすぐ慣れるでしょう。利用するにあたっては無料のスタータープランがあるため、まずは無料で試してみたいという方にもおすすめです。

Cacoo

Cacooもワイヤーフレームやサイトマップ作成に特化したツールです。
クラウド型ツールなのでソフトのインストールは不要。インターネット接続環境とブラウザが使えるPCであればワイヤーフレームの確認や編集ができるのも、大きなメリットといえるでしょう。

無料のフリープランでは図の作成枚数が6シートまで、アップロード可能なファイルサイズは500MBまでといった制限がありますが、発行したURLで無制限にワイヤーフレームを共有することができます。
メニュー配置などが分かりやすく、直感的な操作ができるので、初心者にも使いやすいでしょう。

Sketch

利用しているOS環境がMacなら、Sketchの利用を検討してみてはいかがでしょうか。Mac以外のOSでは使えませんが、こちらも機能がシンプルで使いやすいツールです。

また、利用にあたってはまず30日間の無料期間を経て、その後は年間99ドルの利用料を支払う必要があります。
まずは一度試してみたいというときに、無料期間のあるツールは役立ちますよね。

アプリをスマホにインストールすれば、スマホからの実機確認も可能に。実際にスマホでどう表示されるか気になるときに、実機で確認できる機能があるのは安心でしょう。

ワイヤーフレーム作成のポイントと注意点

ワイヤーフレームを作成する際に、注意したいポイントをまとめました。

ワイヤーフレームにデザインを入れない

ワイヤーフレームとは、サイトに必要な要素をどこに配置するかを示すもの。そのため、余計な色やデザインは入れず、モノクロでデザインするのが基本です。色やデザインを入れてしまうと、そちらのイメージの方が強くなり、サイト設計という本来の目的から逸脱しやすくなるからです。とくにWeb制作の知識が少ないクライアントは「デザイン案」のように思えてしまうという傾向があるため、ごくシンプルなデザインを心がけましょう。

テキストの文字数を想定しておく

ワイヤーフレームには、テキストの最大文字数・最小文字数を想定し、ダミーテキストを入れておくことをおすすめします。どのくらいのテキスト量を想定しているのかを考慮しておかないと、実際にテキストを入れたときにデザイン崩れが起こる可能性があります。画像を挿入する予定の場所にも、ダミー画像を入れておきましょう。

レイアウトについて説明できるようにする

ワイヤーフレームは、サイトの設計を視覚的に表したもの。しかし、ただ単に要素をキレイに並べただけのものではいけません。なぜこのメニューバーをこの位置に置いたのか、なぜこの機能をプラスしようとしたのかといった意図を、クライアントやスタッフにしっかり説明できるものを作成しましょう。明確な理由があってはじめて、そのワイヤーフレームの良し悪しについて議論できるようになります。

ワイヤーフレーム作成はWeb制作のポイント!

Web制作のポイントともなるワイヤーフレーム作成。慣れてくるとつい簡単に作ってしまいがちですが、できる限りのブラッシュアップを重ね、Webデザイナーの意図をしっかりと伝えられるワイヤーフレームを作成することが大切です。

このワイヤーフレームがきちんとできていれば、クライアントやスタッフとの意思疎通がスムーズになりますし、打ち合わせや作業量の節約にもつながります。目的を良く理解し、適切なワイヤーフレームを作れるようにしましょう。

全研本社の考える「ワイヤーフレーム」とは?

文字ベースで起こしたサイトの戦略をいざデザインにするときの設計図となる、ワイヤーフレーム。

構成案までが戦略なら、ワイヤーフレームは実際にユーザーに「いいな♪」と思わせるための戦術になりますので、ワイヤーフレームは非常に大切になります。

自分の考えた戦略が正しいのか?そのためにはどのような場所にボタンが必要?テキストの文字量はどのくらい?といったことを構成と照らし合わせて推敲します。

ユーザーが読みやすくて納得してくれるサイトを考える上での重要なポイントになりますし、自分の考えの整理にもなります。

Webディレクターになるには
【Dir-LABOディレらぼ】