Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
限られた予算で 最大限の成果を出すために 実践している 「設計」と「お金」の話 / Design and Budget
Search
kenji goto
October 22, 2019
Design
1
1k
限られた予算で 最大限の成果を出すために 実践している 「設計」と「お金」の話 / Design and Budget
2019年10月22日(火・祝)新潟県長岡市で開催された WordCamp Niigata 2019 で発表したスライドです(事例については非公開)。
kenji goto
October 22, 2019
Tweet
Share
More Decks by kenji goto
See All by kenji goto
中小企業のウェブ制作に有効な動画活用方法 /website-movie
yotsubadesign
1
1.9k
Other Decks in Design
See All in Design
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
1.3k
Sci-Fi: Descenso
elrtovar
0
200
Designing and Automating Component Specifications
nathanacurtis
3
310
Sunny Day Storyboard
ctagulao98
0
190
Building a mindful relationship with digital media for zillennials prone to anxiety
mastervicedesign
0
160
Sensitive Texter Storyboard
ctagulao98
0
160
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
430
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
360
MiKS inc. Company PR en_202404
zakkerooni
1
770
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
200
Designing UIs without a UI designer
strongeron
0
240
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
200
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
A Tale of Four Properties
chriscoyier
155
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
A Philosophy of Restraint
colly
200
16k
Building Applications with DynamoDB
mza
89
5.8k
Designing with Data
zakiwarfel
96
5k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Building an army of robots
kneath
301
42k
Six Lessons from altMBA
skipperchong
24
3.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Transcript
None
よつばデザイン 後藤賢司 ݶΒΕͨ༧ࢉͰ ࠷େݶͷՌΛग़ͨ͢Ίʹ ࣮ફ͠ ͍ͯΔઃܭ ͱ ͓ۚ ͷ J1IPOFͰࡱӨ
よつばデザイン 後藤賢司 デザインしないデザイナー。東京と⼤分の2拠点で活動。 「企画提案・設計」が得意。中⼩企業アドバイザー。
KPI・⽬標必達の 動画マーケティング 成功の最新メソッド 村岡 雄史 (著), 本橋 へいすけ (著), 後藤
賢司 (著), 染⾕ 昌利 (著) エムディエヌコーポレーション 2019 10/28
webクリエイターのための情報交換所 ウェブ制作に関する情報交換を⽬的としたFacebookグループ 参加⼈数 8600⼈〜。各地でウェブ情報のまとめセミナーを開催。
あんこ好き こしあん・つぶあんどちらもOK ⽩あんはNG
あんこ飲み
このセッションは ⼩規模事業者や中⼩企業の ウェブサイトの設計やお⾦がテーマ。 ⼩規模でも効くウェブ戦略のお話です。 ※予算や規模が変われば考え⽅や価値観も変わります。ご了承ください。 スライドは後⽇公開します。
制作者=制作会社・制作者 事業者=制作依頼主・企業 利⽤者=ウェブサイト訪問者 エンドユーザー
お⾦のお話
期間と予算があれば何でも出来る
早く 安く 確実に
中⼩企業の予算感
予算が限られてるし 切⽻詰まってる場合が多い
限られた予算でどうにかできないか?
制作で費⽤がかかる部分はどこか?
⼈件費(作業費)
⼯数の影響が ⼤きい ワークフロー(制作の⼯程) 䩧 ﺮ さ ﻜ ﺨ ^
& B 3 䲿 周 ﻯ 3 I . B 䲿 周 2 ! ﻯ ^ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ f 2 ﻮ ^ ﻻ ٥ 㹋 鄲
素材等を活⽤して ⼯数を減らす 素材・テンプレートを活⽤する ※⾃分で全部作らない 䩧 ﺮ さ ﻜ ﺨ
^ & B 3 䲿 周 ﻯ 3 I . B 䲿 周 2 ! ﻯ ^ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ f 2 ﻮ ^ ﻻ ٥ 㹋 鄲
世界にただ1つの オリジナルデザインや 独⾃のシステムでなければならない というケースは希 (ファッション・スポーツ・若年層向けは規模によるが必要なケースがある)
凝った仕組みは 使われないケースもある
予算が少なければ 段階的にウェブサイトを 成⻑させれば良い
段階的な成⻑計画 プレサイト サイトver.1 サイト オープン サイトver.2 バージョン アップ 予算から計画を⽴てる
WordPressは テーマを変えれば外観が変わる。 コンテンツを引き継げる作り。 CMSの利点をうまく使う
制作者は WordPress Codex ⽇本語版 を参照しましょう https://wpdocs.osdn.jp
⾒積もりは細かく具体的に 何をやるか事業者に伝える (⼩さな事も掲載)
企画・設計 ディレクション(進⾏管理) WordPressインストール プラグイン選定・設定 テーマカスタマイズ テンプレート作成 トップページデザイン 基本デザイン デザインパーツ作成 画像加⼯
お問い合わせフォーム(項⽬数) Google Analytics Google Search Console Facebook対応 Twitter対応 打ち合わせ回数(◦回) …その他いろいろ
事業者は納得出来れば費⽤を出す。 制作側は作業してるからと考えるより 事業者がどんな結果を求めているかを 意識するとうまくいきやすい
最初に細かい説明を丁寧に。 追加内容などは 都度⾒積を発⾏する。
事前に費⽤をいただく (半額あるいは全額)
原稿遅れなどの進⾏遅延には 費⽤がかかる事を伝える (レストランの予約みたいなもの)
打ち合わせ ノウハウや専⾨性の⾼い情報や 専⾨家としてのアドバイスは有料。 (ケースバイケース)
事業者は制作業界の事を 良くも悪くも知らない。 説明は⼤事
制作者が 事業者⽬線で考えれば トラブルは起きにくい
安売りはしない。 WordPressでのサイト制作を 始めたばかりの⼈は 制作料⾦を安くしがちですが 理解が深まれば後悔します
設計
ウェブサイトはコミュニケーションツール
基礎設計に⼒を⼊れる
検索エンジンにも ⼈にも理解される設計 ⾒た⽬だけでない論理的な構造
構造化を意識した設計 カテゴリー タグ カスタム投稿 カスタムタクソノミー
よく使⽤するカスタム投稿 ブログ 実績 よくある質問 カスタム分類もそれぞれに追加
Custom Post Type UI https://ja.wordpress.org/plugins/custom-post-type-ui/ カスタム投稿や カスタムタクソノミーを 作成できるプラグイン。 プラグインで実装すれば テーマを変更しても
コンテンツを維持出来る。
シンプルな構造で 永続性のある設計 ※引き継ぎしやすい
カスタムフィールド導⼊は慎重に
WordPressのお作法を理解していない オレオレカスタマイズは リニューアル毎に⼤きく費⽤がかかる。 事業者に費⽤を負担させる 価値が本当にある?
何度リニューアルしても コンテンツを維持出来れば 年数が経つほどコストを抑えられる。 数年レベルで⾒れば 何⼗万〜何百万の差額になる
カスタマイズについて 検索でブログ記事を参照は 誤った情報に たどり着きやすい。 Codexを参照しましょう。 基礎構造やお作法を知ると トラブルに強くなります
None
None
Theme Handbook https://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知恵袋を活⽤。 初⼼者の質問には 価値がある。 「◦◦とは」はコン テンツとして強い
よくある質問で問題が解決する。 利⽤者の満⾜度・信頼度も上がるし 検索エンジンからも評価される
コンテンツ内容
タイトルや本⽂は 5W2Hを徹底する
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.0GB Facebook Instagram Twitter 最⼤60秒 最⼤2分20秒 Google マイビジネス 最⼤
30 秒。ファイルサイズ 最⼤ 100 MB 解像度: 720p 以上
(独り⾔) ウェブサイトで担ってたものを サイト内外問わず 全て動画化しても良いのでは… (⾒せ⽅に⼯夫は必要)
新しい形のワークフロー
従来のワークフロー 䩧 ﺮ さ ﻜ ﺨ ^ & B
3 䲿 周 ﻯ 3 I . B 䲿 周 2 ! ﻯ ^ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ f 2 ﻮ ^ ﻻ ٥ 㹋 鄲
䩧 ﺮ さ ﻜ ﺨ ﻯ 3 䲿 周
然 钠 ٥ ⥜ 姻 Ⱅ 䩧 ﺮ さ ﻜ ﺨ ^ & B 3 䲿 周 ﻯ 3 I . B 䲿 周 2 ! ﻯ ^ 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ f 2 ﻮ ^ ﻻ ٥ 㹋 鄲 打ち合わせのやり⽅から テンプレート活⽤など 多⽅⾯からの作業⼯程や 価値観を⾒直す必要がある。 制作を依頼する側の理解も必要
テーマ作成 デザイン作成 プロトタイプ作成 動画作成 基礎設計 写真撮影 動画撮影 (追加撮影) 䩧 ﺮ
さ ﻜ ﺨ ﻯ 3 䲿 周 然 钠 ٥ ⥜ 姻 Ⱅ ⼩規模事業者案件で有効。全てのケースには当てはまらない。 担当者が複数⼈いる企業などには向かない。作りきりではなく運⽤や保守前提 テーマ作成やデザイン等は Elementor Proを使⽤するケースが多い
YouTube、5G、 Googleマイビジネス等、 ウェブサイトの役割や ⽴ち位置も変化している。 利⽤者が求めるもの? 情報接点や経路を意識する 必要がある。 常にアップデートを 5G
ެࣜใΛࢀর ެࣜใΛࢀর ใઃܭͱαΠ τߏ ใઃܭͱαΠ τߏ ར༻ऀͷղܾ ར༻ऀͷղܾ ࣄۀͷࠂ༧ࢉӡ༻ΛҰॹʹߟ͑Δ ࣄۀͷࠂ༧ࢉӡ༻ΛҰॹʹߟ͑Δ
͑ΔखஈͷΞοϓσʔτ ͑ΔखஈͷΞοϓσʔτ ·ͱΊ
ありがとうございました。 11/2 WordCamp Tokyo 12/21 CSS Nite Shift13