はじめてのWebサイト作り「ジンドゥー AIビルダーで実際につくる！」

はじめてのWebサイト作り ジンドゥー AIビルダーで 実際につくる！ かやはら あやこ セミナー資料

0. 講師紹介 仕事内容

はじめましての方へ フォトライターの かやはらあやこです 1978年生まれ、大阪府出身。 小学４年生と中学2年生の娘2人と夫の4人家族。 2021年春に約20年住んだ北九州市から豊前市に移住し たフリーランスフォトライターです。 講師紹介 1/8

豊前から来ました 講師紹介 2/8 豊前(ぶぜん)ってどこ？ ほぼ大分県寄りの福岡県。 人口約24000人。 特産品は鱧、カニ、豊前ひとつぶ牡蠣。 お米や柚子も美味しい。 森林セラピー基地。 近年、神秘のサウナがあると 福岡市からも人が訪れる 自然豊かな町です。 伝統芸能の豊前神楽や八屋祇園など身近 に歴史が残る。 北九州からの移住者が増えている？ 北九州 空港 福岡 IC 小倉駅 高速30分 豊前 IC 高速70分 豊前 IC 特急30分 宇島駅

仕事内容 豊前市の観光やまちづくりのPR 豊前観光まちづくり協会公式note企画・制作 2024年度 豊前市PR動画制作 Webサイト「求菩提里山リトリート」 文章制作・写真撮影 求人サイト「豊前しごと図鑑」ライター 2023年度「ぶぜん食と農の革新会議」 インスタグラム担当 講師紹介 3/8

仕事内容 豊前市外のWebメディアのライター 福岡県の移住促進Webメディア「福がお〜かくらし」 内「福岡くらしごと体験」ライター 大分県中津市のWebメディア「ジモッシュ！Web」 ライター 講師紹介 4/8

講師紹介 5/8 なぜライターが ホームページのセミナーを？

2016年-2020年 移住前の仕事 ホームページ作成サービス「ジンドゥー」 公式の学び場を運営 2021年に豊前市に移住する前は 北九州市でJimdoCafeを運営していました。 当時はフォトライターに特化しておらず、Webサイト 制作、文章制作、写真撮影、ブログ運用など色々ご依 頼を請けていました。 もしかしたらご存知の方もいらっしゃるかも？ 講師紹介 6/8

仕事内容 御縁が続き北九州市の会社とコラボして ジンドゥーをベースにしたHP制作 北九州市の㈱VIコンサルティングとコラボして、 コストを抑え自走可能なホームページ制作 「ワラルー」を提供。 講師紹介 7/8

自己紹介 まとめ 初心者向にWebサイト作りを 教えてきたライターが 今から皆さんに 専門知識がいらないサービスを使って 前回の講座で作った原稿から 自走できるWebサイトを 簡単に作る方法をお伝えします 講師紹介 8/8

はじめてのWebサイト作り ジンドゥーAI ビルダーで実際につくる！

セミナー内容 1.おさらい 前回のおさらい 2.はじめに 簡単にWebサイトを作る方法 3.ジンドゥーとは ジンドゥーの2種類のサービスの特徴・選び方 4.準備 Webサイト作成の前に準備しておきたいこと 5.デモ 実際に画面を見せて作成デモンストレーション 6.ワーク 実際に作ってみましょう 7.質問共有 ワークでいただいた質問を共有します

1.前回のまとめ 前回はこんなことを学びました

前回のまとめ 前回のまとめ 1/2 Webサイトの役割は デジタル上に置くチラシ。 基本となる情報の要素はチラシと同じ。 プラスマイナスゼロで 正しく(等しく)表現。 正しく表現できたら 自ずと違いが現れる。

前回のまとめ 前回のまとめ 2/2 講 師 の デ ジ タ ル チ ラ シ の 原 稿

2.簡単にWebサイトを作る方法 プログラミングやデザインができなくても作れます！ ホームページだけでなく イベントページも作りやすい

1.簡単にWebサイトを作る方法 専門知識がないとWebサイトが作れなかった かつてWebサイトといえばWebデザイナーが作る専門的なものでした。 見た目のデザインだけでなく、お問合せを送るためのフォームのプログラム等 専門家以外には作ることが難しいものでした。 1/10

1.簡単にWebサイトを作る方法 簡単にWebサイトを作れるサービスが生まれた プログラミングがいらないノーコードWebサイト作成クラウドサービス 2/10

1.簡単にWebサイトを作る方法 ソフトも生まれました… 「ホームページビルダー」という名前に聞き覚えは？ 今はクラウド型の作成サービスが優勢です 3/10

1.簡単にWebサイトを作る方法 特徴① インストールしなくてもよい クラウド上で動くのでソフトのようにインストールが不要 インターネットで接続したら常に最新状態 4/10

1.簡単にWebサイトを作る方法 特徴② 直感的な操作でサイト作成が可能 それぞれ操作感の違いはあるものの 全てノーコード。直感的な操作でWebサイトの作成ができます 5/10

1.簡単にWebサイトを作る方法 特徴③ 無料から使えます 日本でよく使われているWebサイト作成サービスについて ほとんど全て無料プランから使うことが可能 6/10

1.簡単にWebサイトを作る方法 特徴④ メールサポートあり 分からない時はメールサポートが利用可能 ※有料が優先 7/10

1.簡単にWebサイトを作る方法 WordPressも簡単って 聞きますが？ 8/10

1.簡単にWebサイトを作る方法 簡単なところと難しいところがある サイトの文章・写真の更新、ブログ記事の追加など簡単 自力でのメンテナンスが専門家以外には難しい ※外注するならOK 9/10

1.簡単にWebサイトを作る方法 かつてWebサイトは 専門家だけが作れるものでした。 しかし今では専門家でなくても ホームページを作るサービスが充実。 特にクラウド型のサービスが おすすめです 10/10

2.ジンドゥーとは 講師おすすめのサービスはジンドゥー

2.ジンドゥーとは 1/18 ドイツ発、世界中で使われている クラウド型のWebサイト作成サービスの一つ ・2007年ドイツでスタート ・海外での表記はJimdo ・日本での表記はカタカナに 変更 ・2009年日本でスタート KDDIウェブコミュニケーションズ が独占契約 ・2020年の時点で日本国内 170万サイトが作成

2.ジンドゥーとは ジンドゥーをおすすめする理由 講師は以前ジンドゥー公認の学び場も運営 2/18

2.ジンドゥーとは 受講者のなかで最もパソコンが苦手な方が 習得できたから 作成とその後の更新作業含めて10時間かからなかった 3/18

2.ジンドゥーとは 組織で自走させたい方にもおすすめ スタッフの方に更新をお願いしたいなら 最も難しくないサービスを選んだほうが習得コストがかからない 4/18

2.ジンドゥーとは 5/18 使い方を学べる書籍・動画・サイトもあり 書籍 動画 Webサイト

2.ジンドゥーとは 6/18 AI ビルダー クリエイター ジンドゥーには２つのサービス 見た目もできることも違う

2.ジンドゥーとは 7/18 どちらがいい？ 大きな違いを知っておきたい

2.ジンドゥーとは AIビルダーはスマホでサイト作成が可能 クリエイターは作成したサイトの 写真や文章の入れ替え、ブログの更新がアプリで可能 8/18

2.ジンドゥーとは 質問に答えるだけでサイトの形ができます クリエイターは「テンプレート」と呼ばれるデザインの雛形を 自分で選んでから作成します 9/18

2.ジンドゥーとは 10/18 色の調整が優秀！ 実は難しいWebデザインの「色」 AIビルダーの色のコーディネートはデザインができない人の強い味方

2.ジンドゥーとは 手間をかけずに今どきのサイトが手に入る 講師も自分の仕事用のWebサイトはAI ビルダーで作成。 11/18

2.ジンドゥーとは AIビルダーはブログの機能はありません ブログサービスへのリンクは可能 12/18

2.ジンドゥーとは AIビルダーはカート機能はありません ブログサービスへのリンクは可能 13/18

2.ジンドゥーとは AIビルダーは制限つきのページが作れない パスワード制限をかけたいならクリエイター 14/18

2.ジンドゥーとは 15/18 AIビルダーお問合せ項目が固定 お問合せで色々な項目を入れたいならクリエイターまたは外部サービスをリンク

2.ジンドゥーとは どちらがよいでしょう？ 16/18

2.ジンドゥーとは チラシレベルであればどちらでも大丈夫 写真の表示、文章の掲載、他サイトへのリンク 17/18

2.ジンドゥーとは ジンドゥーは講師がおすすめする 難易度が低いWebサイト作成サービス 無料からでも十分使うことができ 使い方を自分で調べやすい チラシレベルの情報であれば AIビルダーでもクリエイターでも どちらでも作成可能 18/18

3.作成前の準備 Webサイト作成の前にしておくこと

3.作成前の準備 1/3 準備しておくとラクなこと ☐Webサイトで発信したい情報をまとめておく ☐Webサイトで使う画像を準備しておく(写真・イラスト) ☐Webサイトで使う文章を準備しておく ☐Webサイトで動画を準備しておく(YouTubeまたはVimeoにアップロード) ☐サイトの名前を考えておく ☐メモアプリなどに文章を入力

3.作成前の準備 2/3 Webサイトに使う画像・イラスト素材集 利用規約は要チェック ぱくたそ 写真AC いらすとやさん ICOOON MONO https://www.jimdo.com/jp/blog-hp-sozai-site-osusume/

• https://www.jimdo.com/jp/blog-hp-sozai-site-osusume/

3.作成前の準備 まとめ いきなり作成サービスを使うのではなく 準備するとその後がスムーズ チラシ程度の内容で まずは十分です 3/3

4.Webサイト作成デモ 講師が作る様子をご覧いただきます

4.Webサイト作成デモ サンプルサイトを作っていきます 架空のベーカリーのWebサイトを作っていきます 1/1

5.ワーク 皆さんもお持ちのデバイスで作ってみてください

5.ワーク 1/2 分からない時は隣の方に聞いてみましょう グループでも分からない時は講師にお尋ねください

5.ワーク 2/2 原稿がない方はサンプルの原稿をどうぞ https://20241130seminar.jimdofree.com/ 写真もダウンロードしていただけます

• https://20241130seminar.jimdofree.com/

6.よくいただいた質問 ワーク中によくいただいた質問を共有

7.質疑応答 ご質問はお気軽に！

8.セミナーまとめ まとめ

5.セミナーまとめ 私がはじめてWebサイトを作ろうとした時、 真っ白い画面にどう書き出していけばよいのかと 途方に暮れました。 今回と前回の講座内容はその時の自分に向けて こんなやり方だったら作りやすかっただろう というノウハウを詰め込んでみました。 一度作り方のコツを使えば ホームページはもちろんイベントページ作りも ラクになるはず。 ぜひ沢山作ってみてください！

古民家図書館TSUDURIも運営しています 築年数不明の古民家を DIYなし・リノベなしで 小さな図書館兼オフィスに 豊前市役所の近くです。 毎週水曜日開館 近くにお越しの方はお気軽に お立ち寄りください。 オンラインツアーも計画中！ HP

日記 オールジャンル ホームページ 全てのリンクはこちら かやはら あやこ フォトライター ここまでご覧いただきありがとうございました！ SNSなどお気軽にフォローください 趣味の歴史・文化 動画多め ホームページ作成教室 Webサイト系ノウハウ