$30 off During Our Annual Pro Sale. View Details »

ホームページをつくるまで / Before creating a website

tbshiki
June 25, 2023

ホームページをつくるまで / Before creating a website

【大阪梅田】Kansai WordPress Meetup 初心者会向け『もくもく会&情報交換会』で話す予定でしたが話す時間がありませんでした。

tbshiki

June 25, 2023
Tweet

More Decks by tbshiki

Other Decks in Technology

Transcript

  1. ホームページをつくるまで
    2023/06/25 つぶ(佐敷 亮太)
    Kansai WordPress Meetup@大阪
    初心者会向け『もくもく会&情報交換会』

    View Slide

  2. 今日の議題

    View Slide

  3. Q.ホームページっているん?

    View Slide

  4.  本来の「ホームページ」の意味と
    俗に言う「ホームページ」では
     意味が違うのを知っていますか?

    View Slide

  5. 本来ホームページとは
    「Webサイトの入り口となるページ」や
    「ブラウザを開いた時に表示されるページ」
    のことを指します

    View Slide

  6. みんながホームページって言っているのは
    「Webサイト」のことを
    指していることがほとんど

    View Slide

  7. 引用参考 : Googleトレンド ホームページ・Webサイト過去5年間 より
    https://trends.google.co.jp/trends/explore?q=ホームページ,Webサイト&geo=JP&date=today%205-y

    View Slide

  8. 日本では
    ホームページ ≒ Webサイト
    と考えてOKです
    \この中ではホームページとします/

    View Slide

  9. Q.ホームページっているん?
    もう一度

    View Slide

  10. A.あったらいいけど
     他に優先するものの後でいい
     ホームページを優先してもいい

    View Slide

  11. 他に優先するものって?

    View Slide

  12.   名 前  :花田 浩史
      年 齢  :46
      性 別  :男
      職 業  :ラーメン専門店・店主(2年目)
    家 族 構 成:妻・娘18歳・息子15歳
      性 格  :控えめ
    休日の過ごし方:釣り・ギター
    平日の過ごし方:仕込み・ソシャゲ
    想定するペルソナを考えてみましょう
    集客に悩んでいてお店のホームーページを作りたい
    イラスト:bon design
    https://bon.design/

    View Slide

  13. 🍜

    View Slide

  14. 花田さんはホームページを作る前に
    お客さん=ユーザーが
    何を求めているかを考えました
    はやさ?
    正しさ?
    情報量?
    信頼性?

    View Slide

  15. 先月の営業時間
    より
    今週の営業時間
    はやさ?

    View Slide

  16. メニュー : ラーメン
    より
    メニュー : 豚骨ラーメン
         醤油ラーメン
         餃子
         炒飯
    情報量?

    View Slide

  17. 正しさ?
    休業日:不定休
    より
    休業日:水曜日

    View Slide

  18. 信頼性?
    hogeさん
    鶏ガラと魚介のミックスです
    より
    店主
    前日夜から煮込んだ
    豚骨スープを使用しています

    View Slide

  19. ユーザーが求めているもの
    を伝えよう!

    View Slide

  20. 他に優先するものって?
    もう一度

    View Slide

  21. 💡

    View Slide

  22. 「ユーザーが求めているもの」
    を伝えることができる所
    =
    他に優先するもの

    View Slide

  23. じゃあ
    ユーザーが求めているもの
    ってどんな所で伝えれるん?

    View Slide

  24. Q.ホームページっているん?
    A.あったらいいけど
     他に優先するものの後でいい
     ホームページを優先してもいい

    View Slide

  25. SNS
    ポータルサイト
    クローズドサービス
    ホームページ
    もくじ

    View Slide

  26. SNS
    ポータルサイト
    クローズドサービス
    ホームページ
    もくじ

    View Slide

  27. SNS
    Twitter
    Facebook
    Instagram
    TikTok
    YouTube
    LinkedIn
    Pinterest
    Clubhouse
    どのSNSを使うのがいいの?

    View Slide

  28. SNS
    Q.どのSNSを使うのがいいの?
    A.まずは提供したいものの
     ターゲット(ユーザー)が多くいそうな
     SNSを選びましょう

    View Slide

  29. Twitterはリアルタイム情報の共有に最適な
    SNS。140字以内のメッセージを投稿し、ハッ
    シュタグでトピックを分類。人や組織をフォ
    ローし、反応はリツイートやいいねで示す。
    Twitter Facebook
    Facebookは友達とつながり、情報共有する
    SNS。プロフィールを持ち、友達やページを
    フォロー。ニュースフィードで最新情報を見
    る。リアクションとメッセンジャーでコミュ
    ニケーション。
    description by ChatGPT
    Instagram
    Instagramはビジュアル重視のSNS。写真や動
    画を投稿し、フィルターで装飾可能。ストー
    リーズで日々の出来事をシェアし、ハッシュ
    タグで投稿を分類。
    TikTok
    TikTokは短い動画共有に特化したSNS。音楽
    を背景にダンスやコメディを演出。視聴者の
    反応が高いコンテンツはすぐにバイラル化
    し、全世界に拡散できる。

    View Slide

  30. YouTubeはビデオ共有プラットフォーム。自
    作のビデオを公開し、視聴者とコメントで交
    流。学習・エンターテイメントなど多岐にわ
    たるジャンルのコンテンツが揃う。
    LinkedIn
    LinkedInはプロフェッショナルなネットワー
    キングに特化したSNS。自分の職歴やスキルを
    プロフィールに記載し、企業や同業者とつな
    がり、情報共有や就職活動に活用。
    description by ChatGPT
    Pinterest
    Pinterestはビジュアルに重点を置いたSNS。
    自分の興味やインスピレーションを「ピン」
    として保存、共有。イメージボードでアイデ
    アを整理し、他のユーザーとインスピレー
    ションを交換。
    Clubhouse
    Clubhouseは音声のみのSNS。リアルタイムの
    会話ルームでディスカッションやパネルディ
    スカッションに参加。様々なトピックや専門
    家から学び、新たな人脈を築く。

    View Slide

  31. 花田浩史さんはラーメン専門店の店主です。
    お店の美味しいラーメンを見てもらいたくて
    Instagramをはじめました。
    Instagramでは画像以外にも
    テキストや動画を投稿することができます。
    ラーメンや店舗情報の投稿を続けていたら
    インフルエンサーのストーリーでお店が紹介されました。
    ペルソナ : SNS -> Instagram
    気軽に投稿できて即効性と拡散力があるのがSNS
    イラスト:bon design
    https://bon.design/

    View Slide

  32. SNS
    ポータルサイト
    クローズドサービス
    ホームページ
    もくじ

    View Slide

  33. description by ChatGPT
    Googleビジネスプロフィール
    (旧称: Google マイビジネス)
    ビジネスの情報をGoogle検索やGoogleマップ
    上で一元管理・公開できる無料のツールで
    す。基本情報の公開、顧客レビューへの対
    応、写真や動画の投稿などが可能で、ビジネ
    スのオンラインでの見え方を向上させ、ロー
    カルビジネスの発見性を高めます。
    顧客レビューへの対応: ビジネス所有者自身がレ
    ビューや評価に直接返信できます。
    写真と動画の投稿: 商品・サービスの写真や動画を投
    稿し、ビジネスの魅力をビジュアルで伝えます。
    インサイトの提供: 検索キーワードや訪問者のアク
    ション(ウェブサイトへのアクセス、電話の発信等)
    などの分析データを提供します。
    投稿機能: お知らせや新商品、イベント情報を投稿で
    き、タイムリーな情報を顧客に伝えます。
    Facebookページ
    ビジネスやブランドがFacebook上で自己を表
    現し、ファンや顧客とコミュニケーションを
    とるためのプラットフォームです。ビジネス
    情報の公開、投稿のシェア、顧客とのインタ
    ラクションなどが可能で、認知度向上や顧客
    エンゲージメントの強化に役立ちます。
    投稿のシェア: 新製品、イベント、ニュースなどの情
    報を投稿し、ファンや顧客に伝えることができます。
    顧客エンゲージメント: ユーザーのコメントやメッ
    セージに対応したり、投稿に対するリアクションを見
    ることコミュニケーションを深めることができます。
    広告の運用: ターゲットオーディエンスに対する広告
    キャンペーンを作成・運用できます。
    インサイトの提供: パフォーマンスやエンゲージメン
    トなど、様々な分析データを提供します。

    View Slide

  34. 食べログ
    Retty
    ぐるなび
    ホットペッパーグルメ
    旅行・宿泊業
    楽天トラベル
    じゃらんnet
    Airbnb
    Booking.com
    description by ChatGPT
    自動車業
    カーセンサーnet
    goo 自動車
    カービュー
    不動産業
    SUUMO
    at home
    ホームズ
    飲食業

    View Slide

  35. Hot Pepper Beauty
    ビューティーパーク
    ミニモ
    LOCARI(ロカリ)
    医療機関
    医師を探すiDoctor
    エムスリー
    クリニックを探すQLife
    description by ChatGPT
    教育機関
    スタディサプリ
    ベネッセ
    リクナビ進学
    カクガクナビ
    小売業・EC
    Amazon
    楽天市場
    Yahoo!ショッピング
    メルカリ
    美容業

    View Slide

  36. 花田浩史さんはラーメン専門店の店主です。
    Googleマップに掲載されている口コミに返信するために
    Googleビジネスプロフィールをはじめました。
    GoogleビジネスプロフィールではGoogleマップの
    電話番号・営業時間や休業日などの情報を
    正しいものに変更することが可能です。
    口コミがあるたびに真摯に返信することで
    リピーターのお客様を獲得することができました。
    ペルソナ : ポータルサイト -> Googleビジネスプロフィール
    同じジャンルの情報をまとめて掲載しているのがポータルサイト
    イラスト:bon design
    https://bon.design/

    View Slide

  37. SNS
    ポータルサイト
    クローズドサービス
    ホームページ
    もくじ

    View Slide

  38. description by ChatGPT
    企業や団体、有名人などがLINE上でユーザー
    とコミュニケーションをとるためのツールで
    す。情報発信、直接メッセージの送受信、広
    告配信などが可能で、顧客エンゲージメント
    の強化や新規顧客の獲得に寄与します。
    情報発信: 新商品、イベント、ニュースなどの情報を
    投稿し、フォロワーに直接伝えることができます。
    1対1のコミュニケーション: ユーザーからの個別メッ
    セージに対して直接返信し、顧客サポートや問い合わ
    せ対応を行うことができます。
    広告配信: LINEの広告を使って、ターゲットオーディ
    エンスに対して広告を配信することができます。
    これらの機能で、顧客との直接的なコミュニケーショ
    ンを通じて顧客関係を強化したり、新たな顧客獲得を
    目指すことが可能です。
    LINEオープンチャット
    特定のテーマや目的を持つコミュニティを形
    成し、その中でユーザー間で情報を共有した
    り意見を交換するためのプラットフォームで
    す。チャットルームの作成、メッセージの送
    受信、情報の共有などが可能です。
    公開チャットルーム:興味・関心の同じユーザーとの
    コミュニケーションが可能になります。
    メッセージの送受信: 自由なメッセージの送受信が可
    能です。テキストの他、スタンプ、画像、動画、音声
    なども送信できます。
    メンバーの管理: 管理者は、メンバーの参加・退出の
    管理、不適切な発言の削除、ルールの設定などを行う
    ことができます。

    View Slide

  39. description by ChatGPT
    Facebook上で特定のテーマや興味を共有する
    ユーザーが集まり、情報を共有したり意見を
    交換したりするための場所です。メンバーが
    投稿を作成し、他のメンバーとのインタラク
    ションを行うことができます。
    投稿の作成と共有: メンバーは自由に投稿を作成し、
    情報を共有することができます。 メンバーは他のメン
    バーの投稿に対してリアクションを行ったり、コメン
    トを残したりすることができます。
    グループの管理: グループの管理者やモデレーター
    は、メンバーの参加の承認や不適切なコンテンツの削
    除などの管理機能を行うことができます。
    プライバシー設定: グループは公開、クローズ、シー
    クレットの3つのプライバシー設定から選べます。これ
    により、コミュニティの規模や公開範囲をコントロー
    ルできます。
    Discord
    コミュニティを形成するためのオンラインプ
    ラットフォームです。ユーザーはサーバーと
    呼ばれる場所を作成し、その中でテキスト、
    音声、ビデオによるコミュニケーションを行
    うことができます。ゲーム配信やゲームとの
    連携機能も持つことから、ゲーマーに特に人
    気があります。
    テキストチャット: ユーザーはチャンネル内でリアル
    タイムにメッセージを送信できます。画像や動画、リ
    ンクも共有できます。
    音声・ビデオチャット: ユーザーは音声チャットチャ
    ンネルで他のユーザーと話すことができます。また、
    ビデオ通話や画面共有も可能です。
    サーバーとチャンネルのカスタマイズ: サーバー所有
    者は、サーバー内でのチャンネル設定や役職の割り当
    てなど、コミュニティの管理を行うことができます。
    Facebookグループ

    View Slide

  40. 花田浩史さんはラーメン専門店の店主です。
    LINE公式アカウントを使ってクーポンの配信や
    リピーター向けの特別メニューの案内をはじめました。
    LINE公式アカウントでは
    お客様とのコミュニケーションはもちろん
    AI・BOTを使用しての自動返信や予約システムも使用可能です。
    売上が低い曜日の前日にクーポンを配信することで
    安定した集客を確保することができました。
    ペルソナ : クローズドサービス -> LINE公式アカウント
    ユーザーとの距離が近いクローズドサービス
    イラスト:bon design
    https://bon.design/

    View Slide

  41. SNS
    ポータルサイト
    クローズドサービス
    ホームページ
    もくじ

    View Slide

  42. Q.ホームページっているん?
    A.あったらいいけど
     他に優先するものの後でいい
     ホームページを優先してもいい
    もう一度

    View Slide

  43. SNSやポータルサイト、クローズドサービスで
    ユーザーが求めているものを提供できないと思ったら
    ホームページを作ればいい
    ホームページ

    View Slide

  44. そこにしかない正しくてまとまっている情報を
    提供したいと思ったら
    ホームページを作ればいい
    ホームページ

    View Slide

  45. じゃあ最初から
    ホームページだけ作ればいいやん?
    ホームページ

    View Slide

  46. ホームページ
    ホームページのメリットは
    全てを自分でコントロールできること
    ホームページのデメリットは
    全てを自分でコントロールしないといけないこと
    「手間かお金」もしくは
    「手間とお金」がかかる

    View Slide

  47. ユーザーが求めているもの
    ×
    提供したいこと
    ×
    コスト
    ホームページ

    View Slide

  48. これに見合うと思ったら
    ホームページを作ろう
    ホームページ

    View Slide

  49. ホームページは
    文章を構造化するための
    HTML(HyperText Markup Language)と
    見栄えや表示形式を制御するための
    CSS(Cascading Style Sheets)で構成されています
    これらを直接作成してホームページを作ることができます
    CMSやWebサービスを使用することで専門知識が無くても
    ホームページを作成されることも多く広まっています
    ホームページ

    View Slide

  50. description by ChatGPT
    世界で最も広く利用されているコンテンツ管理システム(CMS)の一つです。オープンソースで提供され
    ており、個人ブログから大規模なニュースサイト、商用サイトまで、さまざまなウェブサイトを作成する
    ことが可能です。ユーザーフレンドリーなインターフェース、数千に上るテーマとプラグインによる高い
    カスタマイズ性などが特徴で、初心者からプロフェッショナルまで幅広いユーザーに対応しています。
    テーマとプラグイン: WordPressは多数のテーマとプラグインを提供しており、これらを組み合わせることで自分だけのウェブ
    サイトをカスタマイズすることができます。テーマはウェブサイトのデザインを決定し、プラグインは機能を追加または強化し
    ます。
    投稿とページ: 投稿はブログエントリーのように日付順に表示されるコンテンツで、ページは静的なコンテンツ(例:「会社
    情報」ページなど)を作成します。
    ユーザー管理: 管理者、編集者、寄稿者など、さまざまな役割を持つユーザーを管理することができます。
    SEOとソーシャルメディア対応: SEO対応の機能やソーシャルメディアとの連携機能を持っており、ウェブサイトの認知度を高
    めるのに役立ちます。
    これらの機能を利用することで、ユーザーは自分の目的に合わせたウェブサイトを自由に作成・管理することができます。

    View Slide

  51. description by ChatGPT
    コーディング知識なしでプロフェッショナル
    なウェブサイトを作成できるオンラインプ
    ラットフォームです。ドラッグ&ドロップエ
    ディターと豊富なテンプレートを利用してカ
    スタマイズし、eコマース機能、SEO対策ツー
    ルなどでビジネスのオンライン展開をサポー
    トします。
    テンプレートとデザイン: Wixは数百種類のデザインテ
    ンプレートを提供しており、ユーザーのビジネスや趣
    味に合わせて選ぶことができます。
    eコマース機能: オンラインストアの設定が可能で、商
    品の管理、支払い方法の設定、配送方法の設定など、
    オンライン販売に必要な機能が揃っています。
    アプリマーケット: ブログ、写真ギャラリー、メール
    マーケティングなど、さまざまな機能を追加できるア
    プリを提供しています。
    Google サイト
    Googleアカウントを持っていれば誰でも無料
    で使用することができるウェブサイト作成
    ツール。ドラッグ&ドロップの操作で独自の
    ウェブサイトを作成することが可能です。個
    人のポートフォリオサイトから企業の公式サ
    イト、プロジェクトの共有ページなど、多様
    な用途で利用できます。
    Google Workspaceとの連携: Googleドキュメントや
    Googleスプレッドシート、Googleスライドなど、他の
    Googleアプリとの連携が可能。
    共有と協力: URLを通じて簡単に公開することがで
    き、また特定の人と編集を共有して共同でウェブサイ
    トを作成することも可能です。
    テンプレート: サイト作成のためのテンプレートを提
    供しており、ビジネス、個人、プロジェクト、イベン
    トなどのカテゴリーから選ぶことができます。
    Wix

    View Slide

  52. description by ChatGPT
    ドラッグ&ドロップ操作でウェブサイトを作
    成できるビジュアルエディタを提供するサー
    ビスです。デザインとコーディングの知識が
    なくても、プロフェッショナルなウェブサイ
    トやランディングページを作成することが可
    能です。
    インタラクティブデザイン: 動きのある要素を取り入
    れることで、インタラクティブなウェブサイトを作成
    できます。
    テンプレート: デザインテンプレートが豊富で、自分
    のニーズに合わせて選択可能です。
    チーム協働: チームメンバーと共同でプロジェクトを
    管理し、リアルタイムで編集することができます。
    レスポンシブデザイン: 作成したウェブサイトはデバ
    イスに応じて自動的にレイアウトを最適化します。
    Jimdo
    プログラミングの知識がなくてもウェブサイ
    トやオンラインストアを作成できるウェブサ
    イトビルダーです。独自のAI(人工知能)を
    活用し、ユーザーのニーズに合わせたウェブ
    サイトを提案します。
    AIドルフィン: ユーザーのニーズを理解し、適切な
    ウェブサイトデザインを提案するAIドルフィンが特徴で
    す。
    テンプレート: 多種多様な業界や目的に合わせたテン
    プレートが用意されており、そのまま利用したりカス
    タマイズしたりできます。
    eコマース: 商品のアップロード、在庫管理、支払い方
    法の設定など、オンラインストア運営に必要な機能を
    提供しています。
    STUDIO

    View Slide

  53. 花田浩史さんはラーメン専門店の店主です。
    WordPressを使用して
    お店のホームページを立ち上げました。
    WordPressでは自由にブログを書くことができます。
    たくさんのテーマやプラグインの中から
    必要な機能だけを選ぶことができて自分だけのカスタマイズが可能。
    新しいメニューの誕生までをブログにすることで
    沢山のお客様に新メニューを食べてもらうことができました。
    ペルソナ : ホームページ -> WordPress
    オーナー提供の最新情報をまとめて発信できるホームページ
    イラスト:bon design
    https://bon.design/

    View Slide

  54. インターネット上にはSNSやポータルサイトなど
    沢山のサービスで溢れています。
    開発したシステムやWebサービスを組み合わせて
    ホームページとして提供することもできます。
    あれもこれも同時に手を出すのではなく
    提供したい内容に合わせて使うものを絞り込んだり
    共通のデータを使用したりすることでコストを抑えて
    ユーザーが求めているものを届けましょう。
    まとめ

    View Slide

  55. WordPress楽しいよ?
    まとめ

    View Slide