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

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

kenji goto
October 22, 2019

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

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

kenji goto

October 22, 2019
Tweet

More Decks by kenji goto

Other Decks in Design

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