初めての訪問者でも欲しい情報に
簡単にアクセスできるコーポレートサイト

藤田　まずは、リニューアルの経緯をお聞かせください。

振角　コーポレートサイトを制作したのが10年前で、それ以降、デザインや内容の大幅なアップデートをしておらず、あらゆる面で古くなっていました。最近では、スマホで見るお客様も多く、さらにコロナ禍で対面での営業ができず、インターネット上での情報提供が求められていることもあり、2020年にリニューアルを決定しました。

小林　私が入社する以前から存在する古いコーポレートサイトですので、なんだか「ぱっとしない会社」に思われてしまいそうだという不安もありました。アドバンドさんにリニューアルをお願いした理由は、主に2点です。1つ目は、対応の速さに驚いたこと。ディレクターの山下さんが窓口として直接対応してくれたため、問い合わせに対してのレスポンスがとても速く、スムーズなやり取りができました。もう1つは、アドバンドさんが発行する広報誌「adLive」を読んだことです。温かみのあるデザインで、内容も分かりやすかったため、鉄鋼を扱う性質上「固い」企業だと思われがちな当社を、やわらかく表現していただけそうだと感じました。

山下　対応の速さは当社の強みの一つです。クリエイターが直接お客様とやり取りをすることで、素早く的確な対応ができるんです。特に今回はコロナ禍での進行のため、会社に伺ってのご説明が難しい状態です。そのため、オンラインでのスムーズなやり取りが重要でした。齟齬が起きないよう、Google MeetでのWeb会議やGoogleドライブ、スプレッドシートを活用しました。

小林　Googleドライブでの管理は驚きました。スケジュール表や工程表が逐一更新され、ブラウザ上ですぐに確認できたので、「メールをさかのぼって、都度情報を確認する」という、余計な手間を省くことができました。これをきっかけに、社内でのGoogleドライブの導入も検討しています。

藤田　制作にあたり、特に力を入れたのが製品情報ページです。製品の量も多く、それぞれ説明したい項目が違っていたので、デザインに統一感を持たせながらも、各製品に合わせた説明をしなければいけません。さらに、今後新製品が発売したときに、自社内で、簡単に素早く更新できるようにする必要もありました。そこで、導入したのがCMS（Contents Management System）です。これは、ページを構成するレイアウト、テキストや画像などをフォーマット化し、既定の箇所に入力するだけでWebページをつくることができるソフトウェアです。フェンス製品は「特長・仕様」と「標準図」、メタル製品は「特長・仕様」「製品図・寸法表」「施工手順・施工例」をベースにして、製品ごとに説明したい項目を追加できるよう整えました。

山下　今回、MovableTypeを使用しましたが、製品量・情報量を考えると、自分が制作を支援したなかで過去一番複雑な仕様でした。また、旧Webサイトでは製品情報ページと、製品ごとの標準塗装色に関するページが分かれており、それぞれを往復する必要がありました。ユーザー目線で考えるとこれは非常に手間。そこで、製品情報ページにカラー情報を追加しました。常にユーザーの導線を意識し、できるだけ早くほしい情報にたどり着けるよう心がけています。

小林　以前のWebサイトは、社員ですらどのページにどの情報があるか、把握できていなかったほどです（笑）ダウンロードページにもCMSを導入していただきましたよね？

山下　ダウンロードページのファイルは、カタログや図面など合計100種類以上あり、さらにファイル形式もDXF、DWG、PDFの3つがあったため、CMSの画面に1つずつ入力して登録するのは困難です。そこで、エクセルのファイルをアップロードすれば自動で更新されるプラグインを使用し、効率化を図りました。

振角　CMSの運用マニュアルも作成いただけたので、自分たちだけでも簡単に更新することができます。

振角　デザイン面は、要望どおり柔らかい印象になったと感じます。また、当社のコーポレートサイトには県庁や市役所の方も訪れます。その方たちが、すぐに目的のページにたどり着けるようなすっきりとしたレイアウトになりましたね。直接関係があるかは分かりませんが、リニューアル後にお問い合わせの件数も増えたんです。

藤田　柔らかな印象を与えることに加え、日本製鉄グループのイメージも損なわないよう、コーポレートカラーの青色を中心にデザインしました。お問い合わせに関しては、メニューバーに「お問い合わせボタン」を固定して、どのページからでもお問い合わせができるようにした効果かもしれません。

山下　PC、スマートフォン、タブレットなど、デバイスごとに見え方を変えるレスポンシブデザインという手法も取り入れました。例えば、画面の大きなPCでは製品カテゴリをタブで表示させ、画面の小さなスマートフォンでは、プルダウンで縦に表示させることにより、デバイスごとに最適な見やすさにデザインしています。

振角　当社の製品を使用する施工現場の方は、スマートフォンで図面や仕様を確認することも多いので、使い勝手が向上したと思います。

小林　当社の内部では、トップページにもこだわりがありました。温かみを感じてもらい、今までとは違った印象を与えたかったため、トップ画像候補を30枚以上集め検討しました。

山下　画像がスライドしていくデザインを採用しましたが、初めに表示される画像が、主力製品のフェンスが写っていないものに決まったときは驚きましたね。青空に向けて女の子が手を挙げている写真は、コーポレートカラーの青色も感じられ、優しい気持ちになりますね。ご提供いただいた「あるといいながある」というメッセージも、会社の思いが伝わる素敵な言葉だと思います。

振角　Web制作に携わるのは初めてで、ここまで大変なものなのかと驚きました。内容、レイアウト、デザインなど考えることが多かったですね。その分、アドバンドさんと一緒に素晴らしいものを完成させたときは達成感でいっぱいでした。公開当日は、PCの前で待機して、新しいコーポレートサイトが表示されるのを楽しみに待っていました。公開時間になり、トップページを見たときは「これが自分たちがつくった成果なんだ！」と、うれしい気持ちがあふれましたね。

小林　当社のPCがWindows7だったため少し不安でしたが、問題なく表示されて安心しました。競合他社にも引けを取らないWebサイトになり、自信をもって利用できます。社内からも「ダウンロードが簡単にできるようになった」とか「製品情報ページを活用することでペーパーレス化につながった」などの反応がありました。

藤田　ペーパーレス化という、制作物から派生した効果につながっているのは、クリエイターとして非常にやりがいを感じます。

山下　制作側としては、「公開したはいいものの、その後問題が発生する」ということがあるので、公開後1週間ほどは常に確認をして、すぐに修正対応ができるよう準備しています。今後、運用の面で引き続きサポートさせていただきますが、アドバンドへの要望はございますか？

小林　お客様や社員の使いやすさを何よりも優先したいと考えています。アドバンドさんの豊富な経験値を活用し、私たちの要望にプラスアルファの提案をいただけるとありがたいです。

振角　2021年の1月に、親会社の日鉄建材がCSIRT（Computer Security Incident Response Team）というコンピューターセキュリティに関する事故対応チームに加入し、グループ会社としてもセキュリティ対策を強化する必要があります。今後は、セキュリティ面でのアドバイスも期待しています。

山下　ご期待に沿えるよう、努力を続けていきます。CMSを使っての更新が基本となるので、お二人の手間ができるだけ省けるよう、アップデートしていきたいです。

藤田　インターネット業界は常に新たな技術が登場しています。特にデバイスやOSは、かなりの速度で進化していきます。日々勉強を続け、吸収したものを制作物に反映させていきたいです。本日は、ありがとうございました。