ELEMENT, INC.

Webデザインをする上でワイヤーフレームはデザイナーにとって欠かせないものです。ワイヤーフレームがなければ、クライアントが納得するようなデザインを作成することはできません。

Webデザイン初心者にとってワイヤーフレームはどう作成すれば良いのか、どのように活用すれば良いのか分かりにくいものです。今回はワイヤーフレームとは何か、また、活用法や作成方法についてご紹介していきたいと思います。

ワイヤーフレームとは

ワイヤーフレームとはWebサイトやランディングページがデザインがされていない、骨組みの状態で書かれた設計図のようなものです。文字などの簡単な情報は書かれており、Webサイトの構成を一目で分かるように作られているのが特徴です。

いわゆるデザインの下書きのようなものです。下書きだからと言って、簡素に作られているわけではなく、しっかりと誰が見てもWebサイトがイメージできるように作られています。

ワイヤーフレームの作成方法

ワイヤーフレームの作成方法について説明をします。ワイヤーフレームの作成の手順はWebデザイン初心者にとって、少し分かりにくいものなので、順を追って解説をしていきます。

Webサイトの情報をピックアップ

最初にやるべきことは、Webサイトに載せる情報をピックアップすることです。ワイヤーフレームをいきなり作成することはできません。必要な情報を紙やパソコン、スマホのメモ帳に書き出してみましょう。

例えば、あるアパレルショップのWebサイトの情報をここで挙げてみます。

・ショップ名
・ショップの理念
・服のカテゴリー
・商品内容
・営業時間
・連絡先や住所
・お問い合わせ

今回は簡単に挙げてみましたが、本当はもっと細かく考えて情報を洗い出していきます。

マインドマップを作成する

Webサイトの情報を挙げ、整理することができたらマインドマップを作成していきましょう。マインドマップとは、直訳すると「思考の地図」です。あるテーマをもとに、そのテーマに関連するキーワードや情報を派生させ、つなげることで言葉の地図のようなものができます。

このマインドマップをWebサイトのデザインでも活用していきます。

メインとなるページはトップページになりますので、そこから他のページをつなげていきます。マインドマップを作成する上で重要なポイントはユーザーがどのようにサイトを巡回するか考えることです。

闇雲にページを配置するのではなく、どのようにすれば見やすく使いやすいサイトになるか考えることです。Web上にあるサイトの構成はユーザーが使いやすく、見やすいように設計されています。

見せたいページに巡回するように設計されている場合もあり、工夫がたくさん施されています。

ワイヤーフレームのレイアウトを考える

マインドマップが作成できたら、実際にワイヤーフレームを作成していきましょう。作成する上で、まず必要な作業はレイアウトです。レイアウトには様々な種類があります。

Webサイトのテーマやクライアントの要望から適切なレイアウトを考えなければいけません。レイアウトには代表的なものに、以下の4つのものがあります。

・マルチカラム
・シングル
・フルスクリーン
・タイル

Webサイトを作成する時にどのレイアウトにするかは、テーマや内容、ユーザーの使いやすさや見やすさから考えていきましょう。

ワイヤーフレームの清書

レイアウトが決まったら、PhotoshopやIllsutratorなどのソフトを使って、清書を書いていきましょう。清書をする時はクライアントも実際に見るので、サイトに必要な情報や文章は全て載せておきましょう。

装飾がないWebサイトを作成するイメージになります。

ワイヤーフレームの活用方法

ワイヤーフレームはただの設計図としての役割だけでなく、様々な活用法があります。基本的な活用法から応用まで、Webデザインの初心者から中級者でも使える活用法についいてご紹介をしていきます。

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

ワイヤーフレームはクライアントとの打ち合わせで使うものです。Webデザイナーとクライアントとのサイトのイメージをすり合わせたり、サイトの情報、レイアウト、デザインなどの話し合いで使うことができます。

クライアントの信頼を勝ち取る重要なアイテムなので、しっかりと作成し打ち合わせに持って行きましょう。

レイアウトのストックにする

Webデザイン初心者に言えることですが、自分のデザインをストックすることが大切です。いわゆるテンプレートのようなものです。テンプレートができれば、そこから様々な種類のワイヤーフレームを作成することができます。

ワイヤーフレームのストックがあれば、作成スピードや作業効率もアップするので、とてもオススメです。

デザインの引き出しを増やす

ワイヤーフレームは下書きの作業にはなりますが、デザインの引き出しを増やす作業にもなります。レイアウトの方法から最終的な完成経緯までイメージして作成するので、考えることがたくさんあります。

デザインの経験値を増やす意味でも、ワイヤーフレームはデザインの基礎固めをできる絶好の機会です。まだデザインに慣れていない人はワイヤーフレームから丁寧に作成することが、デザインの引き出しを増やし、スキルアップにつなげることができるようになります。

まとめ

ワイヤーフレームについて、その役割から作成方法、活用方法をご紹介しました。ワイヤーフレームはデザインの作業でもかなり重要な工程であり、クライアントが満足するようなWebサイトを提供するために必要な作業です。

まだあまりワイヤーフレームを理解できていなかったり、活用方法が分からない人はこの記事を参考にしていただければ幸いです。