Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tamaki_s_portfolio.pdf

Hanio Design
February 21, 2025

 Tamaki_s_portfolio.pdf

Hanio Design

February 21, 2025
Tweet

Other Decks in Design

Transcript

  1. 2 自 己 紹 介 自己紹介 私にできること 制作事例 さいごに コ

    ー ポ レ ー ト サ イ ト チ ーム 制 作 / コ ー ポ レ ー ト サ イ ト Webサイト Webサイト 0 3 0 6 0 9 3 2 2 2 自己紹介
  2. たまき 岡山で活動中/香川出身 自己紹介 Webデザイナー×元トリマー経営者 TAMAKI YAMAMOTO 3 自 己 紹

    介 略歴 ・専門学校に通いトリマーライセンス取得(A級ライセンス) ・大阪でトリマー専門学校の講師 ・独立し、地元でペットサロンを7年経営 ・結婚を機に退職・岡山へ ・オンラインスクール「デイトラ」でWebデザインを学び、 Webデザイナーとして独立 写真は準備中です
  3. 自己紹介 4 自 己 紹 介 日々の学習・目標 日々のデザインに関する積み上げ発信 (X https://x.com/Hanioboon) デザインの言語化

    書籍からの学び デザインはもちろんマーケティングも取り入 れる ウェビナー参加 オンラインセミナーへの積極的な参加でス キルを上げていく AI活用 日々進化していくAIを活用して効率化を図る プロからの添削 HTML/CSS コーディングに関しての知識をつけ、 コーダーの作業を少しでも理解するた め、基礎知識は書籍で学習 私が目指すデザイン 論理とリサーチに基づくデザイン デザインを感覚でするのではなく、成果につなげるための設計を大切にしています。リサーチを通じて市場やター ゲットの特性を把握。その上で、なぜこのデザインなのかをロジカルに考え、一つひとつの選択に意味を持たせたデ ザインを提供します。
 ペットサロンの経営・講師経験を活かし、ユーザー視点を大切にしながら、事業の強みや魅力が伝わるデザインを心 がけています。 チーム企画 ロジカルシンキング問題を解く練習 (4~6名のチームを組み週1回のミーティング) チームを組んでのサイト制作   ※AIで生成した画像 ※ロジカル問題を解いたもの
  4. Canva ☐名刺 Figma ☐Webデザイン ・ホームページ ・ランディングページ ・バナー Photoshop ☐画像加工 ☐画像生成

    AIの活用 ☐構成の叩き台 ☐文章作成の叩き台 ☐キャッチコピーの作成 ☐画像生成 6 私 に で き る こ と 私にできること
  5. 7 私 の 強 み 論 理 的 に 組

    み 立 て る デ ザ イ ン 思 考 デザインを感覚ではなく、成果につなげる設計 として捉えています。市場リサーチを重ね、 ターゲットの特性を理解した上で、なぜこのデ ザインなのかを論理的に考え、一つひとつの選 択に意味を持たせます。 好 奇 心 と 没 頭 力 で 理 想 の 形 を 追 求 新しい知識や技術に対する好奇心が強く、一度 興味を持ったことにはとことん没頭します。デ ザインにおいても細部にこだわり、試行錯誤を 繰り返しながら、最適な形を探求し続けます。 完成するまで徹底的に向き合うことで、意図が 伝わるデザインを生み出すことを大切にしてい ます 夢 を 叶 える た め に 学 び 続 け る 姿 勢 こ れまで ペットサ ロンの 経営や 講師を 経験しな がら、 常に新しいことを 学び続けてきました。 Webデザインの 世界に 飛び込み、試行錯誤を繰 り返しながら スキルを 磨き続けています。 将来 の 夢を 叶えるた めに、 挑戦し続けることを大切 にしています。 私の強み
  6. 11 要 件 整 理 会 社 フリーランスの活用をコンサルするとう東フリコンサ ルです。 ITに疎い企業さんを手助けするためにフリーランスの

    エンジニアやデザイナーを紹介、活用支援を行ってい る会社です。 タ ー ゲ ッ ト 設立して5年以上立っている企業 営業、人材、IT企業を始めようと思っている企業 目 的 W e b 上 で の 集 客 サイトのデザイン像 コ ン サ ル 会 社 感 きっ ち り な 雰 囲 気 要件整理
  7. ( 名前: 佐藤 正 ( 年齢: 52 ( 性別: 男É

    ( 職業: 営業会社の代表取締役 □ フリーランスの専門家を活用し、 営業プロセスを効率化することに大きな関心がある。 □ デジタル化を進めたいが、どう進めるべきか不安がある。 12 ペ ル ソ ナ & カ ス タ マ ジ ャ ー ニ ー ペルソナ&カスタマジャーニー
  8. 双方を取り入れて設計したコンセプトはこちら → 会社 きっちり感 コンサルト会社感 ちゃんとした会社であることをしっかり伝えたい。 ターゲット 40代以上 男性多い ITは分からない 調べたいがIT関連に苦手意識がある。

    IT化することで効率が上がるのは分かっている。  □ IT用語・専門的内容 → 理解しにくい □ 社内のIT知識不足 □ 成果が見えるまで不安 13 コ ン セ プ ト 設 計 コンセプト設計
  9. 他社のホームページ 競合リサーチ お客様の要望をサイトを通じてどう伝えるか? ターゲットの課題をどう解決するか。 競合や業界トレンドをリサーチし、 効果的なデザインのアイデアを抽出します。 □ 青色をベースにしている □ ボックスレイアウト使用

    □ 仕事をしている人の写真 □ 全体的にスッキリしている クライアント 参考サイト □ ITという固いイメージの中にやわらかさがある □ パッとみて「見てみよう」と思えるデザイン □ コーポレートサイト感はベースにあるデザイン 15 競 合 リ サ ー チ ・ 分 析 競合リサーチ・分析
  10. カラー 信頼・誠実さが伝わるブルーをべースに色を選定。 明るい印象と事業の透明性を出すためにホワイト寄りに。 暗い印象にならないよう、明度の高い青を背景などに使用。 フォント 日本語フォント Noto Sans JP 可読性の高いゴシック体を選定。

    英数字フォント Outfit 堅苦しい感じを避けつつ、しかしきちっと感は出てい るフォントを使用。 16 フ ォ ン ト & カ ラ ー 設 定 キーワード 安心 信頼感 専門性 きちんと 透明性 デザイン要素 分かりやすく 丸みのあるシェイプ サポートが見える写真 基盤はコーポレートサイト感 フォント&カラー設定
  11. 私たちについて 理念説明セクションに握手の画像を使用。 サポート等への安心感を与えています。 キービジュアル 「相談すれば安心」「一人で悩む必要はない」というベネフィットを直感的に伝えています。 サービス 相談している画像を入れることで、相談時のイメージが沸きやすくしました。 背景は白で透明感を出しています。 メンバー紹介 (ご提案)

    メンバーの写真の角は親しみを出すために丸みを帯びたデザインに。 写真には青のグラデーションを透過、役職にも青を使い統一感を出しました。 お問い合わせ (ご提案) フリーランス紹介と資料請求は分かりやすく色を分けました。 18 T O P ペ ー ジ の 作 成 TOPページの作成
  12. 資料の画像はTOPページにあるセクションと統一を 持たせています。 ダウンロードボタンに(無料)と付け加えること で、ターゲットの資料請求へのハードルを下げてい ます。 ご提案ページ ①技術者の紹介ページ ②資料ダウンロードページ 入力フォームでは背景を青系に変 えて、入力場所を見やすくしてい

    ます。 どの資料をダウンロードしようと しているのか、お客様がすぐ確認 できるように、入力フォームと資 料を横並びにしています。 どの関連の資料なのかパッと目に入るように、コン テンツは黒でデザインしています。 21 ご 提 案 ペ ー ジ ② ご提案ページ②
  13. 01

  14. 要件整理 24 要 件 整 理 WashWiseコインランドリー 居心地よい空間 リラックス Washwiseは洗濯を「楽しい」や「癒し」の時間へと変える存在として認知度

    を高めている。地域密着型店舗。 ターゲット ターゲットは共働き世帯であったり、一人暮らしの学生や社会人など、 地域に暮らすさまざまなライフスタイルの方々を対象。 目的 ①新しいユーザー層の開拓・リピート率増加 ②新規店舗展開に向けてのオーナー・新規採用 市場 市場傾向 コイランドリー □ 都心部の住宅事情により、大型洗濯物の需要やランドリー併設型マンションが増加。 □ IoT技術やキャッシュレス決済を導入した次世代型ランドリーが注目 □ カフェ併設やWi-Fi完備、快適な待合スペースなど、滞在時間を快適にする工夫が競争ポイントになっている。 □ GoogleマップやSNSのレビューが集客に直結 競合 □ それぞれの店舗のプロモーション戦略方法をリサーチ・検討 □ 核店舗の強みをどのようにアピールしているか調査
  15. 名前:佐藤 綾香 年齢:35歳 性別:女性 職業:IT企業のプロジェクトマネージャー 居住地:東京都新宿区 家族構成:夫(40歳、同じく共働き)、5歳の娘 □ 家事の負担を軽減し、仕事と家庭の両立を図る □

    効率的に洗濯を完了させ、家事の時間を短縮したい □ 家族との時間を増やし、子供の成長に寄り添いたい 選択の時間を快適にするコンランドリー スマホファーストデザイン 人に見せたくなるサイト ペルソナ設定 25 ペ ル ソ ナ 設 定
  16. コーポレートサイト 競合リサーチ・WF 他社のホームページ 競合リサーチ 担当範囲のFV作成 サイトマップ作成 □ 多くの情報を見やすく整理している □ 店舗ごとに強みをしっかりアピールしている

    □ 地域の方へのサイトなので、親しみやすいようマスコットを提案 □ どこにいてもランドリーの使用状況を見れる便利さ □ 使いやすく、見やすいレイアウト 27 競 合 リ サ ー チ ・ W F
  17. コーポレートサイト カラー 青と白を基調に清潔感を表現。濃いブルーはロゴから抽出。フォントカラーにも使用。イエロー はアクセントカラーで視線誘導を狙った。 濃いブルーでデザインの全体が暗くならないよう、使用箇所や使用頻度を調節した。 フォント&カラー設定 フォント 日本語フォント YuGothic 可読性の高いゴシック体を選定。

    少し丸みがあることで、ゆったり感がだせる。 英数字フォント Helvetica スッキリとしたフォントなので、サイトのシンプルさ をより引き立足せることが出来る。。 28 フ ォ ン ト & カ ラ ー 設 定 デザイン要素 見やすい 親しみ 情報が一目で分かる 基盤はコーポレートサイト感 キーワード 清潔感 洗う 水 シンプル 安心感
  18. キービジュアル ランドリーについて サービス・ご利用方法 店舗一覧 サイトのイメージは楽しい、快適、をキーワードに。 見やすく、親しみやすいようイラストを使用しています。 ユーザーのクリックするハードル を下げるためにデザインを改良 店内が分かる写真を置き、背景はスッキリ見えるカラーにしました。 基調としている青の明度を上げて清潔感のある色合いに、

    視覚的にも可読性を上げています。 背景にさりげなく店名をアニメーションを使って流しています。 2種類ある採用情報は、パッと見て分かるように色分けしました。 店舗は見やすくカードタイプにデザイン。SP版では指でスワイプ することも考慮しています。 フッター部分はTOPページのみをあえて透過。 スクロールしていき最後に再度FVが見えるように設計しています。 ブラッシュアップ ご利用方法とQ&Aの部分 30 デ ザ イ ン デザイン
  19. 更に「癒し」が全面に出せるようブラッシュアップ ⑩ 人物の影と同じようにフレーズにすこし影をつけて、同じようにゆっくり な空間にいるよう「静」を表現。文字の大きさを調節し完成。 ⑦ 強調したいフレーズのみ色変え ⑧ ニュースを素通りされずに目に止まるよう色変え ⑨ 目線が下に続くよう、フレーズ(小)

    をニュースの上に配置 ⑤ 横文字から縦文字に変更 ⑥ ニュースの1記事のみをFVの側に置き、 下にまだ情報がある事を示唆 ⑤ ⑥ ① OPアニメーションに泡のイラスト が使用されているので、背景に泡を 設置 ③静か・癒し・ちょっと日常から離れた 空間を表現するためFVを全面から変更 ⁩② フレーズの文字の太さを変更 ④空き確認のボタンが目立つよう、文字を 円形に配置、回転アニメーションで更に 押しやすくなる。 ① ⁩② ③ ④ ⑧ ⑨ ⑦ ⑩ 32 ブ ラ ッ シ ュ ア ッ プ ブラッシュアップ