Maki Setoguchi Portfolio

ポートフォリオをご覧いただきまして、誠にありがとうございます。
ご相談やご依頼は、どうぞお気軽に下記よりご連絡ください。
■ Mail mmakiii.st.1121@gmail.com

Transcript

1. Portfolio by Maki Setoguchi ユーザー視点で伝わるデザイン 分かりやすさを意識した情報設計
2. Contents 目次 01 02 03 04 05 自己紹介 制作実績 お仕事で大切にしていること よくある質問 最後に P.03 P.06 P.29 P.32 P.35 02
3. PROFILE 自己紹介 これまで対応してきたもの Webサイト・LP スライド資料 バナー MAKISETOGUCHI 瀬戸口 真紀 Instagram画像 LINE投稿画像 好きなこと 日本酒の美味しいお店探し お酒に合う海鮮料理が楽しめる居酒屋を巡るのが 好きです。 スポーツ観戦 小学校から高校までソフトボール部でした。 スポーツ全般（特に高校野球と箱根駅伝） 見るのが好きです。 制作期間の目安 5 WEBサイトTOP 営業日 LP 6〜10営業日 3 バナー・SNS画像 営業日 ※上記は目安ですので、お急ぎの場合はご相談ください。 03
4. 飲料メーカーに就職し、 執行役員の秘書業務を担当 スケジュール管理や会議準備、社内外の調整 を行っていました。相手にわかりやすく伝え ることや、正確に進めることを大切にして取 り組むことで、「安心して任せられる」と 言っていただく機会も多くありました。この 経験は、現在の制作における丁寧な進行にも つながっています。 CAREER 経歴 LINE運用を通じて見つけた “伝えるデザイン”の大切さ 副業でLINE運用を担当したことをきっかけにデザ インに携わるようになりました。スポーツジムや 動物病院、美容外科、行政書士事務所などのLINE 配信で使用するリッチメニューやキャンペーン画 像を制作していました。思うような結果につなが らない原因を分析する中で、情報の優先順位や伝 え方の重要性に気づきました。実際に 構成を見直 して改善したところクリック率が上がった経験か ら、情報整理を大切にしながら「伝わるデザイ ン」を意識するようになりました。 「想像以上の 仕上がり」と評価 いただいたネイ ルサロンの サイ ト 知人の ご紹介で ネイル サロンの ホームページ制 作を ご依頼いただきました。I nstagramの みでの 発信に 不安を 感じており、信 頼性や サー ビスの 魅力を伝えられる サイ トを 求めていらっし ゃい ました。デザインの方 向性はムー ドボー ドを用 いて整理し、情報 設計ではメニュー 導線をわか りやすく整理しました。 初稿時にはデザインの 意図も合わせてお伝えし、「想像以上の仕上が りです」と喜んでいただけました。 04
5. 情報整理とレイアウト改善で 読みやすさを高めた採用ページ 広報（Web担当）として、採用情報の社員紹 介ページのリニューアルを担当しました。既 存ページは情報量が多く、読みにくいという 課題がありました。 30社以上の採用サイトを調査し、情報構成と レイアウトを改善。紹介文の要点整理と写真 とのバランス調整により読みやすさを高め、 「情報が見やすくなった」と評価いただきま した。ページ制作を進める過程で意図を丁寧 に共有したことで、安心して進行できたと 言っていただけました。 CAREER 経歴 伝えるため の見せ方を 意識した 楽天LPデザイ ン 楽天市場の LP制作にデザイ ナーとして 参加しま した。 事前に構成意 図を 確認し、情報が読みや すく伝わるデザインを意識しました。 比較検討 されやすい ECの 特性を 踏まえ、 視線の流れや情 報の強弱、余白の使い方を工夫し、安心感と説 得力のある見せ方を意識しました。 デ ィレ クターの 方からは「意 図を 正確にくみ 取ってデザインに 反映してくれる」と 評価いた だ き、 チームでの制作におけるコミュニケー ションの重要性を改めて実感しました。 相談しやすい 制作パートナーとして 常に「このデザインは本当に伝わるか」「情報 は整理されているか」を意識して制作していま す。 見た目だけを整えるのではなく、伝えるべ きことを整理し、わかりやすく届けることを大 切にしています。 言葉にしづらい想いや背景を一緒に整理し、形 にしていくことにやりがいを感じています。こ れからも“ユーザーに伝わるデザイン”を追求 し、 安心して相談していただけるパートナーで ありたいと考えています。 05
6. Works 制作実績 06
8. Works 制作実績 介護支援サービスサイト 6日間(TOPページ) ライティング・デザイン Figma ・介護サービスを必要とする高齢者とそのご家族 ・初めて介護施設やサービスを探している層 オレンジを基調に、温かみの中にも安心感と 信頼性が伝わるようにしたい 制作期間 担当範囲 制作ツール ターゲット ご要望 08
9. 全体デザイン 09
10. Works 制作実績 ホームページリニューアルにあたり、目的整理 事業内容 介護福祉サービス （施設・ショートステイ・デイサービス） ターゲット 介護サービスを探している高齢者/そのご家族 課題 ・施設やサービスの雰囲気が十分に伝わらず、安心感を持ちにくい ・情報の整理不足により、問い合わせや資料請求に結びつきにくい ・サービスメニューが多く、違いが利用者や家族に伝わりにくい 目的 ・ユーザーが迷わず必要な情報にたどり着ける導線を設計し、 　相談や問い合わせへつなげる 10
11. Works 制作実績 お客様のご要望から考えたデザインイメージ お客様のご要望 情報面 デザイン面 ・あたたかみを感じる色合いにしたい ・優しい雰囲気を出したい ・写真を多く掲載したい ・サービス内容をもっと整理したい ・初めての人にも安心して選んでもらいたい デザインメインイメージ 安心の中に広がるやさしさ (安心を土台に、やさしさで包み込むデザイン) お客様からいただいた参考サイト 11
12. Works 制作実績 参考サイト調査・分析 競合に加え、他業界のデザイン事例も調査し、方向性を検討する ・20件以上のサイトを比較し、配色・写真の使い方・レイアウトを中心に分析 ・共通する傾向や差別化のポイントを整理 ・デザインに活かす要素と避ける要素を整理し、方向性を具体化 調査から見えたデザインの方向性 配色：淡いベージュやオレンジ・グリーンなど、やさしいトーンが多い 写真：利用者やスタッフの笑顔写真を多用して安心感を演出 レイアウト：余白を広めにとり、落ち着いた印象を与えている 【活かす要素】 ・写真を多用し、信頼感と親しみを伝える ・柔らかい色合いにオレンジをアクセントとして取り入れ、温かみを表現 【避ける要素】 ・情報量が多すぎて読みにくい構成 参考サイト調査(一部抜粋) 12
13. Works 制作実績 デザイン詳細 初稿では、デザインの意図をわかりやすく整理し、 「なぜこのデザインなのか」が伝わる形でご提案します。 安心感を与えるため、 クローバーをモチーフに 「幸福」「信頼」の象徴であるクローバーを 取り入れ、安心感と親しみを添えました。 水彩イラストでやさしい彩りを添える 淡い水彩タッチのイラストで、親しみやすく 柔らかな雰囲気をプラスしました。 淡いテクスチャと緩やかな波で 温かみのある背景に ①テクスチャで単調さを和らげ、温かみをプラス。 ②波でセクションをつなぎ、やさしく自然な流れを演出。 写真に丸みを加えて 親しみやすさを表現する 親しみ×信頼感のバランスを表現するため、 写真に2角の丸みを加えました。 温もりを表現するため 背景にオレンジのぼかしを入れる 白背景に部分的にオレンジの ぼかしを 取り入れ、 柔らか さと温もりを 広げました。 13
14. Works 制作実績 初めて見た人でも安心して 問い合わせできるような情報設計の工夫 安心から信頼へ、行動につなげる設計 「安心 → 共感 → 理解 → 信頼 → 行動」
 という感情のステップを踏むことで、利用者が自然に問い合 わせへとつながるように設計しています。 複数のサービス内容を理解しやすいレイアウト カード型で整理し、一覧性を高めて必要なサービスを見つけ やすくしました。写真とテキストを組み合わせ、直感的に特 徴を把握できる構成にしました。 ターゲット(50代から60代)の年齢層に配慮した読みやすさ 50代以上がターゲットであるため、文字サイズは18〜20pxに 設定。行間を広めに取り、負担を軽減。 さらに十分な余白を確保し、詰め込み感を避けることで、全 体的にゆとりを感じられるレイアウトにしています。 安 心 ・ 希 望 共 感 興 味 ・ 理 解 信 頼 安 心 行 動 14
15. Works 制作実績 納品時にデザインと一緒にお渡ししている資料 初稿ご提案時 必要に応じて、初稿のご提案時には、各デザイン案の意図や特徴を わかりやすく言語化した提案書を添えてご提出することもございます。 コーダー様への連携方法 フォント・カラーなどを整理し、実装時に迷わないよう、一助となる情報 をまとめています。 フォームやボタンなど共通する要素はコンポーネント化し、スムーズな進 行を意識しています。 提案書 指示書 15
17. Works 制作実績 ビューティーサロン紹介サイト 5日間(TOPページ) 制作期間 ライティング・デザイン 担当範囲 Figma ・おしゃれ感度が高く、特別感を大切にする層 ・上質で特別感のあるサロン体験を求める人 透明感と上質さを表現し、特別感と信頼感が 伝わるようにしたい 制作ツール ターゲット ご要望 17
18. 全体デザイン 18
19. Works 制作実績 音楽教室紹介サイト 4日間(TOPページ) 制作期間 ライティング・デザイン 担当範囲 Figma ・幼稚園児～小学生の子どもを持つ保護者 ・子どもの音楽的成長と心の教育を大切にした層 青を基調に、親しみやすさの中にも信頼感を 感じてもらえるようにしたい 制作ツール ターゲット ご要望 19
20. 全体デザイン 20
21. Works 制作実績 行政書士事務所サイト 5日間(TOPページ) 制作期間 デザイン 担当範囲 Figma ・法務手続きに関心のある一般企業や個人 ・特に初めて行政書士に依頼する方 信頼感と安心感がありつつ、プロフェッショナルな 印象が伝わるようにしたい。 制作ツール ターゲット ご要望 21
22. 全体デザイン 22
23. Works 制作実績 不動産相続サービス ランディングページ 5日間 制作期間 デザイン 担当範囲 Figma ・相続手続きに不安を感じる人 ・専門家に任せて安心したい人 堅苦しい印象は避けつつ、初めての人でも気軽に 相談できる雰囲気にしたい 制作ツール ターゲット ご要望 23
24. 全体デザイン 24
25. Works 制作実績 マネーセミナーランディングページ 6日間 制作期間 ライティング・デザイン 担当範囲 Figma ・将来のお金に不安を感じている30〜50代の男女 ・初めて資産形成やライフプランを考えたい層 緑を使用して、安心感と信頼性が自然と伝わ るようにしたい 制作ツール ターゲット ご要望 25
26. 全体デザイン 26
27. Works 制作実績 伝統建築を活かした宿泊施設サイト 5日間(TOPページ) 制作期間 ライティング・デザイン 担当範囲 Figma ・都会の喧騒から離れて、静かに過ごしたい人 ・上質で特別感のある滞在を楽しみたい層 黒をベースにし、和の趣と落ち着きを感じら れるようにしたい 制作ツール ターゲット ご要望 27
28. 全体デザイン 28
29. ユーザー視点で伝わるデザイン 広報として情報発信をしていた頃、「伝えたつもり」が相手には届いていなかった、 という失敗を何度も経験しました。 だからこそデザイナーになってからは、「相手の立場で考えること」を何より 大切にしています。 背景を知り、どう伝えるべきか整理し、相手の目線で届けられるように。 そんなデザインを目指して、日々制作に向き合っています。 私にできること
30. 言葉とデザインを整えて、より伝わるように 具体的に ワイヤーフレームの例 このようにデザインします 何から始める？
 どうすれば安心できる？ 未来を守る
 お金の仕組み 将来のお金の不安を、
 今から解消しませんか？ 申し込みはこちら 次ページで意図を解説します
31. デザイン意図 自分のことだ！と感じやすいように、 ターゲットの「頭の中にあるワード」 や「悩み」を追加する 悩みをよりイメージしやすいように、 モヤモヤした吹き出しを使う ワイヤーフレーム 何から始める？
 どうすれば安心できる？ 未来を守る
 お金の仕組み 将来のお金の不安を、
 今から解消しませんか？ 申し込みはこちら クリック後がイメージしやすいように 行動内容を「具体的に相手目線で」書く すぐにできそう！と感じてもらうため 「簡単」「1分」といった具体的な ワードを添える 情報を整理し、伝わる形を目指したデザインに
32. VOICE お客様の声 いただいたお言葉が日々の原動力です。 課題に真摯に向き合い、デザインの力で事業を 支えられるよう努めてまいります。 32
33. Q&A よくあるご質問 33
34. Q&A よくあるご質問 Q A コーディングも対応可能ですか？ 現在はデザインに専念しているため、コーディングはお受けできないのですが、コーダーさんに気持ちよく作業していただ けるよう、分かりやすい指示書付きのデータをお渡ししています。チーム制作でお役に立てれば嬉しいです。 Q A 画像の用意やテキストの作成も可能ですか？ 「手元に素材がない」「文章を考えるのが難しい」という場合も、柔軟に対応可能です。
 写真やイラスト素材のご提案、テキストのたたき台作成なども行っています。
 ご予算に合わせて無理のない形で進めますので、安心してご相談ください。 Q A どんな業種でも依頼可能ですか？ もちろんです! 業種に関わらず対応しておりますので、どのような案件でもお気軽にご相談ください。 34
35. Q&A よくあるご質問 Q A 案件を複数同時に進めることはありますか？ はい、HPやLPであれば3〜4件並行して進めることもございます。 納期や品質に影響が出ないよう、着手前に全体スケジュールをチャットで共有し、進捗は2〜3日に一度ご報告しています。 Q A 下層ページや一部だけのデザインもお願いできますか？ 下層ページ／単一セクションのみのデザインにも対応可能です。 既存のトーン＆マナーを踏襲し、整合性を担保してデザインいたします。 Q A バナーやSNS画像だけでもお願いできますか？ バナー制作やSNS投稿用の画像など、単発のご依頼も承っております。 柔軟に対応可能ですので、一点からのご依頼もお気軽にご相談ください。 35
36. Portfolio by Maki Setoguchi 貴重なお時間を割いてお読みいただき、 ありがとうございます。 ご興味をお持ちいただけましたら、 メールやチャットワーク等で ご連絡いただければ嬉しく思います。 ご相談のみでも、 喜んでお受けいたします。 お問い合わせはこちらから メールアドレス：mmakiii.st.1121@gmail.com ⁨ ⁩ ⁨ ⁩ ⁨ ⁩ ⁨ ⁩ ⁨ ⁩ Chatwork ID：riu_design 36