Ayaka Design Portfolio

Transcript

1. Ayaka Design
2. Concept コンセプト/自己紹介/仕事内容・スキル
3. 「すごい！」と思わせる デザインでワクワクをお届けします！ デザインは、ただ作るのでなく 設計から納品まで、伝えたい価値観や魅力に届けて、 お客様の信頼を作るという手段で考えています。 ヒアリングを通して、目的に合わせた構成・設計・デザインをご提案し、 お客様の負担を減らしながら、「すごい！」と思わせるデザインを一緒に作っていきます。
4. 自己紹介 冨澤 彩香 新潟県在住のWebデザイナー兼動画制作クリエイター 専門学校卒業後、約12年間工場勤務に従事してきました。 「ものづくり」への姿勢や丁寧さを大切にしながら、 デザインや動画制作に取り組んでいきます。 お客様の想いや目的を丁寧にヒアリングし、情報設計からデザインまで誠実に制作することを 心がけています。 経歴 2010年 2012年〜2018年 2018年〜2019年 2019年〜2025年 2025年 2025年 長岡コンピュータカレッジ デジタルデザイン科卒業 自動車部品関係の工場で正規社員として6年間勤務 公共職業訓練 新潟県立上越テクノスクール溶接科 派遣社員としてさまざまな場所で勤務 交通誘導員のアルバイトをしながら、SHE likesでデザインの勉強を開始 特別実践コースSHE likes PROデザイナーでスキルアップ
5. 仕事内容・スキル 仕事内容 スキル Webサイト制作 丁寧なヒアリングをもとに、お客様 の想いやサービスの魅力がしっかり 伝わるWebサイトを制作します。 動画制作 ショート動画からYouTube動画、プ ロモーションムービーまで、目的に 合わせた映像制作を行っています。 その他 バナー、スライド、イラスト、ス テッカーなど、目的や用途に合わせ た制作を幅広く行っています。
6. Service 解決できる課題/クリフトストレングス/強み
7. 解決できる課題 このようなお悩みはありませんか？ デザインの設計に悩み、スムーズに出来ない デザインに納得出来ず、満足がいかない コミュニケーションがスムーズに進まない 指示通りに動くだけで、提案がない 忙しくて、デザインにかける時間がない このようなお悩みがありましたら、ぜひ相談ください！
8. クリフトンストレングス 適応性 責任感 活発性 新しい事・今までになかった挑戦や体験・人間 関係を大切にすることができます。 計画の変更や予期せぬトラブルがあった時、柔 軟な対応・行動することが出来ます。 仕事や学習をやる時、責任を持ってきちんと最 後まで終わらせるように心がけています。 最後まで終わらせると、目標達成することがで き、やり遂げてよかったと感じます。 物事を即決で決める性質です。 新しい事、学びたい事がある時は、すぐに行動 して、結果を出します。活発性があると仕事や 学習面にも影響が出やすいと思います。
9. わたしの強み 学習意欲 気配り ホスピタリティ 行動力 情報設計から制作・納品まで責任を持って対応 いたします。お客様の課題解決につながるご提 案を心がけています。 お客様のご要望やお悩みに寄り添い、丁寧なヒ アリングと迅速な対応を大切にしています。安 心してお任せいただける関係づくりを心がけて います。 ご依頼内容を正確に把握したうえで、迅速に行 動へ移します。納期を意識しながらスピー ディーに業務を進め、円滑なプロジェクト進行 に貢献いたします。
10. WORKS 制作実績
12. 【実践課題】 ベビー用品事業の採用サイト 作品名 TSUTSUMU株式会社リクルートサイト （SHE likes PROデザイナー実践課題） 制作期間 2025年9月 制作ソフト デザインカンプ：Figma FV制作： Photoshop コーディング：VSCode 実際のサイト http://tsutsumu2026aya.chillout.jp
15. 要件定義 クライアント情報 クライアント名：TSUTSUMU株式会社 ・ベビー用品をメインとし、ママの育児をサポートする ・コミュティ事業や家族みんなが幸せになるフォトブック事業などを展開 ・軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定 目的 ・採用サイトを通してエントリーをしてもらうこと（採用強化のためでできるだけたくさんの応募が来て欲しいが、 エントリーあれば誰でもいいわけでなく、カルチャーフィットする方に応募してもらいたい） ターゲット ・転職希望の方（性別問わず） ・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方 ・各職種において全ての未経験より経験を重視したいが、それよりカルチャーフイットしている人がターゲット トンマナ ・明確なブランドトンマナがまだ決まっていないので、事業内容にあうトンマナを自由に提案していただきたいです。 制作サイズ ・PC（横幅：1440px） ・SP（横幅：375px） 入れたい要素 ・TSUTSUMUのロゴ
16. 参考LP メインカラーのブルー系に使われているLPデザイン・参考のリクルートサイト 引用元：採用サイト｜社会福祉法人白鳩会 引用元：UUUM株式会社 採用サイト
17. 参考LP 障害者施設・幼稚園といった子供関連のサイトの構成・デザインを参考 引用元：障がい者（児）支援サービスのリルース 引用元：愛宕幼稚園 新潟県十日町市の認定こども園
18. ペルソナ設計 01 佐藤大輝(34) 02 今井かなえ(29) 家族構成 職業 育休中(前職はデザイナー) 家族構成 備考 備考 職業 IT関係のベンチャー企業の係長 旦那(29) 2歳児の息子 妻(33) 長男(小学1年生) 長女(4歳) 育児・家庭を優先するため時短勤務を考えている 家族と子供の時間を大切にしたい 属性 属性 背景や行動 背景や行動 ニーズやゴール ニーズやゴール ・埼玉県さいたま市在住 ・大学卒業後、新卒でIT系企業に就職し、現在は係長 ・長男が小学校入学のきっかけで、子供と関わる時間を大切にするため、フルリモート・ フレックス勤務のある企業に転職を検討している ・IT企業だと残業があるため子供と関わる時間が出勤前と休日しかなく不安を感じている ・長男が小学校入学前に転職をしたい ・保育園からの急ぎの連絡が来ても対応できるようにフレックス勤務を考えている ・家族・子供の時間を大切するためフルリモート勤務を検討している ・東京都千代田区在住 ・専門学校卒業後、新卒でデザイン会社に就職し、現在は育休中 ・妊娠の機にデザイン会社を退職、育休中に職場復帰を考えている ・もし、保育園が休みでも託児所があればいいと考えている ・子供が体調不良の時、フルリモート勤務ができるように仕事がしたい ・子供が保育園を預ける開始日に職場復帰したい ・保育園が休みでも、託児所がある職場で子供と一緒に出社ができる ・ママが多い職場だと、子育てや仕事の面でも融通が効きやすい
19. 情報設計・ユーザーストーリー FV ・TOP画面のFVは、3人家族の写真で TSUTSUMUの世界を惹きつける効果 CTA ・FVの左下CTAボタンを追従させ、 エントリーボタンを押して応募に繋げ る 私たちについて ・TSUTSUMUの世界を興味・共感を 惹きつけ、「ベビー用品関係の会社」 だと関心を持ちます メンバー紹介 ・どんな人が働いているのか気になり、｢従業 員の声が気になるな｣と応募を考えるようにな ります NEW 働き方座談会 ・｢働いている人の声が聞きたい」と訴求 し、見た後は 入社後の想起が出て、応募を 前向きに考える 事業内容 ・TSUTSUMUの事業内容を知り、ど んな仕事内容なのかを興味を持ちま す 募集職種 転 決め、募集内容の求人を 見 応募前 最後のひとおしする ・ 職したいと て、 の エントリー 働く環境 ・どんな働く環境なのかを訴求し、 「ここの職場で働きたい」という気持 ちが出ます 応募 よ 決め、行動してエント ・ここで し うと を ます リー し
20. デザインシステム タイポグラフィ HannariMincho あア Noto Sans JP あアAa123 ・メインコピーは、落ち着き・爽やかのLPに合う デザインにするため、明朝体にしました。 ・見出し・本文・ボタンをNoto SansJPでサイト の視認性を意識してフォントにしました。 配色 ベースカラー メインカラー アクセントカラー #F1F2F2 #048DB7 #00ADC1 #AAD5E5 #2D7282 #6990D5 ・ベースカラーは、白と水色で交互にして、背景色にしました。 ・メインカラー・アクセントカラーは、青・緑系で落ち着き・爽やかをイメージにして、男性 でも見やすい配色にしました。 ・強い青系より柔らかな青系にすると女性でも見やすい配色にしました。
21. デザインの意図 キービジュアル ヘッダーメニュー ・ヘッダーメニューをマウス乗せると、青系に変更する設定にしました。 ・マウスを乗せて、メニューをクリックするとページに移動することができます。 CTAボタンの色変更 ・CTAボタンをマウスを乗せると、白の背景色と緑の文字色に変更する設定にしました。 ・シンプルなアニメーション変更ですが、マウスを乗せると色が変わる方法にしました。 ・クライアントのキャッチコピーに合わせた、3人家族の写真で「落ち着き」のあるFVにしました。
22. デザインの意図 （サイト全体） 背景色を交互にするデザイン ・「爽やか」「落ち着き」という テーマで背景色を交互するデザイン にしました。 ・男女関係なくTSUTSUMU株式会社 のことを興味・関心を持つようにな ります。 ・ページの最初に「ふたつのまる」 があると、コンセプトに合わせやす いデザイン設計にしました。 （メンバー紹介）新卒か中途・入社年で応募を考える設計 ・新卒か中途・入社年でTSUTSUMUのメンバーを知ることができ、企業のことが気 になり出し、応募を考える設計にしました。同時に「働いている人の声が聞きたい」 と訴求することができます。 （募集職種）CTAボタンをページ移動設計 ・CTAボタンをマウス乗せると、白の背景色と薄紫の文字色に変更する設定と募集職種 ページを移動する設計にしました。 ・シンプルなアニメーション変更ですが、マウスを乗せると色が変わる方法にしました。
23. まとめ 頑張ったポイント ・苦手なコーディングを頑張りました。慣れないコーディングでトラブルが多く大変でしたが、時 間を許す限りにサイトを一つに作ることができました。
 ・デザインカンプは、男性が見られるように青を使ったスタイリッシュなリクルートサイトに作る ことができました。 今回の課題を通して学んだこと 1ヶ月間、自分でサイトを作る実践課題をやりました。時には上手くいかなかったことがあった り、トラブル多かったり大変な事がありました。　 苦手なコーディングもやり遂げました。
 なんとか、周りの人の支えのおかげで無事に自分で作ったサイトが出来ました。
25. 【実践課題】 コワーキングスペースWebサイト 作品名 WORK lounge AOYAMA Webサイト （SHE likes PROデザイナー実践課題） 制作期間 2025年8月 制作ソフト ワイヤーフレーム：Photoshop デザインカンプ：Figma
28. 要件定義 クライアント情報 クライアント名：Work inc. ・会員は30代女性が多い ・月に数回会員の交流会があって、キャリアアップの場として使われている。 その他 ・画像をコラージュして作成 目的 ・Work lounge AOYAMAの認知拡大 ・Work lounge AOYAMAの特徴を知って、新規会員の獲得 ターゲット ・都内在住の30代女性 ・キャリアアップ、キャリアチェンジを挑戦をしている人 ・女性向けのコワーキングスペースを探している人 トンマナ ・こだわりなく、ペルソナを意識したトンマナと提案 納品物（サイズ・形式） サイズ：一般的なサイズ ・PC：幅1440px ・スマホ：幅375px 納品形式：デザインカンプ、ワイヤーフレームPNG ・データ：PhotoShop、Figma 素材 ・Work lounge AOYAMAのロゴ
29. 参考LP メインカラーのブラウン・「頑張るあなたへ贈る、場所。」をコンセプトに合わせたLPデザインを参考 引用元：BOTANIST｜ROOTH（ルース） 引用元：ロングルアージュ公式サイト
30. 参考LP メインカラーのブラウン・「頑張るあなたへ贈る、場所。」をコンセプトに合わせたLPデザインを参考 引用元：スキンケアブランドNUSET（ニュセ） 引用元：タケダビューティクリニック
31. ペルソナ設計 01 川上望美(32) 職業 02 今森綾菜(30) 家族構成 職業 正社員雇用の経理事務 家族構成 大切にしていること 大切にしていること IT系メガベンチャー企業・広報部部長 東京都在住、独身で1人暮らし 東京都在住、既婚で旦那と2人暮らし 成長、変化、自由、自分らしさ 成長、自由、選択肢、上質な環境 ライフスタイル・価値観 ライフスタイル・価値観 背景や課題 背景や課題 ペルソナに届けたい価値 ペルソナに届けたい価値 ・平日の過ごし方:フルタイム勤務、夜は会食や副業 ・休日の過ごし方:本屋や展示会巡り、スキルアップのための勉強、旦那と友人と過ごす ・趣味/関心ごと:キャリアアップ、インテリア、デザイン、人との会話 ・これまでリモート中心だったのに週3〜4の出社が求められているようになった ・せっかくの外出や出社の機会を前向きにしたい ・通勤ラッシュの時間帯をずらして時間を有意義に使いたい ・家でもオフィスでもない居心地の良い第三の居場所 ・安心で充実したい作業空間 ・社外での出会い、自己成長の機会提供、コミュニティとしての価値 ・平日の過ごし方:フルタイム勤務、夜はキャリアチェンジのため勉強 ・休日の過ごし方:映画・演劇鑑賞、カフェ巡り、勉強、友人と過ごす ・趣味/関心ごと:キャリアチェンジ、デザイン、マーケティング、人と過ごす ・リモートワークがなく、出社が求められている ・通勤前の時間を勉強と朝活に過ごしたい ・キャリアチェンジの勉強を前向きになりたい ・退勤後、休日に勉強を集中した居場所が欲しい ・オフィスだけでなく、同年代でキャリアチェンジを目指している人と交流がしたい ・キャリアチェンジ関連のセミナー参加はしたい
32. 改善提案 WF 修正提案をしたWF クライアントから共有されたWF CTAボタンを文字変更 ・CTAボタンの文字変更すると、追徒させ、 気軽に見学出来たり、申込することができる 設定にしました。 CONCEPTを移動 ・ページに移動すると、ページが分けてみや すくなり、写真を追加すると興味・関心を持 つことができます。 NEWSを追加 ベ 日 ど /セミナ /交流会等 告 営業 ・イ ント ー の 知や な 興味・関心を持つ設定にしました。 共有されたWFを見て気づいたこと 設備のアイコンを追加 ・CONCEPTをページに移動 ・設備のアイコンが ると こ なの る と気になり理解に がりやすい。 ・お知らせを追加し、興味・関心を持つ設定にする だ」 あ 繋 「 ん あ ん ・設備のアイコンを追加し、ユーザが理解しやすい設定に する ・ご利用方法の写真を追加 ・アプリの紹介を追加し、アプリの興味・関心とダウン ロード導線を強化する アプリ導線を強化 DL よ 新規会員増・リピーター 増 円滑 繋げるため、 Google lay pple toreのCTAボタンを追 ・アプリの に る 加、利用の 化に P ・A S 加しました。
33. 情報設計・ユーザーストーリー FV ・TOP画面のFVは、「落ち着き」の テーマに合わせた写真を惹きつける CTA ・FVの真ん中CTAボタンを追徒させ、 視認性の強い赤茶系で目立つように設 定にしました CONCEPT ・WORK lounge AOYAMAのコンセプ トと写真で興味を持たせる お知らせ ・イベント/セミナー/交流会等気にな る分野を興味・関心を持つ 施設・設備 ・どんな施設なのか訴求し、設備のア イコンを理解する設定にしました ご利用方法 加 や い リ導線 ダウ ロ ド 順番 ・写真を追 すると 方法が理解し す ・アプ があると、入会に がり ン ー をする く 質問 よ ある 質問 拝見 繋 回答 ・気になる を し、 で 「 って よう」と検討する 行 み CTA 下部にCTAボタンがあると、見学予 約・申し込みに繋がりやすい ・ ク ス ア セ ワ キ グスペ ス行 み 行動 最 ひ ・コ ー ン ー って よう と し、 後の とおしをする ご利用プラン ・料金プランの概要を気になり出し、 自分にあったプランで入会後の想起が 出て、前向きに検討する
34. デザインシステム タイポグラフィ Noto Serif JP Inter 123 あアAa Noto Sans JP あアAa123 ・お知らせの日付は、InterでNoto Sans JPと被らないように意識し ました。 ・見出しを「落ち着き」「自立」「洗練」をテーマに合わせてNoto Serif JPのフォントにしました。 ・本文・小見出し・ボタンは、Noto Sans JPでサイトの視認性を意 識してフォントにしました。 配色 ベースカラー メインカラー アクセントカラー #E4E0E1 #D9C4B0 #6D2D31 #D9C4B0 #735557 #BB4049 ・ベースカラーは、薄いグレーとベージュで交互して、背景色にしました。 ・メインカラーは、茶色・ベージュでテーマに合わせた配色にしました。茶色は、見出しの フォント配色にしました。 ・アクセントカラーは、CTAボタンを視認性を上げる配色にして、ユーザーが見やすいCTAボ タンにしました。
35. デザインの意図 キービジュアル・CTAボタン （施設・設備）アイコン画像 ・アイコン画像で、設備を分かりやすい設計にしました。 ・アイコン・文字だと、視認性と理解できるようにしました。 見学・申込ページの背景 ・見学・申込ページの背景画像をLPデザインのテーマに合わせた画像にしました。 ・「落ち着き」「自立」「洗練」のテーマに合わせたコワーキングスペースの写真でFVにしました。 ・視認性が上がる赤茶系で、CTAボタンを目立つようにしました。 ・カフェ兼コワーキングスペースがあることを分かるように設計しました。
36. デザインの意図 （サイト全体） 背景色を交互にするデザイン ・茶→ベージュで背景色を交互する デザインにしました。 ・「落ち着き」「自立」「洗練」の テーマと年代に合わせやすい色にす ると関心を持つようになります。 （SP版）スクロール・矢印設計で操作がスムーズに ・SP版の施設で、矢印ボタンを常に表示しました。 ・矢印ボタンで目線を誘導させ、次のページを見るように設計をしました。 ・次のページがあると、離脱予防に繋がりやすい。 ・ご利用方法の背景色は白でアプリ 紹介の背景色を茶色でアプリの導線 を強化する。 ・SP版の料金プランで、スクロールバーを常に表示しました。 ・横スクロールできる設計し、ユーザーが分かりやすく操作ができるようにしまし た。
37. まとめ 頑張ったポイント ・苦手な文字の可読性をどう克服するのか悩みましたが、文字色・大きさ・読みやすさを考えて、 苦手な物を克服することができました。
 ・ワイヤーフレームはPhotoshop、LP制作はFigmaというソフトを使用し、LP制作をどんな風に しようか考え、制作を励むことができました。 今回の課題を通して学んだこと 前倒しでスクールの課題を取り組む予定でしたが、課題提出まで間に合うか不安でした。 しかし、間に合うか不安な気持ちで課題を取り組んだおかげで、期日までに提出することが出来ま した。 初めてのLP制作でしたが、Figmaを使って自分が考えたLPデザインが出来て良かったです。
39. 【実践課題】 ホテルの予約サイト UI/UX改善 作品名 THE VEGE LODGE 宿泊予約サイト UI/UX改善 （SHE likes PROデザイナー実践課題） 制作期間 2025年10月 制作ソフト Figma
43. 要件定義 今回の要件の目的 ・ヒアリング内容を汲み取って提案資料制作まで一貫できる
 ・事前必須コースで学んだUIの知識を定着させる 今回の要件で目指すゴール ・課題が発生している要因を考え、それを解決するUIを提案する
 ・既存のUIルールやトンマナに沿ってUIを作成する プロジェクトの目的 お部屋の選択ページから予約率の向上・改善 特に途中離脱の多い以下のページのユーザビリティを改善することにより、新規ユーザー・既存ユーザーともに予約完了率の向上を目指す 注力対象（特に離脱率の高いページ） ・お部屋選択ページ（離脱率42%） ・宿泊日選択ページ（離脱率63%） ・宿泊プラン選択ページ（離脱率38%） ・お客様情報入力フォーム（離脱率24%）
44. 「THE VEGE LODGE（ザ・ベジ・ロッジ）」について 長野県の郊外に位置する宿泊施設 ”野菜がたのしい”をテーマに、自家菜園での収穫体験や、野菜をふんだんに使用したコースディナーを提供しており、自然と食を楽しむことが できる点が特徴です。 コンセプト 日常から少し離れた環境で訪れた人が「普段の生活では味わえない食と暮らし」を体験できるよう工夫されています メインターゲット ・20代後半〜40代前半の都市部在住 ・家族連れ
45. 競合調査・ベンチマーク 「旅行」「宿泊予約」「ホテル」をキーワードにして、UIデザインを参考にしました グランドパーク小樽 じゃらん じょんのび温泉 高柳じょんのび村 ANAアプリ 各プランの分類され、フィル ター条件で検索がしやすい。 条件を選択した時、分かりやす い色でチェックできたか確認が 取れる。 こだわり条件が細かい事を掲載 して、検索しやすくなっている。 予約する宿泊先の空室確認がで きるUIデザイン。
46. ペルソナ設計 01 高橋すみれ(28) 職業 02 大野翔太(38) 所在地 職業 IT系企業のベンチャー職（12年目） 所在地 家族構成 家族構成 出版社の編集者（6年目） 神奈川県横浜市在住 東京都狛江市在住 妻(36)、小学生の子ども2人(7歳・9歳)の4人家族 独身で一人暮らし 背景や行動 忙しい日々に癒しを求め、自然の中でリセットしたいと思っている 部屋が空いている日程で有給を取る予定である InstagramやPinterestで「自然に癒される宿」などをよく検索 THE VEGE LODGEは前から気になっていて、写真を見て即「ここに行こう」と決めた ニーズ 都会の喧騒から離れて、ひとりで静かに過ごしたい（禁煙・1人部屋） 自然に囲まれた空間で、きれいな写真をたくさん撮りたい 野 菜たっぷりのフルコースディナーで心身を満たしたい 背景や行動 年1～2回の家族旅行が楽しみ 今回の旅行はすでに日付が決まっている 今回は「自然体験ができる」「食事が安心・充実」「子どもが退屈しない」宿を探し ている 3つの候補宿を比較検討し、価格・施設内容・レビューを冷静に見比べている段階 妻が軽度の食物アレルギー（ナッツ系）を持っているため、食事対応に配慮があるか も重視 条件下で最安値の自然体験を親子で楽しみたいと思っている ニーズ 家族全員が快適に過ごせる環境が欲しい（禁煙・4人部屋） ナッツ系の原材料表記があるかどうかを確認し、安心してバイキングを楽しみたい 子どもたちに自然体験をさせながら、親もリラックスできる旅にしたい
47. 画面ごとの仮説と目指す必須要件・推奨要件 お部屋選択ページ（離脱率42%） 宿泊日選択ページ（離脱率63%） 仮説 仮説 目指す必須要件 目指す必須要件 目指す推奨要件 目指す推奨要件 ・お部屋の詳細が情報不十分で、予約ができない。 ・予約ボタン等不十分で、離脱に繋がりやすい。 ・お部屋の数が多すぎて面倒くさい。 ・お部屋詳細を詳しく載せる。 ・詳細ボタンを押したあと、予約ボタンでお部屋の 予約に繋がりやすい。 ・お部屋の数を減らすと、スムーズに探しやすい。 ・お部屋詳細ページを載せる。 ・お部屋の詳細を予約ボタン・レビューをつけ る。 ・予約したいお部屋がスムーズに予約が取れる。 ・チェックイン・チェックアウト・人数の入力箇所 が少なく予約の離脱に繋がりやすい。 ・空室確認がなく、スムーズに予約ができない。 ・カレンダーで空室確認が取れる。 ・チェックイン・チェックアウト・人数があると予 約しやすい。 ・空室確認があると、スムーズに予約しやすくな る。 ・ユーザーが、必要な情報を入力すると予約がで きる。
48. 画面ごとの仮説と目指す必須要件・推奨要件 宿泊プラン選択ページ（離脱率38%） お客様情報入力ページ（離脱率24%） 仮説 仮説 目指す必須要件 目指す必須要件 目指す推奨要件 目指す推奨要件 ・写真、詳細が載ってなく離脱に繋がりやすい。 ・おすすめ順、安い順、高い順が出てなく、モチ ベーションが下がっている。 ・おすすめ順、安い順、高い順があるとプランが選 びやすい。 ・写真、詳細が載るとプランの内容が理解しやす い。 ・プランの詳細に写真を載せるとユーザーがプラ ンの詳細や写真で理解ができる。 ・おすすめ順、安い順、高い順でプラン選びがで きる。 ・入力ミス・し忘れエラー表示が不十分。 ・必須マークがなく、入力がやりづらい。 ・入力ミス・し忘れエラー表示を見やすくする。 ・必須マークがあると、初めての方でも予約しやす い。 ・必要な情報だけを迷わず入力ができること。 ・必須マークがあると、入力ミス・し忘れの予防 になる。
49. 予約導線の改善提案 改善前の予約導線 改善後の予約導線 各ページ CTA お部屋選択 宿泊日選択 宿泊プラン選択 ディナー選択 お客様情報入力 ご予約内容の確認 ご予約完了 各ページ CTA お部屋選択 お客様情報入力 お部屋詳細 ご予約内容の確認 宿泊日選択 ご予約完了 宿泊プラン選択 宿泊プラン詳細 ディナー選択 ディナー詳細 食物アレルギーをお持ちの方へ
50. お部屋選択ページの改善提案 改善前のお部屋選択ページ 改善後のお部屋選択ページ お部屋選択ページで検索付きがあると予約しやすい設定 お部屋の選択ページで検索つけるとお部屋見たり、予約できる設定にしました。 CTAボタンがあると、詳細をお部屋見たり、レビューボタンでお客様の声が聞けたり、お部屋の 予約ができるようにしました。 検索がない状態 検索がない状態でお部屋予約が 出来ない 情報が多すぎる お部屋の数が多すぎると予約が 大変で面倒くさい お部屋の詳細ボタンがない 選択するボタンだと、お部屋の予 約と勘違いしやすい お部屋検索 日付・人数・こだわ り条件でお部屋検索 できる設定にしまし た。 CTAボタンがない 予約する・レビューボタンが なく、ページの離脱に繋がり やすい 詳細ボタン 詳細ボタンで、お部屋の詳細ページを見る ようにしました。 選択ページを情報少なく CTAボタンを追加 選択ページを情報少ない方が、検索・ 詳細ページに「予約する」「レ 条件がしやすいページにしました。 ビューを見る」ボタンを追加しま した。
51. お部屋選択ページの改善提案 改善前の宿泊日選択ページ 改善後の宿泊日選択ページ お部屋の空室確認ができ満室だった場合、再検索できる設定にしました カレンダーの日付の下に記号があると満室か空室が確認できるようにしました。 チェックイン・チェックアウト・人数/客室数の入力項目があるとスムーズに予約しやすい。 記号があると、残りのお部屋が分かりやすい。 入力箇所が不十分 到着日・宿泊数だけだと、入力 箇所が少なく離脱しやすい。 空室確認ができる カレンダーの日付の下に記号があると空室・ 満室確認ができ、お部屋の確認ができスムー ズに予約ができる。 エラー表示がない エラー表示がないと、スムーズ に予約ができない状態。 入力箇所を増やす チェックイン・チェックアウト・人数/客室数が あるとスムーズに予約でき、検索しやすい。 CTAボタンに再検索 満室エラーが出た時、日付の変更して再検索 できる設定にしました。 再検索できない状態 エラー表示出ても、宿泊日再 検索ができない状態。
52. 宿泊プラン選択ページの改善提案 改善後の宿泊プラン選択ページ プラン内容に写真掲載、プラン詳細、検索ボタンで離脱予防 改善前の宿泊プラン選択ページ プラン選択ページに写真を掲載するとプランの内容が理解しやすい。 検索ボタンがあると、宿泊検索でき日付・人数を検索しやすい。詳細ページでプランの内容が掲 載してユーザーの興味・関心になる。 検索なし 検索なしだと、プランが不十分 で離脱に繋がりやすい。 選択するになっている 各ページにお部屋検索 日付・人数・こだわり条件で お部屋検索できる設定にしま した。 選択するだと、予約と勘違いし やすい。 写真なしだと分かりづらい 写真なしだとプランの内容が 分かりづらい。 おすすめ順等で検索 おすすめ順・価格が高い順・価格が低い順 で宿泊プランを検索する設定にしました。 各プランの写真掲載とプラン詳細ボタンで追徒する 各プランの写真掲載でプランの内容をユーザーが理解したら、C 詳細を見るボタンでプランの詳しい内容を追従・検討する プランの内容理解できたら、訴求する プランの内容を見て、内容理解できたら、予約 へ進むを訴求する
53. ディナー選択ページの追加提案 ディナー選択ページの追加提案 ディナーの内容を写真掲載と食物アレルギーをお持ち方へのページを追加 ディナーの写真載せるとユーザーの理解にしやすく、詳細で追従する。 食物アレルギーをお持ちの方へをページがあると、アレルギーお持ちのお客様に安心してディ ナーできるようにページを追加しました。 食物アレルギーがある方 写真を追加 各ディナーに合わせた写真を掲載すると、プ ランの内容が分かりやすい設定にしました。 CTAボタンで追従する ディナーの内容を詳しく見たいと追従し、プ ランの詳細を見る設定にしました。 選択ボタンで行動する このプランにしよう！ アレルギーが心配な方へ アレルギー対応ページを追加 ディナーのプランが決まり、宿泊 日・お部屋・宿泊プランが確定 し、最後のひとおしをする。 アレルギーのお持ちのお客様に安 心して食事ができるように、アレ ルギー対応のCTAボタンを追加。 アレルギーの方へボタンを押した後、 アレルギー対応ページに開くようにし ました。
54. お客様情報入力ページの改善提案 改善前のお客様情報入力ページ 改善後のお客様情報入力ページ 必須マークで入力し忘れ予防。入力し忘れた時、背景色で確認ができる。 必須マークで入力し忘れ・ミスを防いで、ユーザーが安心して入力しやすくなる。 背景色をつけると入力し忘れ・ミス予防が出来る。 必須項目・記入例がない 必須項目・記入例がないと入力が やりづらく入力ミス・し忘れにな る。 必須項目マークを追加 必須項目マークを追加すると、 入力ミス・し忘れ予防になる。 背景色とエラー表示でわかりやすく 入力エラー出た時に、背景色とエラー表示で 分かりやすいUIデザインにしました。 エラー表示が不十分 エラー表示が不十分で、どれを 入力すればいいか分からない。 記入例を追加 入力項目に記入例を追加しました。 入力項目に記入例があると、入力し やすくなります。
55. まとめ 頑張ったポイント ・宿泊サイト・航空会社のアプリを見てどんなUI/UXデザイン作られているかを研究し、試行錯誤 しながら作成することができました。 
 ・今後のUI/UXデザインの仕事するためにいい勉強になれてよかったと思いました。 今回の課題を通して学んだこと 最初は改善前のUI/UXデザインのデータを見て、参考になるホテル予約サイトを研究をしました。
 操作がなかなかなれませんでしたが、少しずつ慣れるようにUI/UXデザインができるようになりま した。
 今後、UI/UXデザイン関係の仕事するにはいい課題だと感じました。
57. 【実践課題】 英会話教室キャンペンバナー 作品名 英会話教室English Girlsキャンペンバナー （SHE likes PROデザイナー実践課題） 制作期間 2025年7月 制作ソフト Photoshop
59. 要件定義 目的 ・キャンペーン利用での入会者を増やす （2週間の実施期間で50名獲得目標） ターゲット ・20代女性 ・英会話初心者 ・趣味で英語を学びたいと考えている 掲載場所 ・ Instagramのフィード ・X（旧Twitter） バナーの飛び先 ・キャンペーン用のLP 入れたい要素 ＜文言＞ ・一緒にお得！ ・夏のお友達紹介キャンペーン ・あなたにもお友達にも5,000円プレゼント ・期間：2024年8月20日〜9月30日 ＜画像など＞ ・”あなたとお友達”を表現するための人物の写真 ・英会話スクールであることがわかる要素や写真 ・English Girlsのロゴ
60. 情報設計・ユーザーストーリー 一緒にお得！ 夏のお友達紹介キャンペーン 見た人の心情 ・英会話教室のお友達紹介キャンペーンだ な（英会話教室の先生を見て） 夏限定だね 内容の伝達 あなたにもお友達にも 行動する 5,000円プレゼント 惹きつける 興味 5,000円プレゼント アピール 訴求 見た人の心情 ・英会話やりたい友達がいるから、誘って みよう！ 見た人の心情 ・5,000円プレゼント？気になる！ 見た人の心情 ・5,000円プレゼントできるのは、この、期 間だけなんだ。今しかない！
61. デザインシステム タイポグラフィ ・20代がターゲットなので、TA恋心とADSポップスのフォントを採 用しました。 ・可読性・読みやすさを重視にして、筑紫A丸ゴシックを使用しまし た。 ・「5,000円」は、ADSポップスで夏らしい表現にしました。 配色 ベースカラー メインカラー アクセントカラー #7FBBDD #F58B05 #000983 #C4E9F2 #FFC22F #F58B05 ・ベースカラーは、海をデザインにするため青、水色にしました。 ・メインカラーは、「ポップな雰囲気」「夏」を表現するためにオレンジ、黄色を使用しま した。 ・アクセントカラーは、文字の可読性を上げるため、濃い青とオレンジを使用しました。
62. デザインの意図 「夏」、「ポップな雰囲気」を意識したデザイン 英会話教室だと気づくため、写真素材を入れました ・背景を夏らしい雰囲気にするため「海」にしました。 ・オレンジ系の装飾を付けると「ポップな雰囲気」「夏」を表現するため、ターゲットの20代女性に 合わせやすいデザインにしました。 ・英会話教室のキャンペーンバナーだと気づくように、英会話教室の先生を写真素材を入 れました。
63. まとめ 頑張ったポイント ・夏と明るくてポップな印象なので、配色とフォントをどんな風にしようか悩みましたが、明るく て楽しい雰囲気に合わせたデザインにして作成を頑張りました。 
 ・余白は、一番デザイン制作には気を付けたので右に寄りすぎないようにしました。 今回の課題を通して学んだこと ・デザイン作成で大事な要件定義、情報設計、ビジュアルデザインをどんなふうにするのか悩みま したが、ピンタレスト等で調べて作成をしました。
 ・講師に「青と黄色、オレンジを使って夏らしい配色選びがいい」と評判がでて、スクールの課題 を通して、デザインの仕事がしたいという気持ちが強くなり、自信を持つようになりました。
65. 【実践課題】 マッチング企業のサービス紹介資料 作品名 Matchii（マッチィ）の企業・サービス紹介資料 （SHE likes PROデザイナー実践課題） 制作期間 2025年10月 制作ソフト Figma
67. 要件定義 今回の要件の目的 ・Webデザインだけでなくスライド資料特有のビジュアルデザインに挑戦する
 ・全12ページのスライド構成において、各ページごとの役割を意識したデザインに取り組む
 ・実際のビジネスシーンで使われる資料のデザインのコツや考え方を身につける 今回の要件で目指すゴール ・スライド資料の構成力・情報整理力・ビジュアルデザイン力を身につけ、伝えたいことを効果的に表現できるようになる
 ・表紙・サービス紹介・比較表・MVV（Mission/Vision/Value）など、ページの特徴ごとに適切な表現を制作できるように なる
 ・納品後にクライアントが編集することも見据えたスライドデータ制作スキルを身につける
 ・実際のビジネスシーンで頼りにされるデザイナーになる
68. 依頼書 企業のターゲット
 ・正社員雇用は考えていないが人手不足に悩み、業務委託への依頼を検討している企業
 ・自社の業務特性やカルチャーにマッチした人材を探している スライド資料の作成目的・用途 
 ・企業の人事・経営層に向けて自社サービスを説明し、マッチングプラットフォームの導入を 検討してもらうための資料 ターゲット 
 ・法人企業の人事担当者、経営者、DX推進部署、フリーランス人材を求めるスタートアップ 企業など デザインイメージ 
 ・営業商談時の説明/PDFでの事前送付/Webサイトでの資料請求DL用 ・誠実で信頼感のある印象にしたい。
 ・シンプルさがありながらも、スタートアップらしい先進性・スタイリッシュさが感じられるデザ インを希望する。 ・1920px：1080px（16：9） ・ブルー系 使用方法 
 サイズ 
 カラー 
 その他の希望 
 ・イラストや写真を使用して欲しい。
 ・視覚的に伝わる図解など用いて欲しい。
 ・ポップな印象は避けたい。
 ・サービス概要のページは、図解で表現してほしい。
 ・ページ割りやテキストの増減・変更はしないでほしい。 納品物 
 ・制作データ（Googleスライドなど）
 ・書き出したPDFデータ
69. トンマナ参考イメージ 企業のトンマナデザインを参考にしました 引用元：キャムコムグループ採用サイト
70. デザインシステム タイポグラフィ Inter あアAa123 Noto Sans JP あアAa123 ・Figmaスライド制作の、上記のフォントを使用 しました。 ・Noto Sans JPは、表紙を際立たせるため採用し ました。 配色 ベースカラー アクセントカラー #A0D8F4 #002F82 #00A3D9 #4FA1EB ・ベースカラーは、表紙・裏表紙で背景をグラデーションにしました。グラデーションだけでなく、 単色として背景色を使用することができます。 ・アクセントカラーは、見出し・重要な本文・アイコンを強調色として使いました。
71. デザインの意図 第一印象は、テクノロジーを意識した表紙設計 ビジネス系の写真で、企業の理解を知る設計 ・「テクノロジーで働き方をもっと自由に」のキャッチコピーに合わせた表紙設計にしました。 ・資料を手に出した瞬間から、会社のことをより知りたいという期待度を高めるデザインを目指しま した。 ・企業の理解を知るように、ビジネス系の写真を入れました。 ・ビジネス系の写真を入れると、企業のことを知りたいと追従し、興味・関心を持たせる 設定にしました。
72. デザインの意図 ピクトグラムでサービスの流れを理解する設計 一目で伝わる競合比較 ・ピクトグラムでサービス概要、導入の流れを理解する視覚設計にしました。 ・絵や図解だけでなく、文字を入れて概要・流れを理解することができます。 ・Matchii（マッチィ）の文字色をアクセントカラーで一目で伝わる設計にしました。
73. デザインの意図 実績・データは、視覚的にするため数字を大きく設置 メンバー紹介の写真背景は統一を意識 ・件数などは、視覚的に分かるように数字を大きく設置しました。 ・アイコンを小さく配置しました。 ・写真背景をごちゃごちゃにしないように、統一を意識して配置しました。
74. まとめ 頑張ったポイント ・一番気をつけた余白は、ズレや細かい余白です。スライド制作は、ごちゃごちゃな余白より統一 のある余白を意識して制作に励みました。
 ・青系のグラデーションとテクノロジー系の画像で、テクノロジーを意識した表紙にして、第一印 象にしました。 今回の課題を通して学んだこと ・学生時代以来、久しぶりのスライド制作をしました。今までは、PowerPointでスライド制作を しましたが、初めてFigmaでスライド制作をしました。
 ・専門学生時代にPowerPointに関わる資格も取得したこともあったおかげで、スムーズに制作す ることが出来ました。
75. 【自主制作】 SNSクリエイティブ 作品名 SNS用バナー制作 制作期間 2025年11月 制作ソフト Photoshop
76. 【自主制作】 作品名 保護猫カフェバナー 保護猫カフェ 制作期間 2026年2月 制作ソフト Photoshop 作品名 【自主制作】 地域のカフェSHIROバナー 地域のカフェSHIROバナー 制作期間 2026年2月 制作ソフト Photoshop
77. 【実案件】 コミュニティイベントステッカー 作品名 コミュニティイベントステッカー 制作期間 2026年5月 制作ソフト Canva
78. 最後までご覧いただき、ありがとうございます。 安心してご相談いただける存在であるように、丁寧に対応させていただきます。 些細なことや、小さな相談でも構いません。どうぞ、お気軽にご連絡ください。 お客様の想いやサービスが、より多くの人に伝わるお手伝いできたら嬉しいです。 お問い合わせ先 ayaka.design07@gmail.com @a10s727