限られた予算で 最大限の成果を出すために 実践している 「設計」と「お金」の話 / Design and Budget

2019年10月22日（火・祝）新潟県長岡市で開催された WordCamp Niigata 2019 で発表したスライドです（事例については非公開）。

Transcript

2. よつばデザイン 後藤賢司 ݶΒΕͨ༧ࢉͰ ࠷େݶͷ੒ՌΛग़ͨ͢Ίʹ ࣮ફ͠ ͍ͯΔઃܭ
   ͱ
   ͓ۚ
   ͷ࿩ J1IPOFͰࡱӨ
3. よつばデザイン 後藤賢司 デザインしないデザイナー。東京と⼤分の2拠点で活動。
 「企画提案・設計」が得意。中⼩企業アドバイザー。
4. KPI・⽬標必達の 動画マーケティング 成功の最新メソッド 村岡 雄史 (著), 本橋 へいすけ (著), 後藤 賢司 (著), 染⾕ 昌利 (著) エムディエヌコーポレーション 2019
 10/28
5. webクリエイターのための情報交換所 ウェブ制作に関する情報交換を⽬的としたFacebookグループ
 参加⼈数 8600⼈〜。各地でウェブ情報のまとめセミナーを開催。
6. あんこ好き
 こしあん・つぶあんどちらもOK ⽩あんはNG
7. あんこ飲み
8. このセッションは ⼩規模事業者や中⼩企業の ウェブサイトの設計やお⾦がテーマ。
 ⼩規模でも効くウェブ戦略のお話です。
 ※予算や規模が変われば考え⽅や価値観も変わります。ご了承ください。
 スライドは後⽇公開します。
9. 制作者＝制作会社・制作者
 事業者＝制作依頼主・企業
 利⽤者＝ウェブサイト訪問者
     エンドユーザー
10. お⾦のお話
11. 期間と予算があれば何でも出来る
12. 早く 安く 確実に
13. 中⼩企業の予算感
14. 予算が限られてるし 切⽻詰まってる場合が多い
15. 限られた予算でどうにかできないか？
16. 制作で費⽤がかかる部分はどこか？
17. ⼈件費（作業費）
18. ⼯数の影響が ⼤きい ワークフロー（制作の⼯程） 䩧 ﺮ さ ﻜ ﺨ ﻾ ＾ ＆ Ｂ ３ 䲿 周 ＀ ﻯ ３ Ｉ ． Ｂ 䲿 周 ２ ！ ﻯ ＾ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ ｆ ２ ﻮ ＾ ﻻ ٥ 㹋 鄲
19. 素材等を活⽤して
 ⼯数を減らす 素材・テンプレートを活⽤する
 ※⾃分で全部作らない 䩧 ﺮ さ ﻜ ﺨ ﻾ ＾ ＆ Ｂ ３ 䲿 周 ＀ ﻯ ３ Ｉ ． Ｂ 䲿 周 ２ ！ ﻯ ＾ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ ｆ ２ ﻮ ＾ ﻻ ٥ 㹋 鄲
20. 世界にただ1つの
 オリジナルデザインや
 独⾃のシステムでなければならない というケースは希 （ファッション・スポーツ・若年層向けは規模によるが必要なケースがある）
21. 凝った仕組みは
 使われないケースもある
22. 予算が少なければ 段階的にウェブサイトを 成⻑させれば良い
23. 段階的な成⻑計画 プレサイト サイトver.1 サイト オープン サイトver.2 バージョン アップ 予算から計画を⽴てる
24. WordPressは
 テーマを変えれば外観が変わる。
 コンテンツを引き継げる作り。
 CMSの利点をうまく使う
25. 制作者は WordPress Codex ⽇本語版 を参照しましょう https://wpdocs.osdn.jp
26. ⾒積もりは細かく具体的に
 何をやるか事業者に伝える
 （⼩さな事も掲載）
27. 企画・設計 ディレクション（進⾏管理）
 WordPressインストール プラグイン選定・設定 テーマカスタマイズ
 テンプレート作成 トップページデザイン
 基本デザイン
 デザインパーツ作成
 画像加⼯ お問い合わせフォーム（項⽬数）
 Google Analytics
 Google Search Console
 Facebook対応
 Twitter対応
 打ち合わせ回数（◦回） …その他いろいろ
28. 事業者は納得出来れば費⽤を出す。
 制作側は作業してるからと考えるより 事業者がどんな結果を求めているかを
 意識するとうまくいきやすい
29. 最初に細かい説明を丁寧に。
 追加内容などは
 都度⾒積を発⾏する。
30. 事前に費⽤をいただく
 （半額あるいは全額）
31. 原稿遅れなどの進⾏遅延には
 費⽤がかかる事を伝える
 （レストランの予約みたいなもの）
32. 打ち合わせ
 ノウハウや専⾨性の⾼い情報や
 専⾨家としてのアドバイスは有料。
 （ケースバイケース）
33. 事業者は制作業界の事を
 良くも悪くも知らない。
 説明は⼤事
34. 制作者が
 事業者⽬線で考えれば
 トラブルは起きにくい
35. 安売りはしない。
 WordPressでのサイト制作を
 始めたばかりの⼈は
 制作料⾦を安くしがちですが
 理解が深まれば後悔します
36. 設計
37. ウェブサイトはコミュニケーションツール
38. 基礎設計に⼒を⼊れる
39. 検索エンジンにも ⼈にも理解される設計 ⾒た⽬だけでない論理的な構造
40. 構造化を意識した設計 カテゴリー
 タグ
 カスタム投稿 カスタムタクソノミー
41. よく使⽤するカスタム投稿 ブログ 実績 よくある質問 カスタム分類もそれぞれに追加
42. Custom Post Type UI https://ja.wordpress.org/plugins/custom-post-type-ui/ カスタム投稿や カスタムタクソノミーを 作成できるプラグイン。 プラグインで実装すれば
 テーマを変更しても コンテンツを維持出来る。
43. シンプルな構造で 永続性のある設計 ※引き継ぎしやすい
44. カスタムフィールド導⼊は慎重に
45. WordPressのお作法を理解していない
 オレオレカスタマイズは
 リニューアル毎に⼤きく費⽤がかかる。 事業者に費⽤を負担させる
 価値が本当にある？
46. 何度リニューアルしても コンテンツを維持出来れば 年数が経つほどコストを抑えられる。 数年レベルで⾒れば 何⼗万〜何百万の差額になる
47. カスタマイズについて 検索でブログ記事を参照は
 誤った情報に
 たどり着きやすい。 Codexを参照しましょう。 基礎構造やお作法を知ると トラブルに強くなります
50. Theme Handbook https://developer.wordpress.org/themes/
51. テーマ作成の参考資料 WordPressテーマの作り⽅ 2019 私のベストプラクティス https://speakerdeck.com/chiilog/ wordpresstemafalsezuo-rifang-2019-si- falsebesutopurakuteisu
52. 制作者で
 オリジナルテーマを作るなら
 デフォルトテーマの コードを読むのオススメ
53. 個⼈的には既存のテーマや
 テーマビルダーの活⽤を オススメします。
 ※ライセンス守ってるものを使いましょう https://japan.wordcamp.org/for-organizers/gpl-primer/
54. 検索エンジンの評価軸
55. Google Japan Blog
 SEO関連情報は
 まずここを読みましょう https://japan.googleblog.com/
56. 利⽤者の求めている答えを
 ウェブサイトが
 返してあげられているか？
57. ⽐較検討した結果 選んでもらえるか？
58. コンテンツ作成は
 利⽤者の⼼理を⼤事にする｡
 実際のコミュニケーションと同じ。 ⼩⼿先技は効かない
59. ウェブサイトで効くコンテンツ
60. よくある質問
61. よくあるパターン アコーディオンで展開 カスタム投稿タイプで作成
 1質問＝1投稿 質問⼀覧は
 カテゴリーで分類
62. よくある質問はカスタム投稿で作成
 質問はひとつにつき1投稿 質問カテゴリーを設けて
 カテゴリー毎に⼀覧表⽰
63. 事業者に
 「質問ください」は出てこない。
 制作者側から提案する
64. 問い合わせメール⽂を そのまま質問のタイトルに
65. Yahoo知恵袋を活⽤。
 初⼼者の質問には 価値がある。 「◦◦とは」はコン テンツとして強い
66. よくある質問で問題が解決する。
 利⽤者の満⾜度・信頼度も上がるし
 検索エンジンからも評価される
67. コンテンツ内容
68. タイトルや本⽂は
 5Ｗ2Ｈを徹底する
69. 5W2H
 情報を論理的に分類して まとめる⼿法
 • いつ • どこで • 誰が • 何を • どうする • なぜ • いくらで
70. • いつ • どこで • 誰が • 何を • どうする • なぜ • いくらで 2019年10⽉22⽇（⽕・祝） 新潟県⻑岡市アオーレ⻑岡 WordCamp Niigata 実⾏委員が WordCamp Niigata 2019を 開催します WordPress を理解し知って欲しい 1000円
71. これぐらいは知ってるだろうを 省略しない
72. 誰でも理解できるような 伝え⽅を⼼がける ⼦供でもお年寄りでもよその⼈でも

73. テキストや写真で伝える ＋
 動画で伝える
74. ウェブサイトで動画を扱う
75. ウェブ動画は印象や認識や信頼性を ⾼めるために使う
76. 映画のような作品
77. 映像のプロではない
 ウェブ制作者や事業者でも作れる動画はある
78. 動画はスマホでも作成出来る
79. 動画の種類
80. ブランドイメージ
 （ブランド・地域PR） ライブ動画
 （ライブコマース・セミナー中継） 対談動画（インタビュー） 学習動画（Eラーニング） 説明動画（解説動画） レビュー動画（体験動画） VLOG
 （個⼈の発する⽇記・雑記動画） 作品動画
 （ストーリー性のある動画） 
81. 動画の⽬的
82. ウェブサイトで使う動画は
 利⽤者の⾏動の⼿助けになるもの
83. 業種等で利⽤者が解決したい事は様々
84. 利⽤者の求めるコンテンツを提供するのは 従来のコンテンツ作りと同じ考え⽅
85. ⾔葉では伝えにくい事を動画で伝える
86. ウェブサイトで動画を使う メインビジュアル 事業紹介 インタビュー・挨拶
 How to（説明） アクセス・地図
87. 動画はYouTubeにアップして埋込を推奨
 （レンタルサーバー停⽌のリスクを防ぐ） YouTube内での視聴も期待できる YouTube動画は検索結果に表⽰される
 （動画とサムネイル）
88. YouTubeにアップロードする際の
 動画フォーマットはmp4推奨。サイズFHD以上。
 タイトルは24⽂字以内でわかるように。
 サムネイルはバナーのような役割（重要）。
 タグは関連動画表⽰などに関連する。 施設内BGMなど著作権の判断が下されるので注意
89. 動画編集の際の注意事項。
 原則3秒で切り換える同じシーンを流さない（離脱防⽌）。
 余計な間は作らない（細かくカット推奨）。
 字幕が読めるのは1秒間に5⽂字。
 動画素材は綺麗に撮る（後から修正しづらい）。
 基本的に⾒る⼈は興味が無いを前提に
 （上司の⼦供の発表会のビデオ
 を無理⽮理⾒せられるようなぐらいの感覚）。 編集アプリは無料のものでもOK
90. Elementor等のプラグインで 動画を背景に埋め込む
91. モバイルでは
 YouTubeプレーヤー埋め込みか 画像やスライドまたはGifアニメ
92. 単純接触効果
 ⼈は接触回数が多いと 親近感を覚える
 （芸能⼈と同じ）
93. 静⽌画やスライダーよりも伝わりやすい
 動画をうまく活⽤しましょう
94. SNSで動画を使⽤する場合 最⼤120分。ファイルサイズ最⼤4.0GB Facebook Instagram Twitter 最⼤60秒 最⼤2分20秒 Google
 マイビジネス 最⼤ 30 秒。ファイルサイズ 最⼤ 100 MB 解像度: 720p 以上
95. （独り⾔）
 ウェブサイトで担ってたものを サイト内外問わず
 全て動画化しても良いのでは…
 （⾒せ⽅に⼯夫は必要）
96. 新しい形のワークフロー
97. 従来のワークフロー 䩧 ﺮ さ ﻜ ﺨ ﻾ ＾ ＆ Ｂ ３ 䲿 周 ＀ ﻯ ３ Ｉ ． Ｂ 䲿 周 ２ ！ ﻯ ＾ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ ｆ ２ ﻮ ＾ ﻻ ٥ 㹋 鄲
98. 䩧 ﺮ さ ﻜ ﺨ ＀ ﻯ ３ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ 䩧 ﺮ さ ﻜ ﺨ ﻾ ＾ ＆ Ｂ ３ 䲿 周 ＀ ﻯ ３ Ｉ ． Ｂ 䲿 周 ２ ！ ﻯ ＾ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ ｆ ２ ﻮ ＾ ﻻ ٥ 㹋 鄲 打ち合わせのやり⽅から
 テンプレート活⽤など
 多⽅⾯からの作業⼯程や
 価値観を⾒直す必要がある。
 制作を依頼する側の理解も必要
99. テーマ作成
 デザイン作成
 プロトタイプ作成
 動画作成 基礎設計
 写真撮影
 動画撮影 （追加撮影） 䩧 ﺮ さ ﻜ ﺨ ＀ ﻯ ３ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ ⼩規模事業者案件で有効。全てのケースには当てはまらない。
 担当者が複数⼈いる企業などには向かない。作りきりではなく運⽤や保守前提 テーマ作成やデザイン等は
 Elementor Proを使⽤するケースが多い
100. YouTube、5Ｇ、
 Googleマイビジネス等、 ウェブサイトの役割や
 ⽴ち位置も変化している。
 利⽤者が求めるもの？
 情報接点や経路を意識する
 必要がある。
 常にアップデートを 5G
101. ެࣜ৘ใΛࢀর ެࣜ৘ใΛࢀর ৘ใઃܭͱαΠ τߏ଄ ৘ใઃܭͱαΠ τߏ଄ ར༻ऀͷ໰୊ղܾ ར༻ऀͷ໰୊ղܾ ࣄۀͷ޿ࠂ༧ࢉӡ༻ΛҰॹʹߟ͑Δ ࣄۀͷ޿ࠂ༧ࢉӡ༻ΛҰॹʹߟ͑Δ ఻͑ΔखஈͷΞοϓσʔτ ఻͑ΔखஈͷΞοϓσʔτ ·ͱΊ
102. ありがとうございました。
 11/2 WordCamp Tokyo
 12/21 CSS Nite Shift13