SWELLで企業サイトを作るには？必要なページと自社更新の設計

SWELLのデモを見て、「この雰囲気なら、うちの会社サイトにも合いそうだ」と感じた方もいるかもしれません。ただ、デザインの話に入る前に、訪れた人に何を伝えたいのか、公開後は誰が更新するのかを決めておくと、あとで迷わずに済みます。

会社概要を確認したい取引先、サービスを比較している担当者、応募前に仕事の内容を知りたい人。同じ企業サイトでも、訪れる人によって探している情報は違います。それぞれが必要な情報にたどり着けるようにページを用意し、公開後も社内で更新を続けられる形を考えていきましょう。

デザインを考える前に、誰をどこへ案内するかを決める

ここでは、法人向けの設備点検会社という架空の例で考えてみます。見込み客が最初に知りたいのは、会社の沿革よりも、自社の設備を見てもらえるのか、どの地域まで来てもらえるのか、相談するときに何を用意すればよいのか、といったことではないでしょうか。

それなら、トップページには事業の概要と対応範囲を載せて、詳しいサービスページへ案内します。サービスページでは点検の内容や相談の流れを説明し、読み終えた人がそのまま問い合わせへ進めるようにしておきます。会社情報や実績は、その途中で「この会社に頼んで大丈夫か」を判断してもらうための材料です。

誰に見てもらい、何をしてもらいたいか

この例でいちばん来てほしいのは、点検の依頼先を探している法人の設備管理担当者です。「企業向け」とくくるだけでは、載せるべき情報を絞れません。どんな用事でサイトに来て、何が分かれば相談しようと思えるのか。そこまで考えると、載せる内容が具体的になります。

主なターゲット

担当する施設の設備について、点検会社を比較・選定している法人担当者。

訪問時の疑問

この設備・所在地に対応できるか。何を伝えれば相談を始められるか。

サイト上のゴール

対応条件を理解した人が、設備の情報と相談内容を添えて問い合わせを送信すること。

事業としてのゴール

担当者が相談を受け取り、条件を確認して見積もりを出し、自社で対応できる案件の受注につなげること。

成果を見るときは、ボタンが押された回数だけでなく、問い合わせの送信が完了した件数を数えます。さらに、届いた相談が自社で対応できる内容だったかも見ておきます。問い合わせが増えても、対応できない相談ばかりでは受注につながらないからです。目標件数は、今の実績と、社内で対応できる件数から決めます。

必要なページをサイトマップにまとめる

誰に来てほしいか、何をしてほしいかが決まったら、必要なページを図にしてみます。下は説明用のサイトマップです。ページ同士の親子関係を線で表したもので、読む順番を示しているわけではありません。検索エンジンに送るXMLサイトマップとも別のものです。

必要なページは、サイトの目的や業種によって変わります。採用が目的なら募集情報が要りますし、事例を公表しにくい業種なら、無理に実績ページを作るより、対応できる仕事と進め方を具体的に書いたほうが読む人の役に立ちます。

訪問者が問い合わせるまでの流れを描いてみる

ページの一覧を眺めているだけでは、訪れた人が次にどこへ進むのかまでは見えてきません。サービス名で検索してサービス紹介に直接入ってくる人もいれば、紹介を受けて会社名を検索し、トップページから入ってくる人もいます。その両方を想定して、相談に必要な情報までつないでおきます。

実績や会社概要を読まなくても判断できる人に、すべてのページを回ってもらう必要はありません。サービス紹介から直接問い合わせへ進める道を用意しておき、迷っている人向けに実績や会社情報へのリンクを添えます。どのページからもサービス紹介や相談先へ戻れるかは、図の上だけでなく、実際の画面でも確かめます。

対応範囲がはっきり書かれていれば、訪れた人も自分で依頼できるかどうかを判断しやすくなります。それでも判断がつかない人のために、相談先も添えておきます。公開後は、「サービス紹介は読まれているのに入力へ進まない」「入力を始めても送信までいかない」といった状況を見ながら、説明が足りないのか、入力が負担になっているのかを調べます。最初に作った図も、実際の使われ方に合わせて見直していくものです。

実際のページ構成を見てみたい場合は、当社のSWELLを使った建築家向けデモサイトも参考にしてください。サービス紹介、施工事例、会社概要を行き来しながら、問い合わせへの案内がどこに置かれているかを見ていくと、自社のサイトに必要なページも考えやすくなります。

SWELLの標準機能で組み立てる部分を先に決める

SWELLには、ブロックを組み合わせてページを作るための専用の機能があります。そのひとつがフルワイドブロックで、公式の説明では、画面の横幅いっぱいを使った領域を作れること、企業サイトのトップページでも使えることが紹介されています。事業紹介と問い合わせの案内などを、見た目にもはっきり区切りたいときに便利です。

公式機能の要約：SWELL「フルワイドブロックの使い方」。画面の項目や使える設定は、お使いのバージョンで確認してください。

ただ、大きく区切りさえすれば読みやすくなる、というものでもありません。区切ったそれぞれの場所で伝えることを一つに絞ると、内容が伝わりやすくなります。「何を頼めるか」を説明する場所に、採用案内や社長挨拶まで一緒に詰め込むと、読む人はどこへ進めばよいのか迷ってしまいます。

全体の設定と、ページごとの例外を分ける

会社サイトでは、サービス紹介は集中して読める構成にしたい、お知らせには一覧へ戻る案内を付けたい、というようにページによって求めるものが違ってきます。SWELLの公式マニュアルには、カスタマイザーで決めた共通設定を、投稿・固定ページごとの設定で上書きできる項目が載っています。

公式設定の要約：記事・固定ページごとに表示・非表示を設定できるパーツ一覧。まず共通設定を決めて、必要なページだけを例外にしておくと、あとから見直すときにもページごとの違いが分かりやすくなります。

独自の動きや細かな配置をどうするかは、標準機能で作った状態を見てから決めても遅くありません。最初から全ページに個別のCSSを足していくと、担当者が文章を差し替えただけで配置が崩れるなど、日々の更新がやりにくくなることがあります。

会社概要やサービス紹介は固定ページ、お知らせは投稿に

• 内容を更新して使い続けるページは固定ページへ会社概要やサービス紹介のように、同じURLで内容を更新していくページは、固定ページでの管理が向いています。
• 一件ずつ追加する情報は投稿へお知らせや事例は、新しい情報を一件ずつ追加して一覧に並べていく使い方が中心なので、投稿で管理するのが向いています。

たとえばサービス内容が変わるたびに新しい投稿を作っていくと、検索から古い説明にたどり着いた人は、今の条件がどうなっているのか分からなくなるかもしれません。サービスの説明そのものは固定ページで更新し、変更のお知らせからそのページへリンクする。この形なら、見てもらう先を一つにまとめられます。

反対に、事例をすべて一枚の固定ページに書き足していくと、件数が増えるほど編集する範囲が長くなっていきます。事例を一件ずつ登録して、業種やサービスで探せるようにしたほうがよいのか。公開前に、どれくらいの件数になりそうか、どう更新するかを考えておきます。専用の入力画面や複雑な検索が必要なら、カスタム投稿などを追加で設計することも考えます。

担当者が実際の原稿で一度更新してみる

社内で更新していけるかどうかは、管理画面の操作を一通りやってみると分かります。お知らせの見出しを入力し、写真を選び、リンク先を設定して、スマートフォンでの表示を確認する。ここまでを、実際に更新する担当者に試してもらってください。

そのときは、文章が長い場合と短い場合、横長の写真と縦長の写真のどちらも試しておきます。サンプルの原稿ではきれいに見えていても、実際の会社名やサービス名を入れると折り返し方が変わるからです。更新用のひな形には、画像の目安や、変えてよい場所も書き添えておきます。

問い合わせは、送信から社内での受信まで試す

1. 案内先へ進むトップページやサービスページのボタンから、正しい問い合わせ先へ進めるかを確認します。
2. 入力して送信する入力、エラー表示、送信、受付通知までを確認します。
3. 社内で受け取る社内の担当者に届くところまで確かめます。企業サイトの完成を確認するなら、ここまでを含めて考えたいところです。

問い合わせフォームをどう作るか、どのプラグインを使うかは、必要な項目と運用に合わせて選びます。資料の添付が必要か、部署ごとに通知先を分けるか、個人情報をどこに保存するかによっても、設計は変わります。テーマに合った見た目かどうかだけでなく、受け付けたあとの業務に合っているかも見て選びます。

テスト送信をする前に、誰がどのメールアドレスで受信を確認するのかを決めておきます。スマートフォンでは入力欄の幅だけでなく、入力中に案内文が隠れてしまわないか、どこがエラーなのか分かるか、送信したあと次に何をすればよいか伝わるかも見ます。電話での受付もしているなら、番号をタップして正しく発信できるか、受付時間の案内に間違いがないかも確かめておきます。

自作する範囲と制作を依頼する範囲を決める

載せる内容が整理できていて、標準のブロックで必要なページが作れ、公開前後の確認まで担当者が対応できるなら、自社で進めるのも一つの方法です。一方で、既存サイトからの移行、独自の入力画面、問い合わせの連携、社内では扱えない改修などが含まれるなら、その部分は早めに制作会社へ相談しておくと計画を立てやすくなります。

見積もりを頼むときは、「SWELLで5ページ」と伝えるだけでなく、原稿は誰が用意するのか、問い合わせの受信確認まで含むのか、更新用のひな形や操作の説明ももらえるのかも伝えておきます。テーマの購入費用と、情報設計・原稿整理・制作・確認・公開後の対応にかかる費用は、分けて考えます。

grandworkでは、SWELLを使ったサイト制作もお受けしています。ご相談の際は、作りたい見た目とあわせて、サイトで伝えたい事業の内容、今ある原稿、公開後に更新を担当する方を教えてください。そのうえで、標準機能で作れる部分と、個別に設計が必要な部分をお伝えします。