日本最大級の交通広告ポータルサイト 交通広告ドットコム

プロジェクト概要

ウェブサイト運営を新しいフェーズへ

交通広告を幅広く手掛ける「交通広告ドットコム」さまのサイトリニューアルを株式会社ウェブライダーさまと連携して、分析、ブランディングと上流工程から携わり、サービスの魅力が伝わるコンテンツを大事にしたウェブサイト制作を行いました。

課題

• お問い合わせ数の向上
• 広告情報掲載のみのサイトからサービスが伝わるサイトへ改善したい

解決策、サービスの言語化

お問い合わせの数を増やすための取り組みとして、顧客ニーズの調査やサービスの分析をおこない、コンテンツの改善やサイトの導線設計の見直しを実施。

特にコンテンツはサービスの特長や強みを言語化し、ユーザーに伝わるメッセージを考えました。

分析は多くのビジネスフレームワークを用います。
ウェブサイトのリニューアルはデザインを変えたりコンテンツを追加したりと見た目を考えることが多いですが、改めて市場調査やユーザー行動を理解し、サービスの訴求や運用するスタッフの皆さんの思いをくみ取ることを考えました。

魅力が伝わる７つの強み

自社サービスを見つめ直し言語化をしていく、リブランディングには多くの時間を使いました。
改めて言葉にしサイトに掲載することで、ユーザーに魅力を伝えるとともに、志をもってサービスを運用していくという信念を感じました！

ヒアリングなども実際にお会いしてさせていただき、私にとっても非常に勉強の機会となりました。

テンプレートの構築で考えたこと

ウェブサイトの制作、構築部分は主要ページのほか、汎用ページやコンポーネントを作成。
テンプレートを作成し納品させていただきました。

珍しい納品形式ではありませんが、運用に耐えるフォーマット作りや、簡単に拡張できるような汎用性を備えるためにマークアップやCSSの設計にこだわりました。

サイトの構造とコンテンツの共通化

サイト構造の理解

コンポーネントの共通化

汎用性の高いコーディング

サイトの構造を理解してサイトマップを作成、必要なディレクトリを理解しつつ運用で増減されることも考えながらスプレッドシートにまとめました。
1,000ページを超えるコンテンツ群のベースページを作成するため、汎用ページを精査することに一番時間を使っています。

コンポーネントを大切にテンプレートを作成

サイト運用を考えた際、頻繁に利用するコンテンツは使い回しが効くようにマークアップ。
共通化しても破綻しないようなCSSの設計や、今後コンテンツを追加しても問題ないような拡張性も意識して構築を行いました。

共通化のルールを意識

汎用性の高い情報エリア

フォームの利便性も大事

何度も表示されるコンテンツは共通化コンテンツとして予め設計し、汎用的に利用されるコンテンツはどんな情報が入っても表示崩れしないようなマークアップを心掛けました。
お問い合わせフォームも使いやすいよにしっかりレスポンシブ対応しています。

—

説得力のあるデータをグラフィカルな表現で

データの表現はチャートJSを利用してグラフィカルな表現に。
情報量が多いページもデータはグラフで表示し、ユーザーが視覚的にも分かりやすいように設計しました。

ページ複製をすることも見据えたプログラムの実装を心掛け、HTML側でデータ入力できる仕組みを採用。

サイトの設計や構築だけも承ります

今回のプロジェクトのように、サイトリニューアルに伴う要件整理や、制作部分をテンプレートのみとするような、クライアントに合わせた対応も可能です。

自社にデザイナーがいる、いつものエンジニアに構築を依頼したい、などの状況に合わせて対応いたします。
ハイファイブではサイト設計だけ、WordPressの構築だけ、といった相談もありますのでお気軽にご相談ください！