コンテンツ本文へスキップ

ワイヤーフレーム制作 | 審査資料、UIUX改善方法として活用

2022.01.14

ワイヤーフレーム制作
ホームページ制作 効率化 スピード化

検索キーワード に 関連する 詳細ページの量産へ


 

webサイト制作、ホームページ更新、運用

ワイヤーフレーム制作 は、ホームページ制作の設計書を作るようなことで、webサイト内の情報の配置・順番、訴求ポイントなどを明記し、設計されたドキュメントです。ホームページ制作で、重要なポイントになります。 ホームページを作成するうえで、WF(ワイヤーフレーム)は、ページを作成する 元であり、承認者、管理者、製作者、webデザイナーとの認識相違を減らしていくための設計書となるからです。

しかし、ワイヤーフレーム制作は、レイアウトやユーザーターゲットを考えなが ら、ページの主要部分を作っていく必要があるため、マーケティング観点での製 作が重要になってきます。また、当然のことながら、ワイヤーフレーム制作は、 web制作、webデザインの知識も必要になります。そして、昨今重要なSNS観点、 検索エンジン対策を考えるSEOの知識も必要です。

そうなってくると、ワイヤーフレーム制作も、編集経験がある人のスキルでも対 応しにくいですし、商品販売のプロの視点だけでも厳しいです。スピーディーに ワイヤーフレーム制作するには、それなりの業務経験・知識・スキルが必要に なってきます。

そこで、クロトで展開しているサービスが、ワイヤーフレーム制作のサービスで す。御社のご担当者さまとやりとりしながら、ワイヤーフレーム制作を行ってま いります。ワイヤーフレーム制作のサービスは、テキスト原稿の制作サービス や、写真・動画作成、写真素材を探してくるサービスとは異なり、ワイヤーフ レームを制作するサービスです。

ワイヤーフレーム制作のサービスでは、webデザイン、web制作のトレンド、SEO 対策のトレンドなどを踏まえて、パワーポイントやエクセル、XD、figmaなどで、ワイヤーフ レーム制作を行ってまいります。

WF(ワイヤーフレーム)によって、何を表現すべきか、どうして、この場所にこの情報があるのか?などを明文化して、ロジカルに、ページ制作を行う際のサ ポートをさせていただいております。

ワイヤーフレーム制作は、基本、静的ページ向けに行うサービスとなっていま す。動的な、プログラム要素を考慮する場合も対応は可能ですが、その際は、別 途仕様把握などを行う必要が出てきますので、ワイヤーフレーム制作の料金が上 がりますので、ご了承ください。

ワイヤーフレーム制作の対象となるページは、ランディングページ(LP)や、テ ンプレートページであったりするケースが多いと思います。テンプレートページ の場合は、SEO対策を考慮して、titleタグ、meta discriptionタグ、OGPタグ、h タグの設計、設定なども考慮して、ワイヤーフレーム制作を行ってまいります。 こうすることで、検索キーワードからの回答となる詳細ページの制作をサポート できるようになるからです。SEO対策の基本は、この検索キーワードと詳細ペー ジとの関連性です。検索ユーザーの検索キーワードに対する答えとなるページを 作っていくことで、自社に関連するキーワードからの検索エンジン誘導が効果を 発揮していきます。オーガニック検索から流入をしてくるユーザーは、やはり、 質が高く、ページ滞在時間も長かったり、問い合わせや資料請求、ECであれば、 購買につながってくるので、検索エンジン流入を増やす施策として、重要な施策 だと捉えています。

ワイヤーフレーム制作は、BtoBマーケティングのリード獲得を増やす施策の一環 として行っていました。もちろん、ワイヤーフレーム制作だけでなく、そのあと のホームページ制作や、webデザイン、wordpressなどのCMSへの組み込み・実装 も、クロトでは担当してきました。ワイヤーフレーム制作も、当然、ページ単位 でなく、サイト単位で行うことが可能になっています。

ワイヤーフレーム制作の事例 実績としては、数多くあります。BtoB分野では、 M&Aの大手サービスのコーポレート、サービスサイトであったり、Saasサービス のコンテンツサイトであったり、法人向け電話サービスを展開する企業のサービ スサイト、防犯カメラメーカーサイトに対して、ワイヤーフレーム制作を行って いました。また、BtoC分野でも、不用品回収サイトや、コスメECサイト、プレゼ ントキャンペーンサイト、医療機関向けホームページ、クレジットカードの紹介 サイト、カードローンの紹介サイト、自動車紹介メディアなど、幅広く、ワイ ヤーフレーム制作を行ってきました。

ワイヤーフレーム制作で、最近、多いのは、フォーム一体型のランディングペー ジです。サービスサイト、ECサイト、コンテンツサイト、資料請求と、汎用性の 高い、フォーム一体型のランディングページ。1ページ内にお問い合わせフォー ムがあるので、ページ遷移で、離脱が起きないのがいいですよね。こういった ホームページのワイヤーフレーム制作も行っています。

ワイヤーフレーム制作は、スマートフォン専用ページのワイヤーフレームを作る こともありますが、多くは、レスポンシブ対応のPCサイトを基準に、ワイヤーフ レーム制作を行っています。

ワイヤーフレーム制作は、審査資料の作成にも活用されます。文言、画像、イメージの確認など。各種チェックに活用できます。そして、UIUXの改善方法としても活用されます。最近では、adobe XD や、Figmaなどで、ワイヤーフレームを作成し、そこから、モックアップ作成まで進めることも増えています。Figmaなどのツールであれば、しっかりと、UIUXまで落とし込めるので、改善の速度も、クオリティも上がりやすくなります!Figmaを活用してのホームページ作成については、別ページで詳細な情報を掲載していますので、ご確認ください。

ワイヤーフレーム制作は、デザイン、範囲、内容によって、費用やスケジュール なども変わってきます。セキュリティ、情報漏洩に配慮して、NDA(機密情報保 護契約)なども、しっかり行って、御社のビジネスモデルや、ページなどについ て、聞かせていただき、ワイヤーフレーム制作を進めてまいります。事業を進め るうえで、ホームページはかかせないツールです。クロトなら、webマーケティ ング、web制作の分野において、15年以上の実績・事例がある企業なので、任せ て安心です。多くの企業様のwebシステムなどの開発やwebサイト制作に携わって きました。システム開発、ホームページ制作、システム運用、webサイト運用な どの豊富な知見を活かして、ワイヤーフレーム制作を円滑にできるよう、サポー トさせていただきます。ご相談、お問い合わせは無料です。作りたいワイヤーフ レームの内容、ホームページ、参考にしたいホームページ、サービス内容、そし て、ワイヤーフレームを作るうえで感じている課題など、実施したいことを、お 問い合わせフォームにご記載いただき、お問い合わせくださいませ。


ワイヤーフレーム制作 実施例

  • コンテンツ企画
  • 原稿作成
  • デザイン素材作成
  • 動画作成
  • 商品撮影
  • モデル撮影
  • サーバへのアップロード
  • Google、Yahooなどのリスティング広告 設定 運用
  • Googleアナリティクス4 設定
  • Googleタグマネージャー設定
  • ドメインの取得代行、設定、紐づけ
  • サーバの取得代行、設定、紐づけ

など
*メイキング動画、イラスト素材作成、漫画作成などもご相談ください

自動翻訳機能付きの多言語化も可能

検証環境、テスト環境構築などもご相談ください
デジタル庁 デザインシステムを活用することも可能です!

    wordpress カスタマイズ 開発 によって、会員サイトの構築も可能です。

    企業サイト制作全般についてはこちらの詳細ページでもご案内中


    ワイヤーフレームとは

    ワイヤーフレームとは、ホームページの設計図、概略図のことで、ページ内のどこに、どんな情報を配置するのかを記載した資料のことを指します。ワイヤーフレームは、画面構成とも呼ばれ、要は、情報の配置図になります。

    ワイヤーフレームは、枠組み、骨格なので、原稿とは異なります。Webサイトで、どんな情報を、どの位置に掲載するか、どう掲載するかを示すものです。

    それゆえ、ワイヤーフレームには、色合いなどはありません。画像も入りません。

    抽象化したホームページといえましょう。

    ワイヤフレームを作る人は、ホームページの設計者です。一般的には、webディレクター、UIディレクター、プランナー、プロジェクトマネージャーが作ります。上流工程で作る資料が、ワイヤーフレームです。

     


    ワイヤーフレーム 目的

    ワイヤーフレームの目的は、箇条書きでまとめると、以下になります。

    1. 設計の可視化
    2. UXの明確化
    3. レイアウトした要素の共有
    4. ホームページ内の情報の優先順位決め

    といったところが、ワイヤーフレーム 目的といえます。

    このように可視化していくために、ワイヤーフレーム 作るのですから、とりあえず、ワイヤーフレーム 作った!ではなく、コンセンサスをとっていくことが大事ですね。

    コミュニケーションワークのポイントで、何をもってコンセンサスを取ったかは大事ですが、図示されている場合、その形が、承認物とされます。

    ワイヤーフレーム とは、そういったものなので注意しましょう!



    ワイヤーフレーム制作 よくある質問

    ワイヤーフレーム制作 の よくある質問 をまとめました。

    ワイヤーフレーム制作 は どのくらい時間かかりますか?
    仕様や内容、ガイドラインにもよりますが、ご発注から最短1週間~初稿作成可能です
     
    ワイヤーフレームの制作後、webサイトの制作 も 依頼可能ですか?
    はい。可能です。
     
    ワード プレス で作るサイトですが、ワイヤーフレーム制作できますか?
    はい。対応可能です。wordpressの構成などで前提条件あれば、教えてください。
     
    システムを含んだ、ワイヤーフレーム制作 できますか?
    はい、対応可能です。
     
    ワイヤーフレーム制作 で、フォーマットが特にないのですが、お願いできますか?
    はい。こちらは、対応可能です。クロトで使用するフォーマットで作成します
     
    ワイヤーフレーム制作 の 予算感 はどのくらいですか?
    内容にもよりますが、1ページで、税抜き 4万円~になります。都度お問い合わせください。


    ワイヤーフレーム制作 スケジュール 事例

    ワイヤーフレーム制作にあたってのスケジュールの事例をご紹介します。

    実施の流れの一例としては

    • ワイヤーフレーム制作のご契約
    • 詳細なお打ち合わせ
    • 簡易的に ページ構成を作成(MTGで作ることもあります)
    • 詳細な画面構成を作成
    • ご確認
    • ご納品


    上記を行っていきます。

    ワイヤーフレーム(画面構成)を作成するページの情報読み込みに時間がかかるケースもあります。

    原則的には、リソースがあり、速ければ、1~2日で展開できますし、量があれば、1~2週間で、ご提出可能です。

    もし、すでに、書いてほしい内容の原稿があれば、そちらをいただき、その内容を元に、ワイヤーフレー ム制作を作成します。

    ワイヤーフレーム制作は、その業界、分野、内容によっても、変わってきますが、1~2週間程度でご納品まで進められるケースも あります。

    これが、実際にあった、いくつかのwebサイトのワイヤーフレーム制作での納 期の事例でございます。


    ワイヤーフレーム制作 納品形式

    ワイヤーフレーム制作のご契約の前に、納品形式については、確認させていただきます。

    ワイヤーフレーム制作時に、何で作っているのか? 実際にあるパターンとしては

    • パワーポイント
    • Googleスライド
    • エクセル
    • XD
    • Figma
    • イラストレーター


    といったケース、事例があります。

    ワイヤーフレーム(画面構成)を作成する際、比較的、軽い パワーポイントの方が、制作時間がとられないこともあります。

    XDや、Figmaの場合は、そのまま、デザインにつなげやすいというケースもありますね。

    いずれの場合でも、対応は可能ですので、ご相談ください。



    ワイヤーフレーム制作 実績 事例

    • 不動産会社

    • web制作会社

    • マーケティングリサーチ会社

    • イベント会社

    • 不動産 資格 セミナー

    • 自動車メーカー

    • 飲料メーカー

    • ECコンサルティングサービス

    • 人材派遣

    • 人材紹介

    • アパレル 採用LP

    • 金融 採用LP

    • 美容サロン LP

    • 塾 LP

    • 保険サービス LP

    • 動画データ販売 LP

    など

    ご相談はお気軽に!

    phone03-6805-0821

    schedule平日:AM10:00~ PM7:00

    コンテンツ本文の先頭へ戻る ページの先頭へ戻る