新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
急にWeb担当になっても安心!5段階&1人でのホームページの作り方

「ホームページを作りたい!作らなきゃ!」

と言っても、どうすれば良いか分からないと思っていませんか?

この記事をご覧の方の中には、職場の上司やサークルの仲間からホームページを作って欲しいと頼まれながらも、ホームページの作り方が分からないという方も多いのではないかと思います。

ホームページは、「パソコン」と「インターネットに接続できる環境」さえあれば、無料または低価格で作ることは可能です。

今回は「急にWeb担当になっても安心!1人で&5段階でできる、ホームページの作り方」と題しまして、ホームページの作り方をご紹介していきます(^-^)

この記事の目次

まずは「何の情報を公開したいか」を明確に!場合によっては「ホームページを作る」以外の方法で目的を達成できる場合も

さぁ、さっそくホームページの作り方をご説明していきましょう。

……とは、なりません(^^;)

「いやいや、ホームページの作り方を知りたくてこのページを見てるんだけど!?」

そういった方々も多いことと思いますが、少しご辛抱ください。

特に、

「インターネット上に情報を公開したいけれど、その手段が決まっていないから、とりあえずホームページで!」

となっている場合は、なおさらです。

実は、皆さんがどんな情報を公開したいとお考えなのか、それによって「ホームページを作る」「ホームページの作り方を知りたい」という希望を満たす以外の方法で、皆さんの疑問を解決できる場合もあり得るのです!

公開したいコンテンツによって「ホームページを作る」以外の方法で目的達成できる場合がある

ホームページの作り方、それは、ご経験のない方にとって、ハッキリ申し上げると「面倒なこと」です。

それが、ほかの手段を使うことで「面倒なこと」をせずに済むなら、時間的コストで考えても「お得」ではありませんか!?

なのでまずは、必要な手段は本当に「ホームページを作ること」かどうかを、確かめていきたいと思います。

ご協力をよろしくお願いいたします(^^)

写真や文章が公開できればOK!デザインにはこだわらない場合は「ブログ」がおすすめ!

ホームページの作り方は、公開したいコンテンツ(情報の内容、中身)によって異なります。

文章や写真だけを公開したい、友人知人や見込み客の方々との「つながり」を大切にしたいという場合は、FacebookやTwitter、Instagramなどの「SNS」で情報を発信して、ホームページを作らないという方法をとられた方が良い場合もあります。

一方、SNSではなく、自社・自店舗として情報を発信する「媒体(メディアとも言います)」をご希望であれば、この記事でご紹介する方法がお役に立てるかもしれません。

写真や文章に加え友人知人・見込み客の方とのつながりを重視する場合は「SNS」で実現できる場合もあり!自社・自店舗として媒体(メディア)を持ちたいなら、まずは「ブログ」の使用から検討してみましょう!

この記事をご覧の方の方には、自社や自店舗、あるいは団体のWeb担当者として、どんな風に情報を発信していかれたいか、お悩み中の方も多いことと思います。

例えば、

「自社の日々の出来事だとか、所属団体の活動報告を載せたい」

「自作のイラストや文章を公開できれば良い」

とお考えであって、デザインにはあまりこだわらないという場合は、ブログ作成サービスをご利用になる方法もあります。

「ブログ?2000年代くらいに流行った日記ツールでしょ??」

いえいえ(^^;)

ただ「ブログ」とは言っても、趣味や遊びだけに使われるものではありません。

ブログ作成サービスでは、文章や写真を更新するためのサービスも日々充実しています。

無料ならば、早ければアカウント登録から数分程度でブログを書き始められるというお手頃さも魅力的です。

また、年間いくらかの料金をブログサービス運営者にお支払いして「有料プラン」にすることで、ビジネス目的にブログを使用している方もいます。

無料プランで掲載されていた広告を消したい場合、様々な機能にこだわりたい場合などは、ブログサービスの有料プランをご利用になるという方法もあります。

また、ブログを使うことで、この記事をお読みになっている「あなた」の目的が達成されて、関係する方々もご納得いただけるのであれば、「ホームページを作る」という作業をしないで済むかもしれません(^-^)

おもなブログサービス一覧(2018年版)

さて、こちらでは、おもなブログサービスを一覧形式でご紹介していきます。

こちらの記事でご紹介する情報は、2018年3月時点の情報に基づいておりますので、ご覧になる時点の最新の情報とは異なっている場合があります。

最新情報はリンク先のサイトにてご確認ください。

本文や写真だけでなくデザインまで独自のものにしたい場合は「自作ホームページ」がおすすめ!

さて、では、

「文章や写真だけでなくて、全体のデザインやレイアウトまで独自のものにしたい!こだわって作りたい!」

という場合、こちらは「自作ホームページ」が向いています。

読んで字のごとく「自分で作るホームページ」なのですが、作り方をじっくり学んで知識をつけていくことが重要です(^^)

ページの先頭へ戻る

ホームページを自分で作るための2種類の方法

ホームページを自分で作る場合にも、大きく分けて2種類の方法があります。

1つ目が「ホームページ作成サービスを利用する方法」です。

そして2つ目が「自分のパソコンで作ったデータやファイルをアップロードする方法」です。

インターネット上のホームページ作成サービスを使う方法もありますが、自分で作ったデータやファイルをアップロードする場合は、このあと説明する5つのステップによるホームページの作り方が当てはまります。

これらを順にご紹介します。

[パターン1]ホームページ作成サービスを利用する

1つ目の方法が「ホームページ作成サービスの利用」です。

先ほど、「ブログを作成する方法」として、いくつかのサービスをご紹介しましたよね?

現在では、お客様のご要望に応じてホームページを制作する「ホームページ制作会社」だけでなく、お客様がご自身でホームページを作るための環境や手段を提供してくれる「ホームページ作成サービスを提供する会社」もたくさんあります。

その中のサービスから1つを選択して、ホームページを作っていくという方法があります。

下記に、おもなホームページ作成サービスをご紹介します。

おもなホームページ作成サービス一覧(2018年版)

こちらでは、主なホームページ作成サービスをご紹介していきます。

2018年3月時点の情報に基づいていますので、ご覧になっている時点の情報とは一致していない可能性があります。

最新情報は、リンク先のそれぞれのサイトでご確認ください。

[パターン2]自分で作ったデータやファイルをアップロードする

2つ目の方法が「自分で作ったデータやファイルをアップロドする方法」です。

ホームページ作成サービスでもオリジナルデザインのホームページを作ることは(原則的に)可能ですが、そのツール「ならでは」の制約がある場合もあります。

一方で、自分のパソコンで作業して完成したデータやファイルをアップロードするこちらの方法は、学ばなければならない物事は多くなってしまいますが、そのぶん自由度の高いホームページを作ることができます。

ここまでにご紹介した中で「自力でホームページを作る方法」を説明する前段階として、

「目的や公開したい情報によっては、自力でホームページを作る以外の方法もあります」

という形でご紹介してきました。

それでも、ご自身によってホームページを作りたい、ホームページの作り方が知りたいとおっしゃる場合は、ほんとうに「ホームページの作り方」が必要であると考えられます。

いよいよ次のセクションから、ホームページの作り方についてのご説明を進めていきます!

学ぶことは多いですが、少しずつ着実に学んでいっていただければ、自力でホームページを作る方法を身につけていただくことも可能です(^-^)

がんばりましょう!!

ページの先頭へ戻る

ホームページの作り方〜自分で作ったデータやファイルをアップロードする場合〜

ここからは実際に「ホームページの作り方」をご紹介していきます。

ご自身のPCでホームページ用にデータやファイルを作成する方法、およびそれらをホームページとしてアップロードする方法を、5段階でご紹介します。

STEP1:マークアップ言語の習得

最初のステップは、「マークアップ言語」の習得です。

ホームページは、デザインしたデータがそのままホームページとして動き出すのではありません。

クリックして別のページに行ったり、数秒おきに写真がスライドして切り替わったり、マウスのカーソルを合わせて色や模様が変わったり。

そういった1つ1つを決めたり、設定しておいたりするのは「コーディング」と呼ばれる作業工程で行います。

そして、コーディングするための言語(英数字や記号などを文法的に定めたもの)の一部を「マークアップ言語」といいます。

マークアップ言語の代表格は「HTML(エイチ・ティー・エム・エル/HyperText Markup Language:ハイパーテキスト マークアップ ランゲージ)」です。

妙高Web屋のサイトではHTMLのバージョンの一つである「HTML5」や、それらを扱う「コーディング」の作業工程に関する記事を随時更新しております。

まだ学習し始めて間もない場合は、特に気になさらないでOKです。

「こういうものもあります」くらいにお考えください(^^)

HTMLは基本的に、ホームページのそれぞれのコンテンツを構造的に定めるものです。

具体的には「大見出しの文言はこれ、中見出しはこれ、中見出しに掛かる本文はこれ、…」のように定めて、それぞれに対して適したタグで囲ったりします。

HTMLだけでは、昨今よく見かけるホームページを作り上げることはできないと言っても良いでしょう。

HTMLで構造的な部分を定義したら、次はページのレイアウトや動きを整えていきます。

レイアウトを整えていくときに主に使うのが「CSS(シー・エス・エス/Cascading Style Sheets:カスケーディング・スタイル・シート)」と呼ばれるものです。

そして、ページを読み込んだり、ページ内の要素をクリックしたりしたときに、ページに「動き」や「変化」を与えるものが「jQuery(ジェイクエリー)」と呼ばれるものです。

jQueryは年々、その重要度や使用頻度を増してきています。

かつては「JavaScript(ジャバスクリプト)」と呼ばれる言語も多く使われていましたが、JavaScriptが使えるならば、jQueryに慣れるのはさほど難しくないと思います。

STEP2:ホームページ作成ツールの調達

2つ目のステップは「ホームページ作成ツールの調達」です。

妙高Web屋がお勧めするホームページ作成のためのツール(手段)は、大きく分けて以下の3種類です。

[1]デザイン&コーディングするためのツール

[2]出来上がったファイルを公開するためのツール

[3]公開したホームページがどれだけの人に見られているかを計測するツール

以下で、順にご紹介していきます。

デザイン&コーディング

まずはデザイン&コーディングに関するツールのご紹介です。

AdobeのDreamweaver(ドリームウィーバー)というツールがあれば便利ですが、無料でツールを揃えたい場合は、WindowsとMacとでおすすめツールが異なります。

テキストエディタ:Windowsは「TeraPad」または「サクラエディタ」でMacは「mi」

Windowsの場合は、「TeraPad(テラパッド)」か、あるいは「サクラエディタ」がおすすめです。

私はどちらかというと、サクラエディタの方が使用頻度が高いです。

Macの場合、それらと似たような目的で使えるツールは「mi(ミー)」がおすすめです。

いつぞやまで「ミミカキエディット」と呼ばれていたツールですが、2018年現在では「mi」という名称です。

テキストだけでなく画像を使えば、ホームページに華やかさが増したり、わかりやすい構成になることもしばしば。

そこで、画像を編集するツールをご紹介します。

画像関連ツール:「GIMP」と「TinyPNG」

まずは、画像の作成・編集などができるツール「GIMP(ジンプ)」です。

「ジンプ」と「ギンプ」という読み方があるかと思いますが、私は「ジンプ」と読んでいます。

「GIMPでGIF画像を作る」という表現のとき「ギンプでジフ画像を…」となると、ちょっと複雑かなと思ったので「ジンプ」にしています。

こちらのGIMPというツール。

フリー(無料)ソフトではあるのですが「無料でここまでできるの!?」と思ってしまうほど、幅広い機能が揃っています。

私も数年前に、諸事情でPhotoshopなどAdobeの有料ソフトを使えない状況では、このGIMPを使っていました。

画像の使用量が少なめのホームページで、デザイン重視でもない場合は、GIMPだけで作れてしまう場合もあります。

「窓の杜」からもダウンロードできますので、よろしければご覧ください。

続いて、画像ファイルの容量を落とすことができるツール「TinyPNG(タイニーピング)」というツールのご紹介です。

こちらはダウンロードするものではなく、専用のページに画像をドラッグ&ドロップして使うタイプのものです。

フリー版では1個1個のファイルが5メガバイト以内(2018年3月時点)という制約がありますが、デジタルカメラやスマートフォンで撮影した写真でも5メガバイトを超えるものはそうそうありません。

どうしても5メガバイトを超えてしまう写真は、掲載しない部分をカットするなどしておけば容量を減らせるかと思います。

画像を圧縮して容量を減らすことで、ホームページにアクセスしてくださった方がページを読み込むまでの時間を短縮することもできます。

こちらは専用のホームページにアクセスしてみてください。

英語のページですが、上部の点線のエリアに画像をドラッグ&ドロップすれば処理が始まるので、仕組みはすぐにお分かりになるかと思います。

ファイルのアップロード

FTPツール:Windowsは「FFFTP」でMacは「Cyberduck」

デザインやコーディングでホームページのデータを作ったら、その後にはそれらのデータを「サーバー」と呼ばれる場所にアップロードする必要があります。

Web業界では「FTPクライアント」「FTPツール」と呼ばれるように、「FTP(エフ・ティー・ピー)」と呼ばれる通信の仕組みによってアップロードします。

代表的なものは、Windowsでは「FFFTP(エフ・エフ・エフ・ティー・ピー)」というツール。

Macでは「CyberDuck(サイバーダック)」と呼ばれるツールが有名です。

でも、ちょっと待ってください。

のちの工程で「サーバーとドメインの用意」に関するくだりがあります。

実際の作業でサーバー(&ドメイン)を確保したら、詳しい設定情報をサーバー会社から教えてもらえるはずです。

そこでゲットした情報をFTPツールに入力することで、パソコンとサーバーとの間でデータをやり取りできるようになります。

なお、アップロードしたファイルはインターネット上に公開されて、ご自身以外の方でもアクセスできてしまいます。

作成中のファイルだけでなく、特に個人情報が含まれているファイルの扱いにはくれぐれもご注意ください。

ホームページのアクセス計測

アクセス計測ツール:Googleアナリティクス

ホームページのデザイン&コーディングが済んで、必要なファイル一式をFTPツールでアップロードできたら、ホームページの公開となります。

実際にホームページが公開されたら、世界中から色々な方々がホームページを見にきてくれることでしょう。

そのときに、どんな人がどんな風にアクセスしてくれたか、どんなページを見てくれたかが分かれば、

「どんなページが人気なのか」

「どのページに改善の余地があるか」

を知ることができます。

そのための、いわゆる「アクセス解析ツール」として有名なのが「Googleアナリティクス」です。

Googleアナリティクスは、ホームページ公開の直前のタイミングまでに準備できていればOKです。

STEP3:サーバー&ドメインの確保

3つ目のステップは「サーバーとドメインの用意」です。

「サーバー」というのは、ホームページに使うためのファイルを保存しておくためのコンピュータです。

一般的に「サーバー」といえば、メールもほかのツールにも使えるのですが、ここではホームページに限った言い方をしています。

「ドメイン」というのは、そのホームページに独自に割り当てられる文字列です。

妙高Web屋のホームページも、サーバー会社からいただいているサーバースペースに[www.web-myoko.net]という文字列を割り振っていただいています。

いうなればインターネットにおいて、サーバーは「データ置き場」で、ドメインは「屋号」のようなものです(^^)

例えるならば、サーバーは「データ置き場」で、ドメインは「屋号」のようなもの

さて、ここでサーバーやドメインを取得できる主なサービスをご紹介します。

さくらのレンタルサーバ

サーバーのレンタルが比較的安価で可能なのが、「さくらのレンタルサーバ」です。

年間で数千円くらいの金額でもホームページを運営することができます。

一方で、ホームページに多くのアクセスが集まった場合や、管理者の方ご自身が「ワードプレス」や「ムーバブルタイプ」と呼ばれるシステムで多くのページの更新作業を行ったりしている場合に、一時的にサーバーが思うように表示されにくくなる場合もあります。

エックスサーバー

サーバーの通信速度で言えば、「エックスサーバー」がおすすめです。

テキスト主体でデータ量の多くないページをアップロードしてみたり、「ワードプレス」をインストールしたばかりのころは特に、

「え、こんなに速いの?」

と感じてしまうほど、通信速度の速さは特徴的です。

お名前.com

「お名前.com」は、レンタルサーバーのサービスでホームページを運営することもできますが、やはり広く認知されるきっかけになったのは「取得できるドメインの幅広さ」でしょうか。

[.com][.net][.info]といった種類のドメインはほかのドメイン取得サービスでも取得可能ですが、お名前.comでは[.xyzz][.top][.club]といった、最近見かけはじめるようになった種類のドメインも取得できます。

「ドメインの種類にこだわりたい」という場合は、お名前.comならば見つけやすいのではないでしょうか。

STEP4:デザインデータの作成

サーバーやドメインを確保したら、ホームページのデザインも進めていきましょう。

サーバー&ドメインの確保と並行してデザインを進めてもOKです(^^)

デザインに用いるツールは、先ほどご紹介した「GIMP」でも結構ですが、有名どころではAdobe(アドビ)の「Illustrator(イラストレーター)」「Photoshop(フォトショップ)」があります。

値段はそれなりですが、機能の充実さで言えば無料版のGIMPを上回ります。

また、職業としてホームページのデザインを行なっている企業の多くがIllustratorやPhotoshopを使っているため、汎用性の高さは長期的に見て役に立つことは少なくありません。

「時間がないから制作会社に頼んでみよう」

という場合も、何かと便利だと思います(^^)

デザイン用のツールが準備できたら、いよいよホームページのデザインです。

ほかのホームページを参考にしつつ、皆さんのオリジナルの作品を作り上げてください。

許可なくほかのデザインを利用したりすることは、著作権に影響する可能性もありますので、くれぐれも真似しないようにご注意ください。

STEP5:コーディング

デザインデータが出来上がったら、「コーディング」で、それぞれのページを作り込んでいきます。

コーディングでは、先ほどご紹介したツールのほかに、Adobeの「Dreamweaver(ドリームウィーバー)」が知られています。

コーディングは「コツ」をつかめば、だんだんと作業を効率化していけると思います。

トップページのコーディングをして、下層ページ(トップ以外のページ)も必要なぶんコーディングしながら、そのつど「表示確認」「動作確認」を行いましょう。

問題があれば少し戻ってみて、別の方法を考えてみる。

その繰り返しで、徐々にコーディングのコツをつかめていけると思います(^-^)

ページの先頭へ戻る

ホームページに向いている内容とブログに向いている内容

先ほど「文章や写真だけを公開したい場合は、ブログを選んで更新すれば良い」という風にご説明しました。

一方で、

「独自のデザインのホームページを作りたい」

「一方で、ホームページのいずれのページにも属さずに、日々更新したいコンテンツがある」

という場合は、ホームページとブログとを共存させて運営するという場面も考えられます。

よく、企業のホームページでも「スタッフブログ」や「社長の日記」のようなコンテンツがありますよね?

ホームページとは異なるブログサービスを使っていたり、別の機会に詳しく触れていますが「ワードプレス」の「投稿」の機能を使ったりしているものです。

ここでは、ホームページとブログそれぞれに掲載するコンテンツの「切り分け方」として、ホームページとブログの違いについて触れたいと思います。

「ホームページ」とは?

そもそも「ホームページ」というのは元々、どういう意味のものなのでしょうか。

現在では「インターネット上に公開されたページの集合体」として使われているホームページですが、その言葉の意味をたどると、「ホームページ」というのは「Web上のページの集合体のうちの、トップにあたるページ」に対してつけられた名称を指すのだそうです。

昨今みかけるホームページには「ホームへ戻る」という、トップページに戻るためのリンクが用意されていますが、それは「ホームページ=トップページ」という考え方の名残とみなす考え方もあります。

ただし、ここでは「ホームページ」というものを「ある目的・意味を持ったWeb上のページの集合体の全体」という前提で、話を進めさせていただきます。

「ブログ」とは?

一方で「ブログ」というのは「ウェブログ(Web上の記録)という言葉の略称」です。

日記形式で記事や情報を更新することができるもののことですが、ブログも、広い意味では「ホームページの一種」と考えることができます。

公開したい情報は、ホームページが向いているか、ブログが向いているか

さて、上記のようにご説明した「ホームページ」と「ブログ」ですが、それらはどのようにして、掲載するコンテンツを切り分ければ良いのでしょうか。

結論としては、ホームページには「普遍的な情報」を掲載するのがおすすめで、ブログには「時事的な情報」を掲載することがおすすめです。

普遍的な情報はホームページで更新して、時事的な情報はブログで更新することがおすすめ!さらに、時事的な情報で感情を共有したい場合はSNSがおすすめ!

例えば「日本一高い山は富士山です」というのが、普遍的な情報。

一方で「今年の世界大会で@@選手が優勝しました」というのが、時事的な情報だとお考えください。

普遍的な情報は、世の中の「定説」がひっくり返らない限りは変わることはありませんが、時事的な情報は、更新されたり追加されたりという変化が当然のように起こる形式のものです。

仮に、ブログ記事に書かれた普遍的な情報の更新日が「3年前」だったりすると、どうでしょうか?

例えば、

「日本一高い山は富士山です(更新日:201X年1月1日)」

となっていたら…?

さすがに極端かもしれませんが、掲載されている情報によっては、時事的な情報として、いずれ更新されてしまうのではないかと誤解を与えてしまう可能性もゼロではないということは考えられないでしょうか。

世の中、発信する側の「大丈夫でしょ」という想定が、受け取る側の方々に常に通用するとは限りません。

普遍的な情報を、時事的な印象を思わせるコンテンツとして掲載することは、視覚的にも、信頼性で不安を抱かせる可能性があることは、注意しておきたいところです。

逆に、日々の記録をホームページに、ページごとに分けて記録していくことには、別の苦労が生じます。

また極論ではありますが、

「今年の優勝は〇〇選手でした(更新:3日前)」

「もう年が明けてしまいましたが、去年の優勝者は◇◇選手でした(更新:201X年1月31日)」

「過去の優勝者は☆☆選手と〇〇選手です(更新:先週の木曜日)」

このような情報が、それぞれ別ページに記載されていたとしたら…?

パッとみただけでは日付の形式もそろっていないので、時事的な情報をホームページにただ掲載するだけの場合は、時系列を整理するのに苦労することがあります。

時系列を整理するには、公開日付や更新日付を記事ごとに入力できるブログの方が、公開後の前後関係の整理もできて便利です。

また、多くのブログサービスでは実現可能な「日々更新される情報のカテゴリーの整理」も、ホームページには難しいもの。

更新頻度が高ければ高いほど、時事的な情報はブログ形式で更新していくことが望ましいと言えるのです。

ページの先頭へ戻る

ホームページの作り方について、基本となる考え方やおすすめのツール、制作のステップなどをご紹介してきました。

皆さんのご要望にあった作り方を見つけることはできたでしょうか?

「この部分について詳しく説明して」

という箇所がありましたら、感想フォームでお気軽にご意見・ご感想をお寄せください。

メールマガジンで最新情報をゲット!

当サイトの更新情報は、メールマガジンでもお知らせしております。
「思い出のカレンダー制作」に関する情報もあわせてどうぞ。

メールアドレスを入力してください

この記事の感想をお寄せください

[急にWeb担当になっても安心!5段階&1人でのホームページの作り方]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:急にWeb担当になっても安心!5段階&1人でのホームページの作り方

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.