CSS Nite LP7もいよいよ明日になりますが、事前課題として講演していただく坂本貴史さんから2つの課題が出ています。課題は二つ。

飛島建設ホームページ
このサイトの
・最適なメインメニュー (グローバルナビゲーション) を考えてみよう
・サイトマップ (ハイレベル) を描いてみよう

というもの。バタバタしながらも、とりあえず形にだけはしてみました。

今回はこのサイトマップを作っていくまでの過程をざっくり書いてみたいと思います。

サイトをまずは見てみる

とりあえず坂本さんのPDFから、飛島建設のURLへジャンプ。最初見たときは、かなり作り込まれているサイトだなと感じました。いつ頃から作ったんだろう。

サイトマップ

とりあえずページ下部にあった「サイトマップ」をクリック。するとサイトマップが表示。サイトマップが出てきたときは、「え!?こんなにページ数が多いの?」と軽く度肝を抜かれます。しかしよく見ると、サイトマップの中に仕事中にはよく見る文字列「トップページ・トップぺメニュー」「トップページサイドメニュー」「トップページ下部メニュー」なるものが存在しています。いくらサイトマップとはいえ、ここまで書いているサイトマップは見たことありませんでした。ちょっと斬新。

サイトをざっくり見る

立派な上場企業ということをここで把握。この段階では文言ひとつひとつを見ていかず、全体として読むページが多いのか、見せているページが多いのかということをざっくり確認していきました。会社情報のページはちょっと読んでいきます。どんな会社かの情報がほとんどなかったので、それを補うように見ていきました。BtoBで今まで活躍していること、歴史がとても長いことはここで把握しました。

坂本さんからの課題をかみ砕く

ここで坂本さんからの課題を今一度見返して、かみ砕いてみます。坂本さんからいただいた課題は2つ、グローバルナビとサイトマップ。グローバルナビは何も考えずにやると、あとで痛い目を見ることは仕事中に覚えたので、先にサイトマップを作り上げてしまうことを考えました。そして、目的を再確認。「問い合わせを増やすこと」。重要な分類という言葉が何を意味するんだろうと、ちょっと引っかかりつつ、大事なところとそうでないところを分ける作業に入っていきます。

「いつもの部分」とそうでない部分を分ける

私自身のコーポレートサイトの経験は数えたことがありませんが、ある程度の数はこなしています。それで、「いつもの部分」にあたる部分は省いても大丈夫だろうと思い、まずは「いつもの部分」にあたる企業情報・IR系の情報・ニュース・CSR・採用情報などの他の会社であっても存在するページと、建築技術やソリューションのような会社独自のページを分類していきました。

最初の分類はこんな感じです。手書きでリストアップしてみました。プロジェクト紹介と施工作品はどちらも過去の実績としてグルーピングでき、最新技術とサービスソリューションは企業の今の状態についての情報なので、とりあえずグループにしてみました。

サイトマップを書く

実績紹介

とりあえず会社の「過去」にあたる実績の部分。ぱっと見、情報構造が業界知識がそこまで必要ではなさそうだったので、こちらからスタートしてみました。ページの構造が「一覧→詳細」・ラベルが具体的な建物名という形だったので、イメージしやすかったです。そしてちょっと悩んだのがこういう形で分類したときの「プロジェクト紹介」。他が土木、建築という分類名なのに、ここに時制が違うものが出てきてしまいます。なので、一度このプロジェクト紹介の中で紹介されている工事案件もいったん土木や建築のような分類した上で、それが進行中なのかどうかタグみたいなものをつければいいんではと思って、「コンテンツに織り込む」という形をとりました。もし、クライアントがプロジェクト紹介に強いこだわりを見せているようであれば、「現在進行中のプロジェクト」という形で一枚一覧のページを作って、ショートカット的な役割を果たして解決することができると思います。

技術とソリューション

こちらはわざわざグループピングしていいものかなと、かなり悩みました。悩んだので、現在のサイトマップとにらめっこです。にらめっこしてわかったのは、技術情報とソリューションのそれぞれのジャンルが微妙に似ています。問い合わせするために、わざわざ技術情報をくまなく見て問い合わせしようとするかを考えたときに、プッシュすべきはソリューションではと思いました。そして技術はその下でソリューションを支えているものと考えてました。サイトマップではうまく表現できませんでしたが、ページに表したら、ページ上部にソリューションの一覧を載せて、その下に「ソリューションを支える技術」みたいな見出しで技術一覧情報を掲載する形をイメージしました。同じく、ソリューションの各ページでも上はソリューションの紹介、そのページの下に「このソリューションを支えている技術」という見出しで該当技術をリストアップしていくのがわかりやすいかなと思います。

するとここで、実績紹介とも絡めそうだなと思って、技術とソリューション、実績がそれぞれつながる仕掛けを考えました。
ただ、情報がつながっているからグループ上もそうするかと言えば、実績は違うんじゃないかと思いました。建設業のサイト制作の経験はは今までほとんどありませんが、おそらく工事の発注先の方は「この建設会社に工事を発注する!」と決心するには、過去の実績も加味するものだと思います。すると、施工実績のページを探してもらいやすくするため、実績は実績として独立させることにしました。

ラベル

作品→実績!

実績の言葉のほうが企業としては一般的ではと思うので、「実績」として直しました。

ソリューション

ラベルはちょっと代替が出せそうになかったので、とりあえずの状態です。引っかかったのはところどころに使われている「ソリューション」という言葉。BtoB企業のサイトだと当たり前のように使っていますが、学生のころこのラベルの意味がよくわからなくて、調べ物があまり進まなかったこともあるぐらいです(恥。横文字を漢字に直すと「提案」。提案というラベルでも、クリックした先に何があるのかイメージができません。長くなっても大丈夫なら、「私たちができること」みたいなものも考えてみましたが、CSRコンテンツのラベルのようにも連想できてしまうので、あえなく断念。

このようにして、サイトマップ第1弾が完成しました。

サイトマップを清書する

手書きだったので、考えた跡がとても残ります。データにするにも、ちょっと雑多だったりするので、もう一度手書きで書き直しました。

そして、そのあとIllustratorで。普段はサイトマップはディレクターがPowerPointで描いてくれているので、Illustratorでサイトマップを描くというのは初体験でしたが、面倒くさい!最初からおとなしくPowerPointで描いておけばよかったなと、後悔です。コネクター便利すぎるよ><

グローバルナビ

サイトマップができてしまえば、グローバルナビはだいぶ見えたようなもの!と思ったものの、これまた難しい。配置自体は落ち着いたものの、悩んだところはサイトマップでも悩んで代替が見つからなかったラベルとIR情報を置くかどうか、そして電話番号。IR情報が一番引っかかりました。というのは、株主をステークホルダーとして置くのはもちろんですが、彼らがトップページ以外をランディングページにするのかはちょっと考えました。僕の推測になりますけど、企業名で検索して、トップページにランディングすることが多いのではと思います。どのページからでも主要なページにいけるような機能を持っているのがグローバルナビ。すると、見る人が限られているページを置くのはどうなんだろう?っていう疑問が生まれました。結果的に自分でこのビジュアルをつくるときに、字数がもっと欲しいと思ってしまったので、数埋め的な意味合いで入れてみました(反省)。

もう一つは電話番号。問い合わせが欲しいと思っているのにも関わらずヘッダに電話番号が見つかりません。けれど、ソリューションのページの下にはさりげなく電話番号がのっかっているのを発見。う〜んどういうことかと悩んでいました。受注につながる問い合わせは欲しいけど、、、といったちょっと複雑なところなのかなと妄想してみたり。最終的に入れなかったというか、途中から頭から飛んでいたっていう説もあります(汗)。修正したい欲がうずうずしています。

作業を通して思ったこと

普段は頭で考えて、そのままパソコンにデータとして入力していく形をとっていますが、逐次紙にもらさず書いてみると、後々どういうプロセスで自分は何を考えていたのかというのが、かなり思い出せるようになります。このブログエントリーはものすごく長くなってしまったのも、そのせいですw

というわけで、明日はCSS Nite LP7です。自分の業務と関わってきそうな小久保さんのセッションは聞きどころだと思っています。予習は白クマ本を半分・・・以下 orz。できるところからひとつひとつを自分のものにしていきたいと思います。挙動不審な人がいたら、是非お声かけてくださいまし。