ワイヤーフレーム作成時に、参考になるBtoBサイト紹介

まつもと
こんにちは!編集・ライターの松本紋芽(@Sta_iM)です

4月からマーケターとして働くようになった松本ですが、Webディレクター的なこともしているので、ワイヤーフレームというものを作るようになりました。

ワイヤーフレームって何?

…かんたんに言うと、サイトの設計図みたいなものです。紙媒体だと、ラフに相当するのではないかと思います。

こういう感じで、実際にサイトのデザインをするときに書くんですよね。

ワイヤーフレーム

出典:https://ferret-plus.com/5955

左がワイヤーフレームで、それをデザインしたものが右。

これに、実際に入れる文言や、作ってほしいイラストの詳細などを書き込んでいくわけです。

もうちょっとわかりやすい画像はこれかも。

ワイヤーフレーム

出典:https://ferret-plus.com/5955

ferretやバズ部のサイトを見ながら、サイトの構造を勉強しました。

  • ferret

5年間のランディングページ制作で行き着いた鉄板の構成と7つのポイント

  • ferret one

BtoBサイト制作の型・トップページ編

  • バズ部

ランディングページで平均4.2%の成約率を出すために行っている27の手順

サイトのコンバージョン率を簡単に3倍にするたった4つのテクニック

で、実際に私がBtoBサイトのワイヤーフレーム作成時に参考にしたサイトをいくつか紹介します。

ワイヤーフレーム作成時に参考にしたサイト

カオナビ

カオナビの概要は以下の通りです。

カオナビは1200社以上に選ばれてシェアNo.1!中小・ベンチャー・大手、様々な規模の企業にご活用いただいています。顔写真が並ぶシンプルな画面で、カンタン操作。人材データベース、人事評価、社内アンケート等にお使いいただけます。

公式サイトより:https://www.kaonavi.jp/

では、カオナビのどこがいいのかというと、ファーストビュー(サイトにアクセスした時に見える部分)の問い合わせボタンが、上部にしっかりあるところ。

※以下、すべて写真の出典はカオナビ公式サイトより。

ファーストビュー

問い合わせボタンをファーストビューに載せることは基本とはいえ、これはものすごく潔いですね。

メインキャッチコピーと、他によけいなテキストを入れずに問い合わせ系のボタンだけを配置するという…。

そして、商品理解がしやすいように、大画面で「カオナビ」の画面の感じをしっかり打ち出しているところもいいです。このサービスの伝えたいポイントが明確化されている感じ。

商品の売り

また、BtoBサイトは明確に「こういう悩みを解決できますよ」と示すことで読み手の納得感を増して、興味を惹きつける手法があるのですが、それも見やすく大きく示されている。

悩み解決

シンプルながらも親切な点、とても参考になりました。

CODOMON

こちらも概要説明置いておきます。

ICT補助金に対応した最もシンプルで簡単操作の保育園・幼稚園向け業務支援システムです。また、保護者向けにアプリを使ってシンプルに情報配信が出来るほか、出欠連絡や入退室管理機能など、園の運営に役立つ機能が満載です。

公式サイトより:https://www.codmon.com/

※以下、すべて写真の出典はCODOMON公式サイトより。

これは保育園、幼稚園の業務を効率化させてくれるサービスなんですけど、ファーストビューに出てくる女性の写真…保育士さん感があって、サービスに合ってますよね。

ファーストビュー

右下に「お問い合わせ・資料請求はこちら」というグラデーションのボタンがあるんですけど、これでかんたんにチャットみたいな感じで気軽に問い合わせできるみたいです。

正式な問い合わせよりもひとつハードルが低いサービスを入れるのも、大事な手法ですよね。

また、保育園や幼稚園のテイストに合わせつつ、このサービスのできることがアイコンだけでもかんたんにわかるデザインも参考にしました。

サービスの特徴

とってもかわいいですね。

そして、CODOMONもカオナビと同様、悩み解決に関する見せ方をこのように入れています。

相変わらずイラストのテイストがサービスにぴったりです。

こちらが悩みに関する表記↓

で、それに対するアンサー的な「機能紹介」の文言がこちら↓

お悩み解決

そして、商品の特長を説明したあとに「信頼できるサービスですよ」ということをアピールするための説得材料もしっかり掲載している。

導入実績

この伸び率がすごいグラフは、かなり説得材料になりよね。

私が担当しているサービスも、こういうことを早く謳えるようになりたいです。

さいごに

今回は2つだけでしたが、他にもあるんですよ。なんなら最も参考にしたサイトを紹介していない…。

けど、サービスがバレそうなのでやめます(笑)。

他にもちょこちょこ参考にしたサイトがあるので後ほど加筆します!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です