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

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

54be00e5fe47940c8295b2092a7f5733?s=47 kenji goto
October 22, 2019

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

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

54be00e5fe47940c8295b2092a7f5733?s=128

kenji goto

October 22, 2019
Tweet

Transcript

  1. None
  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. ⼯数の影響が ⼤きい ワークフロー(制作の⼯程) 䩧 ﺮ さ ﻜ ﺨ ﻾ ^

    & B 3 䲿 周 ＀ ﻯ 3 I . B 䲿 周 2 ! ﻯ ^ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ f 2 ﻮ ^ ﻻ ٥ 㹋 鄲
  19. 素材等を活⽤して
 ⼯数を減らす 素材・テンプレートを活⽤する
 ※⾃分で全部作らない 䩧 ﺮ さ ﻜ ﺨ ﻾

    ^ & B 3 䲿 周 ＀ ﻯ 3 I . B 䲿 周 2 ! ﻯ ^ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ f 2 ﻮ ^ ﻻ ٥ 㹋 鄲
  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を参照しましょう。 基礎構造やお作法を知ると トラブルに強くなります

  48. None
  49. None
  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. タイトルや本⽂は
 5W2Hを徹底する

  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. 従来のワークフロー 䩧 ﺮ さ ﻜ ﺨ ﻾ ^ & B

    3 䲿 周 ＀ ﻯ 3 I . B 䲿 周 2 ! ﻯ ^ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ f 2 ﻮ ^ ﻻ ٥ 㹋 鄲
  98. 䩧 ﺮ さ ﻜ ﺨ ＀ ﻯ 3 䲿 周

    然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ 䩧 ﺮ さ ﻜ ﺨ ﻾ ^ & B 3 䲿 周 ＀ ﻯ 3 I . B 䲿 周 2 ! ﻯ ^ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ f 2 ﻮ ^ ﻻ ٥ 㹋 鄲 打ち合わせのやり⽅から
 テンプレート活⽤など
 多⽅⾯からの作業⼯程や
 価値観を⾒直す必要がある。
 制作を依頼する側の理解も必要
  99. テーマ作成
 デザイン作成
 プロトタイプ作成
 動画作成 基礎設計
 写真撮影
 動画撮影 (追加撮影) 䩧 ﺮ

    さ ﻜ ﺨ ＀ ﻯ 3 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ Ꟛ ⼩規模事業者案件で有効。全てのケースには当てはまらない。
 担当者が複数⼈いる企業などには向かない。作りきりではなく運⽤や保守前提 テーマ作成やデザイン等は
 Elementor Proを使⽤するケースが多い
  100. YouTube、5G、
 Googleマイビジネス等、 ウェブサイトの役割や
 ⽴ち位置も変化している。
 利⽤者が求めるもの?
 情報接点や経路を意識する
 必要がある。
 常にアップデートを 5G

  101. ެࣜ৘ใΛࢀর ެࣜ৘ใΛࢀর ৘ใઃܭͱαΠ τߏ଄ ৘ใઃܭͱαΠ τߏ଄ ར༻ऀͷ໰୊ղܾ ར༻ऀͷ໰୊ղܾ ࣄۀͷ޿ࠂ༧ࢉӡ༻ΛҰॹʹߟ͑Δ ࣄۀͷ޿ࠂ༧ࢉӡ༻ΛҰॹʹߟ͑Δ

    ఻͑ΔखஈͷΞοϓσʔτ ఻͑ΔखஈͷΞοϓσʔτ ·ͱΊ
  102. ありがとうございました。
 11/2 WordCamp Tokyo
 12/21 CSS Nite Shift13