工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン

Transcript

1. 工数削減!
 印刷物デザイナーに知ってほしい
 コスパの良いWebデザイン 
 SCC大阪　櫂谷志勇登

2. アジェンダ
 1. 印刷物とWeb 媒体の違いによるメリットについて
 2. ゴールを狙えるWebデザインって？
 3. コスパの良いWebデザインって？
 4. コーディング時に悩むWebデザインって？
 5. Webのデザインに役立つツールの紹介

3. 自己紹介
 櫂谷 志勇登 （かいたに しゅうと）
 制作会社にてWebデザイナーコーダーとして 
 勤務した後、SCC大阪に入社し、主に 
 Web コーディング・プログラミング を担当。 

4. 本セミナーの対象者
 印刷物などのデザインはできるけど、
 Webのデザインを作る時は
 どこに気をつけたらいいかわからない方
 本セミナーの目標
 ゴールを意識できるデザイナーさんになる
 Web制作会社と円滑に連携できるデザイナーさんになる

5. アジェンダ
 1. 印刷物とWeb 媒体の違いによるメリットについて
 2. ゴールを狙えるWebデザインって？
 3. コスパの良いWebデザインって？
 4. コーディング時に悩むWebデザインって？
 5. Webのデザインに役立つツールの紹介

6. 印刷物とWeb
 媒体の違いによるメリットについて
 印刷物
 Web

7. 印刷物とWeb
 媒体の違いによるメリットについて
 印刷物
 • 表示媒体が一定なので 緻密なデザインができる • 一度に全体の情報を 読み取ることができる • 質感を表現できる Web
 • 公開後の内容変更が 低コストでできる • 掲載する情報量に 限界が無い • 効果測定・計測が 低コストでできる
8. 効果測定・
 計測のしやすさが
 Webの最大のメリット
 Webでは、サイト公開後に
 ユーザーの動向・性質を計測し、
 ユーザーに合わせてコンテンツを
 増減・変更させることができる。

9. どんな情報が計測できるの？
 閲覧数 属性 使用デバイス ヒートマップ
10. どんな情報が計測できるの？
 閲覧数 属性 使用デバイス ヒートマップ GoogleAnalytics のみの使用で可能 その他のツール を使用して可能 例 : https://mieru-ca.com/heatmap/what-is-heatmap/
11. ところで、現在のネット利用者の
 デバイスの割合は？
 スマートフォンの普及率が上回ってそうですが、PCとSP で何%くらいの割合でしょうか？ 

12. スマホ : 94%
 PC　 : 43%
 スマホ+PC : 41%
 スマホのみ : 53%
 PCのみ : 2%
 出典: LINE株式会社 
 〈調査報告〉インターネットの利用環境 定点調査（2021年上期） 
 https://linecorp.com/ja/pr/news/ja/2021/3830

13. >
 スマホ利用者 94% : PCのみの利用者 2%
 

14. >
 スマホ利用者 94% : PCのみの利用者 2%
 
 スマホファーストのデザインを
 最適化した方がより良い成果を得やすい
 このように、サイトの利用状況、性質を考慮することによって、 サイトのゴールである 「お問い合わせ増加」「認知の増加」 などを狙いやすくなります。 

15. アジェンダ
 1. 印刷物とWeb 媒体の違いによるメリットについて
 2. ゴールを狙えるWebデザインって？
 3. コスパの良いWebデザインって？
 4. コーディング時に悩むWebデザインって？
 5. Webのデザインに役立つツールの紹介

16. 引用 :「デジタルマーケティングの定石」 p.146 ゴールを狙えるWebデザインって？
 ユーザーのニーズに最速で答えて
 ユーザーを売上げにつながるアクションに導くデザイン

17. 引用 :「デジタルマーケティングの定石」 p.146 ゴールを狙えるWebデザインって？
 ユーザーのニーズに最速で答えて
 ユーザーを売上げにつながるアクションに導くデザイン
 • サイト内を回遊させる
 • 熱意のある文言を
 たくさん読んでもらう

18. 引用 :「デジタルマーケティングの定石」 p.146 ゴールを狙えるWebデザインって？
 ユーザーのニーズに最速で答えて
 ユーザーを売上げにつながるアクションに導くデザイン
 • サイト内を回遊させる
 • 熱意のある文言を
 たくさん読んでもらう

19. 引用 :「デジタルマーケティングの定石」 p.146 ゴールを狙えるWebデザインって？
 ユーザーのニーズに最速で答えて
 ユーザーを売上げにつながるアクションに導くデザイン
 • サイト内を回遊させる
 • 熱意のある文言を
 たくさん読んでもらう
 「まずはご相談」「お問い合わせ」
 「無料トライアル」などで顧客リストを獲得
 ゴールへ直結させる

20. ユーザーが購入するまでのどの状態(フェーズ)かによって
 その時のゴール(目的)が変わります。
 日常生活フェーズ 　　 初回購入フェーズ 　継続購入フェーズ ゴール (目的) 状態
21. ユーザーが購入するまでのどの状態(フェーズ)かによって
 その時のゴール(目的)が変わります。
 日常生活フェーズ 　　 初回購入フェーズ 　継続購入フェーズ まだ企業・商品を 知らない状態 ゴール (目的) 認知されること 例) ••••といえば▪▪▪▪ 状態
22. ユーザーが購入するまでのどの状態(フェーズ)かによって
 その時のゴール(目的)が変わります。
 日常生活フェーズ 　　 初回購入フェーズ 　継続購入フェーズ まだ企業・商品を 知らない状態 ゴール (目的) 認知されること 例) ••••といえば▪▪▪▪ 新規顧客の アポイント・来店予約を 獲得すること 企業・商品に関するニーズが 発生した状態 状態
23. ユーザーが購入するまでのどの状態(フェーズ)かによって
 その時のゴール(目的)が変わります。
 日常生活フェーズ 　　 初回購入フェーズ 　継続購入フェーズ まだ企業・商品を 知らない状態 ゴール (目的) 認知されること 例) ••••といえば▪▪▪▪ 新規顧客の アポイント・来店予約を 獲得すること 企業・商品に関するニーズが 発生した状態 状態 既存顧客の アポイント・来店予約を 獲得すること 商品を継続的に購入する状態 引用 : 「デジタルマーケティングの定石」 p.123 p.205
24. アジェンダ
 1. 印刷物とWeb 媒体の違いによるメリットについて
 2. ゴールを狙えるWebデザインって？
 3. コスパの良いWebデザインって？
 4. コーディング時に悩むWebデザインって？
 5. Webのデザインに役立つツールの紹介

25. コスパの良いWebデザインって？
 効率(コストパフォーマンス)のいいデザイン
 ||
 工数が少ないけどユーザーがアクションを起こしやすいデザイン
 アニメーションや長々とした文言は
 購入や問い合わせなどに効果がない
 参照:デジタルマーケティングの定石
27. 手が混んでるけど
 ユーザーがアクションを
 起こしにくい
 デザイン
 工数が少ないけど
 ユーザーがアクションを
 起こしやすい
 デザイン

28. 登録率が高いサイトはどっち？
 サイト : 人材紹介サイト ゴール : 転職志望者の登録 ・求人情報の掲載なし ・条件絞り込みで求人情報を探せる 引用 :「デジタルマーケティングの定石」 p.16
29. 登録率が高いサイトはどっち？
 サイト : 人材紹介サイト ゴール : 転職志望者の登録 ・求人情報の掲載なし ・条件絞り込みで求人情報を探せる 引用 :「デジタルマーケティングの定石」 p.16 A案の方が情報量が少ないにもかかわらず、 B案と比べて2倍以上の登録数になります。
30. アジェンダ
 1. 印刷物とWeb 媒体の違いによるメリットについて
 2. ゴールを狙えるWebデザインって？
 3. コスパの良いWebデザインって？
 4. コーディング時に悩むWebデザインって？
 5. Webのデザインに役立つツールの紹介

31. ……etc
 コーディング時に悩むWebデザインって？
 • HTML構造が変わる 
 • 要素が違うものにまるっきり入れ替わる 
 • 絶妙にデザインが変わる 
 レスポンシブ
 • 有料のフォントが使用されている 
 => テキストをアウトラインから画像化するので工数UP 
 • フォントサイズが10pxよりも小さい => chromeの表現できる文字サイズは最小10px 
 • フォントサイズに揺れがある 
 フォント
 • 微妙に違う色が沢山ある 
 カラー

32. じゃあ、 コーディングの時に
 知っておきたいことは？

33. コーディングの時に知っておきたいこと
 
 レスポンシブ • 各要素のレイアウトの変化 • メインビジュアルのレイアウトの変化 カラー • 使用カラーの一覧 フォント • Webフォントor一般フォントの中から使用フォントを指定 状態変化 • アニメーションの指定(スライダーなど) • 要素の状態変化(ボタンのホバー時など指定があれば )
34. コーディングの時に知っておきたいこと : レスポンシブ時
 各要素の変化 • 各要素のレイアウトの変化 PC TB SP https://jsfiddle.net/shuto0125/ktuh5Ljp/89/ ？ ？
35. コーディングの時に知っておきたいこと : レスポンシブ時
 各要素の変化 • 各要素のレイアウトの変化 PC TB SP https://jsfiddle.net/shuto0125/ktuh5Ljp/89/ ？
36. コーディングの時に知っておきたいこと : レスポンシブ時
 各要素の変化 • 各要素のレイアウトの変化 PC TB SP https://jsfiddle.net/shuto0125/ktuh5Ljp/89/
37. コーディングの時に知っておきたいこと : レスポンシブ時
 メインビジュアルのレイアウトの変化 PC SP 支給されているデザインが PC版のみだと、 SP版はコーダーが考えることになる ？
38. コーディングの時に知っておきたいこと : レスポンシブ時
 メインビジュアルのレイアウトの変化 PC SP 支給されているデザインが PC版のみだと、 SP版はコーダーが考えることになる 悪くはないけど、ちょっとメイン ビジュアルの文字が小さいような、、
39. コーディングの時に知っておきたいこと : カラー
 使用カラーの一覧 参考: Free Style Guide Template (Ai Format) https://dribbble.com/shots/1746306-Free-Style-Guide-Template-5-Pages-Total
40. コーディングの時に知っておきたいこと : フォント Webフォント or 一般フォントの中から 使用フォントを指定 • Windows, Macなどの一般的なOSに 搭載されているフォントから選ぶ • Google Fonts などのフリーフォント から選ぶ 参考: https://fonts.google.com/
41. コーディングの時に知っておきたいこと : 状態変化
 アニメーションの指定(スライダーなど) 参考: Swiper https://swiperjs.com/demos#effect-fade
42. コーディングの時に知っておきたいこと : 状態変化
 要素の状態変化 (ボタンのホバー時など、指定があれば ) スタイルガイドの例: https://tantan.work/2021/06/18/style-guide-ui-pattern/
43. アジェンダ
 1. 印刷物とWeb 媒体の違いによるメリットについて
 2. ゴールを狙えるWebデザインって？
 3. コスパの良いWebデザインって？
 4. コーディング時に悩むWebデザインって？
 5. Webのデザインに役立つツールの紹介

44. Webのデザインに役立つツールの紹介
 デザインの共有、サイトのプロトタイピング Adobe XD • デザイン〜プロトタイピングが可能 • 基本無料 参考: https://www.adobe.com/jp/products/xd.html figma • デザイン〜プロトタイピングが可能 • 基本無料 • Webブラウザで操作ができる • デザインのバージョン管理 (有料版) 参考:https://www.figma.com/ 　　 https://ferret-plus.com/13195
45. コーディングする前の サイトのプロトタイプを クライアントに共有して 手戻りを減らすことができる https://www.figma.com/proto/yP7RKwpFS54colfLqPhxoO/d emo?node-id=2%3A2&starting-point-node-id=2%3A2
46. Webのデザインに役立つツールの紹介
 Webデザインアイデアレシピ 参考 : https://wdidearecipe.com/design-list/
47. 参考文献など
 • デジタルマーケティングの定石 なぜマーケターは「成果の出ない施策」を繰り返すのか? 
 • Google: SEOの初心者向けガイド 
 • ヒートマップの仕組みと活用方法 
 • 〈調査報告〉インターネットの利用環境 定点調査（2021年上期） 
 • 小規模WEB制作のための簡易的なスタイルガイド 
 • figma[デザイン/プロトタイプ] 
 • Adobe XD[デザイン/プロトタイプ] 
 • GoogleFonts
 • Webデザインアイデアレシピ 
 

48. ありがとうございました！