ウェブデザイン
製品紹介サイトリニューアル

製品紹介サイトリニューアル

プロジェクト内容

製品の機能追加に伴う紹介サイトリニューアル

業務内容

トップページ修正 / 機能詳細説明修正 / 機能ページデザイン・追加 / ニュースページデザイン・追加

担当フェーズ

ディレクション / ワイヤーフレーム作成 / デザイン /コーディング

期間

2025年8月~2025年9月

使用ツール

XD Dreamweaver Illustrator Photoshop Premiere Pro HTML CSS (Tailwind) Javascript

デザインのコンセプト

1

これまで足りていなかった製品の詳細を分かりやすく見せる

「AI」で検索して訪問するユーザーに向け、これまで漠然とした説明しかなく分かりづらかった製品概要・機能の詳細を分かりやすく提示。

  1. ユーザーは何をしてAIが何をするのか
  2. 基本機能のほかにできること、生まれる効果は何なのか
  3. 各機能の詳細を伝えるページを新規作成

これまでは単階層サイトで簡単な説明しかなかったため、もっと分かりやすくするため多階層化し「機能」ページを設けることを提案、実装しました。

2

使用イメージを動画で分かりやすく

漠然としたイメージを伝えるだけ、あるいはミスリードすらしてしまう動画の排除を提案し、新たに動画を作成しました。

特に新規追加機能については、自身がUIデザインを行なっており「ユーザーに分かりやすい見せ方」を把握していたため、自分で使用している様子をキャプチャし動画化、以前より伝わりやすくミスマッチも起こしづらい見せ方になりました。


工夫した点・実績

初見のユーザーが概要を把握できるよう改変

これまでは漠然とした機能の羅列だった紹介を削除し概要セクションを追加、イラストで分かりやすく紹介し、特筆すべきポイントをまとめて視覚的にも改善しました。

機能に関してはさらに踏み込んだ機能ページを作成し、詳細を記載。

初見のユーザーが概要を把握できるよう改変

サイトを重くしていた動画を削除、埋め込みで軽量化

製品と直接関係ない動画などがサイトを重くしていたため新たに使用シーンを撮影、埋め込みにより軽量化を図るとともに、実際の機能をビジュアルで見せることで、ユーザーに利用イメージを想起させる形に修正しました。

サイトを重くしていた動画を削除、埋め込みで軽量化

ニュースリストの追加

コーポレートサイトにしか掲載していなかった製品にまつわるニュースを製品サイトにも掲載することを提案。これまで切り分けが曖昧だった企業と製品のアプローチを変更しました。
製品ドメインを取得したサイトであるため、製品に特化したサイトにするべきであるという理由です。

トップページとニュースページ両方で更新を行なう作業の負担を軽くするため、JSファイルを1つ更新すればどちらも反映される形態で実装しました。

ニュースリストの追加

既存セクションの改善

これまで「利用シーン」として提示していたセクションが、テキストしかない無味乾燥なリストであったため改善案を提示。
サムネイル付きかつクリッカブルなカード形式に変更し、ユーザーの興味をそそるデザインを試みています。

また、AIで生成したことがすぐにわかってしまう画像もすべて修正しました。

既存セクションの改善