ウェブデザイン
企業向けAIプラットフォーム 製品サイト

企業向けAIプラットフォーム

プロジェクト内容

新規にリリースする企業向けAIプラットフォームの製品紹介サイトの制作。

業務内容

製品説明用の資料をもとに、Webサイトとして必要となる情報の整理・構成から、デザイン、HTMLによるデザインモック制作までを担当。
現在はトップページを制作し、今後複数ページへ展開することを想定して作成中。

担当フェーズ

情報整理 / 情報設計 / Webデザイン / HTML・CSS / JavaScript

期間

2026年7月~現在

使用ツール

Visual Studio Code Codex HTML CSS Javascript Photoshop Illustrator Claude ChatGPT

課題と設計方針

制作開始時に用意されていたのは、製品の機能や構想をまとめた説明資料のみでした。
資料には製品側が伝えたい情報は含まれていましたが、Webサイトとして「誰に何を伝えるのか」「訪問者にどのような行動を取ってもらうのか」といった情報設計は定義されていませんでした。

そのため、資料の内容をそのままページへ配置するのではなく、まず製品情報を整理し、Webサイトを訪れるユーザーの視点から情報の優先順位と導線を組み立て直すことから始めました。

製品の機能を網羅的に説明することよりも、まず「何のための製品なのか」「導入すると何が変わるのか」を理解できることを重視しました。

また、「問い合わせ」を主要なコンバージョンとして設定し、製品を理解したユーザーが必要なタイミングで相談へ進める構成としました。

デザイン

考えたこと・工夫した点

資料の構成をそのままサイトにしない

制作の大元として提供されたプレゼンテーション資料は、説明者が補足しながら順番に見せることを前提としています。一方で、このWebサイトはユーザー自身が情報を読み、必要な情報を判断します。

そのため、資料のページ順や見出しをそのままWebへ移すのではなく、内容を一度分解し「製品の概要」「提供する価値」「導入によって変わること」「導入の流れ」といった順番に整理した上で、設定したターゲットに伝わるような再構築を心掛けました。

整理と再構築

「機能」ではなく「導入すると何が変わるか」を中心にする

製品機能を列挙するだけでは、初めて製品を知るユーザーが自社との関係をイメージしにくいと考え、「何ができるか」だけでなく「導入することで現在の状態がどう変わるのか」を中心に情報を構成しました。
資料という「読みもの」「わかりやすく伝えるもの」の利点を最大限に活かし、Webサイトに落とし込むという作業を行いました。

特に、企業において最も重要だと言えるガバナンスなどは、Before / Afterを用いて導入前の課題と導入後の状態を比較できるようにしています。

導入すると何が変わるか

情報設計ツールとしての生成AI利用

本案件では、制作の初期段階から生成AI(ChatGPT / Claude )を使用しました。

資料に含まれる情報の抽出・分類やページ構成の検討をAIと対話しながら進め、複数の構成案を比較しました。

一方で、AIが提示した構成をそのまま採用するのではなく、ターゲットやコンバージョン、情報の重複、初めて製品を知るユーザーに伝わるかという観点から内容を見直し、最終的な情報設計を自分で行いました。

AIを使った制作フロー