どういうサイトか
企業向けにサービスを提供している会社のコーポレートサイトという設定で制作しました。訪れた人に資料をダウンロードしてもらうこと、問い合わせをしてもらうことが目的のサイトです。
トップ、当社について、サービス、導入事例、セミナー、お知らせ、資料ダウンロード、お問い合わせと、それぞれの完了ページを含めて10ページを超える構成になっています。
なぜ導入事例を追加・更新できる仕組みにしたか
このサイトで最も時間をかけて考えたのがこの部分です。
導入事例は、公開したあとに増えていくものです。1件追加するたびに制作者へ依頼しなければならない形にすると、そのうち更新が止まります。実際、事例が古いまま止まっているサイトは珍しくありません。
そこで導入事例を専用の投稿タイプとして用意し、担当者が編集画面から追加できるようにしました。入力するのは会社名・業種・内容・写真だけで、一覧ページにも自動で並びます。HTML を触る必要はありません。
あわせて業種のタクソノミーを用意し、見る人が自分に近い事例から探せるようにしています。事例が増えるほど一覧は見づらくなるので、増えることを前提にした絞り込みを最初から入れておく必要がありました。
工夫した点
- 送信後の導線:お問い合わせと資料ダウンロードは、送信後に専用の完了ページへ移動する形にしました。同じページ内にメッセージを出すだけだと、送信できたのか分かりにくく、計測もしづらいためです。
- あとから触れるファイル構成:Sass を FLOCSS の考え方で分割し、34 ファイルに整理しました。1年後に自分以外の人が開いても、直したい箇所のファイルにたどり着けることを基準にしています。
- 画像とアイキャッチの扱い:編集画面から登録した画像が、意図した比率で表示されるようにしています。運用する人が画像のサイズを気にしなくて済む状態が目標でした。
担当した範囲
サイト制作のみを担当しています。デザインは提供されているデザインをお借りしました。技術の検証のために自主制作したサイトです。