Portfolio-提出用ver

Transcript

1. P r o fi l e 自己紹介
2. 自己紹介 2 自 己 紹 介 自己紹介 私にできること 制作事例 さいごに コーポレートサイト チーム制作/コーポレートサイト Webサイト Webサイト 03 06 09 32 22 38 43 46 35
3. 自己紹介 2 自 己 紹 介 資格 ・JKC公認トリマーA級ライセンス ・JKC公認ハンドラーC級 Webデザイナー×元トリマー経営者 山本たまき 岡山で活動中/香川出身 TAMAKI YAMAMOTO 略歴 2001 短大卒業後、トリミング専門学校入学 2005 卒業後、大阪難波ペット美容学院就職 2008 独立、ペットサロン開業 2015 結婚、引っ越し、退職 2022 教育現場で支援の仕事 2025 オンラインスクールでWebデザイン学習・卒業 2025 フリーランスとして独立
4. 日々の学習・目標 ①日々のデザインに関する積み上げ発信（はにおと呼ばれています） （X　https://x.com/Hanioboon） ②デザインの言語化 ③プロからの添削 ④ウェビナー参加 オンラインセミナーへの積極的な参加でスキルを上げていく ⑤STUDIO/Figma 使いこなしてスキルアップをしたい ⑥書籍からの学び デザインはもちろんマーケティングも取り入れたデザインをしています（19冊） ⑦AI活用 日々進化していくAIを活用して効率化を図る ⑧HTML/CSS コーディングに関しての知識をつけ、コーダーの作業を少しでも理解するため、 基礎知識は書籍で学習 自己紹介② 4 自 己 紹 介
5. 私が考えるデザインとは 私が思っているデザインは、ホームページはもちろん、バナーやLPなど「かっこいい」「きれい」だけでは意味が ないと考えています。 
 なぜなら、それぞれ目指すゴールがあるからです。 成果につながるデザインでなければ、どんなに見た目が良くても意味がありません。 私はマーケティングの考え方をベースに設計しています。
 チャネルや市場・業界リサーチはもちろん、ファネル設計から考えています。
 場合によっては、そもそもホームページが必要ないケースもあると思っています。 「ホームページを持っている ＝ 売上につながる」ではありません。 バナー1つとっても、成果につながらないのであれば、
 どれだけかっこよく作っても意味がないと感じます。 私は、デザインを“成果を出すための道具のひとつ”だと考えています。 自己紹介③ 5 自 己 紹 介
6. S e r v i c e 私にできること
7. 私にできること Figma ・ホームページ ・ランディングページ ・バナー Photoshop ・画像加工 ・画像生成 AI ・構成の叩き台 ・文章・キャッチコピーの叩き台 ・画像生成 Studio STUDIO ・Figmaでデザイ ン制作しStudioに 実装 7 私 に で き る こ と ※AIで生成した画像 ▲ワイヤレスイヤホンバナーに使用 Canva ・ホームページ ・ランディングページ ・バナー
8. 8 私 の 強 み 私の強み デザインは設計 デザインは感覚ではなく、成果に つながる“設計”だと考えていま す。
 市場やターゲットを理解し、すべ ての選択に意味を持たせながら、 論理的にデザインしています。 好奇心と没頭力 知識や技術への好奇心が強く、 興味を持ったことにはとことん 向き合います。
 デザインでも細部までこだわ り、試行錯誤を重ねながら「伝 わる形」を追求しています。 学び続ける姿勢 ペットサロンの経営や講師の経 験を活かしながら、常に新しい ことに挑戦してきました。
 今はWebデザインの世界でス キルを磨き、夢に向かって学び 続けています。
9. 制作事例 Works
10. 東フリコンサル会社 コーポレートサイト 期間 １カ月 担当 リサーチ・要件定期・デザイン 種別 自主作成 使用ツール Figma
11. プロジェクトの背景 サイト名 東フリコンサル会社（フリーランスのエンジニアやWebデザイナーを紹介・活用支援している） WEBサイトの種類 コーポレートサイト ターゲット（誰にHPを見ていただきたいか） r 設立して５年以上立っている企e r 営業、人材、IT企業を始めようと思っている企業 事業における課題・達成したい目的 r Web上での集„ r ターゲットは40代が多く、ITに詳しくない・苦手意識があ¡ r 便利だと分かっているがどうすればよいか分からない 11 プ ロ ジ ェ ク ト の 背 景
12. ( 名前: 佐藤 正% ( 年齢: 52É ( 性別: 男 ( 職業: 営業会社の代表取締役 □ フリーランスの専門家を活用し、 営業プロセスを効率化することに大きな関 心がある。 □ デジタル化を進めたいが、どう進めるべき か不安がある。 ペルソナ＆カスタマジャーニー 12 ペ ル ソ ナ ＆ カ ス タ マ ジ ャ ー ニ ー
13. マーケティングファネルの確認 今回制作する東フリコンサルサイトのファネルの確認 手段 ユーザー体験 東フリコンサルの存在を知る。 比較・検討した結果、東フリにお問い合 わせする。 業務効率化に関心をもち、ITなどの詳し い情報を収集する。 調べた情報をもとに競合他社と比較す る。候補についてさらに詳しく知りなが ら条件を絞りこむ。 認知 興味・関心 比較・検討 商談 購入 メディア等の記事 WEBサイト WEBサイト 商談 DM・チラシ リスティング広告 メールマガジン 新聞・雑誌広告 資料・カタログ 自然検索(SEO) 指名検索 提案資料 パンフレット 各種イベント 資料・カタログ 口コミ 13 マ ー ケ テ ィ ン グ フ ァ ネ ル の 確 認
14. 競合デザインリサーチ・分析 他社のホームページ 競合リサーチ お客様の要望をサイトを通じてどう伝えるか？ ターゲットの課題をどう解決するか。 競合や業界トレンドをリサーチし、 効果的なデザインのアイデアを抽出します。 □ 青色をベースにしている □ ボックスレイアウト使用 □ 仕事をしている人の写真 □ 全体的にスッキリしている 参考サイト □ ITという固いイメージの中にやわらかさがある □ パッとみて「見てみよう」と思えるデザイン □ コーポレートサイト感はベースにあるデザイン Googleからの評価が高い同業他社サイトや、競合・ベンチマークとして意識しているサイトを参考 に、どのようなデザインが効果的か傾向を調査し、アイデアを抽出します。 14 競 合 デ ザ イ ン リ サ ー チ ・ 分 析
15. キーワード 安心 信頼感 専門性 きちんと 透明性 デザイン要素 分かりやすさ 丸みのあるシェイ プ サポートが見える 写真 基盤となるコーポ レートサイト感 透明性 コンセプト サポートやサービスを「見やすく」「分かりやす く」信頼・安心感につながるようなサイト タイポグラフィー 日本語フォント Noto Sans JP 可読性の高いゴシック体を選定。 英数字フォント Outfit 堅苦しい感じを避けつつ、しかしきちっ と感は出ているフォントを使用。 カラー 信頼・誠実さが伝わるようブルーをべースに色を選定。 明るい印象と事業の透明性を出すためにホワイト寄りに。 暗い印象にならないよう、明度の高い青を背景などに使用。 デザインコンセプト設定 15 デ ザ イ ン コ ン セ プ ト 設 計
16. キャッチコピーはしっかり見えるように、 分かりやすく。 このデザインによりサイト全体に安心感とプロ フェッショナルな印象を与えています。 お客様が気軽に相談できる安心感を視覚化。 お客様がプロと対話しながらIT化の課題を解決する様子 を中心に据え、信頼できるサポート体制をイメージでき る構成に。 角を丸くすることで安心感を出しています。 透過処理を施すことで、背景画像との一体感を持たせつつ、視覚的に さりげなくブランドの存在を強調しています。また、「事業の透明 性」を表現しています。 青の透過レイヤーの効果で視覚的な深みを持たせつつ、訪問者 に落ち着いた印象を与える仕上がり。 視覚的にコーポレートサイトらしい信頼感を演出しています。 キービジュアル 16 キ ー ビ ジ ュ ア ル
17. 私たちについて 理念説明セクションに握手の画像を使用。 サポート等への安心感を与えています。 キービジュアル 「相談すれば安心」「一人で悩む必要はない」というベネフィットを直感的に伝えています。 サービス 相談している画像を入れることで、相談時のイメージが沸きやすくしました。 背景は白で透明感を出しています。 メンバー紹介 （ご提案） メンバーの写真の角は親しみを出すために丸みを帯びたデザインに。 写真には青のグラデーションを透過、役職にも青を使い統一感を出しました。 お問い合わせ （ご提案） フリーランス紹介と資料請求は分かりやすく色を分けました。 キービジュアル 17 キ ー ビ ジ ュ ア ル
18. FVに合わせて下層部分を作成 コーポレートサイト 下層ページ 18 下 層 ペ ー ジ
19. 技術者を紹介し、ITの専門家がいることを認知して もらうために提案しました。 写真に青を透過させることで統一感を出していま す。 背景の模様はお客様と共に課題解決に向かう、繋 がっている、というイメージで画像を置いていま す。 ご提案ページ ①技術者の紹介ページ ②資料ダウンロードページ コーポレートサイト 詳細はスッキリと見やすいよ うに、氏名と役職名がパッと 見て分かるよう見やすく配 置、さらに役職名はトンマナ に合った青にしています。 ご提案ページ① 19 ご 提 案 ペ ー ジ ①
20. コーポレートサイト 資料の画像はTOPページにあるセクションと統一を 持たせています。 ダウンロードボタンに（無料）と付け加えること で、ターゲットの資料請求へのハードルを下げてい ます。 ご提案ページ ①技術者の紹介ページ ②資料ダウンロードページ 入力フォームでは背景を青系に変 えて、入力場所を見やすくしてい ます。 どの資料をダウンロードしようと しているのか、お客様がすぐ確認 できるように、入力フォームと資 料を横並びにしています。 どの関連の資料なのかパッと目に入るように、コン テンツは黒でデザインしています。 ご提案ページ② 20 ご 提 案 ペ ー ジ ②
22. 期間 １カ月 担当 設定・リサーチ・要件定義・デザイン URL https://xs341037.xsrv.jp/washwise/ 種別 自主制作 使用ツール Figma AI Wash Wise サービスサイト
23. 名前：佐藤 綾香 年齢：35歳 性別：女性 職業：IT企業のプロジェクトマネージャー 居住地：東京都新宿区 家族構成：夫（40歳、同じく共働き）、5歳の娘 □ 家事の負担を軽減し、仕事と家庭の両立を図る □ 効率的に洗濯を完了させ、家事の時間を短縮したい □ 家族との時間を増やし、子供の成長に寄り添いたい ペルソナ・カスタマジャーニー 23 ペ ル ソ ナ ・ カ ス タ マ ジ ャ ー ニ ー
24. デザインコンセプト クライアント名 コインランドリー　Washwise様 Webサイトの種類 サービスサイト ターゲット（誰にHPを見ていただきたいか） Ž 20～５0代の男女（一人暮らしの学生・社会人：手軽に洗濯を済ませた い、洗濯に時間をかけたくない。‰ Ž 共働き世帯: 家事の負担を軽減したい人、効率的に家事を行いたい人• Ž 仕事を探している{ Ž コインランドリー事業に興味があるオーナー候補 ゴール wash wiseを定着させ顧客を増やす、さらには新規店舗の展開や人材確保 を進める コンセプト 清潔で快適な空間を提供し、家事のひとときを楽しく有 意義な時間に変えることで、より豊かなライフスタイル の実現に貢献する。 ・ユーザーが何を一番に知りたいかに重点を置いてコンテンツを選定、デザイン しました。 ・スマートフォンからの流入が圧倒的に多いと考え、スマホファーストでデザイン しています。 ・全体的にスッキリとし、使いやすさを考えました。 24 コ ン セ プ ト 設 計
25. マーケティングファネルの確認 今回制作するWashwiseサイトのファネル設計 手段 ユーザー体験 Washwiseの存在を知る。 比較・検討した結果、Washwiseを利用 する。 家事の時間短縮に関心をもち、システム などの詳しい情報を収集する。 調べた情報をもとに他社と価格や機能な どを比較 認知 興味・関心 比較・検討 商談 購入 WEBサイト WEBサイト 利用する 口コミ SNS スマホで検索 口コミ 口コミ 25 マ ー ケ テ ィ ン グ フ ァ ネ ル の 確 認
26. コーポレートサイト 競合リサーチ・WF 他社のホームページ 競合リサーチ 担当範囲のFV作成 サイトマップ作成 □ 多くの情報を見やすく整理している □ 店舗ごとに強みをしっかりアピールしている □ 地域の方へのサイトなので、親しみやすいようマスコットを提案 □ どこにいてもランドリーの使用状況を見れる便利さ □ 使いやすく、見やすいレイアウト 26 競 合 リ サ ー チ ・ W F
27. 地域に暮らすさまざまな ライフスタイルの方々に 「居心地の良さを届ける」サイト コンセプト設計 27 コ ン セ プ ト 設 計 選択の時間を快適にするコンランドリー スマホファーストデザイン 人に言いたくなるサイト サイトデザインの方向性
28. キーワード 清潔感 洗う 水 シンプル 安心感 デザイン要素 マスコット 笑顔の写真 店舗内の様子 明度の高い色 透明性 コンセプト 地域に暮らすさまざまなライフスタイルの方々に 「居心地の良さを届ける」サイト タイポグラフィー 日本語フォント YuGothic 可読性の高いゴシック体を選定。 少し丸みがあることで、ゆったり感がだせる。 英数字フォント Helvetica スッキリとしたフォントなので、サイトのシンプルさ をより引き立足せることが出来る。 カラー 青と白を基調に清潔感を表現。濃いブルーはロゴから抽出。 フォントカラーにも使用。イエローはアクセントカラーで視線 誘導を狙った。 濃いブルーでデザインの全体が暗くならないよう、使用箇所 や使用頻度を調節した。 デザインコンセプト設定 28 デ ザ イ ン コ ン セ プ ト 設 定
29. ターゲットに向けてのフレーズ ははしっかり目に入るように白 帯でデザインしています。 清潔感というをバナーを曇りガラスの ように透過させることによって表現し ました。 デザイン的にもスッキリと軽い印象に なります。 空き状況をすぐに確認できるようタブのよ うに画面横に設置。反対色の黄色で目立た せました。 フォントカラーはロゴカラーと同じにする ことで統一感をだしています。 スマホファーストでデザインしてい ますが、PC版でのユーザビリティも 考慮しています。 キービジュアル 29 キ ー ビ ジ ュ ア ル
30. FV ランドリーについて サービス・ご利用方法 店舗一覧 サイトのイメージは楽しい、快適、をキーワードに。 見やすく、親しみやすいようイラストを使用しています。 ユーザーのクリックするハードル を下げるためにデザインを改良 店内が分かる写真を置き、背景はスッキリ見えるカラーにしました。 基調としている青の明度を上げて清潔感のある色合いに、 視覚的にも可読性を上げています。 背景にさりげなく店名をアニメーションを使って流しています。 ２種類ある採用情報は、パッと見て分かるように色分けしました。 店舗は見やすくカードタイプにデザイン。SP版では指でスワイプ することも考慮しています。 フッター 部分は TOP ページのみをあえて 透過。 スク ロールしていき 最後に 再度FVが見えるように 設計しています。 キービジュアル ブラッシ ュアップ ご利用方法と Q＆Aの 部分 30 キ ー ビ ジ ュ ア ル
31. F V / B 案 「 癒 し 」 を 全 面 に 出 し た F V □ 慌ただしいはずの時間をゆっくりと過ごしている □ 快適に過ごせることで心の余裕を表現 S P 版 FV作成 31 FV 作 成
32. ブラッシュアップ 更に「癒し」が全面に出せるようブラッシュアップ ⑩ 人物の影と同じようにフレーズにすこし影をつけて、同じようにゆっくり な空間にいるよう「静」を表現。文字の大きさを調節し完成。 ⑦ 強調したいフレーズのみ色変え ⑧ ニュースを素通りされずに目に止まるよう色変え ⑨ 目線が下に続くよう、フレーズ（小） をニュースの上に配置 ⑤ 横文字から縦文字に変更 ⑥ ニュースの１記事のみをFVの側に置き、 下にまだ情報がある事を示唆 ⑤ ⑥ ① ＯＰアニメーションに泡のイラスト が使用されているので、背景に泡を 設置 ③静か・癒し・ちょっと日常から離れた 空間を表現するためFVを全面から変更 ⁩② フレーズの文字の太さを変更 ④空き確認のボタンが目立つよう、文字を 円形に配置、回転アニメーションで更に 押しやすくなる。 ① ⁩② ③ ④ ⑧ ⑨ ⑦ ⑩ 32 ブ ラ ッ シ ュ ア ッ プ
33. Before/After After Before 33 ブ ラ ッ シ ュ ア ッ プ
35. 期間 1週間 担当 設定・リサーチ・要件定義・デザイン 種別 自主制作 使用ツール Figma AI ハロウィンパレード 告知バナー
36. カラー キーワード デザイン要素 楽しい かわいい 参加しやすさ わくわく イベント かわいい ハロウィンらしさ カボチャ おばけ 参考デザインによく使われているカラーをリサーチ 濃いブルーでデザインの全体が暗くならないよう、使用箇所や使用 頻度を調節した。 カラー・デザイン設定 参考デザイン 36 カ ラ ー ・ デ ザ イ ン 設 定
37. ハロウィンらしいカラーを選定 上のリボンとカラーを合わせて繋がっ ているようにデザイン 笑顔の女の子、男の子ノキャラクターを配置することで イベントの楽しさを想像できるようにしている。 親子連れがターゲットなので、子供たちが楽しめるイベ ントだと認知できる。 真ん中に見てほしい情報を置いて視線を 誘導する。 ボタンは目につくよう大きく配置。 背景は全体のイメージに合うものを選定。色味もイラ ストや全体のカラーに合わせて調節。 キービジュアル 37 キ ー ビ ジ ュ ア ル
38. 新商品ワイヤレスイヤホン 告知バナー 期間 ４時間 担当 設定・リサーチ・要件定義・デザイン 種別 自主制作 使用ツール Figma Photoshop AI
39. 要件整理 載せたい内容 □ 究極の没入感。新次元のサウンド体験が特徴 □ アクアティブノイズキャンセリング搭載 □ 超高音質 □ 最大４０時間再生 配信先 □ ディスプレイ画像（300px×250px） 要件定義 □ １０～２０代の男女向けなので伝えたい部分を強調する □ 説明を書くより、パッと見て分かるデザインにする □ 男性向けはクールに内容のみを、女性向けはビジュアルを重視 コンセプト □ パッと見て分かるデザイン □ 共感できるデザイン ターゲット □ １０～２０代男女 39 要 件 整 理
40. カラー・デザイン設定 参考デザイン キーワード シンプル 見やすい 機能性 サウンド感 付けたときの状態 カラー デザイン要素 静か 人物 音 外との差 参考デザインによく使われているカラーをリサーチ ブルー系や黒、白などが多く使用されている。 デザインが商品のみと人物を使ったものとの２パターンがある。 40 カ ラ ー ・ デ ザ イ ン 設 定
41. キービジュアル A案 B案 数字で表すことで一目で分かる ようにしている イヤホン内の音を可視化するこ とで、ノイズキャンセリング機 能をより効果的にしている A案は10～20代男性向けデザイン。 青を基調とし、機能面を重視したデザインにしている。 B案は10～20代女性向けデザイン。 落ち着いた配色にし、ターゲットに近い女性の画像を使用すること でより共感しやすくなる。 音に聞き入っている様子からイヤホン の機能により、より良い音であると想 像させることが出来る。 フォントはNoto Serif JPで高音質というワン ランク上のイメージをより引き出している。 商品のみを置き、シンプルでも 目立つ配置にしている、 41 キ ー ビ ジ ュ ア ル
42. 期間 ３～４時間 担当 設定・リサーチ・要件定義・デザイン 種別 自主制作 使用ツール Figma AI サイズ 1080×1080px コスメ新作リップ Instagram フィード投稿用バナー
43. 載せたい内容 □ 特徴：オーガニック成分配合で潤いながら色付け □ 期間限定１０％オフ コンセプト □ ３０～４０代の大人の雰囲気 □ 共感できるデザイン ターゲット □ ３０～４０代女性 上品さと女性らしさを意識しました。 画像はAI生成しています。 ３０代、４０代それぞれのバナーをデザイン 40代向け ターゲットに合わせた女性画像を配置 することで共感を得やすくしていま す。 画像はAdobe Fireflyにて生成してい ます。 ターゲットに合わせて落ち着いた風行 きの中にも上品さが伝わるようデザイ ンを制作いたしました。 商品を大きく配置することで、新色が 出たことを一目で分かるようにしてい ます。 新色の「New」と割引の色、リップ カラーに統一感を持たせ、更に視線が いくようさり気なく目立たせました。 43 40 代 向 け
44. 30代向け Votre story LIVE Arthur Arneo Nicolas barbie_girlzzz Votre story LIVE Arthur Arneo Nicolas barbie_girlzzz Cam35 Rodger45 Hipsty Nerd Camilla Nicols Username Jonyyyxx Votre story LIVE Arthur Arneo Nicolas barbie_girlzzz Cam35 Rodger45 Hipsty Nerd Camilla Nicols Username Jonyyyxx Arneo Paris Arneo Aimé par Gabdu et d’autres personnes ArthurHazan Quel plaisir de retrouver mes étudiants de Web 2 ! Ils ont tellement progressés depuis l’année dernière ! #Proud Voir les 10 commentaires Arneo Paris Arneo Carrier Votre story LIVE Arthur Arneo Nicolas barbie_girlzzz Votre story LIVE Arthur Arneo Nicolas barbie_girlzzz Cam35 Rodger Votre story LIVE Arthur Arneo Nicolas barbie_girlzzz Cam35 Rodger Arneo Paris Arneo Aimé par Gabdu et d’autres personnes ArthurHazan Quel plaisir de retrouver mes étudiants de Web 2 ! Ils ont tellement progressés depuis l’année dernière ! #Proud Voir les 10 commentaires Arneo Paris Arneo Carrier 44 30 代 向 け
45. 期間 ４～６時間 担当 設定・リサーチ・要件定義・デザイン 種別 自主制作 使用ツール Figma AI コワーキングスペース Instagram広告
46. 載せたい内容 □ 新規入会キャンペーン □ 期先着５０名様まで □ 今入会するとコワーキングスペースが６ヵ月半額！ ターゲット □ 2０～４０代 概要 □ 東フリ不動産のコワーキングスペースのキャンペーン紹介 ペルソナ設定 ペルソナを設定。 行動パターンからどういった情報を見たいのか、 どういった画像があったらクリックしそうか、を考えデザイン。
47. コワーキングスペース広告バナー 利用するコワーキングスペースの画像を設 置して、利用者に使用する際のイメージを 湧かせやすくさせます。 また画像の上に、透過した黒のレイヤーを 置くことで、白のテキストがより目立ち、 ワークスペースも落ち着いた雰囲気である ことを、バナーを見たユーザーに印象付け られます。 コワーキングスペースなので、全体的に落 ち着いた静かな印象が伝わるようデザイン を制作いたしました。 何の広告であるか、テキストの背景を 白枠にすることで情報を一目で分かる ようにしています。 入会特典を文字を大きくすることで目 につきやすくしています。 先着であることをアクセントカラーで 強調しました。
48. 最後までご覧いただきありがとうございました。 これまでの７年間のペットサロン経営や 教育現場での経験を活かし、 貴社の想いを伝えるお手伝いができましたら幸いです。 山本たまき Xアカウント https://x.com/Hanioboon STDUIO STUDIOポートフォリオ https://hanio-portfolio.studio.site/ Ｅメールアドレス lapinnoir.design@gmail.com ※スライドポートフォリオ/STUDIOは随時更新中です。 44 最 後 に 最後に