もっと早く知りたかった！ホームページの基礎知識 / HPBasic01

Slide 1

Slide 1 text

もっと早く知りたかった！ホームページの基礎知識ポータルズスタッフ中島・太田

Slide 2

Slide 2 text

このような事でお困りではありませんか？

Slide 3

Slide 3 text

ホームページ制作会社の担当の人とうまく意思疎通ができない

Slide 4

Slide 4 text

ていうかホームページ制作するのに専門用語が多すぎてちょっとむずかしい

Slide 5

Slide 5 text

ホームページに載せたい内容があるけどなんて伝えたらいいかわからない

Slide 6

Slide 6 text

今すぐ解決！ホームページ制作の流れについて徹底解説します！

Slide 7

Slide 7 text

うさぎ制作会社のチョッキさんとホームページを作っていきましょう！はーい！よろしくお願いします！

Slide 8

Slide 8 text

ホームページ制作の流れ受注 ↓ ドメイン決定 ↓ 構成案（ワイヤーフレーム）作成 ↓ デザイン

Slide 9

Slide 9 text

ホームページ制作の流れコーディング ↓ 下層ページ制作 ↓ チェック ↓ 納品

Slide 10

Slide 10 text

ドメイン？コーディング？ワイヤーフレーム？下層ページ？？

Slide 11

Slide 11 text

順番に解説していきますその前に… そもそもホームページとは！

Slide 12

Slide 12 text

ホームページ最初に表示されるページトップページウェブサイト全てのウェブページの総称

Slide 13

Slide 13 text

ホームページウェブサイト

Slide 14

Slide 14 text

ホームページウェブサイト

Slide 15

Slide 15 text

ぶっちゃけ同じです私たちはお客様に対してホームページと呼んでいます

Slide 16

Slide 16 text

流れを理解して集客できるホームページを作ろう！早速スタートするよ！

Slide 17

Slide 17 text

それではまずホームページのドメインを決めましょう！ ①ドメインを決めよう！～新規～ドメイン？URLの事ですか？

Slide 18

Slide 18 text

ドメインとURLの違いドメインインターネット上に表示させる為の住所的存在唯一無二の存在、同じものは存在しない、オンリーワンホームページで使われる他に、メールアドレスでも使われる portals.co.jp @portals.co.jp

Slide 19

Slide 19 text

ドメインとURLの違い URL（Uniform Resource Locator）インターネット上にページの場所や画像の場所などを表示させる為の住所的存在ドメインの前後に文字列を入れる事で情報の場所を指定する https://portals.co.jp https://portals.co.jp/about

Slide 20

Slide 20 text

ドメインとURLは… 似て非なるもの

Slide 21

Slide 21 text

移管手続きをすればそのまま使っていただけますよ！ ①ドメインを決めよう～移管～今あるホームページのドメインを使いたいのですが…

Slide 22

Slide 22 text

移管手続き使用中のドメインを使い続ける手続き ❖ ホームページのリニューアルをする時に現在のドメインを引き継ぐ手続きのこと ❖ 手続きにはオースコード（AuthCode）や登記簿情報が必要なこともある

Slide 23

Slide 23 text

移管手続き～メリット～ ❖ ドメインの年数が長いほどSEO的にも有利！ ❖ ブックマークからのお客様を逃さない！ ❖ エキテン等に登録しているURLを変更しなくて済む

Slide 24

Slide 24 text

移管手続き～デメリット～ ❖ 現在の管理会社とのやり取りが必要 ❖ 移管手続きに費用が発生することがある ❖ 移管を承認していない管理会社もある ❖ 切り替え時に表示が不安定になったり、メールが来なくなる事がある

Slide 25

Slide 25 text

まずは今の管理会社へお問い合わせください！移管が可能か？現在の契約状況はどうなっているか？

Slide 26

Slide 26 text

ドメインが決まったので早速構成案を作りました！確認してください！ ②構成案を確認しようわーい！早速見て見よう！

Slide 27

Slide 27 text

構成案（ワイヤーフレーム）とは… デザイン案を作る前の方向性や内容の確認やレイアウト・構成等の擦り合わせツール

Slide 28

Slide 28 text

構成案（ワイヤーフレーム）とは… ❖ 電話番号や住所の確認 ❖ キャッチコピーや全体の文章の確認 ❖ 施術方法が合っているかの確認などなど…

Slide 29

Slide 29 text

構成案を基にデザインを作るので色味はありません… ご理解くださいませ…

Slide 30

Slide 30 text

デザイン案の制作に入る前にサイトの構造を解説していきます！ ③デザイン

Slide 31

Slide 31 text

ポータルズで用意しているデザインレイアウトは大きくわけて2種類！ 2カラムサイト 1カラムサイト

Slide 32

Slide 32 text

左側にメニュー一覧があるものが2カラム画面いっぱいにデザインしてあるものが1カラム 2カラムサイト 1カラムサイト

Slide 33

Slide 33 text

どちらかお好きな方をお選びいただけます。 2カラムサイト 1カラムサイト

Slide 34

Slide 34 text

メニューの充実さをアピールする時は2カラム写真などの視覚でアピールする時は1カラムを選択すると良いかと思います！ 2カラムサイト 1カラムサイト

Slide 35

Slide 35 text

スマホで見た時は 1カラムでも2カラムでも画面いっぱいに表示されています。 2カラムサイト 1カラムサイト

Slide 36

Slide 36 text

上から順に、ヘッダー、サイドバー、メインカラム、フッターがあります。ヘッダーサイドバーメインカラムフッターメインイメージ

Slide 37

Slide 37 text

この名称は1カラム・2カラム共通ですので覚えておくと変更や修正の依頼の時に担当者に伝えやすくなりますよ！ヘッダーサイドバーメインカラムフッターメインイメージ

Slide 38

Slide 38 text

イメージの相違を防ぐためにも、希望のデザインがある場合はぜひそのホームページを見せてくださいね！

Slide 39

Slide 39 text

ホームページにはバナーを入れられますが内容はどうしますか？ ④バナーの内容を決めようえっと…バナーってなんですか？

Slide 40

Slide 40 text

バナーとはホームページ上の「のぼり」のようなもの推したいメニューページへのクリックを促す反応率UPには欠かせない画像です！

Slide 41

Slide 41 text

バナー活用方法 ◎おすすめメニュー ◎来院特典(オファー)

Slide 42

Slide 42 text

バナー活用方法 ◎雑誌掲載のお知らせ ◎SNSへの登録促進に

Slide 43

Slide 43 text

デザインOKとの事なのでコーディング作業に入りますね！ ⑤コーディングえっと…コーディングってなんですか？

Slide 44

Slide 44 text

コーディングとは出来上がったデザインをインターネット上に表示させる為にコード化していく作業

Slide 45

Slide 45 text

コーディング作業中は… 作業完了報告をウキウキしながら待ちましょう！

Slide 46

Slide 46 text

下層ページの制作に入ります！ ⑥下層ページ下層ページ？下層？

Slide 47

Slide 47 text

下層ページとは TOPページから派生するページのこと！ポータルズのホームページで言うと… ● 肩こり ● 腰痛 ● 骨盤矯正 ● 整体 ● アクセス・料金 ● 初めての方へ　など…

Slide 48

Slide 48 text

下層ページ（肩こり・腰痛・整体など）は絶対必要です！

Slide 49

Slide 49 text

SEO強化反応率強化 24時間365日あなたの施術についてプレゼンしてくれます！

Slide 50

Slide 50 text

現在サイトの最終チェックを行っております！しばらくお待ちくださいませ！ ⑦チェック誤字を見つけたんだけどどうしましょう…

Slide 51

Slide 51 text

ホームページが完成しました＼ご協力ありがとうございました／ ⑧納品

Slide 52

Slide 52 text

ホームページは育てるもの作って終わりではなく常に新しい情報を発信し続ける事が SEOにも反応率にも良い影響を与えます。ここからがスタートです！＼これからもっと頑張ろう！／

Slide 53

Slide 53 text

質問タイム PCで閲覧中の方は右側のコメント欄から！スマホの方は縦にするとコメント欄が表示されます！

Slide 54

Slide 54 text

次回予告 7月29日（水）13:30〜「画像とテキストの差って何？」もっと早く知りたかった…！ホームページの基礎知識【運用編】

Slide 55

Slide 55 text

お問い合わせ・ご相談はこちら！ [email protected] 078-792-8860 お気軽にお問い合わせください！