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

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

Transcript

1. ホームページをつくるまで 2023/06/25 つぶ（佐敷 亮太） Kansai WordPress Meetup@大阪 初心者会向け『もくもく会&情報交換会』
2. 今日の議題
3. Q.ホームページっているん？
4. 　本来の「ホームページ」の意味と 俗に言う「ホームページ」では 　意味が違うのを知っていますか？
5. 本来ホームページとは 「Webサイトの入り口となるページ」や 「ブラウザを開いた時に表示されるページ」 のことを指します
6. みんながホームページって言っているのは 「Webサイト」のことを 指していることがほとんど
7. 引用参考 : Googleトレンド ホームページ・Webサイト過去5年間 より https://trends.google.co.jp/trends/explore?q=ホームページ,Webサイト&geo=JP&date=today%205-y
8. 日本では ホームページ ≒ Webサイト と考えてOKです ＼この中ではホームページとします／
9. Q.ホームページっているん？ もう一度
10. A.あったらいいけど 　他に優先するものの後でいい 　ホームページを優先してもいい
11. 他に優先するものって？
12. 　　名　前　　：花田　浩史 　　年　齢　　：４６ 　　性　別　　：男 　　職　業　　：ラーメン専門店・店主(2年目) 家　族　構　成：妻・娘1８歳・息子15歳 　　性　格　　：控えめ 休日の過ごし方：釣り・ギター 平日の過ごし方：仕込み・ソシャゲ 想定するペルソナを考えてみましょう 集客に悩んでいてお店のホームーページを作りたい イラスト：bon design https://bon.design/
13. 🍜
14. 花田さんはホームページを作る前に お客さん=ユーザーが 何を求めているかを考えました はやさ？ 正しさ？ 情報量？ 信頼性？
15. 先月の営業時間 より 今週の営業時間 はやさ？
16. メニュー : ラーメン より メニュー : 豚骨ラーメン 　　　　　醤油ラーメン 　　　　　餃子 　　　　　炒飯 情報量？
17. 正しさ？ 休業日：不定休 より 休業日：水曜日
18. 信頼性？ hogeさん 鶏ガラと魚介のミックスです より 店主 前日夜から煮込んだ 豚骨スープを使用しています
19. ユーザーが求めているもの を伝えよう！
20. 他に優先するものって？ もう一度
21. 💡
22. 「ユーザーが求めているもの」 を伝えることができる所 = 他に優先するもの
23. じゃあ ユーザーが求めているもの ってどんな所で伝えれるん？
24. Q.ホームページっているん？ A.あったらいいけど 　他に優先するものの後でいい 　ホームページを優先してもいい
25. SNS ポータルサイト クローズドサービス ホームページ もくじ
26. SNS ポータルサイト クローズドサービス ホームページ もくじ
27. SNS Twitter Facebook Instagram TikTok YouTube LinkedIn Pinterest Clubhouse どのSNSを使うのがいいの?
28. SNS Q.どのSNSを使うのがいいの? A.まずは提供したいものの 　ターゲット(ユーザー)が多くいそうな 　SNSを選びましょう
29. Twitterはリアルタイム情報の共有に最適な SNS。140字以内のメッセージを投稿し、ハッ シュタグでトピックを分類。人や組織をフォ ローし、反応はリツイートやいいねで示す。 Twitter Facebook Facebookは友達とつながり、情報共有する SNS。プロフィールを持ち、友達やページを フォロー。ニュースフィードで最新情報を見 る。リアクションとメッセンジャーでコミュ ニケーション。 description by ChatGPT Instagram Instagramはビジュアル重視のSNS。写真や動 画を投稿し、フィルターで装飾可能。ストー リーズで日々の出来事をシェアし、ハッシュ タグで投稿を分類。 TikTok TikTokは短い動画共有に特化したSNS。音楽 を背景にダンスやコメディを演出。視聴者の 反応が高いコンテンツはすぐにバイラル化 し、全世界に拡散できる。
30. YouTubeはビデオ共有プラットフォーム。自 作のビデオを公開し、視聴者とコメントで交 流。学習・エンターテイメントなど多岐にわ たるジャンルのコンテンツが揃う。 LinkedIn LinkedInはプロフェッショナルなネットワー キングに特化したSNS。自分の職歴やスキルを プロフィールに記載し、企業や同業者とつな がり、情報共有や就職活動に活用。 description by ChatGPT Pinterest Pinterestはビジュアルに重点を置いたSNS。 自分の興味やインスピレーションを「ピン」 として保存、共有。イメージボードでアイデ アを整理し、他のユーザーとインスピレー ションを交換。 Clubhouse Clubhouseは音声のみのSNS。リアルタイムの 会話ルームでディスカッションやパネルディ スカッションに参加。様々なトピックや専門 家から学び、新たな人脈を築く。
31. 花田浩史さんはラーメン専門店の店主です。 お店の美味しいラーメンを見てもらいたくて Instagramをはじめました。 Instagramでは画像以外にも テキストや動画を投稿することができます。 ラーメンや店舗情報の投稿を続けていたら インフルエンサーのストーリーでお店が紹介されました。 ペルソナ : SNS -> Instagram 気軽に投稿できて即効性と拡散力があるのがSNS イラスト：bon design https://bon.design/
32. SNS ポータルサイト クローズドサービス ホームページ もくじ
33. description by ChatGPT Googleビジネスプロフィール (旧称: Google マイビジネス) ビジネスの情報をGoogle検索やGoogleマップ 上で一元管理・公開できる無料のツールで す。基本情報の公開、顧客レビューへの対 応、写真や動画の投稿などが可能で、ビジネ スのオンラインでの見え方を向上させ、ロー カルビジネスの発見性を高めます。 顧客レビューへの対応： ビジネス所有者自身がレ ビューや評価に直接返信できます。 写真と動画の投稿： 商品・サービスの写真や動画を投 稿し、ビジネスの魅力をビジュアルで伝えます。 インサイトの提供： 検索キーワードや訪問者のアク ション（ウェブサイトへのアクセス、電話の発信等） などの分析データを提供します。 投稿機能： お知らせや新商品、イベント情報を投稿で き、タイムリーな情報を顧客に伝えます。 Facebookページ ビジネスやブランドがFacebook上で自己を表 現し、ファンや顧客とコミュニケーションを とるためのプラットフォームです。ビジネス 情報の公開、投稿のシェア、顧客とのインタ ラクションなどが可能で、認知度向上や顧客 エンゲージメントの強化に役立ちます。 投稿のシェア： 新製品、イベント、ニュースなどの情 報を投稿し、ファンや顧客に伝えることができます。 顧客エンゲージメント： ユーザーのコメントやメッ セージに対応したり、投稿に対するリアクションを見 ることコミュニケーションを深めることができます。 広告の運用： ターゲットオーディエンスに対する広告 キャンペーンを作成・運用できます。 インサイトの提供： パフォーマンスやエンゲージメン トなど、様々な分析データを提供します。
34. 食べログ Retty ぐるなび ホットペッパーグルメ 旅行・宿泊業 楽天トラベル じゃらんnet Airbnb Booking.com description by ChatGPT 自動車業 カーセンサーnet goo 自動車 カービュー 不動産業 SUUMO at home ホームズ 飲食業
35. Hot Pepper Beauty ビューティーパーク ミニモ LOCARI(ロカリ) 医療機関 医師を探すiDoctor エムスリー クリニックを探すQLife description by ChatGPT 教育機関 スタディサプリ ベネッセ リクナビ進学 カクガクナビ 小売業・EC Amazon 楽天市場 Yahoo!ショッピング メルカリ 美容業
36. 花田浩史さんはラーメン専門店の店主です。 Googleマップに掲載されている口コミに返信するために Googleビジネスプロフィールをはじめました。 GoogleビジネスプロフィールではGoogleマップの 電話番号・営業時間や休業日などの情報を 正しいものに変更することが可能です。 口コミがあるたびに真摯に返信することで リピーターのお客様を獲得することができました。 ペルソナ : ポータルサイト -> Googleビジネスプロフィール 同じジャンルの情報をまとめて掲載しているのがポータルサイト イラスト：bon design https://bon.design/
37. SNS ポータルサイト クローズドサービス ホームページ もくじ
38. description by ChatGPT 企業や団体、有名人などがLINE上でユーザー とコミュニケーションをとるためのツールで す。情報発信、直接メッセージの送受信、広 告配信などが可能で、顧客エンゲージメント の強化や新規顧客の獲得に寄与します。 情報発信： 新商品、イベント、ニュースなどの情報を 投稿し、フォロワーに直接伝えることができます。 1対1のコミュニケーション： ユーザーからの個別メッ セージに対して直接返信し、顧客サポートや問い合わ せ対応を行うことができます。 広告配信： LINEの広告を使って、ターゲットオーディ エンスに対して広告を配信することができます。 これらの機能で、顧客との直接的なコミュニケーショ ンを通じて顧客関係を強化したり、新たな顧客獲得を 目指すことが可能です。 LINEオープンチャット 特定のテーマや目的を持つコミュニティを形 成し、その中でユーザー間で情報を共有した り意見を交換するためのプラットフォームで す。チャットルームの作成、メッセージの送 受信、情報の共有などが可能です。 公開チャットルーム：興味・関心の同じユーザーとの コミュニケーションが可能になります。 メッセージの送受信： 自由なメッセージの送受信が可 能です。テキストの他、スタンプ、画像、動画、音声 なども送信できます。 メンバーの管理： 管理者は、メンバーの参加・退出の 管理、不適切な発言の削除、ルールの設定などを行う ことができます。
39. description by ChatGPT Facebook上で特定のテーマや興味を共有する ユーザーが集まり、情報を共有したり意見を 交換したりするための場所です。メンバーが 投稿を作成し、他のメンバーとのインタラク ションを行うことができます。 投稿の作成と共有： メンバーは自由に投稿を作成し、 情報を共有することができます。 メンバーは他のメン バーの投稿に対してリアクションを行ったり、コメン トを残したりすることができます。 グループの管理： グループの管理者やモデレーター は、メンバーの参加の承認や不適切なコンテンツの削 除などの管理機能を行うことができます。 プライバシー設定： グループは公開、クローズ、シー クレットの3つのプライバシー設定から選べます。これ により、コミュニティの規模や公開範囲をコントロー ルできます。 Discord コミュニティを形成するためのオンラインプ ラットフォームです。ユーザーはサーバーと 呼ばれる場所を作成し、その中でテキスト、 音声、ビデオによるコミュニケーションを行 うことができます。ゲーム配信やゲームとの 連携機能も持つことから、ゲーマーに特に人 気があります。 テキストチャット： ユーザーはチャンネル内でリアル タイムにメッセージを送信できます。画像や動画、リ ンクも共有できます。 音声・ビデオチャット： ユーザーは音声チャットチャ ンネルで他のユーザーと話すことができます。また、 ビデオ通話や画面共有も可能です。 サーバーとチャンネルのカスタマイズ： サーバー所有 者は、サーバー内でのチャンネル設定や役職の割り当 てなど、コミュニティの管理を行うことができます。 Facebookグループ
40. 花田浩史さんはラーメン専門店の店主です。 LINE公式アカウントを使ってクーポンの配信や リピーター向けの特別メニューの案内をはじめました。 LINE公式アカウントでは お客様とのコミュニケーションはもちろん AI・BOTを使用しての自動返信や予約システムも使用可能です。 売上が低い曜日の前日にクーポンを配信することで 安定した集客を確保することができました。 ペルソナ : クローズドサービス -> LINE公式アカウント ユーザーとの距離が近いクローズドサービス イラスト：bon design https://bon.design/
41. SNS ポータルサイト クローズドサービス ホームページ もくじ
42. Q.ホームページっているん？ A.あったらいいけど 　他に優先するものの後でいい 　ホームページを優先してもいい もう一度
43. SNSやポータルサイト、クローズドサービスで ユーザーが求めているものを提供できないと思ったら ホームページを作ればいい ホームページ
44. そこにしかない正しくてまとまっている情報を 提供したいと思ったら ホームページを作ればいい ホームページ
45. じゃあ最初から ホームページだけ作ればいいやん？ ホームページ
46. ホームページ ホームページのメリットは 全てを自分でコントロールできること ホームページのデメリットは 全てを自分でコントロールしないといけないこと 「手間かお金」もしくは 「手間とお金」がかかる
47. ユーザーが求めているもの × 提供したいこと × コスト ホームページ
48. これに見合うと思ったら ホームページを作ろう ホームページ
49. ホームページは 文章を構造化するための HTML(HyperText Markup Language)と 見栄えや表示形式を制御するための CSS(Cascading Style Sheets)で構成されています これらを直接作成してホームページを作ることができます CMSやWebサービスを使用することで専門知識が無くても ホームページを作成されることも多く広まっています ホームページ
50. description by ChatGPT 世界で最も広く利用されているコンテンツ管理システム（CMS）の一つです。オープンソースで提供され ており、個人ブログから大規模なニュースサイト、商用サイトまで、さまざまなウェブサイトを作成する ことが可能です。ユーザーフレンドリーなインターフェース、数千に上るテーマとプラグインによる高い カスタマイズ性などが特徴で、初心者からプロフェッショナルまで幅広いユーザーに対応しています。 テーマとプラグイン： WordPressは多数のテーマとプラグインを提供しており、これらを組み合わせることで自分だけのウェブ サイトをカスタマイズすることができます。テーマはウェブサイトのデザインを決定し、プラグインは機能を追加または強化し ます。 投稿とページ： 投稿はブログエントリーのように日付順に表示されるコンテンツで、ページは静的なコンテンツ（例：「会社 情報」ページなど）を作成します。 ユーザー管理： 管理者、編集者、寄稿者など、さまざまな役割を持つユーザーを管理することができます。 SEOとソーシャルメディア対応： SEO対応の機能やソーシャルメディアとの連携機能を持っており、ウェブサイトの認知度を高 めるのに役立ちます。 これらの機能を利用することで、ユーザーは自分の目的に合わせたウェブサイトを自由に作成・管理することができます。
51. description by ChatGPT コーディング知識なしでプロフェッショナル なウェブサイトを作成できるオンラインプ ラットフォームです。ドラッグ＆ドロップエ ディターと豊富なテンプレートを利用してカ スタマイズし、eコマース機能、SEO対策ツー ルなどでビジネスのオンライン展開をサポー トします。 テンプレートとデザイン： Wixは数百種類のデザインテ ンプレートを提供しており、ユーザーのビジネスや趣 味に合わせて選ぶことができます。 eコマース機能： オンラインストアの設定が可能で、商 品の管理、支払い方法の設定、配送方法の設定など、 オンライン販売に必要な機能が揃っています。 アプリマーケット： ブログ、写真ギャラリー、メール マーケティングなど、さまざまな機能を追加できるア プリを提供しています。 Google サイト Googleアカウントを持っていれば誰でも無料 で使用することができるウェブサイト作成 ツール。ドラッグ＆ドロップの操作で独自の ウェブサイトを作成することが可能です。個 人のポートフォリオサイトから企業の公式サ イト、プロジェクトの共有ページなど、多様 な用途で利用できます。 Google Workspaceとの連携： Googleドキュメントや Googleスプレッドシート、Googleスライドなど、他の Googleアプリとの連携が可能。 共有と協力： URLを通じて簡単に公開することがで き、また特定の人と編集を共有して共同でウェブサイ トを作成することも可能です。 テンプレート： サイト作成のためのテンプレートを提 供しており、ビジネス、個人、プロジェクト、イベン トなどのカテゴリーから選ぶことができます。 Wix
52. description by ChatGPT ドラッグ＆ドロップ操作でウェブサイトを作 成できるビジュアルエディタを提供するサー ビスです。デザインとコーディングの知識が なくても、プロフェッショナルなウェブサイ トやランディングページを作成することが可 能です。 インタラクティブデザイン： 動きのある要素を取り入 れることで、インタラクティブなウェブサイトを作成 できます。 テンプレート： デザインテンプレートが豊富で、自分 のニーズに合わせて選択可能です。 チーム協働： チームメンバーと共同でプロジェクトを 管理し、リアルタイムで編集することができます。 レスポンシブデザイン： 作成したウェブサイトはデバ イスに応じて自動的にレイアウトを最適化します。 Jimdo プログラミングの知識がなくてもウェブサイ トやオンラインストアを作成できるウェブサ イトビルダーです。独自のAI（人工知能）を 活用し、ユーザーのニーズに合わせたウェブ サイトを提案します。 AIドルフィン： ユーザーのニーズを理解し、適切な ウェブサイトデザインを提案するAIドルフィンが特徴で す。 テンプレート： 多種多様な業界や目的に合わせたテン プレートが用意されており、そのまま利用したりカス タマイズしたりできます。 eコマース： 商品のアップロード、在庫管理、支払い方 法の設定など、オンラインストア運営に必要な機能を 提供しています。 STUDIO
53. 花田浩史さんはラーメン専門店の店主です。 WordPressを使用して お店のホームページを立ち上げました。 WordPressでは自由にブログを書くことができます。 たくさんのテーマやプラグインの中から 必要な機能だけを選ぶことができて自分だけのカスタマイズが可能。 新しいメニューの誕生までをブログにすることで 沢山のお客様に新メニューを食べてもらうことができました。 ペルソナ : ホームページ -> WordPress オーナー提供の最新情報をまとめて発信できるホームページ イラスト：bon design https://bon.design/
54. インターネット上にはSNSやポータルサイトなど 沢山のサービスで溢れています。 開発したシステムやWebサービスを組み合わせて ホームページとして提供することもできます。 あれもこれも同時に手を出すのではなく 提供したい内容に合わせて使うものを絞り込んだり 共通のデータを使用したりすることでコストを抑えて ユーザーが求めているものを届けましょう。 まとめ
55. WordPress楽しいよ？ まとめ