NAHO SHIMONO_Portfolio_公開用

UI/Webデザイナー下野奈穂のポートフォリオです。

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
4. 4 事業の魅力を引き出し 結果にコミットするデザイナー 目指すデザイナー像
5. 5 それって何をしてくれる人なの？ 事業の魅力を引き出し 結果にコミットするデザイナー ヒアリングから5W1Hを使って要件定義 市場調査・50以上の競合サイトやターゲッ トを分析し、根拠のあるデザインをご提案 Webマーケティング視点を取り入れた戦略 を企画し、成果の出やすいWebサイトを 設計します 目指すデザイナー像
6. 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
7. 初めての制作で進め方がわからない。 自社の強みをどう伝えたらいいかわからない。 ホームページを作ったけれど、成果に繋がっていない。 プロ視点の提案がほしい。 ディレクションの負担が大きい。 7 こんな課題やお悩みはありませんか？ 提供価値
8. 8 目的に合わせて、戦略を企画していきます。 市場分析に時間をかけ、基礎的なWebマーケティング施策を取り入れて
 より結果のでやすいWebサイトへと導きます。 入口の設計
 （チャネルの設計） 全体像の把握
 （チャネルの設計） 打ち出し方の設計
 （ポジショニング） マーケ視点で最適なコンテンツのご提案。 ターゲットに刺さる 理想のサイトへ 私が提供できること01
9. 9 ヒアリングシート スケジュール管理/作成 要件定義 デザインシステム / スタイルガイド設計 見通しが分かる業務内容・スケジュール管理。 私が提供できること02
10. 10 デザインを提供したお客様からの実際のコメント。 お客様の声
11. 過去の 制作事例
14. 14 名前: 鈴木 太一 年齢: 35歳 役職: シニアコンサルタント 業界経験: 10年 所属: 外資系戦略コンサルティングファーム 課題 ・短期間で効果的な提案を求められるため、質の高い情報収集が 必須。 ・自身のスキルを磨きながら、部下の育成も求められる。 メディア利用状況 ・忙しい業務の合間にスマホで記事をチェック。 ・報告書や提案書に活かせる具体的なデータを求める。 01 名前: 田中 由美子 年齢: 40歳 役職: 部門マネージャー（営業部門/新規事業開発部門） 業界経験: 15年 所属: 国内大手製造業 課題 ・ 日々の業務に 追われ、 戦略策定や 外部の 知見活 用に 時間が 割け ない。 ・ 最新の 市場動向や 競合情報を効 率よくキ ャッチしたい。 メディア利用状況 ・ 日々の 移動時間や 空き 時間に コンパク トに 読める記事を 好む。 ・部下 への 共有資料や 社内プレゼンで活 用できる 内容を 重視。 0 2 ペル ソナを設定 要件整理 制作実績 UIデザイン
15. 15 コンサルタントに求められる情報・ ターゲットが求めるメディアアプリとは？ 求めるコンテンツ 時短で要点をつかめるコンテンツ（箇条書きやインフォグラフィック） 業界やテーマごとに整理された深掘りレポート。 国内外の成功事例、トレンドの解説と具体例。 メディアへの期待 速報性と信頼性を兼ね備えたニュース。 実務に直結する内容で、現場で使える具体的な示唆。 高度な分析と専門性がありながら、理解しやすい表現。 デザインイメージ 読みやすさはもちろん、誠実さが感じられるデザイン。 ビジネス向けは黒が多い傾向なので、青を基調として、 コンセプトのイメージに合わせる。 要件整理 2 制作実績 UIデザイン
16. 16 経営者やビジネスリーダーが抱える課題に対して、即座に役立つ情報や ツールを提供する 「ポータブルコンサルタント」 を目指します。 経営者・ビジネスリーダーのための 実践的ナレッジプラットフォーム コンセプト 制作実績 UIデザイン
18. 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デザイン
19. 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デザイン
20. 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デザイン
24. 24 事業内容 東京都内近郊の出張寿司サービス。自宅だけでなくパーティーやイベント会場などでも握ってくれる。 出張費負担があれば、東京都以外の出張も可能。 ビジネス課題 新規事業ため、まだサイトがなく予約の公式の窓口がない。サイトがないと信頼性に欠ける。 サイト課題 プランが多いので、分かりやすく明記したい。ターゲットは決めているが、ターゲットが求める情報・
 コンテンツは把握ができていない。 ご希望 スマホ寄りレスポンシブデザイン。 スタイリッシュなイメージ。できれば、黒基調。 奇抜で面白い、独創的であり挑戦的なアイディア。 要件整理 制作実績 コーポレートサイト
25. 25 顧客の課題
 （ニーズ） 01 最低人数が決まっている 出張寿司店が多いため、 中小規模の会では利用し づらい。 02 子供と一緒に本格的な寿 司を食べに行くことは場 所もコストの問題もあり 難しい。 03 寿司を握る代表が現役区 議会議員であり、他の出 張寿司店にはない政治に 関心のある層からの需要 がある。 ターゲット 01 東京中央区周辺のタワー マンションに居住する アッパー層 02 子育て中で外食が難しい ファミリー層 03 政治に関心が高い方や、 政治家のパーティー利用 要件整理 2 制作実績 コーポレートサイト
28. 28 豊富なプランをユーザーが見たいプランに すぐ辿り着くように設計。他社にはあまり ない日本酒とのペアプランを分かりやすく 表記し差別化を図る。また、予約の流れ・ 出張費について等、ユーザーが予約時に必 要な情報を漏れなく記載。 高級感 プロフェッショナル ワクワク感
 臨場感 予約に繋がる サイト設計 スマホファーストのデザインでモダンなイメージを与 え、寿司の写真をギャラリーようにスライドで表示させ るアニメーションでFVからワクワクする出張寿司の体 験をイメージさせる。 ターゲットへのアプローチ方法 洗練された印象を与えるために、シンプル・スタイリッ シュなテイストで黒をベースに。寿司店のサイトは写真 のクオリティが極めて重要なので、画角調整と画像編集 を施しながら、最適な状態にする。 方針の策定 制作実績 コーポレートサイト
30. 30 コンテンツ内容の洗い出し コンセプト サービス プロフィール お客様の声 お問い合わせ よくある質問 お知らせ 対応エリア 予約フォーム 流れ コース内容 選ばれる理由 自宅が寿司屋に こだわり 準備・片付け 出張費 日本酒 ABOUT プラン・メニュー コンテンツを選別し、サイトマップを作成。 業界調査とコンテンツ内容の確認 他社との比較検討の際に必要な情報がないと候補から外れやすくなるので、同業他 社のサイトやベンチマークのサイトを分析してコンテンツ内容を洗い出します。 サイトマップ 制作実績 コーポレートサイト
31. 31 必要なコンテンツを順序立てて配置。 スマホファーストなので各ページPC画 面TOPは固定で、スマホ幅のフレーム だけスクロールで動く仕様に設定。 FVで写真を大きく使いたいと考え、ス クロール部分は右側に寄せました。 WFの作成 制作実績 コーポレートサイト
32. 32 Font 日本語フォント Noto Sans JP 英数字フォント Montserrat 和モダンを意識し、明朝体ではなくあえてゴシック体を採用。英字の Montserratの相性も考えNoto Sans JPを選定しました。英数字に使用した Montserratは、スタイリッシュでモダンなデザインが、出張寿司サービス の洗練されたイメージとマッチし、さらに若いユーザーにも魅力的な印象 を与えられるフォントだと考え採用しました。 Color Main Color ＃211E1E Base Color
 #F1EFEF Accent Color
 ＃BF2A2F
 ＃CB680E ＃F9F9F9 「プロフェッショナルな職人」、 「夜の 祭りが始まるよう前のような静けさ と期待感」を カラー選定の テーマとして、 黒を ベースに お寿司を より美味し そうに 見せる 暖色系を アク セント カラーに選定しました。メインの 黒は アク セント カラーに 馴染むように 少しだ け赤みが 入る ように 調整しました。 キー ワー ド ＃ワク ワク ＃臨場感 ＃上品 ＃プロフ ェッシ ョナル ＃ま つり ＃隠れ 家 フォント＆カラーの設定 制作実績 コーポレートサイト
33. 33 美味しそうなお鮨やお刺身を自動スライドでギャラリー のように見せてワクワク感を演出しました。 ストレートで分かりやすい
 メインコピー 夜のお祭りイメージした色 彩でお祭り＝臨場感ある ライブ体験ができること を強調しています。 出張先のキッチンがお寿司屋さんのカウンターのように見え るアングルのものを使い、キャッチコピーの「今日、あなた のいる場所が鮨屋になる。」を印象付けるとともに実際に出 張寿司を頼んだ時のイメージが湧くようにと意識しました。 KVの作成 制作実績 コーポレートサイト
36. サイトリニューアルから２カ月で自社サイトからのお問い合わせが5倍に！
37. 37 事業内容 滋賀県大津市を中心にエアコン取り付け工事を展開されている電気工事会社。
 家庭用から業務用エアコンまで対応、電気工事業のほか厨房設備施工も対応されている。 ビジネス課題 自社サイトからの集客はほとんどなく、集客サイトに頼っている。
 集客サイト利用には一受注当たり20％の手数料がかかっており、自社サイトから顧客を獲得したい。
 サイトがお客様の知りたい情報に辿り着くように設計されておらず、質問が多く業務に差し支える。 サイト課題 質素な見た目で信頼性に欠ける。
 情報が不足しており、ユーザーが離脱しやすい。 希望イメージ 信頼性・地域密着が伝わる、親しみやすいサイト。 一人でやっている運営しているため、お問い合わせはできれば電話よりLINEか、お問い合わせ フォームに来るようにしたい。 要件整理 制作実績 コーポレートサイト
38. 38 安心感と清潔感が伝わり、料金とメリットが分かれば お問い合わせが増えるのでは？ ターゲット 滋賀県に住む３０～５０代の男女 集客サイトからホームページ訪れるユーザー ターゲット 滋賀県に住む３０～５０代の男女 集客サイトからホームページ訪れるユーザー 予想されるターゲットの行動 ・エアコン取り付けを検索する ・集客サイトからサイトに訪れる 予約への課題 顔や人柄が分からないのに家に入られるのは不安 料金が追加で大幅に増えないか不安 集客サイトから自社サイトまで行ってまで 予約するメリットがわからない 課題の整理 制作実績 コーポレートサイト
40. 40 ターゲットと市場調査を行い、ユーザーの 知りたい情報を漏れなく順序立てて設計。 料金もプラン例など記載し、ユーザーの疑 問を減らす内容を載せる。 ターゲットへのアプローチ方法 安心感 親しみやすさ お問い合わせへ の誘導 ユーザー目線の 情報設計 オファー内容が入ったバナーをTOPページ途中に差し 込みホームページからの依頼のメリットを伝え、LINE とお問い合わせフォームへと誘導する。
 LINEへのお問い合わせボタンをサイドに追従させる。 施工する代表の姿、顔写真を入れて信頼感・安心感を与 える。エアコン取り付け後の快適な空間をイメージでき る明るい薄い水色をメインに使用する。琵琶湖の写真を 入れて地域密着の企業をアピール。 方針の策定 制作実績 コーポレートサイト
42. 42 今回の業種のサイトによくあるコンテンツ 強み エアコン工事 業務エアコン できること 選ばれる理由 依頼の流れ 会社概要 サービス 施工実績 代表挨拶 施工内容 会社の魅力 引っ越し工事 お問い合わせ プラン CTA よくある質問 費用 方針に合わせてコンテンツを選別し、 サイトマップへ反映させる 業界調査とコンテンツ内容の確認 他社との比較検討の際に必要な情報がないと候補から外れやすくなるので、同業他 社のサイトやベンチマークのサイトを分析してコンテンツ内容を洗い出します。 サイトマップ 制作実績 コーポレートサイト
43. 同業他社のサイトを分析したコンテン ツの内容を情報設計のベンチマークの サイトを参考にターゲットが求める情 報を漏れなく、また知りたいことの導 線を考えながら組み立てる。 43 WFの作成 制作実績 コーポレートサイト
44. 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 安心・信頼・清潔感 ・風を感じる 水色を メインに 所々に 濃淡を つけてサイト から 快適な空間を 印象付けれるよ うにし まし た。 アクセント カラーには 青と 相性がよく メリ ハリも感じられる オレン ジを選定。 キー ワー ド ＃安心 ＃柔らかい ＃風 ＃信頼 ＃清潔感 ＃快適 ＃プロフ ェッシ ョナル フォント＆カラーの設定 制作実績 コーポレートサイト
45. 45 実績の数字を見せて権威性を
 強調しています。 代表の顔が分かる写真を載せることで どんな人が来るかイメージしやすくなり、 信頼感を向上させました。 一目で何のサービスを提供しているか分かるFV
 作業時をイメージしやすく、スタッフの表情が明るい写真を選定。 KVの作成 制作実績 コーポレートサイト
48. 48 エアコンにちなんで冷暖房の切替ボタンを設置し、
 水色の配色からオレンジ配色へと変化する アニメーションを追加し、独自性と暖房シーズンへの 訴求力を加えました。
53. ロゴデザイン 制作実績 その他
54. Skills
55. 51 Figma Webデザイン UIデザイン 営業資料 Illustrator ロゴ 名刺 パンフレット・チラシ Photoshop 画像加工 画像補正 画像生成 Studio テンプレートを使用したサ イト構築 サイトデザイン Chat GPT 構成の壁打ち 参考イメージの生成 使用可能ツール Skills
56. 52 01 二人三脚で取り組みます デザインのパートナーとして共にお客様の ビジネスに真っすぐ向き合いお仕事いたし ます。 02 目的とゴールの明確化 すべてのデザインに意図と根拠をもって制 作いたします。 意味のないデザイン、必要 でないと思う提案はいたしません。 03 誠実でオープンな対話 お互いに率直な意見を共有し、誤解やすれ 違いを減らすことで、効率的かつスムーズ なやり取りを実現します。 お客様との約束
57. Flow ご提案の流れ
58. 54 01 ヒアリング ご要望やプロジェクトの目的、デザインの イメージについて丁寧にお話を伺います。 ヒアリングの内容を基に、最適なデザイン プランとおおまかなスケジュールをご提案 いたします。 02 ご提案・お見積もり ヒアリング内容をもとにFVを2案を無料でご 提案いたします。併せてお見積もりもご提 示いたします。 03 ご契約 提案内容に価値を感じて頂けましたら、正 式にご契約させて頂きます。ご契約が完了 次第、プロジェクトをスタートし、デザイ ン作業に取りかかります。 Flow ご提案の流れ
59. 58 Lastly 最後に