Portfolio | suzuki marie 2025_01

ご依頼前の参考に是非ご覧ください。
内容は順次ブラッシュアップしていきます。（最終更新：2025/01/20）

▼お問い合わせはこちらから。おきがるにご連絡ください！▼

✅X
https://x.com/mari_syusyu

✅メールアドレス
suzukimarie.business@gmail.com

【更新履歴】
2025/01/20
2025/01/13

Transcript

1. by Suzuki Marie portfolio 心をつかむデザイン、 誰もが使いやすい設計 U I ・ コ ー デ ィ ン グ ・ W e b デ ザ イ ン － ワ ン ス ト ッ プ で 提 供 い た し ま す
2. Contents 目次 Contact - お問い合わせ - 52 FAQ - よくある質問 - 54 Lastly - 最後に - 57 Profile - 自己紹介 - 03 Service - サービスについて - 07 Works - 制作実績 - 15 電子書籍サービスアプリのUI改善案 児童発達支援事業所のフランチャイズ 募集LP クレープショップのバナー
3. Profile - 自己紹介 -
4. 経歴 専門学校でデジタルコンテンツ分野を専攻 株式会社コメリ　入社 ホームセンター好きが高じて、地元青森の店舗にて、商品の発注・在庫管 理から接客・レジ業務、店舗事務など、店内業務を一通り担当。 アイリスオーヤマ株式会社　入社 LED商品をメインに取り扱う部署の営業事務として、顧客対応や受発注管 理⁩、各種書類作成、物流手配に従事。 GEヘルスケア・ジャパン株式会社　入社 医療機器メーカーの修理部門にて事務を担当。見積や請求書類、保守契約 書類の作成や来客対応その他に従事。 好きなもの うさぎ、読書、桜に関連のあるグッズや食べ物 鈴木　麻理江（すずき　まりえ） Career 経歴・その他
5. Core values 大切にしていること お客様のお悩みやご要望を しっかりとお聞きします。 本質的な目的を理解することで、 期待以上の成果を生み出せる サイトづくりを 心がけています。 お客様の声に 耳を傾ける制作 01 誰もが使いやすい デザイン スマートフォンでもパソコンでも、 お年寄りから若い方まで、 誰もが迷わず使えるサイトを目指します。 見やすい文字の大きさ、 分かりやすいボタンの配置など、 細部まで配慮した設計を行います。 02 見た目の美しさと 快適さの両立 魅力的なデザインは大切ですが、 同様に「使いやすさ」も重視します。 ページの読み込みが遅い、 目的のページが見つけにくい といったストレスがない、 ここちよい体験を提供いたします。 03
6. Connect 「 」 Webで人と未来をつなぐ、価値ある一歩をデザインします。 私は、Web制作を通じて、あらゆる業種・分野のお客様が抱える課題を解決し、新たな可能性を 広げるお手伝いをしています。 一つひとつの制作物に真摯に向き合い、お客様のビジョンを形にすることで、より多くの人々の 生活やビジネスに価値を提供します。 目指すのは、単なる見た目の美しさではありません。クライアントが「頼んでよかった」と実感 できる成果を追求し、事業やブランドに寄り添う存在であり続けます。 Message メッセージ
7. S e r v i c e - サービスについて -
8. 発注先探しでこんな はありませんか？ お悩み WEBに詳しくなく、発注から納品までの流れも分からない デザイナーとエンジニアの分業による手間を省きたい 他所に制作を依頼したけれど、イメージ通りに仕上がらず困った… 公開後のサポートもしっかり受けられるのか不安…
9. solution! そんな発注先探しに関するお悩みを 解決いたします！ ヒアリングシートをご用意 要件定義書の作成 制作スケジュールの共有 worry... WEBに詳しくなく、⁩ どんなやりとりをすればいいか分からない まずは、ざっくりとしたご希望やお困りごとをお聞か せください。専門的な部分は丁寧にヒアリングし、分 かりやすくご説明します 。進行中も疑問があればいつ でもお気軽にご相談いただけますので、一緒に安心し て進めていきましょう。
10. solution! worry... デザイナーとエンジニアの分業による 手間を省きたい デザインから実装まで一貫して対応するため、デザイ ナーとエンジニアの間での調整や連絡の手間を省き、 スムーズに進行できます 。お客様の負担を最小限に抑 え、理想のホームページ/LPを実現します！ ヒアリング ヒアリングシートへのご記入後、20～30分 程度の打合せをさせていただき、制作物の 方向性を決定いたします 。 設計・デザイン ワイヤーフレームやデザインデータを作成 いたします 。お客様にご確認をいただきつつ、 デザインを整えていきます 。 コーディング 必要に応じて実装も行います 。動作確認や スマホの表示チェックにも対応できます ので、安心してお任せいただけます 。 納品 データ 納品 、もし くは公開 をさせていた だきます 。 納品 後も、デザインの 軽微な修 正 や 機能 の 追加など 対応 が可能 です 。
11. 他所に制作を依頼したけれど、 イメージ通りに仕上がらず困った… solution! お客様のイメージをしっかりと理解し、初期段階から 丁寧にヒアリングを行います。また、進行中もこまめ に確認とフィードバックを重ねて、イメージ通りに仕 上げます。コミュニケーションを大切にし、納得のい くまでサポートしますので、安心してお任せくださ い。 worry... フィードバックと目線合わせ デザインの調整 仕上がりチェック
12. 公開後のサポートも しっかり受けられるのか不安… 公開後もご安心ください。問題が発生した際や変更が 必要な場合、迅速に対応いたします。定期的なメンテ ナンスやアフターケアも提供し、長期的に安心して運 用いただけるようサポートします。公開後も気になる ことがあれば、いつでもご連絡ください。お客様のご 要望に柔軟に対応し、しっかりサポートいたします。 worry... solution!
13. Feature サービスの特徴 丁寧で正確な制作作業 1 販売で培った接客スキルと、事務経験で養った正確性を融合させ、細部までこだわった制作を行いま す。一つひとつの作業を大切に進めていきます。 追加機能やデザイン変更対応 2 サイトの成長に応じて、新たな機能の追加やデザインの変更にも対応します。必要に応じて、柔軟に サービスを拡充できるサポートを提供いたします。 長期的な関係構築 3 サポートを通じて、お客様との信頼関係を築き、長期的にお手伝いできることを大切にしています。 困ったときには頼りにしていただけるパートナーであり続けます。
14. Skills スキル・その他 育児の傍らでオンラインスクール「デイトラ」にてコーディングとデザインを学んだのち、企業様との業務委託契約のもと、1年ほどサイト・ LP制作のお手伝いをさせていただいております。 同スクールにてWebマーケティングの学習も始めており、今後さらに業務の範囲を広げてゆく予定です。 スキル概要 主なスキル カンプ・バナー・UIデザイン他メインで使用 バナー作成や画像の加工編集 ロゴ、アイコン作成 手描きイラスト作成 バナー・カレンダー作成 HTML/CSS/SASS/PHP コーディング JavaScript（jQuery、GSAP） アニメーション WordPress CMS VSCode 開発環境
15. Works - 制作実績 -
16. 制作事例　電子書籍アプリのUI改善案 種類 自主制作 制作期間 18日間 制作範囲 デザイン 使用ツール Figma 電子書籍サービスアプリの UI改善案 参考：dブック公式アプリ（https://dbook.docomo.ne.jp/） 本改善案は自主制作物です。掲載内容は非公式であり、原著作権者様とは一切関係がありません。
17. Before 制作事例　電子書籍アプリのUI改善案 改善対象に設定させていただいたアプリ： NTTドコモ 様 『ｄブック』 概要 dブックについて： NTTドコモが運営する総合電子書籍サービスで、漫画・小説・実用書など60万冊以上 のコンテンツを取り揃える。dポイントがお得にたまるキャンペーンも随時実施され ており、dアカウント保有者にとってお得感の強いサービスとなっている。 dアカウントは、ドコモユーザーでなくとも登録が可能。 ターゲット： 主に20代～40代の電子書籍読者。 目的： ユーザーが簡単に本を見つけて購入し、快適に読書を楽しめるUIを目指す。 課題 ・ドロワーメニューの内容が汎用性に乏しい ・ホームをはじめ、ランキングやおすすめページが見づらい ・ユーザーのアクションに対するリアクションが希薄。例えば、商品をカートイン した際のリアクションがなく、一昔前のECサイトのカート機能を思わせる
18. dブックについて： NTTドコモが運営する総合電子書籍サービスで、 漫画・小説・実用書など60万冊以上のコンテンツを取り揃える。 dポイントがお得にたまるキャンペーンも随時実施されており、dアカウント保有者に とってお得感の強いサービスとなっている。ドコモの回線契約をしていると、アプリ から本を購入できる。 「dブック」について 制作事例　電子書籍アプリのUI改善案 ※実際のユーザーに焦点を当てて、インタビューを行うことで具体的な考えや行動を分析する手法 N1分析 を取り入れ、ユーザー1人ひとりが本をどう読むのかを分析し、サービス改善 やコンテンツの編成に反映させている。 ユーザーの年齢層： 競合サービスよりも特徴的で、30～40代の購買意向の高いユーザーがメインとなって いる。 男女比： dブックはもともと女性のユーザー比率が大きかったが、2021年のサービスのリニュー アル実施後は男性ユーザーにも広く利用されている。 ※ ※Appliv TOPICS調べ（https://mag.app-liv.jp/archive/149919/）
19. 制作事例　電子書籍アプリのUI改善案 情報整理 操作モデル 本の検索： ・キーワードを検索する ・入力中、書籍名や著者名など候補の 　キーワードが表示される ・キーワードを確定して検索する ・検索結果が表示される 本の購入： ・本をカートに入れる ・カートを見る ・購入に進む ・支払い方法や支払額を確認する ・購入を完了する 本を読む： ・ライブラリを開く ・本を選択する ・本を閲覧する ・しおりをはさむ 本を探す際に利用する情報： ・書籍名 ・配信開始日 ・ジャンル ・作者名 ・価格 機能要件 ・検索（フリーワード） ・おすすめ機能 ・ランキング タスク ・ログイン（アプリ起動） ・目的の本を検索する ・本をかごに入れる ・本を購入する ・本を読む
20. 氏名：中沢　芳樹 性別：男性 年齢：32歳 職業：会社員 回線契約：docomo 人物像：読書好き。本は紙派だったが、部屋のスペース節約のために電子書籍を利用し始めた。 本の趣味は雑食。興味を持ったらジャンル問わず読んでみる。 空き時間や休日に、場所を選ばず快適に読書したい アプリを通して新しい本と出会いたい（図書館で本棚を物色している時のような感覚で気軽に本を探したい） ニーズと期待する機能： 使いやすさ: シンプルで直感的な操作性、簡単な購入機能 発見性: 人気ランキング、ジャンル別のおすすめ お得感: セール情報、新刊通知、期間限定の無料作品 管理機能: 読書履歴、購入履歴、作品の整理・削除機能 ペルソナ設定 制作事例　電子書籍アプリのUI改善案
21. 制作事例　電子書籍アプリのUI改善案 Before After ホーム画面
22. 制作事例　電子書籍アプリのUI改善案 最近チェックした作品を基に関連性の高い作品を おすすめすることで、ユーザーの購買意欲を引き 出し、「ついで買い」を促す。ただし、過度なレ コメンドは避け、ホーム画面内での情報のバラン スを保つ。 ユーザーがアプリを開いた瞬間に、自分が購入し た書籍にすぐアクセスできるため、操作がシンプ ルになり利便性が向上する。また、ユーザー自身 の「所有感」を感じやすいマイ本棚がホームにあ ることで、アプリを「自分のもの」と感じ、愛着 がわく。 アプリを開き、真っ先にキャンペーンなどお得情 報のバナーをスワイプで見られるよう配置。隣接 するバナーの端を見せておくとスワイプ率が上が る。 お得感の強い1冊まるごと無料の本を並べ、ユー ザーの興味を引き寄せる。内容が良ければ、同じ 作家やシリーズの有料書籍へ誘導することができ る。また、無料提供により、新規ユーザーに対し 「ユーザー思い」といったポジティブなブランド イメージを形成できる。
23. 制作事例　電子書籍アプリのUI改善案 Before After ドロワーメニュー
24. 制作事例　電子書籍アプリのUI改善案 透過背景部分をタッチして閉じる操作は一部 ユーザーにはわかりにくい場合がある。×ボ タンを設置し、直感的にメニューを閉じられ るようにした。 ユーザーが興味を引きやすい、汎用性の高い 機能は、アイコン付きで直感的に認識・選択 できるよう配置。 「ジャンルで探す」を設置。ユーザーが興味の あるジャンルを直接選べるため、目的のコン テンツに素早くアクセスすることができる。 アプリについての情報など、ユーザーが頻繁 に使用するメイン機能ではないものに関して は、「その他」にまとめる。これによりメイ ンメニューがスッキリし、重要な機能が目立 ちやすくなる。 また、ユーザーサポート関連の情報を一箇所 にまとめることで、必要な情報を見つけやす くなる。
25. 制作事例　電子書籍アプリのUI改善案 ランキングページ Before After
26. 制作事例　電子書籍アプリのUI改善案 ランキングナンバーを大きく表示し、ユーザー の目を引く。等幅フォントを使い、視覚的に 整った印象を与える。 ユーザーが自分の関心に応じて、異なる期間（デ イリー、週間、月間）のランキングを簡単に切り 替えられる。例えば、最近人気のある商品や長期 的に評価されている商品を一度にチェックするこ とができる。 最も注目されやすい売れ筋ランキング以下、ジャンルご とのランキングは画面にメリハリをつけるため、白い数 字を置き、背後に影のグラデーションを敷いてやや落ち 着いた表示にする。可読性が上がり、順位も目に入りや すい。
27. 制作事例　電子書籍アプリのUI改善案 おすすめぺージ Before After
28. 制作事例　電子書籍アプリのUI改善案 購入履歴からのおすすめは最上位に配置。 ユーザーが過去に購入した商品に基づいておす すめを表示することで、ユーザーの興味や購入 履歴に即した、より関連性の高い商品を最初に 見せることができる。これにより、ユーザーに とって有益で魅力的な商品が最初に表示され、 購入意欲が高まる。 たとえば、季節に応じたテーマやジャンル の本を紹介することで、ユーザーはその時 期にぴったりの読書体験を楽しめる。冬に はあたたかい料理や、体を温める生活習慣 に関連する本、また、冬を連想するテーマ の漫画や小説など。季節でなくても、ユー ザーの感情に寄り添う提案で興味を引く。 閲覧履歴をもとに、少し異なるけれど関連する 本を提案することで、ユーザーが意外なジャン ルや作家に出会えるチャンスを提供する。これ により、ユーザーの読書体験が広がり、新たな 興味を引き出すことができる。
29. 制作事例　電子書籍アプリのUI改善案 詳細ページ Before After
30. 制作事例　電子書籍アプリのUI改善案 本のタイトルやジャンルなどの情報を1カ所に 集約し、ユーザーが内容を確認しやすくする。 「チェックする」機能は、ユーザーにとって「お 気に入り登録」などと重複する機能として認識さ れる可能性が高い。アプリのシンプルさを保つた め、「チェックする」機能は省略し、お気に入り 機能と統一する。 「チェックする」…… チェックした本はマイ本 棚に一覧で表示される。 「お気に入りに登録」 …… お気に入り登録したシ リーズや作者の本を一覧 で表示できたり、新刊が 配信された時にPUSH通 知で知らせが来る。 「まとめて買う」の利用頻度は通常あまり高 くないため、ボタンを削除。 代わりに、ページをスクロールするとシリー ズの各巻をチェックボックスなどで選択し、 まとめてカートに入れることができるように する 「今すぐ買う」というボタンは、ユーザーに即決 を強いる印象を与えることがある。また、多くの オンラインストアでは、商品を「カートに入れ る」手順がある。ユーザーが他アプリでもカート 機能を使い慣れている場合、「カートに入れる」 ボタンを設置することで、ユーザーにとって安心 感があり使いやすい環境を提供できる。
31. 制作事例　電子書籍アプリのUI改善案 現状はカートインした際のアクションがないため、 「カートに入れる」ボタンの押下で透過背景のカート モーダルが表示されるようにする。 同時に、下タブのカートのバッチのカウントが追加さ れ、「カートに入れる」ボタンが「カートを見る」ボ タンに変化し、購入への導線となる。
32. 制作事例　電子書籍アプリのUI改善案 通知は、ユーザーにとって重要な情報を 知らせるもの。目立つ位置にアイコンと して設置することで、即座に内容を確認す ることができる。 その他 / ヘッダーと検索ボックス 視認性を高めるためインナーシャドーで立体感を出し、ユー ザーが「ここに入力できる」ということを直感的に理解しやす くした。 また、サジェスト機能で、入力中に関連する書籍を候補として 表示することで、ユーザーが探しているものを素早く見つけら れるようにする。 dアカウントとdポイントのパーツを囲んでいたやや古い印 象を与えてしまうシャドウは削除し、すっきりとしたデザ インに変更。余白も整えた。 Before After
33. 制作事例　電子書籍アプリのUI改善案 現在地を把握しやすいよう、アイコン・テキストは黄色に変化さ せる。こういった視覚的なフィードバックは「考えなくても分か る」安心感を与え、アプリの信頼性や使いやすさを感じてもらい やすくなる。 その他 / 下タブ dブックのメインカラーを背景色とした。視認性を高 めるのと同時に、アプリ全体に一貫性が生まれ、ブラ ンドイメージをユーザーに印象付けることができる。 最後に読んでおり、まだ読破していない本の表紙画像を 配置することで、ユーザーがアプリを開いた際にワンク リックで続きを読める。これにより、読書を再開する ハードルが下がり、読書の継続を促すことができる。 Before 本をカートに追加した際にバッジが更新されるこ とで、動作が成功したことが即座に確認でき、 ユーザーに安心感を与える。色は、視認性の高い 赤とした。 A ft er
34. 参考：発達支援ポータル「ヒトツナ」（https://hattatsu-hitotsuna.com/） 本案は自主制作物です。掲載内容は非公式であり、原著作権者様とは一切関係がありません。 児童発達支援事業所の フランチャイズ募集LP 自主制作　児童発達支援事業所のフランチャイズ募集LP 種類 自主制作 制作期間 約3週間 制作範囲 デザイン 使用ツール Figma
35. 事業内容： 児童発達支援・放課後等デイサービス ターゲット： 子どもの成長支援や社会貢献に興味がある、業界未経験者。 目的： フランチャイズ開業に「興味のある状態」から、ターゲットが抱える課題や不安 を解決し、資料請求や電話相談などの具体的行動を促す。 概要 改善対象に設定させていただいたLP： 株式会社サイドアイ様の運営する事業所 『ヒトツナ』のフランチャイズ募集LP 自主制作　児童発達支援事業所のフランチャイズ募集LP 運営会社「株式会社サイドアイ」について 平成31年1月に、児童福祉法に基づく障害児通所支援事業（児童発達支援・放課後等 デイサービス）の開業の為に設立された。 企業理念に「未来を生きる力を育む 〜一人も孤立させない、二次障害を防ぐ社会づ くり〜」を掲げ、子どもたちが自分らしく充実した人生を送れるよう、人との繋がり を重視した支援を行っている。
36. 2022年8月からフランチャイズ募集を開始。その後、わずか1年半でグループ施設を含 め30施設まで拡大し、急速な成長を遂げている。 初めての事業、また異業種からの参入でも安心して開業・運営ができることをポータ ルサイトでもアピールしており、それも人気の要因のひとつと思われる。 オーナーの平均年齢：40歳 オーナーの性別比：女性37%　男63% 開業数：40カ所 直営教室：4カ所 相談から開業まで：約7か月 開業地域：関東・東北・北関東の順に開業数は多い コンセプト： 子どもが生きる未来を幸福な社会に 「ヒトツナ」について “人と人との繋がりを大切に”
 “人との繋がりをもっと楽しく”
 豊かな感受性と表現力を育てます。 自主制作　児童発達支援事業所のフランチャイズ募集LP
38. フォント カラー Noto Sans JP ・・・ビジネスとしての信頼感を出したいため、見出し・本文に使用。 Zen Maru Gothic ・・・児童福祉関係のLPのため、やさしい雰囲気と親しみやすさが欲しい。 ファーストビューのキャッチコピーに使用。 Zen Old Mincho ・・・運営からのメッセージテキストに使用。企業の理念や姿勢を伝える 場面でもあるため、明朝体を使うことで真剣さや信頼性を強調した。 「ヒトツナ」ポータルサイトにトンマナを合わせ る形で選定。アクセントには子どもたちの「成 長」を連想させるグリーンと、それを育む「土」を 思わせるアースカラーを取り入れた。 配色や使用フォントについて 自主制作　児童発達支援事業所のフランチャイズ募集LP
39. - ファーストビュー - デザイン解説 キャッチコピーの字間を広めにとり、 心理的敷居を低くすることで、 訪問者からの問い合わせを促す 訪問者の関心を引くため、 3つのバリューポイントを設置。 未経験でも安心できる点を強調 写真はまるみのある切り取りで、子どもらしさを表 現。 笑顔の女性と子どもたちが写っており、親しみやすさ と安心感を伝える。 自主制作　児童発達支援事業所のフランチャイズ募集LP
40. メインはフォームからの資料請求だが、 電話による訪問者からの問い合わせも促したい。 勧誘や営業は通常好まれないため、 それらは行わないと明記し、不安を解消する。 スーツ姿で清潔感のある女性の笑顔の 写真を使用。 信頼感とプロフェッショナルな印象を 与え、親しみやすさも同時に感じさせる。 タイトルを視認性の高い緑色のリボン型背景 に配置し、次のアクションを強く促す。 CTAボタンは赤色で配置し、視覚的に目立た せ、クリックしたくなるデザインに。 ボタン内にはアイコンを置き、直感的に「資 料請求」と関連付けられる工夫をした。 自主制作　児童発達支援事業所のフランチャイズ募集LP - CTA - デザイン解説
41. 自主制作　児童発達支援事業所のフランチャイズ募集LP - 下層セクション - デザイン解説 「ヒトツナ」とは何なのか？図も交え、 ユーザーの疑問に回答していく。 店舗数・利用者満足度など具体的な数字も列挙し つつ、実際の教室の写真もスライダーで眺めるこ とができるようにすることでユーザーの信頼を高 めていく。 業界歴の長いスーパーバイザーによる支援 が得られる心強さに加え、にこやかな笑顔 で案内をする女性の写真を使用することで ユーザーに安心感を与える。 悩みや課題を認識した直後は、ユーザーが 「これを解決したい」と最も感じる瞬間で もある。「悩み」「解決テキスト」の直後 にCTAを配置することで、「解決策がここ にある」という心理的な流れが生まれ、問 い合わせに繋がる。 「悩み」に リアリテ ィを 持たせることで ユーザーに 共感を 持たせ、 アクション（資 料請求や問い合わせ ）につなが りやすくす る。写真は、 ター ゲットに 近い 人物像で 選 定した。
42. 自主制作　児童発達支援事業所のフランチャイズ募集LP - 下層セクション - デザイン解説 「ヒトツナ」が選ばれる理由と、なぜ「児 童福祉」がねらい目なのか、という部分を 解説。 データや調査の信頼感を伝える視覚要素 （グラフ等）を活用し、3つのポイントを挙 げて訴求した。 各オーナーのアバターには親しみやすいイラスト を選定。 要望⇒提案⇒オーナー様の声と一連の流れを掲載 することで、開業支援に対するイメージをユー ザーに促すことができる。
43. ポータルサイトとセミナー情報へのリンクに、バナーを大きめに 配置。追従する「トップに戻るボタン」は円に近い不定形で柔ら かな雰囲気に。 表形式により、直感的に内容を理解できるようにす る。配色は淡い青を使用し、金額面での信頼性や、 落ち着いた雰囲気を演出した。 自主制作　児童発達支援事業所のフランチャイズ募集LP - 下層セクション - デザイン解説 アイコンを使用することで、フローの内容が一目で 理解できるように設計。ステップを上から順番に並 べ、視線誘導がスムーズに行えるようにする。 開業までの流れや売上シミュレーションでユーザーの 理解を深めた直後にCTAを設置することで、ユーザーが 行動を起こしやすくする。 運営者からのメッセージにはやわらかな明朝体を使い誠実さと 信頼感を。また、淡いピンクの曲線を背景として、親しみやす さ、心の温かさを表現した。 ⇒ 送信ボタンをホバーすると色が変化する 資料請求・個別相談の予約ができるフォームを設置。資料請 求CTAの着地地点でもある。デフォルトのフォームではなく、 他セクションとトンマナを合わせ、余白等も見やすく、ゆっ たりとした印象となるように調整した。 送信後は、サンクスページに遷移するようにする。　
44. ベンチマーク 自主制作　児童発達支援事業所のフランチャイズ募集LP
45. 店舗型クレープショップの バナー広告 制作事例　クレープショップのバナー広告 種類 自主制作 制作期間 10日間 制作範囲 デザイン 使用ツール Figma 参考：KEHARE CREPE -ケハレクレープ- 様　Instagram公式アカウント（https://www.instagram.com/kehare_crepe/） 本改善案は自主制作物です。掲載内容は非公式であり、原著作権者様とは一切関係がありません。
46. 制作事例　クレープショップのバナー広告 Before https://www.instagram.com/kehare_crepe/ 事業内容： 店舗型のクレープショップ（テイクアウト・店内飲食可） ターゲット： ショップ近くの大学に通う学生 同じくショップ近くの大型団地の住人 中百舌鳥の駅近なので、電車利用者にも立ち寄ってもらいたい 目的： バナーを通じて店舗や商品の認知度を高め、新しい顧客を呼び込む。 概要 改善対象に設定させていただいたバナー： KEHARE CREPE 様 Instagram広告バナー 課題 ・バナー内にテキストの情報が詰め込まれており、ごちゃごちゃとしてしまって いる。 ・赤い背景に白文字のタイトルは目立っているが、他の要素と比較して圧迫感が ある。 ・商品画像はもっと大きく見せたい
47. ブルーを基調とした 可愛らしい外観が特徴 アクセス： 大阪メトロ　中百舌鳥駅（なかもずえき） 駅から徒歩6分（423m） 集荷が見込めるおもな近隣施設： 大阪公立大学（中百舌鳥キャンパス）、百舌鳥公園団地 クレープの価格帯： 350～1,000円超えのものも。1,000円超えはパフェ並みのボリューム クレープについて： 国産素材にこだわった自家製クレープを提供。 生地には国産小麦を使用し、ホイップ、あんこ、カスタードも自家製。 生地は「サクサク」と「しっとり」の2種類から選べる。 旬のフルーツを活かした商品が人気で、野菜や総菜を使ったおかずクレープ もあり、メニューは多彩。 サクサク生地は、作るのに時間がかかるものの、非常においしいと人気。 テイクアウトを利用するお客様が多い。 制作事例　クレープショップのバナー広告 「KEHARE CREPE」について
48. Before After 制作事例　クレープショップのバナー広告
49. 制作事例　クレープショップのバナー広告 フォント フォントは「Zen Maru Gothic」をメインに。 「Crepe（クレープ）」の文字の部分には、視認性が高 く、フード系の広告とも相性が良い「Denk One」フォ ントを使用。どちらもまるみがあり、親しみやすい印象 がある。 テキスト背景 視認性アップとホイップのクリーミーさを表現するた め、白いシェイプを文字の下に敷いた。 背景 店舗のイメージカラーと、ケハレの 「ハレ（晴れ）」→「青空」からのイメージで 水色の背景を選択。あかるく親しみやすい イメージをプラスするため、ポップなドット柄も 入れた。 商品画像 ボリューム感を出すために 視覚的なインパクトが欲しいので、 それぞれおおきめに画像を配置。 デザイン解説
50. 制作事例　クレープショップのバナー広告 ベンチマーク
51. 制作事例　クレープショップのバナー広告 インパクトと⁩ボリュームのある桃の クレープをバナーに使用し、ユー ザーの目を引く。 桃らしいピンク色＆ポップな縦スト ライプの背景に、まるまると熟した 桃の画像をちりばめてシズル感を出 した。 背景色を左右で分け、「しっとり」 と「サクサク」生地の食感の違いを 視覚的に強調している。メインコ ピーの「あなたはどっち？」は太字 で中央に配置し、視線を自然に引き 付けるようにした。 ピンク色の背景で柔らかく甘い印象、 青色の背景は爽やかで軽快な印象。 他デザイン案
52. Contact - お問い合わせ -
53. Contact お問い合わせ ユーザー名：mari_syusyu URL：https://x.com/mari_syusyu X（旧twitter） web.holly.sunny@gmail.com メールアドレス お問い合わせはX（旧twitter）のDM、もしくは下記メールアドレスより承っております。 主に使用しているコミュニケーションツール ※その他ツール（LINEなど）にも柔軟に対応いたします。
54. FAQ - よくある質問 -
55. Q どのようなWebサイトを作成できますか？ A コーポレートサイト、LP、ブログ、ポートフォリオサイトなど、さまざまなタイプのサイトを作成できます。 Q デザインから開発まで対応可能ですか？ A はい。要件に応じてデザイン、コーディング、WordPress導入、SEO対策まで対応可能です。 Q 納期はどのくらいかかりますか？ A プロジェクトの規模によりますが、一般的に2週間～4ヶ月ほどです。詳しい納期はヒアリング後にご提案いたします ので、まずはお気軽にご相談ください。 Q 修正回数に制限はありますか？ A 基本的に各工程10回まで無料で対応いたします。それ以降は追加料金が発生しますのでご了承ください。 FAQ よくある質問
56. Q 素材の用意などもしてもらえますか？ A はい。必要に応じて写真素材や、こちらは有償となりますがテキストのご用意も可能です。 Q スマホ対応（レスポンシブデザイン）は可能ですか？ A はい。すべてのWebサイトでスマホ対応を標準で行っています。 Q 開発まで依頼した場合、セキュリティ対応もしてもらえますか？ A はい、セキュリティ面についても十分に配慮したWebサイトを提供いたします。SSL証明書の設定や、WordPressサ イトの場合は、適切なセキュリティプラグインの導入や初期設定を実施いたします。 Q 納品方法を教えてください A 納品方法につきましては、プロジェクトの内容やお客様のご要望に応じて柔軟に対応いたします。 FAQ よくある質問
57. Lastly - 最後に -
58. 最後までご覧いただき、ありがとうございました。 Web制作を通じて、皆さまの想いや目標を形にするお手伝いができれば幸いです。 ご興味を持っていただけましたら、ぜひお気軽にお問い合わせください。 Thank you! Lastly 最後に