伎冶商事のコーポレートサイト｜複数の事業を一つの顔にまとめる
このページで取り上げるのは、Lapisデザインラボを運営する伎冶商事合同会社自身のコーポレートサイトです。業務システム、メディアの運営、デザインの制作、工芸と、性格の違う事業を持つ会社の顔として作りました。決めた色と書体、作りの一覧は制作事例「伎冶商事」の詳細ページに載せています。
ここでは、その一覧を繰り返すのではなく、事業が複数ある会社のサイトを作るときに、何に迷い、どう判断したのかを説明します。事業を広げてきた会社の経営者や広報の方が、自分の会社のサイトに置き換えて読めるように書いています。
事業が複数ある会社のサイトの難しさ
事業が一つの会社なら、サイトの主役ははっきりしています。その事業のお客様に向けて、できること、実績、料金、問い合わせの入口を並べれば伝わります。ところが事業が複数になると、次の問題が起きやすくなります。
- 何の会社か分からない：事業を全部同じ重さで並べると、初めて見た人は、この会社が結局何をしているのかをつかめません
- 読む人がばらばら：ある事業のお客様、別の事業のお客様、取引先、金融機関、応募を考えている人が、同じサイトを見に来ます
- 事業ごとの雰囲気が違う：業務の道具と伝統の工芸では、似合う色も言葉も違います。どれかに合わせると、ほかの事業が浮きます
この事例では、この3つを最初の課題として並べ、一つずつ答えを決めていきました。
会社のサイトの役割を絞る
伎冶商事では、事業ごとに専用のサイトがあります。事業の中身を詳しく知りたい人は、その事業のサイトを読むのが一番の近道です。そこで、コーポレートサイトの役割を次の2つに絞りました。
- 入口：どんな事業があるかを一目で見せ、それぞれの事業のサイトへ案内する
- 信用の裏付け：会社としての情報を、取引先、金融機関、応募する人が確かめられるようにする
役割を絞ると、載せないものも決まります。事業ごとの細かなサービスの説明や料金、事例は、会社のサイトには重ねて載せません。同じ情報を二か所に置くと、片方を直し忘れて食い違いが起きるからです。
| 載せるもの | 事業のサイトに任せるもの |
|---|---|
| 事業の一覧と、それぞれの一言の説明 | サービスの詳しい中身 |
| 事業のサイトへの入口 | 料金、事例、問い合わせの細かな窓口 |
| 会社概要、代表者、所在地 | 事業ごとのお知らせ |
| 採用情報の入口 | 事業ごとの採用の詳細 |
最初の画面で、事業を名指しする
会社のサイトの最初の画面には、理念や大きな写真を置くことが多くあります。この事例では、最初の画面の説明文で4つの事業の分野を一文で名指しし、短い理念のすぐ後に事業の一覧を置きました。理念を長く語るより先に、どんな事業を持っているかが分かる構成です。
初めて訪れた人が最初に知りたいのは、「この会社は何をしているか」です。理念はその答えが分かった後で読まれるものです。事業が複数ある会社ほど、最初の画面で事業の広がりを見せておかないと、訪れた人は自分に関係のある事業があるかどうかを判断できません。
事業の説明は、サービスの名前を並べるのではなく、「その事業が、誰のどんな困りごとを解くか」の一言にしました。事業の名前だけでは、初めて見た人には何のことか分からないからです。
自分の会社で考えるときの問い
- 訪れる人は、最初の画面で何を知りたいか
- 事業の一つずつを、名前でなく困りごとの言葉で説明できるか
- 事業の一覧から、各事業の詳しい情報へ迷わず進めるか
同じ形をくり返して、一つの会社に見せる
事業ごとに色や雰囲気が違っても、同じ会社の仲間だと分かるようにするため、ロゴに使っている形を一つ選び、それを見出しの前の印、背景の図形、区切りにくり返し使いました。
すべての事業を同じ色や同じ写真の雰囲気に揃えようとすると、事業ごとの個性が消え、どの事業にも合わない中途半端な見た目になります。共通させるのは、形一つと、色の使い方の決まりだけにとどめ、それ以外は事業ごとに合うものを選べるようにしました。共通の要素が少ないほど、事業の個性を残したまま、つながりを示せます。
強調の色の使いどころを絞る
ロゴの色は強い赤ですが、画面の骨組みは落ち着いた濃い色で組み、赤はロゴとくり返す形、読ませたい一語の強調だけに使いました。
事業の数が多い会社のサイトは、載せる項目が多く、画面がにぎやかになりがちです。そこに強い色を多く使うと、どこを見ればよいかが分からなくなります。強調の色を少しの場所に絞れば、その色が出てくる所に目が集まり、画面全体は落ち着いたまま保てます。書体も、事業の説明を長く読んでも疲れないよう、読みやすいゴシック体一つにまとめました。
会社の情報を省かない
商号、所在地、代表者、事業の内容といった会社の情報を、探さずに読める場所に置きました。デザインを優先して会社概要を奥に隠したり、項目を減らしたりするサイトもありますが、これらは取引の前、金融機関とのやりとり、採用の応募の前に必ず確かめられる項目です。
事業が複数ある会社は、事業のサイトから来た人が「この事業は、どんな会社がやっているのか」を確かめに、会社のサイトを開くことがよくあります。そのとき会社の情報が薄いと、事業そのものの信用まで下がってしまいます。会社概要の載せ方はホームページの会社概要の書き方で説明しています。
事業のサイトと規則を共有する
会社のサイトと、事業ごとのサイトで、色と書体の規則を共有しました。この事例では、伎冶メディアネットのサイトとは色と書体を、Lapisデザインラボのサイトとは書体をそろえています。どの事業のサイトから入っても、会社のサイトに移ったときに、同じ会社だと分かるようにするためです。
事業が増えるたびに、新しいサイトを一から別の見た目で作ると、会社全体の印象はばらばらになっていきます。共通の規則を一枚にまとめておけば、新しい事業のサイトも、その規則から作り始められます。規則のまとめ方はブランドガイドラインとはで説明しています。
事業が増えたときの備え
事業の一覧は、設定の一か所にまとめて持つ作りにしました。事業が一つ増えたとき、一覧に一件足せば、トップと事業内容のページ、ページの下のメニューに反映されます。事業を広げていく会社のサイトは、作った時点の事業の数だけで設計すると、次の事業が増えたときに、画面の組み方から作り直すことになります。
判断の分かれ目
| 分かれ目 | この事例で選んだ道 | 別の道が合う会社 |
|---|---|---|
| サイトの分け方 | 会社のサイトと事業のサイトを分ける | 同じお客様に複数のサービスを組み合わせて売る会社は、一つのサイトにまとめる |
| 最初の画面 | 事業の一覧 | 事業が二つほどで、会社の考え方が選ばれる理由になる会社は、理念を先に |
| 共通の要素 | ロゴの形一つと、色の使い方の決まり | 事業の雰囲気が近い会社は、色も書体も全部揃える |
| 強調の色 | 少しの場所だけ | 事業が一つで、明るい印象を前に出したい会社は、面で広く使う |
多角化した会社のサイトで大切なこと
- 会社のサイトの役割を決める：入口と信用の裏付けか、事業の説明まで持つか
- 最初の画面で、何の会社かに答える：事業の一覧を、困りごとの言葉で
- 共通の要素を少しだけ決める：形一つ、色の使い方、書体の規則
- 会社の情報を省かない：どの入口から来た人も確かめられる場所に
できあがった画面は、制作事例「伎冶商事」の詳細ページで見られます。コーポレートサイトの制作をLapisデザインラボに頼むときの内容と料金はサービスと料金に、ほかの制作事例は制作事例に載せています。
よくある質問
事業が複数ある会社は、事業ごとにサイトを分けた方がよいですか。
お客様が事業ごとにまったく違う場合は、分けた方が伝わりやすくなります。探している人は、自分に関係のある事業の話だけを読みたいからです。その場合、会社のサイトは、事業の一覧と会社の情報を示す入口の役割に絞ります。反対に、同じお客様に複数のサービスを組み合わせて提供している会社は、一つのサイトの中で事業を並べた方が、組み合わせの良さが伝わります。
事業ごとに雰囲気が違っても、一つの会社に見せるにはどうすればよいですか。
すべてを同じ見た目に揃える必要はありません。ロゴの一部の形や、強調の色の使い方、書体の規則など、全体に共通させる要素を少しだけ決め、それを会社のサイトと事業のサイトの両方でくり返します。共通の要素が少ないほど、事業ごとの個性を残したまま、同じ会社の仲間だと分かります。
コーポレートサイトの会社概要には、何を載せればよいですか。
少なくとも、商号、所在地、代表者、設立、事業の内容、連絡先を載せます。取引の前や、金融機関、採用の応募の前には、これらが必ず確かめられます。探さずに読める場所に置き、事業のサイトからも会社概要へ行けるようにしておくと、どの入口から来た人にも会社の輪郭が伝わります。