応募用01.pdf

Transcript

1. YOSHIKO FUJIMOTO UI/Web Designer Portfolio 1
2. 制作事例01・物件検索アプリのUI改善案 物件情報アプリのUI改善案 制作範囲 ワイヤーフレーム・デザイン (既存アプリの改善提案画面の制作) 使用ツール figma 自主制作 159
3. UI改善案制作について 事業内容 フランチャイズ店舗を通じた全国展開 売買に関連するサービスを提供 （仲介、買取、リースバックなど） ・App storeでの口コミ ・決算資料 ・ネットにおけるアンケート結果 ・実際に家を購入した知人の経験談 上記をもとに事業にプラスになるような UIの改善等を考えました。 ※事業用の物件も掲載したアプリですが、 　一般ユーザーが物件購入する際、という前提で 　改善案を制作しております App storeに寄せられた口コミ例 ハウス ドゥ様アプリ アプリの役割(ゴール) 最終ゴール 現状 ストレスなく検索から問い合わせに繋げる スムーズに操作できるようUI変更 ユーザーの離脱を防ぐ 電話・ メールでの お問い合わせ 店舗来店・内見 物件ご購入の 先もサポート 改善対象とさせていただいたアプリ アプリの目的・その先のゴール athome SUUMO LIFULL HOME'S 物件情報の提供が主なサービス 広告掲載を主な収益源としている 参考にした 同ジャンルのアプリ 10
4. ペルソナ  大阪市内もしくは市内へのアクセスが良いエリアb  一戸建てか広めのマンションを購入したいと考えているb  子供ができたときのために、普及の2LDK～3LDKを検討b  周辺に学校や病院、ショッピングモールなどの施設が一貫しているエリアを希望しますb  駅までのアクセスが良く、かつ静かな住宅街b  住宅ローンを無理なく返済できるプランを探しています。 物件の購入を考えるご夫婦 すでに存在するアプリですが、より行動を具体的に考えるため、ペルソナを設定しました。 田中 美咲 31歳/フリーランスのライター リモートワークが中心で、在宅時間が長い。 大阪市内で、現在の住まいは賃貸マンション。 メインターゲット 田中 健一 33歳/製造業の管理職 仕事はフルタイムで、通勤時間が短くしたい。 サブターゲット 11
5. フェーズ 行動 思考・心理 課題 きっかけ 認知・関心 登録・初回利用 探索・比較 問い合わせ 他社アプリとの差別化、 操作感は寄せる 自社アプリの強みとして、 を掲載す るなど工夫が必要 詳細な 物件情報(写真や動画等) お問い合わせがワンタップ、新着 物件情報が早く届くなど、 が必要 手間を 上回るメリット 登録情報をもとに簡単に問い合わ せができることをアピール 情報を共有してもらう、見返した もらうための工夫 下記媒体でアプリを見る ・インターネット ・チラシ ・地域情報紙 ・店舗 物件情報を提供するアプリ が多数ある中で使ってもら う工夫 アプリをダウンロード 「家を買うためにいろんな サイトやアプリ見てみよ う！」 ・新規会員登録 ・利用店舗登録 情報掲載サイトに比べ、自 社物件のみのため物件数は 少ない ・物件検索 ・検索条件を保存 「売買に特化してるのは探 しやすいかも」 「試してみようかな」 ・電話で店舗へ問い合わせ ・メールで問い合わせ わざわざ登録するメリット の提示 「利用店舗を登録しない と、新着のお知らせが届か ないのか…」 「新着物件の中で気になる 物件があった」 お気に入り登録のしやす さ、家族との情報共有 問い合わせのハードルをど う低くするか 「ワンタップで問い合わせ できるのね、一度聞いてみ よう」 カスタマージャーニーマップ 12
6. 改善のための情報収集：決算資料・インターネットにおける調査より 画像引用元： ＆DO HOLDINGS【書き起こし】 2024年6月期通期決算説明会 https://www.housedo.co.jp/and- do/ir/fy-2024_4q.html ・リースバック事業 ・中古住宅の販売 事業のなかで、今後特に力を入れていく分野を確認 決算資料 ・中古住宅の購入検討率が2019年以降で最も高まっている ・将来的な売却を検討している層も増えている インターネットにおける調査 株式会社リクルート・『住宅購入・建築検討者』調査（2023年） https://www.recruit.co.jp/newsroom/pressrelease/2024/0425_14268.html 引用元： 13 住宅購入経験者のアンケート回答結果 PRtimes｜株式会社AlbaLink【家を購 入する際に優先したことと妥協したこ と】経験者493人アンケート調査 https://prtimes.jp/main/html/rd/ p/000000019.000055654.html 画像引用元： 住宅購入経験者のアンケート回答結果 PRtimes｜株式会社ESTGROUP【後悔！中古マンション 購入時の注意点10選！】男女103人アンケート調査 https://prtimes.jp/main/html/rd/ p/000000001.000123169.html 画像引用元： 物件を選ぶ際に多くの方が見るポイントを 調査結果から確認し、画面に記載する情報 を選定する際の参考にした。
7. 改善のための情報収集：実際の住宅購入者の体験談 物件の種類検討 地域決定 エリアを絞り検索 探索・比較 内見 購入決定 ・新築か中古 ・戸建てかマンション 人生のお金プランが大きく 変わるので最初に決めてか ら探した。 はじめに物件の種別を決める (横断して探す場合もある)と 仮定 すり合わせするために 物件情報の共有ボタンは必要 いくつか内見を済ませている とほぼ理想が確定しており、 購入までの決断も早い ※ネット上で調査結果は見つけられず 実際に一戸建ての住宅を購入したご夫婦に 購入時のフローを聞いてみました 【希望】 ・新幹線の停車駅 ・停車駅付近の駅へ在来線 で1〜2駅でたどり着ける駅 希望駅から徒歩20分以内が◎ 付近の駅なら徒歩5-10分 学校については調べず 当時お子さんは1人(1歳) 夫が住宅情報アプリを毎日 チェック よさそうな物件を見つけたの で内見の予約電話 ・更地の状態 ・モデルハウスもなし 間取りやイメージ図などを見 たうえで、同じ建築会社が建 てた別地域の家を見学(間取 り等異なるので参考にはなっ ていない) 調査結果をもとに 実際にアプリ画面を改善しました 条件に照らし合わせて 購入を決定 (内見から4日後) 人気の地域だったため、売り 出しからすぐに他の分譲地も 完売 約1年間で、すでに7〜8件内見済み なんとなく理想のイメージがある状態 14
8. 改善案の画面 15
9. 物件の検索画面・　 BEFORE ※Appstore/HOUSE DO!様アプリへの口コミ引用 ※HOUSE DO!様アプリより画像引用 地図/リストの 切り替え表示に 気付かない？ アイコンが何を示すのか 分かりづらい タブごとに決定を押して 希望条件を入力する必要がある トグルボタンが 分かりづらい？ デフォルトですべて ONになっている 何のタブかが 分からない 選択させるのであれば、トグル ボタンよりもチェック式のほう が分かりやすいのではと考えた 種類を絞って探す方が一般的で は？(他社アプリの検索画面や口 コミより) すべてが選択候補になってるか らオフにするのが面倒だし、一 般用物件と収益物件とではター ゲットがちがうのでは？ 16
10. 物件の検索画面　 AFTER 改善案のアプリ画面 物件の種別選択 地域を選択 探し方を選択 地図をなぞって候補を探す すべてデフォルトで検索候補だったものを、 一種類選択、もしくは『まとめて探す』ボタン から必要な種類のみ選んで検索するよう変更。 事業用・収益物件はボタンを分けた。 決定ボタンを押してタブ切り替えする仕様から 項目選択後に次の画面へ遷移。 選び方は同業他社のアプリを参考に 人気の条件をピックアップしてボタンを 設置。 立地を気にするユーザーが多いので 地域内でもより希望のエリアに絞って探 せるよう、『なぞってさがす』を追加。 決定ボタン→タブを開くという工程を なくし、スムーズに画面遷移して検索 できるように。少ない操作で素早く物 件一覧へたどり着けるようにした。 17
11. 検索後の一覧表示 BEFORE ※HOUSE DO!様アプリより画像引用 AFTER 改善案のアプリ画面 入力した検索条件を配置。 地図表示への切替え、並び順の変更は迷わず分 かるよう配置。 検索結果の一覧から分かる 情報が少ないので、いちい ち開かないといけない… マンションの場合は毎月かかる管理費も記載。 一覧画面の時点である程度の情報を掴ん で取捨選択できるように情報を記載、 条件の変更等も迷わせないボタンで操作 性の向上を狙った。 9:41 AM 100% ▪▪▪ 検索結果　602件 中古マンション 大阪府大阪市中央区北浜 間取り 〇〇マンション 10階 ２ＬＤＫ 万円 6,000 円 10,000 /管理費等 専有 45.42㎡（壁芯） 間取り ２ＬＤＫ 築年数 2022年10月(築2年) 交通 京阪本線/北浜駅 徒歩10分 1/20 物件検索 履歴 お気に入り 新着 マイページ 間取り表示 並び順の変更 地図表示 条件保存 条件保存 条件変更 条件変更 チラシ番号 チラシ番号 18
12. 物件詳細の画面 BEFORE ※HOUSE DO!様アプリより画像引用 AFTER 改善案のアプリ画面 すぐにお気に入り登録・共有ができるようにボ タン配置。 間取りがどこから見れるのか不 明、この画面だけで知れる情報 が少ない、共有ボタンがない… 間取り表示への切り替えをスムーズに。 家族と情報共有する可能性が高いので ボタン設置。すぐに確認できる情報を 増やし、判断の時間を短縮・多くの物 件を見てもらえるように配慮した。 スクロールしなくても物件の概要が掴めるよ うに。記載した項目は、物件選びの優先項目 で上位のもの。(下記アンケートを参照) 9:41 AM 100% ▪▪▪ 物件検索 履歴 お気に入り 新着 マイページ 間取り 住宅ローンシュミレーター 万円 6,000 〇〇マンション 10階 ２ＬＤＫ 階数/階 13階/10階 築年数 2022年10月(築2 年) 専有面積 45.42㎡（壁芯） 間取り ２ＬＤＫ 所在地 大阪府大阪市中央区北浜 交通 京阪本線/北浜駅 徒歩10分 主要採光面 南 1/20 メールで問い合わせ 電話で問い合わせ(無料) 円 10,000 /管理費等 ※Appstore/HOUSE DO! 様アプリへの口コミ引用 画像引用元： PRtimes｜株式会社AlbaLink【家を購入する際に優先 したことと妥協したこと】経験者493人アンケート調査 https://prtimes.jp/main/html/rd/ p/000000019.000055654.html 19
13. 物件詳細の画面(つづき) BEFORE ※HOUSE DO!様アプリより画像引用 AFTER 改善案のアプリ画面 人気の条件を記載 ずらっと情報が並んでいて 選びづらい… ボタン部分 フランチャイズ店舗への電話に繋げるため、 電話ボタンを塗りつぶしで目立たせ右に配置。 アイコンも使用し、パッと見て分かりや すく変更。ボタンは見た目に強弱をつけ て電話を選ばれやすくし、よりスピー ディーにご案内へとつながるように。 設備・特徴 バス・トイレ 浴室乾燥機、追い炊き希望、シャワー付 き独立洗面化粧台、温水洗浄便座 キッチン カウンターキッチン、食器洗浄乾燥機、 浄水器、IHクッキングヒーター、コンロ ３口以上、グリル機能 9:41 AM 100% ▪▪▪ 物件検索 履歴 お気に入り 新着 マイ ページ 〇〇マン ション 10階 ２ＬＤＫ メールで問い合わせ 電話で問い合わせ(無料) 地図を拡大 人気のこだわり条件 2階以上 エレベーター 2基以上 ペッ ト可 南向き 常時ゴミ出し可 24時間セキ ュリ ティー 設備・特徴 バス・トイレ 浴室乾燥機、追い炊き希望、シャワー付 き独立洗面化粧台、温水洗浄便座 キッチン カウンターキッチン、食器洗浄乾燥機、 浄水器、IHクッキングヒーター、コンロ ３口以上、グリル機能 20
14. 閲覧履歴・保存した条件の画面（閲覧・保存前） BEFORE ※HOUSE DO!様アプリより画像引用 AFTER 改善案のアプリ画面 画面に何が表示されるのかをあらかじめ記載。 この画面には何が表示 されるのかがわからない… 検索を促すための文言の記載・ボタンを設置。 9:41 AM 100% ▪▪▪ 最近見た物件 保存した検索条件 物件検索 履歴 お気に入り 新着 マイページ 履歴一覧 直近の閲覧した物件を表示します。 まずは下のボタンから条件を入力してください。 物件を探してみる 物件を探してみる 希望条件を保存しておくと になります！ 次回の検索がラク 希望条件を入力する 希望条件を入力する ボタンの文言やアイコンを変更し ユーザーがひと目でわかるように。 履歴がない場合も利用に関する説明を 加えてすぐ検索してもらえるようにした。 検索を促すような文言はなし 閲覧履歴・保存した条件を見る画面なので ボタン名は物件リスト、よりも 「履歴」などのほうが分かりやすい？ 『物件リスト』から『履歴』へ名称変更。 アイコンは他社類似アプリを参考にした。 LIFEULL HOME’S様アプリ画面より引用 SUUMO様アプリ画面より引用 21
15. 閲覧履歴・保存した条件の画面（閲覧・保存後） BEFORE ※HOUSE DO!様アプリより画像引用 9:41 AM 100% ▪▪▪ 最近見た物件 保存した検索条件 新築マンション 大阪府大阪市大正区 2K/DK/LDK 今週の新着・更新 3件 物件検索 履歴 お気に入り 新着 マイページ すべて見る すべて見る 大阪市北区中之島7-5... 「中之島」駅 徒歩10分 万円 5,800 新築マンション 大阪市北区中之島7-5... 「中之島」駅 徒歩10分 5,800 新築マンション 大阪市北区中之島7-5... 「中之島」駅 徒歩10分 万円 7,000 新築マンション 大阪市北区中之島7-5... 「中之島」駅 徒歩10分 万円 7,000 新築マンション 大阪市北区中之島8-5... 「中之島」駅 徒歩10分 万円 6,000 中古マンション 大阪市北区中之島8-5... 「中之島」駅 徒歩10分 万円 6,000 中古マンション 中古マンション 大阪府大阪市北区 2K/DK/LDK 今週の新着・更新 3件 履歴一覧 編集 AFTER 改善案のアプリ画面 物件をお気に入りに登録しているか判断でき、 していない場合もすぐ登録できるようにした。 ページ を開 かなく ても一部情報は分 かるよう、 物件購 入時 の重視ポイント1 ・2位 の、価格 ・立 地 を表記 。(別ページ アンケート結果 より) 条件は羅列せず 、一行づつ記載 アイコン も使 用し、パッと見 て分 かりや すく。 新着 物件のページ にも遷移 できるようにし、 閲覧や お問 い合わせ につ なが るようにした。 『 物件リスト』 から『 履歴』へ名称と アイコン を変更 。 物 件閲覧後 の画面 の状態 検索履歴が写真か間取りのみの 表示で、ひとつづつページを開 かないと詳細が分からない… こ の画面上 で分 かる情報 を増や して 一 覧性 をもたせ た。各ページ を開く 労力 を減ら した。 条 件が羅列されて分かりづらい 物 件の詳細は記載なし 条 件が羅列されて分かりづらい 物 件の詳細は記載なし 22
16. 個人情報の登録画面 BEFORE ※HOUSE DO!様アプリより画像引用 AFTER 改善案のアプリ画面 入力した時点でエラーがあれば表示。 プレースホルダーで入力を迷わないよう補助。 名前の入力は姓名を分ける場合もプレースホル ダーで入力例を提示 使用できる文字の種類や必要時数を表記し、 パスワードの入力前に知れる状態に変更 姓と名の間にスペースが必要 だという説明がない 登録ボタンを押したタイミ ングでエラー表記が出る プレースホルダーがないので 入力に迷う ・・・ パスワードに使用する 文字数に関しての説明がなく エラーになって初めてわかる お名前（全角） 必須 全角で入力してください ヤマダ太郎 お名前（全角カナ） 必須 ヤマダタロウ お電話番号（半角数字・ハイフンなし） 必須 自宅 携帯電話 0612345678 郵便番号（ハイフンなし） 必須 1234567 ▼入力すると、住所の一部が自動入力されます ご住所 必須 都道府県 東京都 市区町村 〇〇区〇〇 字・番地 9:41 AM 100% ▪▪▪ お名前（全角） 必須 全角で入力してください ヤマダ太郎 お名前（全角カナ） 必須 ヤマダタロウ お電話番号（半角数字・ハイフンなし） 必須 自宅 携帯電話 0612345678 郵便番号（ハイフンなし） 必須 1234567 ▼入力すると、住所の一部が自動入力されます ご住所 必須 都道府県 東京都 市区町村 〇〇区〇〇 字・番地 お名前（全角） 必須 山田 太郎 お名前（全角） 必須 山田 太郎 パスワード　※半角英数字8文字以上 必須 ******** パスワード　※半角英数字8文字以上 必須 ******** いざ登録ボタンを押したあとでエラーが 出たり、途中で迷う部分があるとユー ザーのストレスになり離脱の可能性も。 スムーズに入力できるように変更した。 入力を終えて登録しようとし たらエラーがでてやり直し！ 入力に関する説明がほしい… 23
17. 利用店舗登録・お気に入り等 お気に入り画面 利用店舗登録 登録がない場合も、状況の説明 と利用方法を記載しておく 登録すれば得られるメリットを記載。 接触回数を増やす・一件でも物件情報を多く見てもらう。 「わからない」「迷う」を要素を排除し て、積極的に使ってもらえるよう、丁寧 に説明を記載した。 9:41 AM 100% ▪▪▪ 新着 物件検索 履歴 お気に入り 新着 マイページ 現在、ご利用店舗が登録されていません。 右上の『＋』から設定が可能です。 こちらから の 登録をしてください 利用店舗 9:41 AM 100% ▪▪▪ 新着 物件検索 履歴 お気に入り 新着 マイページ 現在、ご利用店舗が登録されていません。 右上の『＋』から設定が可能です。 新着物件の見逃し防止 物件をお探しの地域の すると 新着情報が届きます！ お問合せもスムーズ！ 店舗を登録 9:41 AM 100% ▪▪▪ 新着 物件検索 履歴 お気に入り 新着 マイページ 現在、ご利用店舗が登録されていません。 右上の『＋』から設定が可能です。 気になる物件があれば まずはお気軽にお問い合わせを！ 最新の物件をいち早くお届け! 人気物件は します すぐに掲載終了 9:41 AM 100% ▪▪▪ 物件検索 履歴 お気に入り 新着 マイページ お気に入り お気に入りに追加した物件がありません 気になる物件は をタップして追加！ 星マーク この画面でまとめて見返したり 比較したりできます！ 物件を探してみる 物件を探してみる 24
18. その他・改善について考えたこと こちらは決算資料等をもとに あくまでも提案として 考えた内容です。 9:41 AM 100% ▪▪▪ 物件検索 履歴 お気に入り 新着 マイページ マイページ プロフィール プロフィール お問い合わせ 履歴 お問い合わせ 履歴 中古マンションに関する お役立ち情報 どんな物件が人気？ 買ってから後悔しないためのポイントは？ など、今すぐ知りたい情報をピックアッ プ！ お役立ち情報を見る リースバックって？ 自宅を現金化したあとも住み 続ける方法とは？ 住宅ローンを一括返済したい、でも引っ越 したくない、周囲にも家を売ったことを知 られたくない場合の手段をご紹介！ 記事を読む 自社アプリとしての強みの強化 中古物件市場にさらに注力するために、物件購入時の参考になる情報を 発信、物件詳細ページにはリフォーム済か否か、中古マンションは修繕 時期や積立金に関する情報等を把握できるようにする。 中古物件に関する情報 将来的な売却も考えている層が増加中なので、ハウス・リースバック (自宅を売却後、賃貸契約して住み続ける)等のサービスについて説明し たり、購入後までサポートできることをアピールする。 住宅購入後まで一貫したサポートが可能 地域に根差した生活情報の発信 フランチャイズ店舗があるため近隣エリアの生きた情報を届けられる。 ユーザーにアプリを使用してもらうためにアピールできる部分を検討 提案として制作した画面 25
19. スキンケア商品の ランディングページ SKINCARE 制作事例02・スキンケア商品のランディングページ 製作期間 約2週間 制作範囲 ワイヤーフレーム・デザイン・ ライティング 使用ツール figma 種類 スクール課題として制作したものを ブラッシュアップ 自主制作 26
20. 制作事例01・スキンケア商品のランディングページ 27
21. 要件整理 届けたい人 c 20 - 30代の女U c いろいろな商品を試してみたがしっくりくる化粧品がまだ見つかっていなR c オーダーメイドやカスタマイズが好 c 他の人と同じものは好まない イメージ 高級感・上品 扱う商品 パーソナライズ診断＋スキンケア化粧品の販売 目的 パーソナライズ診断画面への遷移 28
22. 制作・ブラッシュアップ方針 ・ブランドの世界観を表現 ・情報量はミニマム 　セクション数や説明文なども少なかった 課題として制作時 スクール課題として制作(2024年3月末) 2024年3月にスクール課題として 右のデザインを制作しました。 今回ポートフォリオ制作にあたり、 ブラッシュアップ版の制作に 取り組みました。 こちらをブラッシュアップ 29
23. 競合リサーチ 肌診断などによってオリジナルのスキンケアを 提供しているブランドサイトをリサーチ。 数は多くないが存在しており、 ・写真で理想的な肌になれそうなイメージを伝えている ・肌診断についての説明をしっかりすること で不安を解消していると感じた。 30 さまざまな化粧品のLP・ブランドサイトをリサーチ。 特に対象となる年齢層が近いものを参考にした。 参考にした素材・イメージ ・うるおい感が伝わる素材(水滴・波紋など) ・肌に手を当てた女性の写真 ・グラデーション・ホログラムなど、明るいイメージの背景
24. 制作・ブラッシュアップ方針 ・あまりなじみがないパーソナライズ診断についての説明を増やし、 また、診断は無料で、短時間で手軽にできることを強調し、 　 まずは気軽に診断に進んで 　もらえるように説明を厚くした。 ボタンをクリックするハードルが低くなるようにした。 ・お届けまでのステップも詳細に示し、注文から到着までをイメージしてもらいやすく記載。 　送料無料・作りたての新鮮な状態で届くというメリットも伝えた。 ・パーソナライズ診断のスキンケアはあまり一般的ではなく、手順や価格帯がイメージしづらい 　のでは？ ・診断やお届けまでのステップが不明瞭で、クリックのハードルが高いのでは？ 課題 ブラッシュアップの方針 31
25. フォント・カラー フォント カラー 丸みがあり柔らかな雰囲気ながら、上品さも伝わるため採 用。スキンケアの品質の良さを伝えつつも、女性らしいイ メージに合うと考えた。 ・游明朝 明朝体を使用しつつ目立たせたい部分は、ウェイトの選択 肢の多いしっぽり明朝に。 ・しっぽり明朝 可読性を担保したい部分に使用。 ・游ゴシック 価格部分などの数字を目立たせたい部分に使用。 ・Futura キービジュアル 女性らしい雰囲気・みずみずしい潤い感が伝わるような ピンク・ライトブルーを中心に、強調したい文字やメリ ハリを付けたい部分には色味の濃いピンクを使用。 下層セクション 長いランディングページを飽きずに読み進めてもらいう ために、イエローやパープル、グラデーションも使用。 ほどよく色味を分けて使用することで、セクションの移 動を伝わりやすくした。 32
26. ブラッシュアップ前後の比較 AFTER BEFORE スクール課題として制作(2024年3月末) PC・スマホサイズで制作 スマホサイズで2案制作 ブラッシュアップ後のデザイン(2024年8月) 理想の肌へ、一歩ずつ わたしだけのスキンケア、見つかる パーソナライズ診断をする To U 1 理想の肌へ、一歩ずつ わたしだけのスキンケア、見つかる パーソナライズ診断をする To U 1 わたしだけのスキンケア、見つかる 理想の肌へ、一歩ずつ パーソナライズ診断をする To U 1 わたしだけのスキンケア、見つかる 理想の肌へ、一歩ずつ パーソナライズ診断をする To U 1 33
27. キービジュアルデザイン（2案作成） 多くのLPで使われており を配置 所要時間や無料ということをアピールして、 「前へ進む」「行動を促す」イメージ がある緑色ボタン クリックのハード ルを下げている 波紋や水滴 うるおい感 のモチーフで、使用後の肌の状 態の をイメージさせた キャッチコピーで し、 商品への期待感が高まるよう狙った ベネフィットを訴求 ピンクの色味で、 イメージさせた 肌のやわ らかい質感 「あなた専用」で を もたせた 特別感 50％オフ お試ししやすい のキャンペーン内容を 入れ、 ことをア ピール AFTER 34
28. 構成のブラッシュアップ LP専門の制作会社の制作実績などを 観察し、作り直した。 構成案 ・読みやすい話の流れ ・見やすいレイアウト ・ボタンクリックのハードルを下げるために 　どんなセクション・説明が必要か 意識した点 一度手書きで構成案をアウトプットし、 それをもとにワイヤーフレームを制作 35
29. 構成のブラッシュアップ AFTER BEFORE スクール課題として制作(2024年3月末) ブラッシュアップ後の構成(2024年8月) (実案件の際は下記も追加) ・お客様の声 ・実績や権威性、素材へのこだわり ・返金保証の条件等 CTA お知らせ フッター へッダー キービジュアル CTA お悩み 解決策の提示 パーソナライズ処方について パーソナライズ診断について CTA お届けまでの流れ 商品について (追加提案) (追加提案) (追加提案) (文章追加) (追加提案) (追加) (追加) へッダー キービジュアル コンセプト 商品について パーソナライズ診断について お知らせ CTA フッター 36
30. 構成 2案制作したうちこちらを使用し、下部セクションも制作。 商品を使用したあとの肌の変化に期待感が持てるデザインにし、スマホの一画面内におさまる中で多数の情報を 並べながらも理解しやすいよう、メリハリをつけて伝えている。 気軽に診断してもらえるようハードルを下げる文言をボタン内に使用。 お届け商品・キャンペーン内容についての情報をまとめている。 商品については最低限の情報と現品写真を掲載。 キャンペーンについては伝えたい内容をいかに見やすく、それぞれを目立たせつつ配置できるかを考慮した。 ブラッシュアップ前はページの下の方にしかキャンペーン内容を記載していなかったが、 キービジュアルで興味を持ったお客様にすぐに詳細を見てもらえるよう、上部にも配置。 LPを見に来た方に自分事化してもらえるような文言・写真を追加。 (追加) (追加セクション) キービジュアル CTA お悩み へッダー 37
31. 構成 スマホで診断を受けているイメージの女性の写真を 配置し、この商品を使うことで問題が解決できるこ とをイメージさせた。また、具体的な質問数を追加 した。 手軽な診断で自分に合う商品にたどり着けるメ リットを視覚的に伝えた。 文章を読むのが億劫になって離脱されないよう、 写真やイメージ素材を多く配置し、できる限り文 字数は減らしている。 (追加セクション) (追加セクション) 解決策の提示 パーソナライズ処方について 38 より具体的に診断のステップについて記載し、ボ タンを押した後に何をすればいいのか・何が分か るのかを明確にして、不安なく診断を受けてもら えるよう配慮。 また、診断を受けても購入は必須ではないとしっ かり説明することも必要だと思い、説明を追加し た。 気になったタイミングですぐに情報を再確認・診 断に進んでもらえるよう、CTAエリアを定期的に 挟んでいる。 (追加) (文章追加) CTA パーソナライズ診断について 到着までの具体的な流れや期間の目安を記載し て、手元に届く際のイメージを具体的にした。 また、パーソナライズのため作りたての新鮮な状 態で届くことをアピール、手書き文字を使用しセ リフ風にして目が留まるようにした。 お届けまでの流れ (追加セクション)
32. 構成 商品について CTA お知らせ フッター 追加 もともとの制作分からより見やすくデザインを変更。 下の追加部分はキービジュアルとリンクするようなデ ザインにし、使用後の肌状態をイメージさせている。 39
33. S H A R E co r p o R A T E S I T E 不 動 産 会 社 の コ ー ポ レ ー ト サ イ ト 制 作 事 例 0 3 ・ 不 動 産 会 社 の コ ー ポ レ ー ト サ イ ト 製 作 期 間 約 5 日 間 制 作 範 囲 ワ イ ヤ ー フ レ ー ム ・ デ ザ イ ン 使 用 ツ ー ル figma 種 類 既 存 H P の T O P ペ ー ジ デ ザ イ ン 変 更 分 と し て ご 提 案 し ま し た 実 案 件 40
34. 要件整理 届けたい人 ・神戸で不動産を賃貸・売買したい方 ・起業家 イメージ 信頼性・誠実さ 事業内容 不動産業・起業家の支援 目的 より事業内容や会社の理念が伝わるサイトにしたい 41
35. 制作・ブラッシュアップ方針 ・キービジュアルで が伝わるように 会社の理念 ・文章部分にアイコンを配置し、 ように 読まなくても理解できる ・まだ会社としては新しく、積極的に新しい取り組みをされている先進性を伝えたい ・会社のサイトだということが伝わりづらい ・文章の羅列になっているため読みづらい ・会社の理念をもっと伝わりやすく 課題 ブラッシュアップの方針 誠実さ・信頼感 ＋ 地域密着・人とのつながり　　　　　　　 42
36. 参考リサーチ 青色をベースにした誠実感・信頼感のあるサ イトを主にリサーチ。不動産業界だけでな く、士業などほかの業種も含めた。 ・街の風景の写真 ・線があしらいとして大きく使われている ・写真に透過した青色を重ねる 　家型のボックス　　　　など 参考にした素材・イメージ 43
37. デザインの要素 水引き(あわじ結び) 握手する人物の写真 神戸の街並み/不動産 ご縁が「末永く途切れないよう に」という願いを込め、モチーフ として使用 不動産事業でお客様と関わってい る様子、交流会で起業家同士が挨 拶している様子、どちらにも見え るような写真を使用 地域密着であることと、不動産業 がイメージしやすい写真を使用 地域密着・人とのつながりを表現するための素材 44
38. 表現方法のリサーチ さまざまな水引の種類や 表現方法を観察 会社の特徴の見せ方のデザイ ンを探す 水引モチーフの見せ方の参考 になりそうなサイトを探す 背景に『縁』を表現する糸を どのように配置するか、アイ デアを探した 45
39. フォント・カラー フォント カラー 誠実さが伝わりながらも柔らかさもあるため採用。 ・游明朝 タイトル等、太字にして見やすくしたい部分に使用。 ・Noto Selif JP 小さい文字でも可読性を担保したい部分に使用。全てを明 朝体にすると読みづらいので使い分けをしている。 ・游ゴシック 会社のイメージカラーであり、誠実さが伝わるような 紺色をベースに、落ち付きながらも堅くなりすぎない ような色味を選定。以前にご依頼いただいた公式LINE のリッチメニューとトンマナを合わせた。 以前制作した公式LINEリッチメニュー ご要望は『シンプルで理念が伝わるデザイン』 46
40. AFTER BEFORE ※株式会社SHARE様コーポレートサイトTOPページ ※デザイン変更ご提案分TOPページ 47
41. 構成 AFTER 2枚の写真に青い透過グラデーションを 重ねて、トンマナを合わせた ヘッダーは見やすさを第一に、お問い合わ せの情報を優先してまとめた 落ち着いたトーンで揃えながらも 大きな水引モチーフを配置することで 堅すぎないイメージにした 48
42. 構成 アイコンを用いて簡潔に伝えることで、パッと見て 内容を理解できるようにした。 元のページでは全文がひとまとまりだったので、2 分割してレイアウトを変更。 背景に、キービジュアルと同じ水引と、糸をイメージさせる曲線を配置し、 ご縁が永くつながる様子を表現した。 セクションはずらして配置することで動きをつけた。また、サイドのあしらいがよ り目立つようになった。 キービジュアル 私たちについて 会社概要 49
43. その他の提案デザイン 家型のボックスに写真を2分割で配置 円がつながったような水引を背景に置き ご縁がどこまでもつながるイメージ 熨斗紙のような配置にしたデザイン ・背景を青のグラデーションにすると 　全体的にうるさい感じがした ・セクションの配置が単調 ・セクションのタイトル等を見やすく調整 以上を踏まえ、ブラッシュアップ版を製作 50
44. RARE CHEESECAKE banner 制作事例04・スイーツの訴求バナー スイーツショップの バナー広告 製作期間 約5日間 制作範囲 業界リサーチ・デザイン 使用ツール figma 種類 広告として出稿されていた バナーの改善案を制作しました 自主制作 51
45. ※ケーキの写真は差し替えて使用 ※Meta広告より引用 AFTER BEFORE 視線がいくよう、文字に動きを付けて配置。 しずくの加工でとろける様子を表現。 グラデーションを かけて濃厚さを表現 ゆるやかなカーブで食感のなめらかさと とろける様子 イラスト＋手書き フォントで目を 留めてもらえるように 52
46. PR事業の 企業サイト 製作期間 約5日間 制作範囲 ワイヤーフレーム・デザイン キャッチコピー提案 使用ツール figma 種類 新規HPのTOPページデザイン案 応募作品 制作事例05・PR事業の企業サイト・TOPページ PUBLIC- RELATIONS COMPANY 53
47. デザイン詳細 風通しの良さそうな職場の写真を選定 伝えたいイメージ：柔軟性・信頼感・誠実さ 葉が伸びているイラストで、 クライアントとともに成長していくイメージ 大きな若葉をアクセントとして配置 青々とした明るい色を使用し 新しい会社としてのフレッシュ感も伝えた 葉を散らして配置し、立体感と動きを出した SNS運用も事業内容に含むので、SNSアイコンを想起 させるような明るい色味のイラストを選定 テック系のフラットなイラストで先進的なイメージ 写真はの葉っぱをイメージした形で切り抜き 葉・植物→成長・生い茂る・育てるイメージ 『企業の成長に寄り添うパートナー』 54
48. 雇用クリーンプランナー 認定講座LP 製作期間 約1.5ヶ月 制作範囲 ワイヤーフレーム・デザイン キャッチコピー・テキスト 使用ツール figma 種類 LPリニューアル(実案件) 実案件 制作事例06・資格講座LP 55
50. 制作実績 58 実案件・LPファーストビュー 実案件・makuake用LPトップ画像
51. 貴重なお時間をいただき 誠にありがとうございます。 お客様にどういう体験をしてもらいたいか？ そのために自分ができることは？ そんな風に毎日考えながらデザインと向き合っています。 ぜひ一緒に頭を悩ませて、働ければと思います。 62