【自主制作】AI議事録作成ツールのデザインカンプ
「SHElikesトレーニングプログラム」実践課題として取り組みました。 【制作範囲】情報設計~ワイヤーフレーム(SP版)~デザインカンプ(PC・SP版)
【制作期間】情報設計~SP版FV制作:17h、PC版・SP版デザイン展開:60h
【使用ツール】Illustrator Photoshop
【目次】
①制作物
②課題概要
③情報設計
④工夫したところ
①制作物

※課題に登場する企業、サービス、人物はすべて架空のものであり、以下のとおり課題概要はスクールより提供されたものです。
②課題概要
ツールの概要
オンライン会議の音声をもとにしてAIが会話内容を文字起こし・要約し、議事録を自動で作成してくれるサービス「ラクギジ」。簡単な設定で議事録作成の手間から解放し、皆さんの仕事の生産性を大幅に向上させます。
LPの目的
- LPでサービスの特徴やメリットを伝え、サービスに関心を持ってもらい詳細資料をダウンロードしてもらう。
- 関心を持った人の情報(連絡先など)を入手して、個別に営業をかけられるようにする。
担当制作範囲
情報設計/デザインカンプ(PCサイズ、SPサイズ)
課題として提供いただいた素材
・PC版ワイヤーフレーム
・サービスロゴ
③情報設計
課題概要をもとに以下のとおり考案しました。
ターゲット
- チームで業務をしており、情報共有や記録として議事録を作成する必要がある方
- 日常の業務量や会議が多く、議事録作成に時間を割けないため、会議の効率化や時間の節約を求めている方
- 議事録ソフトの導入に対してハードルを感じている方
ペルソナ
伝えたいこと
- 議事録ツールの導入により会議の効率化が図れること
- 職場のどのメンバーでも気軽に使えるツールであることを強調し、導入への興味を引き出す
配色
キーワード「ラク」に基づき、操作が簡単で寄り添う印象を与えるために緑を選択
フォント
見出しーMeiryoUI
親しみやすさを感じられ、ラクギジのロゴに似た雰囲気のものを選択
本文ーNotoSansJP
読みやすさを重視し、Webサイトでよく使われるものを選択
④工夫したポイント
操作が簡単なツールであるというイメージを抱いていただけるよう、イラストを随所に使用して離脱を防ぐ工夫をしました。イラストは親しみやすさを感じさせるもので、配色は親しみやすさや初心者も安心して使用できるツールであることを連想させるグリーンを基調としています。
ファーストビュー
ラクギジを導入した結果、業務効率を実感して喜んでいる様子のイラストを配置しました。イラストの配色も背景色にあうように同系色の緑に統一しました。また、利用シーンをイメージしやすくするためにPCや携帯のスクリーンにサービスのイメージできるようにモックアップを作成しました。
お悩み
行き詰まっている雰囲気を出すために背景色をグレーにし、内容に合ったイラストを選びました。
CTAボタン

緑と相性の良い黄色を使用して視線誘導を図り、テキストは「ダウンロードする」と動詞に変えることで、よりアクションを促すよう工夫しました。
特徴
具体的なサービス内容が直感的に理解できるよう、アイコンと説明文をバランスよく配置しました。
導入事例
利用者の声をシンプルに伝えることで、印象に残るようにしました。
ご利用の流れ
導入フローを画像で表し流し見でも理解できるように直感的伝わるようにし、導入までの流れがシンプルであることや、ご利用状況に合わせた最適化プランを提案できることをアイコンでわかりやすく表現し、顧客が検討するきっかけを作りました。
よくある質問
FAQセクションではサポートの内容を確認しながら、サービスの概要と特徴を把握できるように工夫しました。
資料請求フォーム
ワイヤーフレームの提案をもとに、ユーザーが気軽に問合せできるように、自由形式の記述欄を追記しました。
