動きで「何をしてくれる会社か」を伝える
— OFISYS 制作記録

← Blog に戻る

BtoB（会社向け）のサービスサイトは、扱う内容が形のないものほど難しい。「ヘルプデスク」「ネットワーク保守」と文字で並べても、読む人の頭にはなかなか絵が浮かばない。今回はそこを、画面の動きそのものでサービスの中身を伝えることに挑戦した。

作ったのは、架空のBtoB SaaS 「OFISYS（オフィシス）」。LPは公開済みで、実物をそのまま触れる。これまでLP・予約システム・コーポレートサイトは作ってきたが、「月額サブスク型サービスのLP」は手元になかったので、ポートフォリオの新しい1枚として制作した。

何を作ったか

OFISYS は、「社内に専任のIT担当者がいない」中小企業に向けた、ひとり情シス代行の月額サブスクという設定のサービス。 ヘルプデスク・ネットワーク保守・セキュリティ・PCのキッティング（初期設定）を、月額定額でまるごと引き受ける——という想定で設計した。

BtoB SaaSのLPに必要な要素——信頼感のあるヒーロー、サービス内容の整理、料金プランの比較、よくある質問——を、 外部のフレームワークを一切使わず、純粋な HTML / CSS / JavaScript だけで実装している。

できること（4つのサービス）

サービスの中身を表すアイコン画像も、トンマナを揃えて4枚オリジナルで制作した。色味も世界観も「同じサービスの絵」として一貫させている。

こだわった「動き」

このLPの主役は、文章ではなく動きだ。意味のない装飾ではなく、一つひとつの動きが「サービスの理解」につながるように設計した。

1. 打ち替わる見出し（タイプライター演出）

ヒーロー（一番上の大見出し）は、セリフ体の文字が1文字ずつ打ち込まれ、語尾だけが入れ替わる演出にした。「IT業務を、◯◯」の◯◯がタイプし直されることで、このサービスが何を解決してくれるのかが、読む前に視線へ飛び込んでくる。最初の数秒で興味を引くための仕掛けだ。

2. 道具箱からサービスが飛び出す

「できること」のセクションは、スクロールに合わせて道具箱の中から4つのサービスが順番に飛び出してくる演出にした。画面を固定（sticky）したまま、時間差とわずかな跳ね返り（オーバーシュート）をつけて飛び出させることで、「IT代行＝あなたの会社の道具箱」というテーマを、言葉でなく動きで伝える。読み手が手を動かす（スクロールする）たびに、サービスが一つずつ顔を出す。

3. カーソルを乗せると詳細がひらく

ヒーローには「サービスが繋がる」構図を採用。中央の専任チームを4つのサービスが取り囲み、各サービスにカーソルを乗せる（スマホはタップ）と、その場で詳細がポップする。全部を一度に説明せず、興味を持った部分だけ深掘りできる作りにした。

4. 料金は月払い／年払いをその場で切り替え

料金表には、月払い・年払いを切り替えるトグルを付けた。スイッチを押すと金額がその場で書き換わる、SaaSサイトでおなじみのUI。「年払いだといくら安くなるか」を、ページを移動せず一目で比べられる。

このほか、よくある質問はクリックで開閉するアコーディオン、スクロールで追従するヘッダー、スマホ用メニューなど、細部の挙動まで素のJavaScriptで実装している。外部ライブラリに頼らないぶんページが軽く、保守のときに「ライブラリのバージョン上げ」みたいな引き継ぎコストが出ない。

「世界水準のデザイン基準」を持ち込む

今回は制作と並行して、自分用のデザインのものさし（デザインシステム）を整えた。 余白・文字サイズ・配色・動きの作法をルール化しておき、案件ごとに「ムード」を切り替えて使えるようにしたもの。 OFISYS は、その中の 「SaaS（ブルー基調・信頼感）」ムードの基準実例として作っている。

狙いはシンプルで、毎回ゼロから悩むのをやめて、品質のスタートラインを引き上げること。 色は CSS Custom Properties（テーマ変数）で一括管理しているので、ブランドカラーを変えたくなっても1箇所の数値を書き換えるだけで全体に反映される。

ロゴも画像も、オリジナルで揃える

OFISYS は、ロゴ・サービスアイコン・人物イラストまで、すべてオリジナルで制作している。ストック画像は1枚も使っていない。

• ロゴ：頭文字「O」をグラデーションのリングで表現したシンボル。拡大しても滲まない SVG 形式で、どんな画面サイズでも輪郭がくっきり出る
• サービスアイコン4枚・人物イラスト：AI画像生成（gpt-image-2）でトンマナを統一して作成。色も世界観も「同じサービスの絵」として揃えた

「写真を撮る」「素材を買う」をやめて、必要なときに必要なだけ作るに切り替えると、ブランドの一貫性も、コストも、時間も同時に良くなる。

使った道具

ポートフォリオへの統合

最後に、これを kokona-makes.dev の Works No.13 として追加した。 作品詳細ページには概要・こだわり・技術構成を載せて、「サイトを見る →」ボタンから本物の OFISYS へ飛べるようにしている。 ポートフォリオトップ → 作品詳細 → 実物の3ステップで、「文章で理解 → 実物で確認」が自然に流れる動線だ。