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
限られた予算で 最大限の成果を出すために 実践している 「設計」と「お金」の話 / Desig...
Search
kenji goto
October 22, 2019
Design
1
1.2k
限られた予算で 最大限の成果を出すために 実践している 「設計」と「お金」の話 / 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
2k
Other Decks in Design
See All in Design
TUNAG BOOK 2024
stmn
0
470
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
620
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
260
Museum Heist
allykae
0
120
aya_murakami_portfolio
ayakaimi1101
0
1.1k
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
180
portfolio2025_kanakoohata
kanako106
0
660
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
120
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Music & Morning Musume
bryan
46
6.3k
Writing Fast Ruby
sferik
628
61k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GitHub's CSS Performance
jonrohan
1030
460k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Typedesign – Prime Four
hannesfritz
40
2.5k
Designing for Performance
lara
604
68k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
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