つこ

Transcript

1. Web Designer Saki Narita P o r t f o l i o 目的に合わせ、成果につながるデザインを。
2. Web Designer Saki Narita P o r t f o l i o 目的に合わせ、成果につながるデザインを。
3. Profile - 自己紹介- 信用金庫にて11年間勤務。窓口対応や営業活動を通じて「相手の想いをくみ取る力」を培って きました。お客さま一人ひとりに寄り添う提案を心がけ、店頭販売で全店2位を2度受賞した経 験もあります。 昔から絵を描いたりもの作りが好きで、好きなことを活かして手に職をつけたいと思い、WEB デザインの勉強を始めました。綺麗なデザインを作るだけでなく、「お客様の目的に合わせ て、見る人の心を動かし行動につなげること」がWEBデザイナーの大切な役割だと考えてい ます。 好きなもの・趣味 アイスクリーム(無限に食べられます)・ディズニー・実家と義実家 性格 ・真面目 MBTIはISTJ(管理者)。「まずはきちんと調べてから行動すること」を大切にしています。
 デザインにおいても、感覚だけに頼らずリサーチや学びを重ねながら、よりよい形を探っています。 ・よく笑う 笑いの沸点はかなり低めです。 Saki Narita 30代／愛知県在住／2児の母 Saki Narita 30代／愛知県在住／2児の母 Saki Narita 30代／愛知県在住／2児の母 Saki Narita 30代／愛知県在住／2児の母
6. Vision - 目指す姿- 目的に合わせて、成果につながるデザインを。 目的に合わせて、成果につながるデザインを。 ただ見た目を整えるだけでなく、「誰に・何を・どう伝えるか」を明確にした上で、 目的に沿ってユーザーの行動につなげるデザインができるよう日々学んでいます。 ヒアリングやリサーチを通して本質的な課題を見つけ出し、構成・導線・ビジュアル まで一貫して設計できるデザイナーを目指しています。
7. 今あるサイトがなんだかしっくりこない デザイナーとのやりとりが疲れる 提案がなく、進め方に不安を感じる 売り上げが伸びない 今あるサイトがなんだかしっくりこない デザイナーとのやりとりが疲れる 提案がなく、進め方に不安を感じる 売り上げが伸びない こんなお悩みありませんか？ 今あるサイトがなんだかしっくりこない デザイナーとのやりとりが疲れる 提案がなく、進め方に不安を感じる 売り上げが伸びない 今あるサイトがなんだかしっくりこない デザイナーとのやりとりが疲れる 提案がなく、進め方に不安を感じる 売り上げが伸びない
8. ＼ ぜひ、私にお任せください! ／ 今あるサイトがしっくりこない 01 意図を形にするデザイン 01 意図を形にするデザイン 01 意図を形にするデザイン デザインスクールで基礎を習得し、現在もコミュニティに所属しながら 日々スキルを磨いています。見た目の美しさだけでなく、「誰に・何 を・どう伝えるか」を考慮した設計力を大切にしています。自由課題 「ウィークリーデザイン」にも積極的に取り組み、継続的にアウトプッ トと改善を重ねています。 01 意図を形にするデザイン デザイナーとのやりとりが疲れる 02 丁寧でスムーズなコミュニ ケーション コミュニケーションツールの例 普段お使いのツールに合わせて柔軟に対応いたします。 02 丁寧でスムーズなコミュニ ケーション コミュニケーションツールの例 普段お使いのツールに合わせて柔軟に対応いたします。 02 丁寧でスムーズなコミュニ ケーション 迅速な返信・わかりやすい説明を心がけ、やりとりによるストレスを最 小限に抑えます。ご依頼者様の負担を減らせるよう、事前に自分で調 べ・考えたうえでやりとりを進めることを大切にしています。 コミュニケーションツールの例 普段お使いのツールに合わせて柔軟に対応いたします。 02 丁寧でスムーズなコミュニ ケーション コミュニケーションツールの例 普段お使いのツールに合わせて柔軟に対応いたします。
9. ＼ ぜひ、私にお任せください! ／ 提案がなく、進め方に不安を感じる 03 課題に寄り添うご提案を 03 課題に寄り添うご提案を 03 課題に寄り添うご提案を 「言われたものを作るだけ」ではなく、目的に沿ってより良い方向性を 提案することを大切にしています。
 お客様の課題や想いをしっかりと汲み取るために、ヒアリングシート を活用しながら、納得感のある進行を心がけています。 03 課題に寄り添うご提案を 思ったように売り上げが伸びない 04 丁寧なリサーチと論理的な 視点 金融機関での経験を活かし、ビジネス全体を見据えたデザインをご提案 します。情報の優先順位や流れを整理し、成果につながる構成と導線を 設計します。 競合・配色・テイストに分け、 60社以上を調査 AIを活用した差別化と情報設計 貴社ならではの強みを整理。文章や キャッチコピーのご提案も可能です。
10. Works -制作事例01- Works -制作事例01- Works -制作事例01- Works -制作事例01- 人材コネクト会社サイトリニューアル (スクールデザインコンペ入賞作品） 種類 スクールデザインコンペ 制作期間 約３週間 制作範囲 デザイン 使用ツール Figma
12. Works -要件定義- Works -要件定義- Works -要件定義- Works -要件定義- 事業内容 人材紹介事業、人材派遣事業、SES ターゲット デザイン総合職、ショップアドバザー、 エンジニア職の採用応募者 ご要望 求職者の人たちが入社したいと思えるような ワクワクできるような内容にリニューアルしたい 課題点 ・企業側の視点に寄りすぎており、求職者の共感が生ま 　れにくい ・堅実で誠実な印象はあるものの、働く姿が具体的に 　イメージしづらい ・文章がやや難解で、文字の羅列になっており読みづらい 課題点 ・企業側の視点に寄りすぎており、求職者の共感が生ま 　れにくい ・堅実で誠実な印象はあるものの、働く姿が具体的に 　イメージしづらい ・文章がやや難解で、文字の羅列になっており読みづらい 課題点 ・企業側の視点に寄りすぎており、求職者の共感が生ま 　れにくい ・堅実で誠実な印象はあるものの、働く姿が具体的に 　イメージしづらい ・文章がやや難解で、文字の羅列になっており読みづらい 課題点 ・企業側の視点に寄りすぎており、求職者の共感が生ま 　れにくい ・堅実で誠実な印象はあるものの、働く姿が具体的に 　イメージしづらい ・文章がやや難解で、文字の羅列になっており読みづらい 改善案 目 的 ・採用応募数の増加と質の向上 ・特に若手・中堅層からの応募者数を増加したい 求職者目線のストーリー設計 社員インタビューの新設 構造化された ライ ティン グ＋ビジュアルの 活用
 　 →「見出し ＋短文＋図解 or アイ コン 」で 視覚的に 整理 求職者目線のストーリー設計 社員インタビューの新設 構造化された ライ ティン グ＋ビジュアルの 活用
 　 →「見出し ＋短文＋図解 or アイ コン 」で 視覚的に 整理
13. 求職者に寄り添い、 誠実なサポートがある人材サービス 与える印象 信頼感 誠実さ 働き方・柔軟性 成長・キャリア意識 人・雰囲気の良さ Works -デザインコンセプト設定- Works -デザインコンセプト設定- Works -デザインコンセプト設定-
14. Works -フォント・カラー設定- Works -フォント・カラー設定- Works -フォント・カラー設定- Works -フォント・カラー設定- フォント 日本語フォント Noto Sans JP 人材サイトにおいて重要な「信頼感」と「読みやすさ」 を意識し、視認性が高く、真面目で落ち着いた印象を与 えます。 英語フォント Josefin Sans 若年層に親しみを持たせるため、抜け感のある柔らかい雰囲気 を加え、堅くなりすぎないようバランスをとっています。 カラー カラーは会社のブランドカラーであるブルーを軸に設計し、信頼感や誠実さを伝える 印象を意識しています。白や淡いブルー系を組み合わせて全体をやわらかく整え、親 しみやすい印象に。CTAにはオレンジを使い、視線を集めて行動を促す工夫をしてい ます。
15. ※株式会社GMOコネクトHR様 コーポレートサイトTOPページ ※ご提案したTOPページ Before After
16. メイン写真 “企業と人をつなぐ”という役割がひと目で伝わるよう、企業を象徴する背景×働く人の姿を帯に配置。 ブルーを基調とし、堅実なイメージだけでなくターゲットにも刺さるようなスタイリッシュなデザイン を意識しました。 ヘッター ヘッターのフォントの色は、黒だとロゴが薄 れてしまう為ロゴに近い色を使用。 英語だと分かりづらいタイトルは日本語に。 キャッチコピー 「小さな成長が、大きな価値に変わる。あなたの力 が、誰かのビジネスを支える未来へ。」と付け加える ことで、求職者が主体で、「あなたの成長が社会に価 値を生む」という前向きなメッセージに変えていま す。 CTA オレンジ色はブルー背景の中で最も目立ち、「行動を 促す色」として最適だと思い選びました。抜け感を出 すためうっすらグラデージョンを入れました。 「お仕事をお探しの方へ」は、求人サービスであるこ とが直感的に理解できるよう意識しました。 Works -デザインの意図- Works -デザインの意図- Works -デザインの意図- Works -デザインの意図-
17. Works -デザインの意図- Works -デザインの意図- Works -デザインの意図- Works -デザインの意図- お問い合わせ もともとお問い合わせ窓口がなかったため、「質 問・相談だけでもOK」の導線を設け、求職者が気 軽に行動しやすくなり、より多くの方に利用しても らえるようにしています。 About 何をしている会社か一目でわかるような画像と文 章を意識しました。キャッチコピーで「自分らし いキャリア＆働き方」を強調し、求職者が幅広い 職種へチャレンジできる場だとイメージできるよ うにしました。 事業内容 求職者がとっつきやすく、興味を持ってもらえる ことを最優先し、あえてシンプルな表現に振り切 りました。難しい言葉は避け、イラストも一目で 分かりやすいシンプルなものにしました。 会社の強み 魅力を 4つに分けて 整理し、求職者が 理解しやすい よう 構成。 写真と テキストの 配置バランス、 余白 の 取り方、 視線の動きも意識し、 見やすい デザイ ンにしました。 お 仕事 スタートまでの 流れ 求職者が 応募後の 流れを 具体的にイメージし行動 に 移しやすくなるかなと 思い 作成しました。 親し みのあるイラストでとっつきやすい 印象にしまし た。 職員イン タビュー 実際に働いている 人の 声を 載せることでイメージ しやすくなり、求職者が「自分もここで働けるか も ！」という気持 ちになってもらうため 作成しま した。
19. Works -下層ページ- Works -下層ページ- Works -下層ページ- Works -下層ページ- 人材紹介事業 人材派遣事業 SES
20. Works -下層ページ- Works -下層ページ- Works -下層ページ- Works -下層ページ- 企業理念／会社概要 役員情報／グループ拠点情報 応募フォーム お問い合わせ
21. Works -制作事例02- Works -制作事例02- Works -制作事例02- Works -制作事例02- 初夏の限定スイーツフェアバナー 初夏の限定スイーツフェアバナー 制作期間 1日 制作範囲 デザイン 使用ツール Figma・Canva 種類 instagram広告用バナーを自主制作
22. Before After ※Before画像は類似したバナーを参考として引用しています。（2025年8月時点） 出典：KIDSNA記事より https://kidsna.com/magazine/article/lifestyle-recipe-210821-00012617 限定性のある訴求ポイントなので、視認性の高い場所 （右上）に配置。紫リボンの上にコントラストの強い白 文字を置き、視線を集める。 商品が紫陽花に関連するものと一目で伝わるように 手前に紫陽花のイラストを配置。 ぼかすことで主役であるゼリーが引きたつ。 青 紫のグラデーションと和紙のテクスチャを 重ね、紫陽花の色合いを表現。 コップを水面に反射させることで、雨上がり 宝石のキ透明感を表現。 背景に 澄んだ空を 使用。キャッチコ ピーの 「雨上がり 」 を連 想させ、 清々しさを表現している。
23. Works -制作事例03- Works -制作事例03- Works -制作事例03- Works -制作事例03- 小中学生向け 夏休みプログラミング教室 募集広告バナー 小中学生向け 夏休みプログラミング教室 募集広告バナー 制作期間 1日 制作範囲 デザイン 使用ツール Figma・Canva 種類 Facebook広告用バナーを自主制作
24. Before After 青空・太陽・雲の背景で、夏休みだけの 特別な体験だと印象づける。 青空・太陽・雲の背景で、夏休みだけの 特別な体験だと印象づける。 割引というお得感をまず見せ、そのすぐ横に申込ボタンを置くことで、スムーズなクリックに繋げる。 割引というお得感をまず見せ、そのすぐ横に申込ボタンを置くことで、スムーズなクリックに繋げる。 子供に親しみやすいカラフルな配色、ポップなフォントを使用し、 ワクワク感→プログラミングが難しいという印象を和らげる。 保護者にもこれならうちの子も楽しめそう！と感じてもらうビジュ アルを意識。 子供に親しみやすいカラフルな配色、ポップなフォントを使用し、 ワクワク感→プログラミングが難しいという印象を和らげる。 保護者にもこれならうちの子も楽しめそう！と感じてもらうビジュ アルを意識。 ピクセル調の素材を使用し、ゲームっぽさを表現。 ピクセル調の素材を使用し、ゲームっぽさを表現。 ※2024年３月類似テーマで制作したものです。
25. Works -制作事例04- Works -制作事例04- Works -制作事例04- Works -制作事例04- Works -制作事例04- メガネブランド会社 コーポレートサイト メガネブランド会社 コーポレートサイト 制作期間 制作期間 約3週間 制作範囲 制作範囲 デザイン 使用ツール 使用ツール Figma・Photoshop 種類 種類 スクール課題制作
28. -その他制作物-
29. Flow -ご提案の流れ- Flow -ご提案の流れ- お問い合わせ・ご相談のみでもOKです。まずはお気軽にお声掛けください。 01 ヒアリング 最適なご提案のために、事前に簡単 なヒアリングシートをご記入いただ きます。（１０〜１５分） その後、詳細のお聞きとりのために 打ち合わせをお願いいたします。 01 ヒアリング 最適なご提案のために、事前に簡単 なヒアリングシートをご記入いただ きます。（１０〜１５分） その後、詳細のお聞きとりのために 打ち合わせをお願いいたします。 01 ヒアリング 最適なご提案のために、事前に簡単 なヒアリングシートをご記入いただ きます。（１０〜１５分） その後、詳細のお聞きとりのために 打ち合わせをお願いいたします。 01 ヒアリング 最適なご提案のために、事前に簡単 なヒアリングシートをご記入いただ きます。（１０〜１５分） その後、詳細のお聞きとりのために 打ち合わせをお願いいたします。 02 ご提案 ヒアリング内容をもとに、デザイン のラフ案やお見積もりを提示いたし ます。 02 ご提案 ヒアリング内容をもとに、デザイン のラフ案やお見積もりを提示いたし ます。 02 ご提案 ヒアリング内容をもとに、デザイン のラフ案やお見積もりを提示いたし ます。 02 ご提案 ヒアリング内容をもとに、デザイン のラフ案やお見積もりを提示いたし ます。 03 ご契約 ご提案に納得いただけましたら、契 約を結び、制作をスタートします。 03 ご契約 ご提案に納得いただけましたら、契 約を結び、制作をスタートします。 03 ご契約 ご提案に納得いただけましたら、契 約を結び、制作をスタートします。 03 ご契約 ご提案に納得いただけましたら、契 約を結び、制作をスタートします。
31. 修正無制限 「なんとなく違う…」そんな曖昧なご要望 も歓迎です。納得いくまで何度でも調整い たしますので、遠慮なくご相談ください。 品質保証 ご希望や目的に沿ったクオリティになるま で、責任を持って丁寧に対応いたします。 安心してご依頼いただけるよう、ひとつひ とつの制作物に真摯に向き合っています。 アフター サポート 納品後も、運用中のお悩みや新しいご提 案など、長く安心してご利用いただける ようフォローいたします。 修正無制限 「なんとなく違う…」そんな曖昧なご要望 も歓迎です。納得いくまで何度でも調整い たしますので、遠慮なくご相談ください。 品質保証 ご希望や目的に沿ったクオリティになるま で、責任を持って丁寧に対応いたします。 安心してご依頼いただけるよう、ひとつひ とつの制作物に真摯に向き合っています。 アフター サポート 納品後も、運用中のお悩みや新しいご提 案など、長く安心してご利用いただける ようフォローいたします。 修正無制限 「なんとなく違う…」そんな曖昧なご要望 も歓迎です。納得いくまで何度でも調整い たしますので、遠慮なくご相談ください。 品質保証 ご希望や目的に沿ったクオリティになるま で、責任を持って丁寧に対応いたします。 安心してご依頼いただけるよう、ひとつひ とつの制作物に真摯に向き合っています。 アフター サポート 納品後も、運用中のお悩みや新しいご提 案など、長く安心してご利用いただける ようフォローいたします。 修正無制限 「なんとなく違う…」そんな曖昧なご要望 も歓迎です。納得いくまで何度でも調整い たしますので、遠慮なくご相談ください。 品質保証 ご希望や目的に沿ったクオリティになるま で、責任を持って丁寧に対応いたします。 安心してご依頼いただけるよう、ひとつひ とつの制作物に真摯に向き合っています。 アフター サポート 納品後も、運用中のお悩みや新しいご提 案など、長く安心してご利用いただける ようフォローいたします。 Service -安心保証- Service -安心保証- 安心してご利用いただけるよう、明確なやり取りと柔軟な対応を心がけています。
32. Thank You!! 最後までご覧いただき、ありがとうございました。 ご一緒できるご縁がありましたら、とても嬉しいです。 些細なことでも、どうぞお気軽にお問合せください。 ご相談・お見積もりは無料です。 oxev5767@gmail.com @tsukooooo