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

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

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

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

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

その場合、トップページには事業の概要と対応範囲を置き、詳しいサービスページへ案内します。サービスページでは点検内容や相談の流れを説明し、その内容を読んだ人が問い合わせへ進めるようにします。会社情報や実績は、その途中で依頼先を判断するための材料になります。

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

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

主なターゲット

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

訪問時の疑問

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

サイト上のゴール

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

事業としてのゴール

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

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

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

ターゲットとゴールが決まったら、必要なページを図にします。下は説明用のサイトマップです。線でつながったページの親子関係を見るための図で、読む順番を指定するものではありません。なお、検索エンジンに送信するXMLサイトマップとは別のものです。

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

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

ページの一覧だけでは、「その人が次にどこへ進むか」は分かりません。サービス名で検索する人がサービス紹介へ直接入る場合と、紹介を受けて会社名からトップページを開く場合を想定し、相談に必要な情報へつなぎます。

実績や会社概要を読む必要がない人まで、すべてのページを回らせる必要はありません。サービス紹介から直接問い合わせへ進める道を用意し、迷っている人には実績や会社情報へのリンクを添えます。各ページからサービス紹介や相談先へ戻れることも、図と実画面の両方で確認します。

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

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

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

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

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

ただ、大きく区切れば読みやすくなるわけではありません。その場所で何を伝えるのかを一つに絞ると、内容が伝わりやすくなります。「何を頼めるか」を説明する場所に、採用案内や社長挨拶を同時に詰め込むと、読者が進む先を選びにくくなります。

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

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

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

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

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

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

例えばサービスの内容が変わるたびに新しい投稿を作ると、検索から古い説明へ来た人が、現在の条件を判断できなくなるかもしれません。サービスの本体は固定ページで更新し、変更のお知らせからそのページへリンクする方法なら、参照先をまとめられます。

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

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

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

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

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

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

問い合わせフォームの実装方法や利用するプラグインは、必要な項目と運用に合わせて選びます。資料添付が必要か、部署で通知を分けるか、個人情報をどこへ保存するかによっても設計は変わります。テーマに合う見た目かどうかに加えて、受付後の業務に合うかも選ぶ際のポイントです。

テスト送信の前には、誰がどのメールアドレスで受信を確認するかを決めておきます。スマートフォンでは入力欄の幅だけでなく、入力中に案内が隠れないか、エラー箇所が分かるか、送信後に次の行動を理解できるかも見ます。電話を受け付ける場合は、タップすると正しい番号に発信できるか、受付時間の案内に間違いがないかも確かめます。

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

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

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

grandworkでは、SWELLを用いた制作も取り扱っています。ご相談時には、作りたい見た目とあわせて、サイトで伝えたい事業、現在の原稿、公開後の更新担当をお知らせください。いただいた内容をもとに、標準機能で作れる部分と、個別の設計が必要な部分をご案内します。