関連スライド
各ページのテキスト
Webコンセプト 60266047 大倉千波 MDセミナー1B デザイングループ 第4週課題
製品コンセプト ドリンクも人も温められるヒーター • オフィス・デスクワーク空間での使用を想定 • 休憩時や仕事中に温かい飲み物が飲めるよう、ドリンク保温機能を搭載 • 利用状況に合わせて複数のカラーバリエーションを用意する <既存の製品との違い> カップウォーマー：机上に置くため倒しやすい・やけどの心配がある 一般的なヒーター：ドリンクの保温はできない MDセミナー1B 2023 デザインGr.
製品デザイン • 下の土台により倒れにくい形状 • 座ったままカップを出し入れしやすく、やけどしにくい 保温口 • つまみによるヒーター温度・保温温度の調節機能 • 側面のくぼみにより移動もしやすく • 夏に押し入れ下段や物置に収納できるサイズ感 （W21cm×D21cm×H78cm） ※マグカップは付属しない MDセミナー1B 2023 デザインGr.
ターゲット • リモートワークなどでデスクワークをしている人 • 自宅での利用 • スマートフォンでの検索により発見 • 社内のオフィス環境を改善したい人・担当者 • 会社のオフィスでの利用 • 購入者本人が使う場合と購入者が使用する わけではない場合を想定 • PCで検索し発見 MDセミナー1B 2023 デザインGr.
ペルソナ①：シナリオ・タッチポイント 鈴木知美さん • 26歳 女性 • リモートワークをしている • 一度実店舗にも行ったが悩み中 • 一人暮らしをしているため、電気代を 節約したいと考えている • コーヒーを飲むのが好き • SNSをよく見ている SNSの広告を見てページを発見 トップページを見て、ドリンクの保温が 出来ることに特に強く興味を持つ 他の購入者のレビューを見て 購入を決意 購入 MDセミナー1B 2023 デザインGr.
ペルソナ②：シナリオ・タッチポイント 森本克彦さん • 43歳 男性 • 一般企業の総務担当 • オフィス環境の整備を担当することに なった • 社員が心地よく過ごし、業務効率を 向上させられるようなオフィスを目指 したいと考えている 「ヒーター オフィス」などでPCで検索し、 ページを発見 オフィス環境での使用イメージを持つ 概要・性能やレビューを見て 導入してみることを検討 購入 MDセミナー1B 2023 デザインGr.
Webコンセプト 利用シーンを全面に押し出し、 使用イメージを持ってもらう • ランディングページで使用時の様子や機能が分かる画像を多用し、使用イ メージを沸かせ興味を持ってもらう • 興味を持ってもらえたら具体的な性能を商品紹介ページで確認してもらう • 商品紹介ページに購入者レビューを表示し、購入欲を沸かせる • レスポンシブ対応によりスマホからもPCからも見やすくする • ターゲット：購入検討者・オフィス環境整備担当者(製品と同様) • デザインイメージ：見やすさを重視しシンプルに MDセミナー1B 2023 デザインGr.
ワイヤーフレーム①：トップページ トップ画像 利用シーン①画像 利用シーン②画像 利用シーン② 短い説明 → 利用シーン① 短い説明 説サス 明イク 毎トロ に訪ー 商問ル 品者に 紹に応 介使じ ペ用て ーの画 ジイ像 へメ のー説 リジ明 ンをの ク持順 もっに 示て表 すも示 らし う、 利用シーン③画像 利用シーン③ 短い説明 商品の概要説明 (コンセプト、値段など) カラ バリ カラ バリ カラ バリ 商品紹介へ 実 際 は も う 少 し 余 白 を 増 や し 、 見 や す く す る MDセミナー1B 2023 デザインGr.
ワイヤーフレーム②：商品紹介ページ 配性 置能 し表 、の 収横 納に やサ 配イ 置ズ の感 イの メ分 ーか ジり をや 持す っい て画 も像 らを う ヘッダー (リンク) 製品画像 商品の概要説明 (コンセプト、値段など) 購入ボタン ス一 ラ定 イ時 ド間 シご ョと ーに に自 よ動 り切 視り 覚換 的え にさ 情れ 報る を製 伝品 え画 る像 の 商品の性能表 (サイズなど) カラ バリ カラ バリ カラ バリ 購入者のレビュー あ詳 る細 人の だ冗 け長 がな 見部 れ分 るは よ、 う折 にり し畳 てみ お式 くに し 、 興 味 の MDセミナー1B 2023 デザインGr.
制作したサイト①：トップページ 一番最初に画面全体にメインの使用例画像 を示すことで、興味を引けるように。 MDセミナー1B 2023 デザインGr.
制作したサイト①：トップページ 1つずつ商品画像や使用例を示すことで、実際に使用するイメー ジを持ってもらい、商品に興味を持ってもらうようなデザインに なるようにした。 また、使用例に関しても画像と説明を1組にし、すべて最初から 表示しておくのではなく順に動きを付けて表示していくことで、 サイト訪問者が飽きにくいように工夫した。 さらに、リンクボタンを各所に置くことで、興味がわいた時点で すぐに商品紹介ページへ移動できるようにした。 MDセミナー1B 2023 デザインGr.
制作したサイト①：トップページ 商品コンセプトや特徴を端的に示すことで、分かりやすく商品に ついて知ることが出来るようにした。 また、カラーバリエーションに関しては実際の画像を載せること で商品イメージを持ってもらいやすくした。 MDセミナー1B 2023 デザインGr.
制作したサイト②：商品紹介ページ 最初にカルーセルを設置し、自分でスライドするだけでなく 一定時間ごとに自動スクロールするようにすることで、最初に表 示される画像以外についても見てもらいやすくした。 またトップページに載せていた内容を再掲し、ページ移動の手間 なく情報を再確認できるようにした。 MDセミナー1B 2023 デザインGr.
制作したサイト②：商品紹介ページ 商品の詳細については表形式で提示することで、簡潔にわかるよ うに工夫した。 また、レビューについても載せておくことで、実際の利用者の声 を元に「購入しよう」と思ってもらいやすくした。 MDセミナー1B 2023 デザインGr.