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

NAHO SHIMONO_Portfolio2025

Naho
November 21, 2024

NAHO SHIMONO_Portfolio2025

フリーランスUI/WEBデザイナー下野奈穂のポートフォリオです。
お気軽にお問い合わせ・ご相談ください!

【1分で超簡単】今すぐ無料で相談する。
https://docs.google.com/forms/d/e/1FAIpQLScMihvLirvpHMHs0kUNTQUQa0CuwpYOUIGmQ6ChJPXDOMeafw/viewform?usp=dialog

Naho

November 21, 2024
Tweet

Other Decks in Design

Transcript

  1. NAHO SHIMONO PORTFOLIO ヒアリングからデザインまで
 トータルコーディネート 鮨で人を笑顔にしたい 人と人を繋げたい SUSHI WIZは、新鮮で美味しいお鮨を、ご自宅で手 軽に楽しんでいただける出張寿司サービスです。こ

    だわり抜いた食材とリーズナブルな価格、お客様の Designer 握りたての鮨で 心躍る 祭りのような ライブ体験を。 SCROLL 2024.11.01 年末年始の営業について NEWS 2024.11.05 新コースが登場しました! NEWS
  2. 2 Index 目次 プロフィール 3 制作実績 11 UIデザイン 12 サイトデザイン


    出張寿司コーポレートサイト 22 サイトデザイン 電気工事会社コーポレートサイト 35 スキル 50 プラン 54 よくある質問 58 お問い合わせ 60
  3. 6 バスケ スキー・スノーボード 読書・漫画 旅行 LIKE 外国語大学卒業後、新卒で旅行代理店に営業職として入社。現在も同業界にて 営業事務として勤務。今後のキャリアを考え始めたとき、パンフレットやDM のチラシデザインの制作が好きだったことから、2023年9月より以前より興味 のあったWebデザインを学び始める。

    染色会社の配色業に長年携わる母のもとで幼い頃から配色のスパルタ教育を受 けて育ち、色味の選定が得意。その商品や人柄に合わせた色味でデザインが作 れます。 夫と息子2人と4人家族。おうちも大好き、自然の中で遊ぶのも好きなハイブ リッド派。休みの日は子供と公園で思いっきり遊びます。 2017 2017.03 関西外国語大学国際言語学部 卒業 2017.04 大阪の旅行代理店に入社
 営業職として海外出張の医師の渡航手 配を担当。丁寧でこまめなコミュニ ケーションを図り、リピートが増加し た。2年目に売上2000万円達成。 2020 2020.04 コロナの 流行で会社が休業し、 退社 2020.0 5 総合 病院で 医療事務として入社 2020.12 同社を 退職し、営業事務として旅行 会社に入社 202 3-202 4 2023.09 オンラインス クール 「デイトラ 」に て Webデザイン コースの受 講開始 2024.0 5 Webデザイ ナーとして 活動スタ ート 2024.09 第22 回デイトラデザイン コン ペ優勝 2024.10 フリ ーランスとして 独立。 NAHO SHIMONO 下野 奈穂 1993年生まれ 京都出身/滋賀在住 私について Career
  4. 14 名前: 鈴木 太一 年齢: 35歳 役職: シニアコンサルタント 業界経験: 10年

    所属: 外資系戦略コンサルティングファーム 課題 ・短期間で効果的な提案を求められるため、質の高い情報収集が 必須。 ・自身のスキルを磨きながら、部下の育成も求められる。 メディア利用状況 ・忙しい業務の合間にスマホで記事をチェック。 ・報告書や提案書に活かせる具体的なデータを求める。 01 名前: 田中 由美子 年齢: 40歳 役職: 部門マネージャー(営業部門/新規事業開発部門) 業界経験: 15年 所属: 国内大手製造業 課題 ・ 日々の業務に 追われ、 戦略策定や 外部の 知見活 用に 時間が 割け ない。 ・ 最新の 市場動向や 競合情報を効 率よくキ ャッチしたい。 メディア利用状況 ・ 日々の 移動時間や 空き 時間に コンパク トに 読める記事を 好む。 ・部下 への 共有資料や 社内プレゼンで活 用できる 内容を 重視。 0 2 ペル ソナを設定 要件整理 制作実績 UIデザイン
  5. 15 コンサルタントに求められる情報・ ターゲットが求めるメディアアプリとは? 求めるコンテンツ 時短で要点をつかめるコンテンツ(箇条書きやインフォグラフィック) 業界やテーマごとに整理された深掘りレポート。 国内外の成功事例、トレンドの解説と具体例。 メディアへの期待 速報性と信頼性を兼ね備えたニュース。 実務に直結する内容で、現場で使える具体的な示唆。

    高度な分析と専門性がありながら、理解しやすい表現。 デザインイメージ 読みやすさはもちろん、誠実さが感じられるデザイン。 ビジネス向けは黒が多い傾向なので、青を基調として、 コンセプトのイメージに合わせる。 要件整理 2 制作実績 UIデザイン
  6. 17

  7. 18 Color キーワードから色味を選定。 Main Color #ebedf8 Base Color
 #F5F5F5 Accent

    Color
 #334EB6 プラグインを使用し、視認性を確認。 Blue Light 18.00 AAA AAA 1.17 #ebedf8 rgb(235, 237, 248) Light :hover 16.57 AAA AAA 1.27 #e0e4f4 rgb(224, 228, 244) Light :active 12.67 AAA AAA 1.66 #c0c8e8 rgb(192, 200, 232) Normal 2.91 7.23 AAA AAA #334eb6 rgb(51, 78, 182) Normal :hover 2.53 8.31 AAA AAA #2e46a4 rgb(46, 70, 164) Normal :active 2.20 9.55 AAA AAA #293e92 rgb(41, 62, 146) Dark 2.07 10.15 AAA AAA #263b89 rgb(38, 59, 137) Dark :hover 1.69 12.46 AAA AAA #1f2f6d rgb(31, 47, 109) Dark :active 1.40 15.01 AAA AAA #172352 rgb(23, 35, 82) Darker 1.26 16.71 AAA AAA #121b40 rgb(18, 27, 64) キーワード #読みやすい #ビジネス #かっちり #信頼 #誠実 #スキマ時間 カラーの設定 制作実績 UIデザイン
  8. 19 Medium Normal Button sample Secondary Small Button sample Rest

    Hover Pressed Disable Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Normal Icon Text Outline Tags Text Icon Dots Primary Button sample Button sample Button sample バリアント Size Color Buttons バリアントでデザインシステムを作成 デザインシステム 制作実績 UIデザイン
  9. 21

  10. 20 ③ ブックマーク機能を付けて 気になる記事を後ですぐ見 つけられるようにしまし た。 ホーム お知らせ お気に入り アカウント

    ③ ② フリーコンサルの現場から〜活動の実態 と成功のポイント 25 フリーコンサルの現場から〜活動の実態 と成功のポイント TIPS 25 PICK UP あなたへのおすすめ記事 若きリーダー達が語るコン サルの未来 2022/2/15 121 若きリーダー達が語るコン サルの未来 インタビュー 2022/2/15 121 未来を切り拓く 新経営戦略 の舞台裏 2022/2/23 78 未来を切り拓く 新経営戦略 の舞台裏 TIPS 2022/2/23 78 成功する戦略:最新トレン ドと戦術 2022/2/25 成功する戦略:最新トレン ドと戦術 インタビュー 2022/2/25 WHAT’S NEW 新着記事 ② 最新情報を知りたいユー ザーのために新着記事も FVに表示。 ① ① 読みたい記事のキーワード 登録と読んだ記事の傾向か らおすすめ記事をピック アップしてスライド表示。 画面をスッキ リ見 せるため 、
 検索と メニュー はボタンで 表示 。

 カテゴリーに 分けてすぐに 目的 の記事 、キーワードにた どり着 ける 設計にしました。 ⑤ 業界から探す 戦略 リスク管理 IT HR 業務改善 デー タマネジメント AI T型人材 M&A・事 業再生 DX コン サルファーム モダナイゼー ション クライアント 共通 新 着記事 TIPS イン タビュー NEWS キーワードから探す MENU 検索する ④ RANKIN G 人気記事 フリーコンサルの現場から〜活動の実態 と成功のポイント 202 4/2/2 7 1 株式会社デイト ララボが AIを 使った新 サー ビスを 導入 202 4/2/1 8 2 若きリーダー達が語るコンサルの未来 202 4/2/15 3 未来 企業戦略 ~2 02 4年最新 企業動 向 202 4/2/22 4 成功する戦略:最新トレンドと戦術 202 4/2/25 5 未来を切り拓く 新経営戦略の舞台裏 202 4/2/23 6 RANKIN G 人気記事 フリーコンサルの現場から〜活動の実態 と成功のポイント 202 4/2/2 7 1 フリーコンサルの現場から〜活動の実態 と成功のポイント TIPS 202 4/2/2 7 1 株式会社デイト ララボが AIを 使った新 サー ビスを 導入 202 4/2/1 8 2 株式会社デイト ララボが AIを 使った新 サー ビスを 導入 TIPS 202 4/2/1 8 2 若きリーダー達が語るコンサルの未来 202 4/2/15 3 若きリーダー達が語るコンサルの未来 インタビュー 202 4/2/15 3 未来 企業戦略 ~2 02 4年最新 企業動 向 202 4/2/22 4 未来 企業戦略 ~2 02 4年最新 企業動 向 TIPS 202 4/2/22 4 成功する戦略:最新トレンドと戦術 202 4/2/25 5 成功する戦略:最新トレンドと戦術 TIPS 202 4/2/25 5 未来を切り拓く 新経営戦略の舞台裏 202 4/2/23 6 未来を切り拓く 新経営戦略の舞台裏 インタビュー 202 4/2/23 6 ④ラ ンキ ングは記事を 立て 並 びにして 一気に記事 が確認 で きるようにしました。 デザインポイント 制作実績 UIデザイン
  11. 22

  12. 23

  13. 25 顧客の課題
 (ニーズ) 01 最低人数が決まっている 出張寿司店が多いため、 中小規模の会では利用し づらい。 02 子供と一緒に本格的な寿

    司を食べに行くことは場 所もコストの問題もあり 難しい。 03 寿司を握る代表が現役区 議会議員であり、他の出 張寿司店にはない政治に 関心のある層からの需要 がある。 ターゲット 01 東京中央区周辺のタワー マンションに居住する アッパー層 02 子育て中で外食が難しい ファミリー層 03 政治に関心が高い方や、 政治家のパーティー利用 要件整理 2 制作実績 コーポレートサイト
  14. 26

  15. 28 豊富なプランをユーザーが見たいプランに すぐ辿り着くように設計。他社にはあまり ない日本酒とのペアプランを分かりやすく 表記し差別化を図る。また、予約の流れ・ 出張費について等、ユーザーが予約時に必 要な情報を漏れなく記載。 高級感 プロフェッショナル ワクワク感


    臨場感 予約に繋がる サイト設計 スマホファーストのデザインでモダンなイメージを与 え、寿司の写真をギャラリーようにスライドで表示させ るアニメーションでFVからワクワクする出張寿司の体 験をイメージさせる。 ターゲットへのアプローチ方法 洗練された印象を与えるために、シンプル・スタイリッ シュなテイストで黒をベースに。寿司店のサイトは写真 のクオリティが極めて重要なので、画角調整と画像編集 を施しながら、最適な状態にする。 方針の策定 制作実績 コーポレートサイト
  16. 29

  17. 30 コンテンツ内容の洗い出し コンセプト サービス プロフィール お客様の声 お問い合わせ よくある質問 お知らせ 対応エリア

    予約フォーム 流れ コース内容 選ばれる理由 自宅が寿司屋に こだわり 準備・片付け 出張費 日本酒 ABOUT プラン・メニュー コンテンツを選別し、サイトマップを作成。 業界調査とコンテンツ内容の確認 他社との比較検討の際に必要な情報がないと候補から外れやすくなるので、同業他 社のサイトやベンチマークのサイトを分析してコンテンツ内容を洗い出します。 サイトマップ 制作実績 コーポレートサイト
  18. 32 Font 日本語フォント Noto Sans JP 英数字フォント Montserrat 和モダンを意識し、明朝体ではなくあえてゴシック体を採用。英字の Montserratの相性も考えNoto

    Sans JPを選定しました。英数字に使用した Montserratは、スタイリッシュでモダンなデザインが、出張寿司サービス の洗練されたイメージとマッチし、さらに若いユーザーにも魅力的な印象 を与えられるフォントだと考え採用しました。 Color Main Color #211E1E Base Color
 #F1EFEF Accent Color
 #BF2A2F
 #CB680E #F9F9F9 「プロフェッショナルな職人」、 「夜の 祭りが始まるよう前のような静けさ と期待感」を カラー選定の テーマとして、 黒を ベースに お寿司を より美味し そうに 見せる 暖色系を アク セント カラーに選定しました。メインの 黒は アク セント カラーに 馴染むように 少しだ け赤みが 入る ように 調整しました。 キー ワー ド #ワク ワク #臨場感 #上品 #プロフ ェッシ ョナル #ま つり #隠れ 家 フォント&カラーの設定 制作実績 コーポレートサイト
  19. 33 美味しそうなお鮨やお刺身を自動スライドでギャラリー のように見せてワクワク感を演出しました。 ストレートで分かりやすい
 メインコピー 夜のお祭りイメージした色 彩でお祭り=臨場感ある ライブ体験ができること を強調しています。 出張先のキッチンがお寿司屋さんのカウンターのように見え

    るアングルのものを使い、キャッチコピーの「今日、あなた のいる場所が鮨屋になる。」を印象付けるとともに実際に出 張寿司を頼んだ時のイメージが湧くようにと意識しました。 KVの作成 制作実績 コーポレートサイト
  20. 34

  21. 47

  22. 49

  23. 40 ターゲットと市場調査を行い、ユーザーの 知りたい情報を漏れなく順序立てて設計。 料金もプラン例など記載し、ユーザーの疑 問を減らす内容を載せる。 ターゲットへのアプローチ方法 安心感 親しみやすさ お問い合わせへ の誘導

    ユーザー目線の 情報設計 オファー内容が入ったバナーをTOPページ途中に差し 込みホームページからの依頼のメリットを伝え、LINE とお問い合わせフォームへと誘導する。
 LINEへのお問い合わせボタンをサイドに追従させる。 施工する代表の姿、顔写真を入れて信頼感・安心感を与 える。エアコン取り付け後の快適な空間をイメージでき る明るい薄い水色をメインに使用する。琵琶湖の写真を 入れて地域密着の企業をアピール。 方針の策定 制作実績 コーポレートサイト
  24. 41

  25. 42 今回の業種のサイトによくあるコンテンツ 強み エアコン工事 業務エアコン できること 選ばれる理由 依頼の流れ 会社概要 サービス

    施工実績 代表挨拶 施工内容 会社の魅力 引っ越し工事 お問い合わせ プラン CTA よくある質問 費用 方針に合わせてコンテンツを選別し、 サイトマップへ反映させる 業界調査とコンテンツ内容の確認 他社との比較検討の際に必要な情報がないと候補から外れやすくなるので、同業他 社のサイトやベンチマークのサイトを分析してコンテンツ内容を洗い出します。 サイトマップ 制作実績 コーポレートサイト
  26. 44 Font 日本語フォント Noto Sans JP 英数字フォント Poppins 日本語フォントは可読性が高く、サイトによく使用されていて親しみがあ るNoto

    Sans JPを使用し、英数字には、ロゴのフォントに合わせてシング ルストーリーのaが入っていて柔らかい丸みと力強さも感じられるPoppins を選定。 Color Base Color #FAF9F9 Main Color
 #E7F2F6 Sub Color
 #99D6ED Sub Color2
 #537CCC Accent Color #F79848 Text Color #223046 Text Color2 #21388 安心・信頼・清潔感 ・風を感じる 水色を メインに 所々に 濃淡を つけてサイト から 快適な空間を 印象付けれるよ うにし まし た。 アクセント カラーには 青と 相性がよく メリ ハリも感じられる オレン ジを選定。 キー ワー ド #安心 #柔らかい #風 #信頼 #清潔感 #快適 #プロフ ェッシ ョナル フォント&カラーの設定 制作実績 コーポレートサイト
  27. 46

  28. 38 安心感と清潔感が伝わり、料金とメリットが分かれば お問い合わせが増えるのでは? ターゲット 滋賀県に住む30~50代の男女 集客サイトからホームページ訪れるユーザー ターゲット 滋賀県に住む30~50代の男女 集客サイトからホームページ訪れるユーザー 予想されるターゲットの行動

    ・エアコン取り付けを検索する ・集客サイトからサイトに訪れる 予約への課題 顔や人柄が分からないのに家に入られるのは不安 料金が追加で大幅に増えないか不安 集客サイトから自社サイトまで行ってまで 予約するメリットがわからない 課題の整理 制作実績 コーポレートサイト
  29. 35

  30. 6

  31. 51 Figma Webデザイン UIデザイン 営業資料 Illustrator ロゴ 名刺 パンフレット・チラシ Photoshop

    画像加工 画像補正 画像生成 Studio テンプレートを使用したサ イト構築 サイトデザイン Chat GPT 構成の壁打ち 参考イメージの生成 使用可能ツール Skills
  32. 52 01 二人三脚で取り組みます デザインのパートナーとして共にお客様の ビジネスに真っすぐ向き合いお仕事いたし ます。 02 目的とゴールの明確化 すべてのデザインに意図と根拠をもって制 作いたします。

    意味のないデザイン、必要 でないと思う提案はいたしません。 03 誠実でオープンな対話 お互いに率直な意見を共有し、誤解やすれ 違いを減らすことで、効率的かつスムーズ なやり取りを実現します。 お客様との約束
  33. 54 01 ヒアリング ご要望やプロジェクトの目的、デザインの イメージについて丁寧にお話を伺います。 ヒアリングの内容を基に、最適なデザイン プランとおおまかなスケジュールをご提案 いたします。 02 ご提案・お見積もり

    ヒアリング内容をもとにFVを2案を無料でご 提案いたします。併せてお見積もりもご提 示いたします。 03 ご契約 提案内容に価値を感じて頂けましたら、正 式にご契約させて頂きます。ご契約が完了 次第、プロジェクトをスタートし、デザイ ン作業に取りかかります。 Flow ご提案の流れ
  34. 56 01 プロジェクト開始 ご契約後、市場分析~情報設計~デザイン 作業に入ります。ヒアリングで伺ったご要 望をもとに、初期デザイン案を作成し、ス ケジュールに基づいて進行します。進捗は 定期的にご報告し、必要に応じてフィード バックを反映させていきます。 02

    デザインの確認・修正 デザイン案が完成したら、ご確認いただき ます。フィードバックに基づき、修正や調整 を行います。この段階でしっかりとお客様 のイメージに近づけ、最終版のデザインを確 定させます。 03 納品・フォローアップ 最終デザインが確定後、納品形式に合わせて データを納品いたします。納品後も、必要な サポートや軽微な修正対応が可能です。(有 償)デザインの導入や使用においてご不明点 があれば、お気軽にご相談ください。 Flow 契約後の流れ
  35. 57 Q. デザインの実績が少ないようですが、依頼しても大丈夫でしょうか? A. デザイン経験が浅い分、丁寧なヒアリングとリサーチを徹底し、お客様のニーズやイメージを深く理解することを重視しています。また、前職で培った営業スキルに より、トラブル対応やプロジェクト進行に柔軟に対応する力がありますので、安心してご依頼いただけます。過去の作品についても、個別に詳しくご説明いたします ので、気軽にお問い合わせください。 Q. 配色が得意とのことですが、具体的にどのようなデザインが可能ですか? A.

    配色スキルを活かして、ブランドや商品の個性を引き立てるカラー設計や視覚的に魅力的なレイアウトを作成できます。ユーザーが求めるデザインに合う色を調整す ることで、ユーザーの印象に残るデザインをご提案できます。必要に応じて、配色の意図や効果も詳しくご説明いたします。 Q. どのように プロジェクトの 進捗やスケジュール管理をしても らえますか? A. プロジェクト 開始時にス ケジ ュールをお 伝えし、進 捗状況や 今後の 予定について は定期的にご 報告いたします。前職での営業経験を活かし、 納期の 厳守や調整も柔軟 に対応いたしますので、安心してお 任せください。 納品までの 各ス テップで 確認を 取りなが ら、ス ムーズな進行をお 約束します。 Q. デザインの 納品後の サポートも お願いで きますか? A. はい、 納品 後のア フター フォローも 可能です。 納品 後の軽 微な 修正や、デザイン 使用時のご 相談もお 受けしております。 長期的な パート ナーとして、お客様がス ムー ズにデザインを活 用できるよう、必要なサ ポートを提 供いたしますので、 どう ぞご安心ください。 Flow よくある質問