Hanio_s_Portfolio.pdf

Transcript

1. P r o fi l e 自己紹介 こんな人がデザインしています。
2. 2 自 己 紹 介 自己紹介 私にできること 制作事例 さいごに コ ー ポ レ ー ト サ イ ト チ ーム 制 作 / コ ー ポ レ ー ト サ イ ト Webサイト Webサイト 0 3 0 6 0 9 3 2 2 2 自己紹介
3. たまき 岡山で活動中/香川出身 自己紹介 Webデザイナー×元トリマー経営者 TAMAKI YAMAMOTO 3 自 己 紹 介 略歴 ・専門学校に通いトリマーライセンス取得（A級ライセンス) ・大阪でトリマー専門学校の講師 ・独立し、地元でペットサロンを７年経営 ・結婚を機に退職・岡山へ ・オンラインスクール「デイトラ」でWebデザインを学び、 Webデザイナーとして独立 写真は準備中です
4. 自己紹介 4 自 己 紹 介 日々の学習・目標 日々のデザインに関する積み上げ発信 （X　https://x.com/Hanioboon） デザインの言語化 書籍からの学び デザインはもちろんマーケティングも取り 入れる ウェビナー参加 オンラインセミナーへの積極的な参加 でスキルを上げていく AI活用 日々進化していくAIを活用して効率化を図 る プロからの添削 HTML/CSS コーディングに関しての知識をつ け、コーダーの作業を少しでも理解 するため、基礎知識は書籍で学習 私が目指すデザイン 論理とリサーチに基づくデザイン デザインを感覚でするのではなく、成果につなげるための設計を大切にしています。リサーチを通じて市場や ターゲットの特性を把握。その上で、なぜこのデザインなのかをロジカルに考え、一つひとつの選択に意味を 持たせたデザインを提供します。
 ペットサロンの経営・講師経験を活かし、ユーザー視点を大切にしながら、事業の強みや魅力が伝わるデザイ ンを心がけています。 チーム企画 ロジカルシンキング問題を解く練習 （４～６名のチームを組み週１回のミーティング） チームを組んでのサイト制作　　 ※AIで生成した画像 ※ロジカル問題を解いたもの
5. Canva ☐名刺 Figma ☐Webデザイン ・ホームページ ・ランディングページ ・バナー Photoshop ☐画像加工 ☐画像生成 AIの活用 ☐構成の叩き台 ☐文章作成の叩き台 ☐キャッチコピーの作成 ☐画像生成 6 私 に で き る こ と 私にできること
6. 7 私 の 強 み 論 理 的 に 組 み 立 て る デ ザ イ ン 思 考 デザインを感覚ではなく、成果につなげる設 計として捉えています。市場リサーチを重 ね、ターゲットの特性を理解した上で、なぜ このデザインなのかを論理的に考え、一つひ とつの選択に意味を持たせます。 好 奇 心 と 没 頭 力 で 理 想 の 形 を 追 求 新しい知識や技術に対する好奇心が強く、一 度興味を持ったことにはとことん没頭しま す。デザインにおいても細部にこだわり、試 行錯誤を繰り返しながら、最適な形を探求し 続けます。完成するまで徹底的に向き合うこ とで、意図が伝わるデザインを生み出すこと を大切にしています。 夢 を 叶 える た め に 学 び 続 け る 姿 勢 これまでペットサロンの経営や講師を経験し ながら、常に新しいことを学び続けてきまし た。Webデザインの世界に飛び込み、試行錯 誤を繰り返しながらスキルを磨き続けていま す。将来の夢を叶えるために、挑戦し続ける ことを大切にしています。 私の強み
7. 制作事例 Works
10. 11 要 件 整 理 会 社 フリーランスの活用をコンサルするとう東フリコンサ ルです。 ITに疎い企業さんを手助けするためにフリーランスの エンジニアやデザイナーを紹介、活用支援を行ってい る会社です。 タ ー ゲ ッ ト 設立して５年以上立っている企業 営業、人材、IT企業を始めようと思っている企業 目 的 W e b 上 で の 集 客 サイトのデザイン像 コ ン サ ル 会 社 感 きっ ち り な 雰 囲 気 要件整理
11. ( 名前: 佐藤 正 ( 年齢: 52 ( 性別: 男É ( 職業: 営業会社の代表取締役 □ フリーランスの専門家を活用し、 営業プロセスを効率化することに大きな関心がある。 □ デジタル化を進めたいが、どう進めるべきか不安がある。 12 ペ ル ソ ナ ＆ カ ス タ マ ジ ャ ー ニ ー ペルソナ＆カスタマジャーニー
12. 双方を取り入れて設計したコンセプトはこちら　→ 会社 きっちり感 コンサルト会社感 ちゃんとした会社であることをしっかり伝えたい。 ターゲット ４０代以上 男性多い ITは分からない 調べたいがIT関連に苦手意識がある。 IT化することで効率が上がるのは分かっている。　 □ IT用語・専門的内容　→　理解しにくい □ 社内のIT知識不足 □ 成果が見えるまで不安 13 コ ン セ プ ト 設 計 コンセプト設計
13. サポートやサービスを 「見やすく」「分かりやすく」 信頼・安心感につながるようなサイト 14 コ ン セ プ ト 設 計 コンセプト設計
14. 他社のホームページ 競合リサーチ お客様の要望をサイトを通じてどう伝えるか？ ターゲットの課題をどう解決するか。 競合や業界トレンドをリサーチし、 効果的なデザインのアイデアを抽出します。 □ 青色をベースにしている □ ボックスレイアウト使用 □ 仕事をしている人の写真 □ 全体的にスッキリしている クライアント 参考サイト □ ITという固いイメージの中にやわらかさがある □ パッとみて「見てみよう」と思えるデザイン □ コーポレートサイト感はベースにあるデザイン 15 競 合 リ サ ー チ ・ 分 析 競合リサーチ・分析
15. カラー 信頼・誠実さが伝わるブルーをべースに色を選定。 明るい印象と事業の透明性を出すためにホワイト寄りに。 暗い印象にならないよう、明度の高い青を背景などに使用。 フォント 日本語フォント Noto Sans JP 可読性の高いゴシック体を選定。 英数字フォント Outfit 堅苦しい感じを避けつつ、しかしきちっと感は出てい るフォントを使用。 16 フ ォ ン ト ＆ カ ラ ー 設 定 キーワード 安心 信頼感 専門性 きちんと 透明性 デザイン要素 分かりやすく 丸みのあるシェイプ サポートが見える写真 基盤はコーポレートサイト感 フォント＆カラー設定
16. キャッチコピーはしっかり見えるように、 分かりやすく。 このデザインによりサイト全体に安心感とプロ フェッショナルな印象を与えています。 お客様が気軽に相談できる安心感を視覚化。 お客様がプロと対話しながらIT化の課題を解決する様子 を中心に据え、信頼できるサポート体制をイメージでき る構成に。 角を丸くすることで安心感を出しています。 透過処理を施すことで、背景画像との一体感を持たせつつ、視覚的に さりげなくブランドの存在を強調しています。また、「事業の透明 性」を表現しています。 青の透過レイヤーの効果で視覚的な深みを持たせつつ、訪問者 に落ち着いた印象を与える仕上がり。 視覚的にコーポレートサイトらしい信頼感を演出しています。 17 FV の 作 成 FV作成
17. 私たちについて 理念説明セクションに握手の画像を使用。 サポート等への安心感を与えています。 キービジュアル 「相談すれば安心」「一人で悩む必要はない」というベネフィットを直感的に伝えています。 サービス 相談している画像を入れることで、相談時のイメージが沸きやすくしました。 背景は白で透明感を出しています。 メンバー紹介 （ご提案） メンバーの写真の角は親しみを出すために丸みを帯びたデザインに。 写真には青のグラデーションを透過、役職にも青を使い統一感を出しました。 お問い合わせ （ご提案） フリーランス紹介と資料請求は分かりやすく色を分けました。 18 Ｔ Ｏ Ｐ ペ ー ジ の 作 成 ＴＯＰページの作成
18. FVに合わせて下層部分を作成 19 下 層 ペ ー ジ 下層ページ
19. 技術者を紹介し、ITの専門家がいることを認知して もらうために提案しました。 写真に青を透過させることで統一感を出していま す。 背景の模様はお客様と共に課題解決に向かう、繋 がっている、というイメージで画像を置いていま す。 ご提案ページ ①技術者の紹介ページ ②資料ダウンロードページ 詳細はスッキリと見やすいよ うに、氏名と役職名がパッと 見て分かるよう見やすく配 置、さらに役職名はトンマナ に合った青にしています。 20 ご 提 案 ペ ー ジ ① ご提案ページ①
20. 資料の画像はTOPページにあるセクションと統一を 持たせています。 ダウンロードボタンに（無料）と付け加えること で、ターゲットの資料請求へのハードルを下げてい ます。 ご提案ページ ①技術者の紹介ページ ②資料ダウンロードページ 入力フォームでは背景を青系に変 えて、入力場所を見やすくしてい ます。 どの資料をダウンロードしようと しているのか、お客様がすぐ確認 できるように、入力フォームと資 料を横並びにしています。 どの関連の資料なのかパッと目に入るように、コン テンツは黒でデザインしています。 21 ご 提 案 ペ ー ジ ② ご提案ページ②
23. 要件整理 24 要 件 整 理 WashWiseコインランドリー 居心地よい空間 リラックス Washwiseは洗濯を「楽しい」や「癒し」の時間へと変える存在として認知度 を高めている。地域密着型店舗。 ターゲット ターゲットは共働き世帯であったり、一人暮らしの学生や社会人など、 地域に暮らすさまざまなライフスタイルの方々を対象。 目的 ①新しいユーザー層の開拓・リピート率増加 ②新規店舗展開に向けてのオーナー・新規採用 市場 市場傾向 コイランドリー □ 都心部の住宅事情により、大型洗濯物の需要やランドリー併設型マンションが増加。 □ IoT技術やキャッシュレス決済を導入した次世代型ランドリーが注目 □ カフェ併設やWi-Fi完備、快適な待合スペースなど、滞在時間を快適にする工夫が競争ポイントになっている。 □ GoogleマップやSNSのレビューが集客に直結 競合 □ それぞれの店舗のプロモーション戦略方法をリサーチ・検討 □ 核店舗の強みをどのようにアピールしているか調査
24. 名前：佐藤 綾香 年齢：35歳 性別：女性 職業：IT企業のプロジェクトマネージャー 居住地：東京都新宿区 家族構成：夫（40歳、同じく共働き）、5歳の娘 □ 家事の負担を軽減し、仕事と家庭の両立を図る □ 効率的に洗濯を完了させ、家事の時間を短縮したい □ 家族との時間を増やし、子供の成長に寄り添いたい 選択の時間を快適にするコンランドリー スマホファーストデザイン 人に見せたくなるサイト ペルソナ設定 25 ペ ル ソ ナ 設 定
25. 地域に暮らすさまざまな ライフスタイルの方々に 「居心地の良さを届ける」サイト 26 コ ン セ プ ト 設 計
26. コーポレートサイト 競合リサーチ・WF 他社のホームページ 競合リサーチ 担当範囲のFV作成 サイトマップ作成 □ 多くの情報を見やすく整理している □ 店舗ごとに強みをしっかりアピールしている □ 地域の方へのサイトなので、親しみやすいようマスコットを提案 □ どこにいてもランドリーの使用状況を見れる便利さ □ 使いやすく、見やすいレイアウト 27 競 合 リ サ ー チ ・ W F
27. コーポレートサイト カラー 青と白を基調に清潔感を表現。濃いブルーはロゴから抽出。フォントカラーにも使用。イエロー はアクセントカラーで視線誘導を狙った。 濃いブルーでデザインの全体が暗くならないよう、使用箇所や使用頻度を調節した。 フォント＆カラー設定 フォント 日本語フォント YuGothic 可読性の高いゴシック体を選定。 少し丸みがあることで、ゆったり感がだせる。 英数字フォント Helvetica スッキリとしたフォントなので、サイトのシンプルさ をより引き立足せることが出来る。。 28 フ ォ ン ト ＆ カ ラ ー 設 定 デザイン要素 見やすい 親しみ 情報が一目で分かる 基盤はコーポレートサイト感 キーワード 清潔感 洗う 水 シンプル 安心感
28. ターゲットに向けてのフレーズ ははしっかり目に入るように白 帯でデザインしています。 清潔感というをバナーを曇りガラスの ように透過させることによって表現し ました。 デザイン的にもスッキリと軽い印象に なります。 空き状況をすぐに確認できるようタブのよ うに画面横に設置。反対色の黄色で目立た せました。 フォントカラーはロゴカラーと同じにする ことで統一感をだしています。 スマホファーストでデザインしてい ますが、PC版でのユーザビリティも 考慮しています。 FV作成 29 FV 作 成
29. キービジュアル ランドリーについて サービス・ご利用方法 店舗一覧 サイトのイメージは楽しい、快適、をキーワードに。 見やすく、親しみやすいようイラストを使用しています。 ユーザーのクリックするハードル を下げるためにデザインを改良 店内が分かる写真を置き、背景はスッキリ見えるカラーにしました。 基調としている青の明度を上げて清潔感のある色合いに、 視覚的にも可読性を上げています。 背景にさりげなく店名をアニメーションを使って流しています。 ２種類ある採用情報は、パッと見て分かるように色分けしました。 店舗は見やすくカードタイプにデザイン。SP版では指でスワイプ することも考慮しています。 フッター部分はTOPページのみをあえて透過。 スクロールしていき最後に再度FVが見えるように設計しています。 ブラッシュアップ ご利用方法とQ＆Aの部分 30 デ ザ イ ン デザイン
30. FV/B案 「癒し」を全面に出したFV □ 慌ただしいはずの時間をゆっくりと過ごしている □ 快適に過ごせることで心の余裕を表現 SP版 31 FV 作 成 FV作成
31. 更に「癒し」が全面に出せるようブラッシュアップ ⑩ 人物の影と同じようにフレーズにすこし影をつけて、同じようにゆっくり な空間にいるよう「静」を表現。文字の大きさを調節し完成。 ⑦ 強調したいフレーズのみ色変え ⑧ ニュースを素通りされずに目に止まるよう色変え ⑨ 目線が下に続くよう、フレーズ（小） をニュースの上に配置 ⑤ 横文字から縦文字に変更 ⑥ ニュースの１記事のみをFVの側に置き、 下にまだ情報がある事を示唆 ⑤ ⑥ ① ＯＰアニメーションに泡のイラスト が使用されているので、背景に泡を 設置 ③静か・癒し・ちょっと日常から離れた 空間を表現するためFVを全面から変更 ⁩② フレーズの文字の太さを変更 ④空き確認のボタンが目立つよう、文字を 円形に配置、回転アニメーションで更に 押しやすくなる。 ① ⁩② ③ ④ ⑧ ⑨ ⑦ ⑩ 32 ブ ラ ッ シ ュ ア ッ プ ブラッシュアップ
33. ありがとうございました 最後までご覧いただきありがとうございました。 貴社の事業の強みを的確に伝え、成果につながるWebサイトを制作いたします。 細部にまでこだわり、一つひとつの要素に意味を持たせることで、ターゲットの心 に響くデザインを形にします。
 貴社の想いを伝えるお手伝いができましたら幸いです。 ウサギは「幸運」や「飛躍」といった縁起の良い動物。 悪運や厄から免れると言われてます。 プロジェクトの成功や成長を願うメッセージを込めて。 黒は力強さ、保護を象徴する色です。守りや 安定を表現しています。 なんで黒いうさぎ？ 中の人はちょっぴり小心者です。 https://x.com/Hanioboon foliioURL https://www.foriio.com/home lapinnoir.design@gmail.com たまき（はにお）