2019年10月22日（火・祝）新潟県長岡市で開催された WordCamp Niigata 2019 で発表したスライドです（事例については非公開）。
View Slide
よつばデザイン 後藤賢司ݶΒΕͨ༧ࢉͰ࠷େݶͷՌΛग़ͨ͢Ίʹ࣮ફ͍ͯ͠Δઃܭͱ͓ۚͷJ1IPOFͰࡱӨ
よつばデザイン 後藤賢司デザインしないデザイナー。東京と⼤分の2拠点で活動。 「企画提案・設計」が得意。中⼩企業アドバイザー。
KPI・⽬標必達の動画マーケティング成功の最新メソッド村岡 雄史 (著), 本橋 へいすけ (著), 後藤 賢司 (著), 染⾕ 昌利 (著)エムディエヌコーポレーション2019 10/28
webクリエイターのための情報交換所ウェブ制作に関する情報交換を⽬的としたFacebookグループ 参加⼈数8600⼈〜。各地でウェブ情報のまとめセミナーを開催。
あんこ好き こしあん・つぶあんどちらもOK⽩あんはNG
あんこ飲み
このセッションは⼩規模事業者や中⼩企業のウェブサイトの設計やお⾦がテーマ。 ⼩規模でも効くウェブ戦略のお話です。 ※予算や規模が変われば考え⽅や価値観も変わります。ご了承ください。 スライドは後⽇公開します。
制作者＝制作会社・制作者 事業者＝制作依頼主・企業 利⽤者＝ウェブサイト訪問者 エンドユーザー
お⾦のお話
期間と予算があれば何でも出来る
早く 安く確実に
中⼩企業の予算感
予算が限られてるし切⽻詰まってる場合が多い
限られた予算でどうにかできないか？
制作で費⽤がかかる部分はどこか？
⼈件費（作業費）
⼯数の影響が⼤きいワークフロー（制作の⼯程）䩧ﺮさﻜﺨ＾＆Ｂ３䲿周ﻯ３Ｉ．Ｂ䲿周２！ﻯ＾䲿周然钠٥⥜姻Ⱅｆ２ﻮ＾ﻻ٥㹋鄲
素材等を活⽤して ⼯数を減らす素材・テンプレートを活⽤する ※⾃分で全部作らない䩧ﺮさﻜﺨ＾＆Ｂ３䲿周ﻯ３Ｉ．Ｂ䲿周２！ﻯ＾䲿周然钠٥⥜姻Ⱅｆ２ﻮ＾ﻻ٥㹋鄲
世界にただ1つの オリジナルデザインや 独⾃のシステムでなければならないというケースは希（ファッション・スポーツ・若年層向けは規模によるが必要なケースがある）
凝った仕組みは 使われないケースもある
予算が少なければ段階的にウェブサイトを成⻑させれば良い
段階的な成⻑計画プレサイト サイトver.1サイトオープンサイトver.2バージョンアップ予算から計画を⽴てる
WordPressは テーマを変えれば外観が変わる。 コンテンツを引き継げる作り。 CMSの利点をうまく使う
制作者はWordPressCodex ⽇本語版を参照しましょうhttps://wpdocs.osdn.jp
⾒積もりは細かく具体的に 何をやるか事業者に伝える （⼩さな事も掲載）
企画・設計ディレクション（進⾏管理） WordPressインストールプラグイン選定・設定テーマカスタマイズ テンプレート作成トップページデザイン 基本デザイン デザインパーツ作成 画像加⼯お問い合わせフォーム（項⽬数） Google Analytics Google Search Console Facebook対応 Twitter対応 打ち合わせ回数（○回）…その他いろいろ
事業者は納得出来れば費⽤を出す。 制作側は作業してるからと考えるより事業者がどんな結果を求めているかを 意識するとうまくいきやすい
最初に細かい説明を丁寧に。 追加内容などは 都度⾒積を発⾏する。
事前に費⽤をいただく （半額あるいは全額）
原稿遅れなどの進⾏遅延には 費⽤がかかる事を伝える （レストランの予約みたいなもの）
打ち合わせ ノウハウや専⾨性の⾼い情報や 専⾨家としてのアドバイスは有料。 （ケースバイケース）
事業者は制作業界の事を 良くも悪くも知らない。 説明は⼤事
制作者が 事業者⽬線で考えれば トラブルは起きにくい
安売りはしない。 WordPressでのサイト制作を 始めたばかりの⼈は 制作料⾦を安くしがちですが 理解が深まれば後悔します
設計
ウェブサイトはコミュニケーションツール
基礎設計に⼒を⼊れる
検索エンジンにも⼈にも理解される設計⾒た⽬だけでない論理的な構造
構造化を意識した設計カテゴリー タグ カスタム投稿カスタムタクソノミー
よく使⽤するカスタム投稿ブログ 実績 よくある質問カスタム分類もそれぞれに追加
Custom Post Type UIhttps://ja.wordpress.org/plugins/custom-post-type-ui/カスタム投稿やカスタムタクソノミーを作成できるプラグイン。プラグインで実装すれば テーマを変更してもコンテンツを維持出来る。
シンプルな構造で永続性のある設計※引き継ぎしやすい
カスタムフィールド導⼊は慎重に
WordPressのお作法を理解していない オレオレカスタマイズは リニューアル毎に⼤きく費⽤がかかる。事業者に費⽤を負担させる 価値が本当にある？
何度リニューアルしてもコンテンツを維持出来れば年数が経つほどコストを抑えられる。数年レベルで⾒れば何⼗万〜何百万の差額になる
カスタマイズについて検索でブログ記事を参照は 誤った情報に たどり着きやすい。Codexを参照しましょう。基礎構造やお作法を知るとトラブルに強くなります
ThemeHandbookhttps://developer.wordpress.org/themes/
テーマ作成の参考資料WordPressテーマの作り⽅ 2019 私のベストプラクティスhttps://speakerdeck.com/chiilog/wordpresstemafalsezuo-rifang-2019-si-falsebesutopurakuteisu
制作者で オリジナルテーマを作るなら デフォルトテーマのコードを読むのオススメ
個⼈的には既存のテーマや テーマビルダーの活⽤をオススメします。 ※ライセンス守ってるものを使いましょうhttps://japan.wordcamp.org/for-organizers/gpl-primer/
検索エンジンの評価軸
Google Japan Blog SEO関連情報は まずここを読みましょうhttps://japan.googleblog.com/
利⽤者の求めている答えを ウェブサイトが 返してあげられているか？
⽐較検討した結果選んでもらえるか？
コンテンツ作成は 利⽤者の⼼理を⼤事にする｡ 実際のコミュニケーションと同じ。⼩⼿先技は効かない
ウェブサイトで効くコンテンツ
よくある質問
よくあるパターンアコーディオンで展開カスタム投稿タイプで作成 1質問＝1投稿質問⼀覧は カテゴリーで分類
よくある質問はカスタム投稿で作成 質問はひとつにつき1投稿質問カテゴリーを設けて カテゴリー毎に⼀覧表⽰
事業者に 「質問ください」は出てこない。 制作者側から提案する
問い合わせメール⽂をそのまま質問のタイトルに
Yahoo知恵袋を活⽤。 初⼼者の質問には価値がある。「○○とは」はコンテンツとして強い
よくある質問で問題が解決する。 利⽤者の満⾜度・信頼度も上がるし 検索エンジンからも評価される
コンテンツ内容
タイトルや本⽂は 5Ｗ2Ｈを徹底する
5W2H 情報を論理的に分類してまとめる⼿法 • いつ• どこで• 誰が• 何を• どうする• なぜ• いくらで
• いつ• どこで• 誰が• 何を• どうする• なぜ• いくらで2019年10⽉22⽇（⽕・祝）新潟県⻑岡市アオーレ⻑岡WordCamp Niigata 実⾏委員がWordCamp Niigata 2019を開催しますWordPress を理解し知って欲しい1000円
これぐらいは知ってるだろうを省略しない
誰でも理解できるような伝え⽅を⼼がける⼦供でもお年寄りでもよその⼈でも
テキストや写真で伝える＋ 動画で伝える
ウェブサイトで動画を扱う
ウェブ動画は印象や認識や信頼性を⾼めるために使う
映画のような作品
映像のプロではない ウェブ制作者や事業者でも作れる動画はある
動画はスマホでも作成出来る
動画の種類
ブランドイメージ （ブランド・地域PR）ライブ動画 （ライブコマース・セミナー中継）対談動画（インタビュー）学習動画（Eラーニング）説明動画（解説動画）レビュー動画（体験動画）VLOG （個⼈の発する⽇記・雑記動画）作品動画 （ストーリー性のある動画）
動画の⽬的
ウェブサイトで使う動画は 利⽤者の⾏動の⼿助けになるもの
業種等で利⽤者が解決したい事は様々
利⽤者の求めるコンテンツを提供するのは従来のコンテンツ作りと同じ考え⽅
⾔葉では伝えにくい事を動画で伝える
ウェブサイトで動画を使うメインビジュアル事業紹介インタビュー・挨拶 How to（説明）アクセス・地図
動画はYouTubeにアップして埋込を推奨 （レンタルサーバー停⽌のリスクを防ぐ）YouTube内での視聴も期待できるYouTube動画は検索結果に表⽰される （動画とサムネイル）
YouTubeにアップロードする際の 動画フォーマットはmp4推奨。サイズFHD以上。 タイトルは24⽂字以内でわかるように。 サムネイルはバナーのような役割（重要）。 タグは関連動画表⽰などに関連する。施設内BGMなど著作権の判断が下されるので注意
動画編集の際の注意事項。 原則3秒で切り換える同じシーンを流さない（離脱防⽌）。 余計な間は作らない（細かくカット推奨）。 字幕が読めるのは1秒間に5⽂字。 動画素材は綺麗に撮る（後から修正しづらい）。 基本的に⾒る⼈は興味が無いを前提に （上司の⼦供の発表会のビデオ を無理⽮理⾒せられるようなぐらいの感覚）。編集アプリは無料のものでもOK
Elementor等のプラグインで動画を背景に埋め込む
モバイルでは YouTubeプレーヤー埋め込みか画像やスライドまたはGifアニメ
単純接触効果 ⼈は接触回数が多いと親近感を覚える （芸能⼈と同じ）
静⽌画やスライダーよりも伝わりやすい 動画をうまく活⽤しましょう
SNSで動画を使⽤する場合最⼤120分。ファイルサイズ最⼤4.0GBFacebookInstagramTwitter最⼤60秒最⼤2分20秒Google マイビジネス最⼤ 30 秒。ファイルサイズ 最⼤ 100 MB解像度: 720p 以上
（独り⾔） ウェブサイトで担ってたものをサイト内外問わず 全て動画化しても良いのでは… （⾒せ⽅に⼯夫は必要）
新しい形のワークフロー
従来のワークフロー䩧ﺮさﻜﺨ＾＆Ｂ３䲿周ﻯ３Ｉ．Ｂ䲿周２！ﻯ＾䲿周然钠٥⥜姻Ⱅｆ２ﻮ＾ﻻ٥㹋鄲
䩧ﺮさﻜﺨﻯ３䲿周然钠٥⥜姻Ⱅ䩧ﺮさﻜﺨ＾＆Ｂ３䲿周ﻯ３Ｉ．Ｂ䲿周２！ﻯ＾䲿周然钠٥⥜姻Ⱅｆ２ﻮ＾ﻻ٥㹋鄲打ち合わせのやり⽅から テンプレート活⽤など 多⽅⾯からの作業⼯程や 価値観を⾒直す必要がある。 制作を依頼する側の理解も必要
テーマ作成 デザイン作成 プロトタイプ作成 動画作成基礎設計 写真撮影 動画撮影（追加撮影）䩧ﺮさﻜﺨﻯ３䲿周然钠٥⥜姻Ⱅ⼩規模事業者案件で有効。全てのケースには当てはまらない。 担当者が複数⼈いる企業などには向かない。作りきりではなく運⽤や保守前提テーマ作成やデザイン等は Elementor Proを使⽤するケースが多い
YouTube、5Ｇ、 Googleマイビジネス等、ウェブサイトの役割や ⽴ち位置も変化している。 利⽤者が求めるもの？ 情報接点や経路を意識する 必要がある。 常にアップデートを5G
ެࣜใΛࢀরެࣜใΛࢀরใઃܭͱαΠτߏใઃܭͱαΠτߏར༻ऀͷղܾར༻ऀͷղܾࣄۀͷࠂ༧ࢉӡ༻ΛҰॹʹߟ͑Δࣄۀͷࠂ༧ࢉӡ༻ΛҰॹʹߟ͑Δ͑ΔखஈͷΞοϓσʔτ͑ΔखஈͷΞοϓσʔτ·ͱΊ
ありがとうございました。 11/2 WordCamp Tokyo 12/21 CSS Nite Shift13
yotsubadesign
siteengine
hjmkth
akwkm
joelgoodman
evem_japan
cyberagentdevelopers
uxevents
shoty_k2
takeshiinotsume
okabemy
myoshiro
panda_program
cherdarchuk
addyosmani
marktimemedia
keathley
chrisshort
csswizardry
akmur
colly
reverentgeek
rocio
jennybc