藤本佳子・ポートフォリオ・2025/01

ご覧いただきありがとうございます！
ご相談・ご依頼は下記にて承っておりますので、お気軽にご連絡くださいませ。

【X】DMよりご連絡ください
👉https://x.com/shiroca_okane
【Facebobook】
👉https://www.facebook.com/profile.php?id=100095360091519
【chartwork】
👉ID : yoshi_designer
【Googleform】約3分で回答可・分かる範囲でご記入ください！
https://docs.google.com/forms/d/e/1FAIpQLSdTtu7kOLqfhJTg0ANINNs5zv0lywAcBjLtzlmpukLd43Bmfg/viewform?usp=sf_link

Transcript

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