ホームページが 作 成 が 初 めてでも 出 来 ます 無 料 で 出 来 るツールを 使 って 情 報 発 信 して 活 動 の 幅 を 広 げよう! デザイン 自 由 かんたんホームページ 制 作 術 2013.5.19,26,6.2 大 田 文 化 の 森 運 営 協 議 会 芸 術 事 業 実 行 委 員 会 企 画
講 師 自 己 紹 介 長 澤 恵 (ながさわ けい) 資 格 初 級 システムアドミニストレータ ワープロ 専 門 士 一 級 NTTドットコムマスター,MOS Excel ホームページビルダー2 級 経 歴 コンサルティング 会 社 商 社 などを 経 て 2000 年 よりパソコンインストラクターとして 活 動 を 始 める 2005 年 よりホームページ 制 作 に 携 わる 2012 年 よりホームページ 作 成 講 座 を 大 田 区 内 にて 開 催 出 張 個 人 レッスンも 行 っている 講 習 経 歴 業 界 団 体 商 店 街 組 合 等 のパソコン 講 習 初 心 者 対 象 IT 講 習 出 張 個 人 講 習 ( 大 田 区 内 事 業 所 多 数 ) 他
ホームページとは インターネット 上 の 仮 想 支 店 インターネット 上 の 販 売 店 舗 インターネット 上 の 営 業 拠 点 知 って 欲 しいこと 情 報 発 信 の 基 地 みんなが 知 りたいこと
ホームページを 作 る 目 的 活 動 を 知 ってもらう ( 広 報 ) お 客 さんや 会 員 を 集 めるため( 集 客 ) 会 員 同 士 のコミュニケーション 会 員 同 士 の 情 報 共 有
ホームページを 作 るのに 必 要 なもの 専 用 ソフト ホームページビルダー ドリームウィーバー ftpソフト(webサーバへアップロードするためのソフト) Webサーバ ドメイン(http://www.ota-bunkanomori.jp/) CMS(ブログタイプのHPシステム 専 用 ソフトは 必 要 ない) WordPress( 専 門 知 識 が 必 要 ) Xoops etc( 専 門 知 識 が 必 要 ) Jimdo( 専 門 知 識 は 特 に 必 要 ない)
ドイツ 生 まれ KDDIが 日 本 代 理 店 デザインテンプレート が 豊 富 ブラウザで 全 ての 操 作 が 出 来 る Jimdo Free( 無 料 ) Jimdo Pro,Bussine( 有 料 ) Jimdoとは
Jimdoのメリット 見 たままに 編 集 が 出 来 る 直 感 的 でわかりやすい 無 料 でもHPを 作 ることが 出 来 る
JimdofreeプランとJimdoPro の 違 い Jimdofreeは 無 料 JimdoPro は 年 間 11,340 円 Jimdofreeはログインを 非 表 示 にできない Jimdofreeは 個 別 ページのSEO 対 策 が 出 来 ない (トップページのみ) ヘッダーのロゴは 設 置 できない HPアドレス(ドメイン)に www.sample.jimdo.com のようにjimdoがつく jimdoの 広 告 が 入 る
制 作 事 例 サンカラーのエコガラス 塗 装 http://www.paint-eco.com/(jimdopro) プティエルブ( 横 浜 市 のアロマサロン) http://www.petite-herbs.jp/(jimdopro) ハワイアンロミロミ ぷありりれふあ http://pualililehua.jimdo.com/(jimdofree) cheers valleyball team http://cheersvolley.jimdo.com/(jimdofree) 私 たちの 街 皇 山 町 http://yamayamayama.jimdo.com/(jimdofree)
企 画 書 をつくる HPを 作 るにあたって 決 めなければならないこと タイトル URL(アドレス) 目 的 目 標 キーワード( 大 田 区 マ マさんバレー.etc) 説 明 (100 文 字 程 度 ) メニュー 内 容
Jimdoに 登 録 する http://jp.jimdo.com/にアクセスします ホームページアドレス メールアドレス パスワードを 入 力 します
Jimdoに 登 録 する(メールを 確 認 ) 登 録 が 完 了 すると 登 録 したメールアドレス 宛 にメールが 送 信 されます 登 録 メールを 確 認 する をクリックします
Jimdoに 登 録 する( 画 像 認 証 ) スパム 防 止 用 の 画 像 認 証 で 文 字 を 入 力 します
ログイン メールに 記 載 してあるホームページアドレス(URL)をクリックして 自 分 のホー ムページに 飛 びます ログイン をクリックして パスワードを 入 力 します パスワードは 忘 れないように!また 他 の 人 にわからないようにすること
ログアウト 編 集 を 終 了 したら 必 ずログアウトしておきます
プレビュー 画 面 と 編 集 画 面 の 切 り 替 え プレビュー と 出 ている 時 は 編 集 画 面 プレビューしたいときクリック 編 集 と 出 ている 時 は 編 集 画 面 編 集 したいときクリック
講 座 専 用 ホームページ http://bunkanomori-kouza.jimdo.com/
レイアウトの 変 更 右 の 管 理 メニューの 一 番 上 の レイアウト をクリックします その 中 のF1327をクリックして 選 択 します ( 後 で 他 のレイア ウトに 変 更 できます) はい をクリックします
ヘッダーの 設 定 ー 背 景 画 像 ー ページの 上 の 部 分 をヘッダーと 言 います ページタイトル 下 の 部 分 にマウスポインタをあて ヘッダー を 編 集 をクリックすると 編 集 が 出 てきます フォトギャラリーから グリーンの 葉 をクリックします (あとで 好 きな 画 像 に 変 更 できます)
ヘッダーの 設 定 -ページタイトルー ドラッグ&ドロップでも 動 かすことが 出 来 ます 文 字 の 大 きさを 変 更 できます 文 字 を 入 力 すると タイトルに 反 映 されます タイトルの 位 置 を 調 整 できます 文 字 の 色 を 変 更 できます
ホームページの 配 色 について 色 相 かんたんなコツ 似 ている 色 を 使 う 反 対 色 を 使 う 一 つのHPにあまり 沢 山 の 色 を 使 わない 写 真 の 色 と 合 わせるetc ホームページの 配 色 についての 参 考 ページ http://color.hpgraffiti.com/3zokusei.html http://www.pw-design.jp/spice/
色 から 連 想 されるイメージ 系 統 色 の 組 み 合 わせ 連 想 されるイメージ 赤 色 系 黄 色 系 緑 系 シアン 系 ( 青 緑 ) 情 熱 明 るい 危 険 激 しい 愛 強 烈 開 放 的 新 鮮 元 気 明 朗 注 意 緊 張 イライラ かわいい にぎやか 愉 快 さわやか 平 和 安 全 自 然 若 さ 健 康 安 息 幸 福 新 鮮 誠 実 冷 静 クール 涼 しい 純 粋 気 持 ち 良 い デ リケート 透 明 青 系 静 寂 誠 実 冷 静 クール 涼 しい 神 秘 上 品 フォーマル 知 的 マゼンダ 系 女 性 的 上 品 ムード 奇 抜 優 雅 はなやか エ キゾティック 高 貴 大 人 っぽい Jimdo ならテンプレートがそろっているので 色 を 選 んで 調 整 するだけです
スタイル(デザイン) 変 更 2 色 彩 テンプレート をクリック 1スタイルをクリック 3 任 意 のテンプレー トをクリック
スタイル(デザイン) 変 更 1 背 景 画 像 をクリック 2 一 番 下 までスクロールさせてこの 背 景 をクリック
サイト 名 の 入 力
サイト 名 の 入 力 タイトルを 入 力 して 保 存 をクリックします
メニューの 設 定 メニュー ホーム カリキュラム お 問 合 せフォーム ブログ 大 田 文 化 の 森 とは 小 メニュー 文 章 の 入 力 写 真 の 挿 入 リンクの 設 定 Googleマップ Youtubeの 表 示 デザイン 自 由 かんたんホームページ 作 成 術 のメニュー 構 成 です
メニュー(ナビゲーション)の 設 定 1マウスポインタをメニュー の 上 に 当 てると ナビゲーションの 編 集 が 出 てきます 2メニューを 編 集 します
メニュー(ページ)の 編 集 メニュー 名 を 編 集 します ページを 非 表 示 にします ページを 削 除 します ページを 上 下 に 移 動 します ページの 階 層 を 変 更 します 新 規 ページを 追 加 します 編 集 が 済 んだら 保 存 して 閉 じる をクリックします
講 座 2 日 目 いよいよ ホームページの 作 りこみに 入 って いきます Jimdoの 基 本 的 な 操 作 が 中 心 です しっかりと 覚 えて 素 敵 なホームページを 作 っ ていきましょう!
見 出 し 1 項 目 を 追 加 をクリック します 2 見 出 し を クリックします
見 出 し 見 出 しを 入 力 します 見 出 し1 - 見 出 し2- 見 出 し3 の 順 で 階 層 になっています
文 章 1 先 に 入 力 したエレメントにマウスをあてると + が 出 てくるのでクリックします 2 文 章 をクリックし ます
文 章 太 字 に 出 来 ます 色 の 変 更 が 出 来 ます
水 平 線 1 水 平 線 をクリッ クします 2 水 平 線 が 表 示 されました 3 閉 じる をクリックします
写 真 1 写 真 をクリック します 2 ファイルを 選 択 をクリックします
写 真 1 写 真 をクリックし ます 2 開 く をクリック します
写 真 1 写 真 が 表 示 され ました 4サブタイトルを 入 力 出 来 ます 2サイズの 変 更 が 出 来 ます 3 画 像 の 位 置 が 変 更 できます 5 最 後 に 保 存 をクリックします
写 真 つき 文 章 1 写 真 をクリック します 2 文 章 を 編 集 と 写 真 を 編 集 を 切 り 替 えて 編 集 します
フォトギャラリー 1 フォトギャラリー をクリックします スライドショー 形 式 に 変 更 できます サイズの 変 更 が 出 来 ます 2 選 択 をクリックして 写 真 を 指 定 します 手 順 は 写 真 を 同 じで す
フリー 素 材 ( 画 像 )を 使 う ホームへ 戻 る ボタンの 画 像 を 探 します 1 フリー 素 材 ホーム で 検 索 2 気 に 入 った 画 像 の 上 で 右 クリック 名 前 を 付 けて 画 像 を 保 存
リンクの 設 定 ( 文 字 ) 2リンクのアイコンを クリックします 1リンクしたい 文 字 を ドラッグします 2ホームをクリックし ます 4 リンクを 設 定 をク リックします 5 保 存 をクリックし ます
リンクの 設 定 ( 画 像 ) 1 写 真 をクリックしま す 2リンクアイコンを 区 リンクし リンクの 設 定 ( 文 章 ) と 同 様 にリンクを 張 る
HPと 著 作 権 承 諾 をえずに 画 像 を 使 用 しない 画 像 は 素 材 サイト から 持 ってくる 引 用 については 引 用 元 を 明 記 する Q1. 一 緒 に 遊 びに 行 った 友 達 の 写 真 を 承 諾 を 得 ないでHPに 載 せた か? Q2. 俳 句 の 会 で 友 達 の 句 がとても 気 に 入 ったので 友 達 にことわってからブログに 掲 載 した か か? Q3. 子 どもの 発 表 会 の 写 真 を 本 人 が 特 定 できないように 加 工 してHPに 掲 載 した か か? Q4. 生 まれたばかりの 自 分 の 子 どもの 写 真 をHPに 掲 載 した か か? 参 考 サイト: HPやサイトで 文 章 や 画 像 を 使 用 する 際 著 作 権 法 違 反 にならない 方 法 http://nanapi.jp/15604/ 著 作 権 について かまたPCさろんーブログー 著 作 権 について http://www.himuca-design.com/
講 座 3 日 目 いよいよ 最 終 日 です 疑 問 質 問 などを 解 消 しておきましょう
このようなお 問 合 せ フォームを 作 ります お 問 合 せフォーム
お 問 合 せフォーム 1 フォーム をクリッ クします 2 + をクリックして 新 項 目 を 追 加 します
お 問 合 せフォーム 文 字 が 入 ります メールアドレス 文 字 が 入 ります 幅 80%) 文 字 が 入 ります カレンダー ラジオボタン 文 章 が 入 りま す
Googleマップ 3 地 図 をクリックします 1 Googleマップ を クリックします 2 住 所 を 入 力 して 検 索 をクリックします 4 新 しい 目 的 地 をクリックします 5 保 存 をクリックします
Youtube 動 画 の 表 示 1youtubeで 動 画 を 表 示 させます 2 共 有 をクリックします 3URLをコピーします
Youtube 動 画 の 表 示 1 youtube 等 を クリックします 2コピーしたURLを 貼 り 付 けます (Ctrl + V) 5 保 存 をクリックします 3 OK をクリックします 4 幅 を 選 択 します
アクセス 制 限 ページ 2 パスワード 保 護 領 域 をクリックし ます 1 設 定 をクリック します
アクセス 制 限 ページ 新 規 パスワード 保 護 エリアを 追 加 す る をクリックします
アクセス 制 限 ページ 1 保 護 領 域 の 名 前 を 入 力 します 2パスワードを 入 力 します 3 保 護 したいページにチェックを 入 れます 4 保 存 もしくは 閉 じる をクリックします
背 景 に 動 画 を 設 定 する 2 オリジナル 背 景 画 像 をクリックし ます 1 管 理 ツールの スタイル をクリック します 3ビデオをクリックします 4 下 にスクロールさせます
背 景 に 動 画 を 設 定 する 1youtubeのアドレスを 入 力 します 2 保 存 をクリックします 3 はい をクリックします
ボタンメーカー ボタン 素 材 自 動 生 成 サイト - ButtonMakerア フラット - box aflat - アフラット http://box.aflat.com/buttonmaker/ お 問 合 せへのリンクボタンなどが 簡 単 に 作 れ るサイト
ボタンメーカー このようなボタンをつくります 12 画 像 の 上 で 右 クリックして 名 前 をつけて 保 存 します HPには 写 真 で 挿 入 し リンク を 貼 ります 5 文 字 を 入 力 11クリック! 1サイズを 入 力 2 背 景 色 を 選 択 3 枠 線 の 色 とサイ ズ 6 文 字 種 類 7 文 字 の 大 きさ 8 文 字 の 位 置 9 丸 くする 角 にチェック 10クリア 調 を 選 択
より 多 くの 人 にHPを 見 てもらうには 名 刺 カードにアドレスを 印 刷 する 他 のHPにリンクをしてもらう ポータルサイトに 登 録 する Googleプレイス Yahooロコプレイス etc JimdoフリーからJimdoプロへグレードアッ プする 新 しくページを 追 加 してHPを 更 新 する
さらにJimdoを 深 めるためには Jimdo&みんビズのマニュアル 解 説 サイト Jimdoでつくる 簡 単 ホームページ! http://jp-m.jimdo.com/ Youtubeのマニュアル 動 画 jimdoマニュアル で 検 索 すると 数 多 くの 動 画 を 見 る ことが 出 来 ます デザイン 自 由 かんたんHP 制 作 術 講 座 専 用 HP http://bunkanomori-kouza.jimdo.com/