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

by kenji goto

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

よつばデザイン後藤賢司 ݶΒΕͨ༧ࢉͰ ࠷େݶͷ੒ՌΛग़ͨ͢Ίʹ ࣮ફ͠ ͍ͯΔઃܭ ͱ ͓ۚ ͷ࿩ J1IPOFͰࡱӨ

Slide 3

Slide 3 text

よつばデザイン後藤賢司デザインしないデザイナー。東京と⼤分の2拠点で活動。  「企画提案・設計」が得意。中⼩企業アドバイザー。

Slide 4

Slide 4 text

KPI・⽬標必達の動画マーケティング成功の最新メソッド村岡雄史 (著), 本橋へいすけ (著), 後藤賢司 (著), 染⾕昌利 (著) エムディエヌコーポレーション 2019  10/28

Slide 5

Slide 5 text

webクリエイターのための情報交換所ウェブ制作に関する情報交換を⽬的としたFacebookグループ  参加⼈数 8600⼈〜。各地でウェブ情報のまとめセミナーを開催。

Slide 6

Slide 6 text

あんこ好き  こしあん・つぶあんどちらもOK ⽩あんはNG

Slide 7

Slide 7 text

あんこ飲み

Slide 8

Slide 8 text

このセッションは⼩規模事業者や中⼩企業のウェブサイトの設計やお⾦がテーマ。  ⼩規模でも効くウェブ戦略のお話です。  ※予算や規模が変われば考え⽅や価値観も変わります。ご了承ください。  スライドは後⽇公開します。

Slide 9

Slide 9 text

制作者＝制作会社・制作者  事業者＝制作依頼主・企業  利⽤者＝ウェブサイト訪問者  エンドユーザー

Slide 10

Slide 10 text

お⾦のお話

Slide 11

Slide 11 text

期間と予算があれば何でも出来る

Slide 12

Slide 12 text

早く安く確実に

Slide 13

Slide 13 text

中⼩企業の予算感

Slide 14

Slide 14 text

予算が限られてるし切⽻詰まってる場合が多い

Slide 15

Slide 15 text

限られた予算でどうにかできないか？

Slide 16

Slide 16 text

制作で費⽤がかかる部分はどこか？

Slide 17

Slide 17 text

⼈件費（作業費）

Slide 18

Slide 18 text

⼯数の影響が⼤きいワークフロー（制作の⼯程）䩧 ﺮ さ ﻜ ﺨ ﻾ ＾＆Ｂ３䲿周＀ ﻯ ３Ｉ．Ｂ䲿周２！ ﻯ ＾䲿周然钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ ｆ２ ﻮ ＾ ﻻ ٥ 㹋鄲

Slide 19

Slide 19 text

素材等を活⽤して  ⼯数を減らす素材・テンプレートを活⽤する  ※⾃分で全部作らない䩧 ﺮ さ ﻜ ﺨ ﻾ ＾＆Ｂ３䲿周＀ ﻯ ３Ｉ．Ｂ䲿周２！ ﻯ ＾䲿周然钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ ｆ２ ﻮ ＾ ﻻ ٥ 㹋鄲

Slide 20

Slide 20 text

世界にただ1つの  オリジナルデザインや  独⾃のシステムでなければならないというケースは希（ファッション・スポーツ・若年層向けは規模によるが必要なケースがある）

Slide 21

Slide 21 text

凝った仕組みは  使われないケースもある

Slide 22

Slide 22 text

予算が少なければ段階的にウェブサイトを成⻑させれば良い

Slide 23

Slide 23 text

段階的な成⻑計画プレサイトサイトver.1 サイトオープンサイトver.2 バージョンアップ予算から計画を⽴てる

Slide 24

Slide 24 text

WordPressは  テーマを変えれば外観が変わる。  コンテンツを引き継げる作り。  CMSの利点をうまく使う

Slide 25

Slide 25 text

制作者は WordPress Codex ⽇本語版を参照しましょう https://wpdocs.osdn.jp

Slide 26

Slide 26 text

⾒積もりは細かく具体的に  何をやるか事業者に伝える  （⼩さな事も掲載）

Slide 27

Slide 27 text

企画・設計ディレクション（進⾏管理）  WordPressインストールプラグイン選定・設定テーマカスタマイズ  テンプレート作成トップページデザイン  基本デザイン  デザインパーツ作成  画像加⼯お問い合わせフォーム（項⽬数）  Google Analytics  Google Search Console  Facebook対応  Twitter対応  打ち合わせ回数（○回） …その他いろいろ

Slide 28

Slide 28 text

事業者は納得出来れば費⽤を出す。  制作側は作業してるからと考えるより事業者がどんな結果を求めているかを  意識するとうまくいきやすい

Slide 29

Slide 29 text

最初に細かい説明を丁寧に。  追加内容などは  都度⾒積を発⾏する。

Slide 30

Slide 30 text

事前に費⽤をいただく  （半額あるいは全額）

Slide 31

Slide 31 text

原稿遅れなどの進⾏遅延には  費⽤がかかる事を伝える  （レストランの予約みたいなもの）

Slide 32

Slide 32 text

打ち合わせ  ノウハウや専⾨性の⾼い情報や  専⾨家としてのアドバイスは有料。  （ケースバイケース）

Slide 33

Slide 33 text

事業者は制作業界の事を  良くも悪くも知らない。  説明は⼤事

Slide 34

Slide 34 text

制作者が  事業者⽬線で考えれば  トラブルは起きにくい

Slide 35

Slide 35 text

安売りはしない。  WordPressでのサイト制作を  始めたばかりの⼈は  制作料⾦を安くしがちですが  理解が深まれば後悔します

Slide 36

Slide 36 text

設計

Slide 37

Slide 37 text

ウェブサイトはコミュニケーションツール

Slide 38

Slide 38 text

基礎設計に⼒を⼊れる

Slide 39

Slide 39 text

検索エンジンにも⼈にも理解される設計⾒た⽬だけでない論理的な構造

Slide 40

Slide 40 text

構造化を意識した設計カテゴリー  タグ  カスタム投稿カスタムタクソノミー

Slide 41

Slide 41 text

よく使⽤するカスタム投稿ブログ実績よくある質問カスタム分類もそれぞれに追加

Slide 42

Slide 42 text

Custom Post Type UI https://ja.wordpress.org/plugins/custom-post-type-ui/ カスタム投稿やカスタムタクソノミーを作成できるプラグイン。プラグインで実装すれば  テーマを変更してもコンテンツを維持出来る。

Slide 43

Slide 43 text

シンプルな構造で永続性のある設計 ※引き継ぎしやすい

Slide 44

Slide 44 text

カスタムフィールド導⼊は慎重に

Slide 45

Slide 45 text

WordPressのお作法を理解していない  オレオレカスタマイズは  リニューアル毎に⼤きく費⽤がかかる。事業者に費⽤を負担させる  価値が本当にある？

Slide 46

Slide 46 text

何度リニューアルしてもコンテンツを維持出来れば年数が経つほどコストを抑えられる。数年レベルで⾒れば何⼗万〜何百万の差額になる

Slide 47

Slide 47 text

カスタマイズについて検索でブログ記事を参照は  誤った情報に  たどり着きやすい。 Codexを参照しましょう。基礎構造やお作法を知るとトラブルに強くなります

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Theme Handbook https://developer.wordpress.org/themes/

Slide 51

Slide 51 text

テーマ作成の参考資料 WordPressテーマの作り⽅ 2019 私のベストプラクティス https://speakerdeck.com/chiilog/ wordpresstemafalsezuo-rifang-2019-si- falsebesutopurakuteisu

Slide 52

Slide 52 text

制作者で  オリジナルテーマを作るなら  デフォルトテーマのコードを読むのオススメ

Slide 53

Slide 53 text

個⼈的には既存のテーマや  テーマビルダーの活⽤をオススメします。  ※ライセンス守ってるものを使いましょう https://japan.wordcamp.org/for-organizers/gpl-primer/

Slide 54

Slide 54 text

検索エンジンの評価軸

Slide 55

Slide 55 text

Google Japan Blog  SEO関連情報は  まずここを読みましょう https://japan.googleblog.com/

Slide 56

Slide 56 text

利⽤者の求めている答えを  ウェブサイトが  返してあげられているか？

Slide 57

Slide 57 text

⽐較検討した結果選んでもらえるか？

Slide 58

Slide 58 text

コンテンツ作成は  利⽤者の⼼理を⼤事にする｡  実際のコミュニケーションと同じ。⼩⼿先技は効かない

Slide 59

Slide 59 text

ウェブサイトで効くコンテンツ

Slide 60

Slide 60 text

よくある質問

Slide 61

Slide 61 text

よくあるパターンアコーディオンで展開カスタム投稿タイプで作成  1質問＝1投稿質問⼀覧は  カテゴリーで分類

Slide 62

Slide 62 text

よくある質問はカスタム投稿で作成  質問はひとつにつき1投稿質問カテゴリーを設けて  カテゴリー毎に⼀覧表⽰

Slide 63

Slide 63 text

事業者に  「質問ください」は出てこない。  制作者側から提案する

Slide 64

Slide 64 text

問い合わせメール⽂をそのまま質問のタイトルに

Slide 65

Slide 65 text

Yahoo知恵袋を活⽤。  初⼼者の質問には価値がある。「○○とは」はコンテンツとして強い

Slide 66

Slide 66 text

よくある質問で問題が解決する。  利⽤者の満⾜度・信頼度も上がるし  検索エンジンからも評価される

Slide 67

Slide 67 text

コンテンツ内容

Slide 68

Slide 68 text

タイトルや本⽂は  5Ｗ2Ｈを徹底する

Slide 69

Slide 69 text

5W2H  情報を論理的に分類してまとめる⼿法  • いつ • どこで • 誰が • 何を • どうする • なぜ • いくらで

Slide 70

Slide 70 text

• いつ • どこで • 誰が • 何を • どうする • なぜ • いくらで 2019年10⽉22⽇（⽕・祝）新潟県⻑岡市アオーレ⻑岡 WordCamp Niigata 実⾏委員が WordCamp Niigata 2019を開催します WordPress を理解し知って欲しい 1000円

Slide 71

Slide 71 text

これぐらいは知ってるだろうを省略しない

Slide 72

Slide 72 text

誰でも理解できるような伝え⽅を⼼がける⼦供でもお年寄りでもよその⼈でも 

Slide 73

Slide 73 text

テキストや写真で伝える＋  動画で伝える

Slide 74

Slide 74 text

ウェブサイトで動画を扱う

Slide 75

Slide 75 text

ウェブ動画は印象や認識や信頼性を⾼めるために使う

Slide 76

Slide 76 text

映画のような作品

Slide 77

Slide 77 text

映像のプロではない  ウェブ制作者や事業者でも作れる動画はある

Slide 78

Slide 78 text

動画はスマホでも作成出来る

Slide 79

Slide 79 text

動画の種類

Slide 80

Slide 80 text

ブランドイメージ  （ブランド・地域PR）ライブ動画  （ライブコマース・セミナー中継）対談動画（インタビュー）学習動画（Eラーニング）説明動画（解説動画）レビュー動画（体験動画） VLOG  （個⼈の発する⽇記・雑記動画）作品動画  （ストーリー性のある動画）

Slide 81

Slide 81 text

動画の⽬的

Slide 82

Slide 82 text

ウェブサイトで使う動画は  利⽤者の⾏動の⼿助けになるもの

Slide 83

Slide 83 text

業種等で利⽤者が解決したい事は様々

Slide 84

Slide 84 text

利⽤者の求めるコンテンツを提供するのは従来のコンテンツ作りと同じ考え⽅

Slide 85

Slide 85 text

⾔葉では伝えにくい事を動画で伝える

Slide 86

Slide 86 text

ウェブサイトで動画を使うメインビジュアル事業紹介インタビュー・挨拶  How to（説明）アクセス・地図

Slide 87

Slide 87 text

動画はYouTubeにアップして埋込を推奨  （レンタルサーバー停⽌のリスクを防ぐ） YouTube内での視聴も期待できる YouTube動画は検索結果に表⽰される  （動画とサムネイル）

Slide 88

Slide 88 text

YouTubeにアップロードする際の  動画フォーマットはmp4推奨。サイズFHD以上。  タイトルは24⽂字以内でわかるように。  サムネイルはバナーのような役割（重要）。  タグは関連動画表⽰などに関連する。施設内BGMなど著作権の判断が下されるので注意

Slide 89

Slide 89 text

動画編集の際の注意事項。  原則3秒で切り換える同じシーンを流さない（離脱防⽌）。  余計な間は作らない（細かくカット推奨）。  字幕が読めるのは1秒間に5⽂字。  動画素材は綺麗に撮る（後から修正しづらい）。  基本的に⾒る⼈は興味が無いを前提に  （上司の⼦供の発表会のビデオ  を無理⽮理⾒せられるようなぐらいの感覚）。編集アプリは無料のものでもOK

Slide 90

Slide 90 text

Elementor等のプラグインで動画を背景に埋め込む

Slide 91

Slide 91 text

モバイルでは  YouTubeプレーヤー埋め込みか画像やスライドまたはGifアニメ

Slide 92

Slide 92 text

単純接触効果  ⼈は接触回数が多いと親近感を覚える  （芸能⼈と同じ）

Slide 93

Slide 93 text

静⽌画やスライダーよりも伝わりやすい  動画をうまく活⽤しましょう

Slide 94

Slide 94 text

SNSで動画を使⽤する場合最⼤120分。ファイルサイズ最⼤4.0GB Facebook Instagram Twitter 最⼤60秒最⼤2分20秒 Google  マイビジネス最⼤ 30 秒。ファイルサイズ最⼤ 100 MB 解像度: 720p 以上

Slide 95

Slide 95 text

（独り⾔）  ウェブサイトで担ってたものをサイト内外問わず  全て動画化しても良いのでは…  （⾒せ⽅に⼯夫は必要）

Slide 96

Slide 96 text

新しい形のワークフロー

Slide 97

Slide 97 text

従来のワークフロー䩧 ﺮ さ ﻜ ﺨ ﻾ ＾＆Ｂ３䲿周＀ ﻯ ３Ｉ．Ｂ䲿周２！ ﻯ ＾䲿周然钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ ｆ２ ﻮ ＾ ﻻ ٥ 㹋鄲

Slide 98

Slide 98 text

䩧 ﺮ さ ﻜ ﺨ ＀ ﻯ ３䲿周然钠 ٥ ⥜ 姻 Ⱅ Ꟛ 䩧 ﺮ さ ﻜ ﺨ ﻾ ＾＆Ｂ３䲿周＀ ﻯ ３Ｉ．Ｂ䲿周２！ ﻯ ＾䲿周然钠 ٥ ⥜ 姻 Ⱅ Ꟛ ﻾ ｆ２ ﻮ ＾ ﻻ ٥ 㹋鄲打ち合わせのやり⽅から  テンプレート活⽤など  多⽅⾯からの作業⼯程や  価値観を⾒直す必要がある。  制作を依頼する側の理解も必要

Slide 99

Slide 99 text

テーマ作成  デザイン作成  プロトタイプ作成  動画作成基礎設計  写真撮影  動画撮影（追加撮影）䩧 ﺮ さ ﻜ ﺨ ＀ ﻯ ３䲿周然钠 ٥ ⥜ 姻 Ⱅ Ꟛ ⼩規模事業者案件で有効。全てのケースには当てはまらない。  担当者が複数⼈いる企業などには向かない。作りきりではなく運⽤や保守前提テーマ作成やデザイン等は  Elementor Proを使⽤するケースが多い

Slide 100

Slide 100 text

YouTube、5Ｇ、  Googleマイビジネス等、ウェブサイトの役割や  ⽴ち位置も変化している。  利⽤者が求めるもの？  情報接点や経路を意識する  必要がある。  常にアップデートを 5G

Slide 101

Slide 101 text

ެࣜ৘ใΛࢀর ެࣜ৘ใΛࢀর ৘ใઃܭͱαΠ τߏ଄ ৘ใઃܭͱαΠ τߏ଄ ར༻ऀͷ໰୊ղܾ ར༻ऀͷ໰୊ղܾ ࣄۀͷ޿ࠂ༧ࢉӡ༻ΛҰॹʹߟ͑Δ ࣄۀͷ޿ࠂ༧ࢉӡ༻ΛҰॹʹߟ͑Δ ఻͑ΔखஈͷΞοϓσʔτ ఻͑ΔखஈͷΞοϓσʔτ ·ͱΊ

Slide 102

Slide 102 text

ありがとうございました。  11/2 WordCamp Tokyo  12/21 CSS Nite Shift13