ビジネス成果を最大限に発揮するPORTFOLIO

制作事例や制作にあたっての思考プロセスをまとめたものとなっております。

Transcript

1. ビジネス成果を 最大限に発揮する PORTFOLIO UI/Web Designer 分析× リサーチ× デザイン
2. Section 01 Profile 私について P.03 Section 02 Survice サービスの特徴 P.07 Section 03 Works 制作実績 P.12 Category UI サーフボードECサイト P.13 Category HP 理容室のホームページ P.26 Category LP 医療脱毛クリニックのLP P.37 Category BANNER 医療脱毛クリニックのLP P.48 Section 04 Flow ご契約の流れ・料金 P.54 Section 03 FAQ よくあるご質問 P.57 Section 03 Contact お問い合わせ P.59 Section 00 CONTENTS
3. Profile Contents Service Works Section01 私について next page 03
4. Section 01 SKILLS 05 使用可能ツール、スキル figma Webサイトデザイン、UIデザイン、バナー、その他資料作成 photoshop 写真加工、生成、レタッチ illustrator バナー、名刺、簡単なアイコンデザイン、チラシ作成 HTML 基本的なコーディング、読解 CSS 基本的なコーディング、読解 Wordpress 基本的なサイト構築
5. Section 01 MISSION 課題解決と 使い易さを 追求するデザイン 「アート」と「デザイン」は混同されることがありますが、本質は全く異なるものです。デザイン本来の目的である 「課題解決」を行動理念とし、お客様の現在抱えている課題を共に考え、デザインで解決できればと思います。 06
6. Service Profile Works Flow Section02 サービスの概要 next page 07
7. このようなお悩みをお持ちではありませんか？ デザインを依頼したけど、思っていたイメージと違う 頭ではイメージがあるけど、うまく伝えられない こまめに連絡が途絶えないか不安 価格設定が分からない 08
8. 徹底した から導き出す、 “ ”を ご提案します ユーザーリサーチ 成果につながるデザイン ・迅速かつ、丁寧に対応。「即応態勢」でコミュニケーションコストを局限 ・徹底的にリサーチし、ベネフィットに繋がるデザインをご提案 ・機能性を兼ね備える細部まで整ったデザイン ・先着３社様限定でFVを無料でご提案 09
9. 10 Section 02 SERVICE 01 迅速かつ、丁寧に対応。「即応態勢」でコミュニ ケーションコストを局限 陸上自衛隊での訓練や災害派遣での経験をもとに、お客様の要望を最大限 発揮できるよう速やかに、そして丁寧に「即応態勢」でデザイン制作をス ムーズに進めます。 ⁨ ⁩ 進捗状況及び工程管理の共有 こちらでプロジェクトの進捗状況が分かるもの をご用意しておりますのでご安心ください。ま た、こちらから週３回の状況報告も行います。 ヒアリングシートの活用 契約の際、事前に記入いただくヒアリングシー トや、デザイン修正の際の依頼用のチェックリ ストをご用意しております。 02 徹底的にリ サー チし、 ベネフィットに 繋がるデザ インを ご提案 競合や 事業内容、 現状課題に ついて 徹底的に リサー チします。 マー ケ視点 でのデザインでお客様に 満足して いただけるよう、 リサー チにお いて 手を 抜きま せん。 事 業内容や ター ゲット 層、 競合をリ サーチし、 ヒアリング 内容に 基づいて 要件定義 リ サーチに 基づいて、 複数パターンの 構成を 書 き出して ブラッシ ュアップ
10. 11 Section 02 SERVICE 03 機能性と美しさを両立した、こだわりのデザイン ユーザー視点での操作性や導線を意識し、ブランドイメージや目的に合っ たビジュアルを構築。ただ見た目が良いだけでなく、「しっかり伝わる」 「使いたくなる」そんな実用性を両立したデザインを目指しています。 字間調整を行い、全体バランスを見て、見栄え の良いデザインをします。 各要素間の余白を統一し、見栄えだけでなく、 見やすいデザインへ 04 先着３社様限定でFVを無料でご提案 5営業日以内に、対象のFVを無料でご提案いたします。 まずはデザインの クオリティで判断していただいて、納得していただけましたら、正式なご 依頼をお願いいたします。 提案イメージ
11. Works Service Flow FAQ Section03 制作実績 next page 12
12. UI 13 01 サーフボードECサイトの UI/UX改善 制作区分 自主制作 ツール Figma 制作期間 2週間 参考：ルービックサーフ(https://rubiksurf.com/) 本改善は、ルービックサーフ様の公式見解やサイトとは関係のない、個人の自主制作としての提案です。
13. OVERALLVIEW OVERALLVIEW OVERALLVIEW 14
14. 15 Section 03 WORKS サイト作成にあたり、以下の内容を分析 市場全体像 サーフボードは一般的に店舗で購入する場合が多く、通販での購入は浸透していない傾向にある。 そのため、多くのユーザーはサーフボードの通販サイトに対して、やや不安に感じるという声が散見される。 ・体重や技量によってボードの長さや厚さなどのスペックが人それぞれ異なるため、直接目で確かめたい。 ・初心者で自分にどんなボードが合っているのか分からないから、店員のアドバイスをもとに選びたい。 yahoo知恵袋 自社分析 主にサーフボードを 取り扱っている通 信販 売が 主体の 事業。 「高品質なサーフボードを、 低価格に販 売」を コン セプトとして 挙げている。 ・ 競合 他社の 同一サーフボードを 比較した 結果、 15,400円安く販 売して おり、 コスト 面で カットしている ことが 見 受けられる。 ・ 低価格の 背景として、 大きくは 海外買い 付けが 理由として 挙げられる。 例として、サーフ ィンの 本場 オースト ラリアでは、 商品の 国外持ち出しによ りGST(日本での 消費税)が 免税される 制度がある。 (引用：日本貿易振興機構GST　商品サービス税：オーストラリアよ り) (引用：ルービックサーフ　About Rubik Surf since 2013 より) 他社分析 サーフボード 以外にも、ボードス ポー ツ全般、 他にもア パレルグッ ズを 取り扱っている 事業。サーフ ィンに 関し ても全般的に 幅広く 取り扱って おり、 在庫も 豊富。 ・店舗 受け取りサー ビスを 展開して おり、 在庫がある店舗に直接 受け取りがで きるのが 強み。 ・ユーザーが 過去に購入したボードを店舗で 下取りして 中古販 売して おり、安 価でサーフボードを購入する こと がで きる。 (引用：ムラサキスポーツ SHOPNEWS より) ムラサ キス ポー ツ 現状課題 サーフボードの 商品一 覧への 遷移フ ローが長く、ユーザーにとってスト レスがかかる 恐れ ・ TOP→ブランド一 覧→ボード 詳細→商品一 覧 実際の購入者の レビューが分か り辛く、 本当に購入している人がいるのか分からないという 口コミから、ユー ザーにとって不 信感の 懸念あ り ボードが長さ ごとに 商品が 区分分 けされて おり、 同じ 商品が 何個も 並んでいる 状態のため、ユーザーの 注文ミス を 誘発する 恐れ X(旧Twitter) ルー ビックサーフ
15. Section 03 WORKS 16 分析内容をもとに、ペルソナ設計の実施 坂口 龍太郎 年齢 32歳 職業 飲食店経営 年収 600〜700万円 家族構成 妻(26)、息子(８)の3人構成 住まい 千葉県東金市 休日の過ごし方 犬の散歩、サーフィン 行動パターン ・スマホを見ることが多く、仕事の合間にYoutubeをよく見ている ・毎朝波のチェックのついでに、犬の散歩で近くの海沿いを歩いている ・料理の仕込みのため、朝早く行動することが多い 職務内容 ・オーガニック系ダイニングカフェのオーナー ・食材の仕入れ、調理を担当 ・事務やホール対応は妻に一任 ・アルバイト採用、面接 価値観 ・ 人と 話すのが 好きで、 誰とで も仲良くで きる 。 ・ 自然に 触れ合 うのが 好きで、 都会の 喧騒が 嫌い 。 ・ ボブマー リーを 尊敬している ・ 新しい ものが 好きで ミー ハー な一面 も 暮らし ・ 都内から移住したことによ り、 仲間の 勧めで 去年からサーフ ィンを 始めた 。 ・ 元々、海の近いとこ ろに 住むのが 夢とい うの もあり、海の近くで 店を 経営することに なった ・早朝や 休日は サーフ ィンをすることが多く、 頻度は 週に 1回から3回程度通っている 。 ・ 移住して 日数が 浅く、 あまり土地勘が ない 。 ・ 店が 繁盛して おり、仕事は 忙しい 。 課題 ・ス テッ プアッ プのため 新しい ボー ドを 買いたいが、 身近に 詳しい 人がい ない 。 ・ サーフ ショッ プで ボー ドを 買ってみたいが、 どこが 良い かわからない 。また、 知っている 人がい ない 。 ・ サーフ ィンを せっかく 始めた から、 サーフ ボー ドは 新しくて 良い ものを 選んでみたい 。
16. 17 Section 03 WORKS ユーザー体験の可視化に伴う現状課題の洗い出し 態度 顧客行動 顧客接点 思考 課題感 対応策 認知 ・検索エンジンでのキーワード検索 ・動画サイトでの最新ボード情報 ・google ・yahoo検索 ・youtube ・新しいボードを買いたい ・上手くなりたい ・最新のボードを知りたい ・ブランドを知らない ・ボードのトレンドを知らない ・instagramやXでの認知度向上 情報収集 ・最新ボードのチェック ・自分に合ったボードを確認 ・ブランド一覧 ・有名ブランドが置いてある、良いな ・商品一覧はどこにあるのか ・商品一覧へのページまでが遠い ・売れ筋の商品が分からない ・商品一覧までの遷移を簡略化 検索・閲覧 ・有名ブランドをチェック ・商品 詳細から商品一覧を確認 ・商品 詳細ペー ジ ・商品一覧 ・ボードが合っているのか分からない ・ 他の 通販より 安いから良いか も ・売れ筋の商品が分からない ・商品の 詳細が 専門的過ぎる ・レ ビューがなくて 不安 ・ランキン グ形式で売れ筋を 可視化 ・商品一覧までの遷移を簡略 化 ・ 初心者ユー ザーに 配慮した情報 設計 購入 ・ 欲しかったボードを 購入 ・ 購入ページ ・ 倉庫引渡サー ビスが 安いな ・ 到着が 楽し み ・買 えて よかった ・ 倉庫引渡はどこで 申し 込めば良い か わからなかった ・ 発送方法の 選択方法をボ タン 等で 明記
17. 05 DESIGN 18 Section 03 WORKS デザインフロー 01 要件定義、リサーチ 02 競合比較・分析 03 ラフ案の書き出し 04 ワイヤーフレーム
18. Section 03 WORKS 19 競合・参考サイト一覧 ムラサキスポーツ https://www.murasaki.jp HOKA ONE ONE https://www.hoka.com/jp NIKE https://www.nike.com/jp Amazon https://www.amazon.co.jp
19. Section 03 WORKS 20 デザインルール ベースカラー #FFFFFF/White メインカラー #000000/Black アクセントカラー #FFEE57/Yellow #FF7305/Orange #6681F4/Blue トーンは明るめのブライトトーンを使用し、健康的で華やかな印象にしました。ま た、色相はトライアドで単調になりすぎないよう工夫し、ルービックサーフのコンセ プトである「ルービックキューブ」のようなカラーと「ポップさ」を意識して配色し ました。 欧文書体 Geist サイトコンセプトを汲み取り、幾何学的な書体で、かつ読みやすくシンプルに設計さ れたサンセリフフォントを選定しました。 和文書体 Noto Sans JP サンセリフフォントと親和性の高いゴシック体の可読性の高いフォントを選定しまし た。
20. 改善点について 01 競合優位性でもある価格の安さと、数値の明確化 スライドビューから、固定ページに変更し、ユーザーの目に留まるよう演出。 また、セール品目の割引率を表示させることにより、お買い得であることをア ピール。 02 配色を増やし、余白やレイアウトを見直してより ポップな印象に ルービックサーフのコンセプトである、「いつもの波乗りをもっと面白く、 もっとポップに、もっとアグレッシブに！！」から着想を得て、ルービック キューブを想起させるような配色、レイアウトに変更しました。 02 ユーザーが最短距離で商品にアクセスできるよう 情報設計を改善 従来の商品一覧までの遷移は「ブランド一覧」から「商品詳細ページ」を介し て遷移していたため、新着商品を表示するようして、アクセスの容易さを追 求。 Before After Section 03 WORKS 21
21. After Section 03 WORKS 22 Before POINT01 商品詳細一覧の一番下までスクロールして、やっと商品一覧のページへ辿り着く仕様。 このため、ユーザーは商品の詳細をわざわざ見てから商品の在庫を確認しなければならない。 POINT02 商品の区分分けが長さごとになっており、なおかつ同じ種類のボードが並べられているため、 ユーザーの誤注文を誘発する恐れがある。 POINT01 ブランド一覧から商品一覧に遷移するよう情報設計を見直し。ユーザーの誤注文を防ぐため、 ボードごとの区分分けにし、スムーズに目的の商品に辿り着けるよう改善。 POINT02 ページ滞在時間を増やし購入に誘導する意図として、レコメンド機能を追加し、直近で閲覧し た商品をページ下部に記載。 1 2 1 2
22. After Section 03 WORKS 23 Before POINT01 ボタンアイコンが背景と同色のため、どこまでの範囲がボタンの領域なのか分かり辛くなって おり、やや視認性に欠けるデザイン。 POINT02 レビューが別ページ(ABOUTの一番下の項目)に記載されており、商品とリンクしておらず実際 に買った人の声が分かり辛い。 POINT01 商品ページでボードサイズを選択出来るよう変更し、ボタンを目立つ配色に改善。また、在庫 数を表示することより、購入意欲をアップさせる意図。 POINT02 購入者がいるかどうか分からないという口コミから、購入者のレビューを商品ページに記載 し、ユーザーに対し安心感を与えるよう設計。 1 2 1 2
23. After Section 03 WORKS 24 Before POINT01 ボードサイズやスペックがアバウトで、初心者や知識が浅い人に対しては難しい内容となって しまっており、購入者層が限定されてしまう恐れがある。 POINT01 ボードサイズによって、それぞれの厚さや浮力を算出できるサイズチャートを設計し、ボード 選びの判断基準である長さやボリュームを見やすく改善。 POINT02 ボードスペックによって合うシーンはそれぞれ異なるため、初心者に配慮しボードのスペック をグラフチャート表示で記載。自分に合ったボードをより選びやすいよう配慮。 1 1 2
24. After Section 03 WORKS 25 Before POINT01 ボタンアイコンが背景と同色のため、どこまでの範囲がボタンの領域なのか分かり辛くなって おり、やや視認性に欠けるデザイン。また、カテゴリ表示がないため誤注文の恐れがある。 POINT02 ルービックサーフが行っている倉庫引き渡しサービスがどこで手続きできるか分からないた め、ユーザーが混乱してしまう。 POINT01 ボタンを目立つ配色に改善し、ブランド表示、個数、サイズを別の行に記載し注文内容を分か りやすいように改善。 POINT02 配送方法に指定用のボタンを配置し、倉庫引き渡しサービスを受けたいユーザーに対して、ス ムーズに誘導できるよう改善。 1 2 1 2
25. Flow Works FAQ Contact Section04 ご契約の流れ・料金 next page 54
26. Section 04 FLOW 55 ご提案の流れ お問い合わせ STEP 01 各種コミュニケーションツールに て、お気軽にご相談ください。 ヒアリング STEP 02 事前に記入していただいたヒアリ ングシートをもとに、最適なデザ インの方向性を検討します。 お見積もり STEP 03 5営業日以内に希望デザインのFV の提示及び、こちらで算出したお 見積もりを提示します。 ご契約 STEP 04 提案内容に納得していただけまし たら、契約を締結し、本制作に取 り掛かります。
27. Section 04 FLOW 56 料金設定 WEBサイトデザイン制作 ホームページ / コーポレートサイト / 採用サイト / ECサイト　etc. 3社様限定キャンペーン TOPページ ¥100,000 〜 / ページ ¥50,000 〜 / ページ 下層ページ ¥50,000 〜 / ページ ¥25,000 〜 / ページ LPデザイン制作 コーポレートLP / 採用LP / 集客用LP　etc. 3社様限定キャンペーン TOPページ ¥150,000 〜 / ページ ¥120,000 〜 / ページ バナー制作 ホームページ用バナー / WEB広告用バナー　etc. ¥3,000 〜 / 枚