web集客・売上拡大支援ならアクセルパートナーズ

  • 0120-659-057
  • お問合せはこちら

ブログ

【事業者向け】初心者でもできるワイヤーフレームの作り方

  • 2021年03月25日
  • 著者桜井ゆかこ

この記事のまとめ

 

今回は、「【事業者向け】初心者でもできるワイヤーフレームの作り方」について紹介しました。
Webサイトを作る際、デザイナーさんへ頼む前に作成するワイヤフレームをどうやって作ればよいのか、使うツールや流れについて解説しています。

こんにちは!
アクセルパートナーズのスタッフ桜井です。

HPやLP(ランディングページ)などwebの制作の発注を行った際、ワイヤーフレームを求められたり、HPをデザインする前に内容の作成を頼まれたりして困ったことはありませんか?

桜井
桜井
色んなHPやサービスのLPのワイヤフレームを作成しましたが、私も最初は戸惑いました。

今回は、検索してもプロ向けのものばかりで難しい!とお悩みの事業者さんやWeb担当者さんへ、簡単に実践的な作り方をご紹介したいと思います。

実際の作成例もあげていますので、最後までご覧ください!

ワイヤーフレームとは?作成例の画像も登場

ワイヤーフレームの基本情報

そもそもワイヤーフレームとは?

 

ホームページやwebページ、ランディングページなど、サイトのレイアウトやコンテンツの完成イメージを線や枠で表現する設計図のこと

桜井
桜井
当社がデザイナーさんへ送るときのワイヤーフレームは、以下の画像のような感じです。
この例は大枠だけのだいぶアバウトなものです。実際はもっとテキストや情報が詳しく記載された形となっています。
【LP(ランディングページ)のワイヤーフレーム例】
桜井
桜井
では、実際の作り方を詳しく解説していきます!
まずは何を使って作るのかというお話からです。

ワイヤーフレーム作成ツール

ワイヤーフレームを作成するツールは様々ありますが、当社では普段から使い慣れているWord(ワード)Excel(エクセル)で作っています。
ワイヤーフレームは、サイト内コンテンツの配置などがデザイナーさんへ伝わればよいので、枠やテキストが配置できるツールで十分という方針です。

Word(ワード)、Excel(エクセル)の使い分け

文章が多めのときはWordで作成するのがおすすめです。Wordは文字の改行や修正をしやすいというメリットがあります。

一方、コンテンツの配置が重要なときや画像が多そうなときはExcelがおすすめです。Excelは図形などの配置を変えやすいという利点があります。ただし、セル内での文字の扱いに困ることがあるという印象を持っています。

ワイヤーフレームを社内や発注者と受注者間で共同作業したいという場合は、作成したExcelやWordのデータをGoogle スプレッドシートやGoogleドキュメントで開くという方法も可能です。
ただし、それぞれのツールで操作性などが違う部分もあるという点は注意が必要です。

ワイヤーフレームの内容作成の流れ

【重要】ターゲット、キービジュ、価格

ワイヤーフレームを作成する際、特に以下の3点が重要です。

内容作成3つのポイント

 

ターゲットを決める
キービジュアル(メインビジュアル)を作る
価格を書く

「うちのHPに来た人はこんなことに悩んでいるんじゃないか」ということを考えることでターゲットが定まります。
ターゲットの選定には、以下の記事が参考になりますので、気になる方はぜひ読んでみてください。

STP分析で適切なターゲット選定をしよう

キービジュアル(メインビジュアル)は、HPに訪問した人が一番最初に目にする部分です。この部分をパッと見ただけで離脱してしまうユーザーもいるくらいです。

そして超重要なのが価格を書くということです。
自社サイトを作っていて、価格を記載することに抵抗がある事業者さんもいるかもしれません。

例えば、ユーザーとして、何かを購入したくて検索しているときを想像してみてください。価格が載っているサイト、載ってないサイトがあったとして、どれを選択肢にするでしょうか。
購入を検討するとしたら、価格が載っているサイトをいくつか比べて検討するのではないでしょうか。

いくら販売しているサービスや製品の品質が高かったとしても、選択肢にすら入れないというのは非常にもったいないと思います。

ページを作る流れの考え方

冒頭でワイヤーフレームの作成例を出しました。
そこではキービジュの下に「こんなお悩みはありませんか?」が来ています。
検索してきて自社のページへ辿りついた人へ悩みを明確に提示し、その悩みをこのサービスでこういう風に解消できます!と載せることで、「お、この商品気になるな・・・」ということに繋げていくイメージです。

ただ、自社の商品を自分で良いんですよ!とアピールすることは誰でもできます。近年、ユーザーはサイトの情報を基本疑っている傾向があるという話もあります。
そこで、製品やサービスに対する客観的な評価や数字を載せることによって、自社商品のおすすめさを担保するのです。

客観的な評価としては、お客様の声、販売総数、~賞受賞などがあります。
例えば、自社の設備を導入してくれたクライアントの写真や設置写真、そして相手先の会社名などが明確に掲載されているとより信頼性が増します。取引先に掲載してもよいかお願いするのもひとつの有効な手となります。

サイトの配色や画像、フォントの選定に関しては、デザインを専門としているデザイナーさんに任せたほうが効果的なものを作ってもらえます。

ただし、文章中の重要なワードの強調といった装飾の箇所については、文字を太字にしたりコメントを入れたりしてデザイナーさんへその意図を伝えましょう
デザイナーさんはデザインのプロですが、自社の商品のアピールポイントを分かっているのは自社の担当者さんです。

桜井
桜井
冒頭でも登場しましたが、以上を踏まえて作成してみたのが以下のワイヤーフレームです。実際にデザイナーさんに送る際は、文章を詳しく記入していたり、意図が分かるようにコメントを挿入したりなど練ったものを渡します。

まとめ

今回のまとめ

 

今回は、「【事業者向け】初心者でもできるワイヤーフレームの作り方」について紹介しました。
Webサイトを作る際、デザイナーさんへ頼む前に作成するワイヤフレームをどうやって作ればよいのか、使うツールや流れについて解説しています。

当社ではワイヤフレームを作る際、状況によって普段から使用して慣れているWordやExcelを使い分けています。

 

ワイヤフレームを作成するとき特に重要なのが、ターゲット、キービジュ、価格の3点です。

作成の流れとしては、悩み→商品の詳細→客観的評価をいう形をとるのがスムーズです。

桜井
桜井
当社のコラムでは、Webに関する内容から中小企業の採用が成功する話など企業や事業の運営に役立つ情報を発信しています。
興味のある方は、ぜひ他の記事もご覧ください!