Loading...

COLUMN
ホームページ制作関連コラム

ホームページ開設手順や知識あれこれ

この記事を書いた人

福岡でホームページ制作を行なっているフリーランスのサブローマルです。
客様の事業についてヒヤリングをおこないひとつひとつ『ていねい』にホームページの制作を行っています。

福岡のホームページ制作:サブローマル

新しい事業やサービスを始めるにあたり、集客や認知のためのホームページは重要な役割を持ちます。
なぜなら、ユーザーは必ずその会社やサービスを知るために検索をし、その会社やサービスを調べるからです。
その際に、ホームページがない状況だとサービス内容を知ることも出来ませんし、信頼性も失われてしまいます。

集客や認知において重要なツールであるホームページを作る際の手順や必要な知識、費用について簡単にご紹介します。

ホームページ開設までの手順

まずはホームページを開設するための手順をご紹介します。

STEP-1 サイトの構成・内容を決める

まずはホームページの構成(ページ数や仕様)を決めていきます。
狙っているターゲットやキーワードなどもここで決めていきます。

必要なページが決まったらそのページに具体的にどんな文章や写真を入れていくか、ワイヤーという設計図を作っていきます。
キャッチコピーや文章などもここで決めておくとデザイン制作時にスムーズに進みます。

STEP-2 デザイン作成

ワイヤーを元にデザインを作成していきます。
デザインはPhotoshopIllustrator などのソフトで作ることが一般的です。サブローマルではPhotoshopで作ることが多いです。

ホームページは第一印象も大事です。古臭い見た目、見づらい・使いにくいホームページだと競合他社へユーザーが逃げていってしまいます。
そうならないためにデザインをしっかり作り込んでいきましょう。

スマートフォンでのデザインも忘れずに!
以外とあとでレイアウトに困ったりすることがあるのでパソコン版と同時進行で進めるとこのあとのWebデータ作成(コーディング)時がスムーズに進みます。

ちなみにサブローマルではお客様のデザイン確認はパソコン版で行っております。
スマートフォンでの見え方はコーディング後のテストサイトでご確認いただいたいます。

STEP-3 webデータ作成(コーディング)

コーディングと呼ばれる作業で実際のホームページを作って行きます。
コーディングはHTMLとCSS、Javascriptという言語を使って組み込んで行きます。

この作業が技術的なスキルが必要な工程で、ホームページ開設時の一番高いハードルになります。
裏方的な作業ですが、自分が書いたHTMLやCSSで実際のホームページが出来上がります。

STEP-4 サーバーへwebデータをアップロードして開設

ホームページのデータが出来たら実際にサーバーへアップロードします。
アップロードはFTPというソフトで行います。サブローマルでは「FileZilla」というFTPクライアントを利用しています。

サーバー会社によっては、管理画面からデータをアップロードできるサービスもありますが、FTPを利用した方が作業はスムーズです。

ホームページ開設に絶対必要なドメイン・サーバー

ホームページを開設する際は「ドメイン + サーバー」ワンセットが必要になります。
必ず必要になる「ドメイン」と「サーバー」。その役割をご紹介します。

ドメインはホームページ開設時の自分専用のweb上の名前

ドメインとは「yahoo.co.jp」や「google.co.jp」のようにブラウザのアドレスバーに入力する住所のようなものです。
これはご自分の好きなものを取得することが可能です。ただし、すでに取得されているドメインは取得できませんので注意が必要です。

ドメインを取得することでオリジナルのメールアドレスを使うことができます。
36maru.comというドメインを取得することで
・info@36maru.comというメールアドレスを使用することが可能になります。
「@」かあら前の「info」は自由に設定が可能で、「tanaka@」や「yamada@」などスタッフの名前でメールアドレスを作ることが多いです。

ドメインを取得するには「ドメイン取得業者」を介して代理で取得してもらう必要があります。
ドメイン取得業者には「お名前.com」「ムームードメイン」「バリュードメイン」など様々な会社があり料金がそれぞれ異なります。
個人的にはあまり意識はしていませんが、「お名前.com」を利用することが多いです。

自分で取得したいドメインを決めたら取得できるか調べることができます。
僕がお名前.comをよく利用しますので、そちらでご紹介します。
お名前.comのトップページにドメインを入力できるフォームがありますので、フォームにご希望のドメインを入力して検索するだけです。

サーバーはホームページ開設時にデータを置く場所

サーバーとはhtml/css/javascriptなどやjpg/png/gifなどのファイルを置く土地のようなものです。
サーバー会社はドメイン取得業者と同じく様々な会社があり、ドメイン取得業者がドメイン取得サービスと併せてサーバーも提供していることが多いです。

先ほどご紹介した「お名前.com」もサーバーを提供していますし、「ムームードメイン」は「ロリポップ」というサーバーを提供しています。

サーバー会社によって、料金や容量などのサーバーのスペックに違いがあり、ご自分が開設したいホームページにあったサーバー選びが必要です。

ドメインとサーバーを別々に取得することも可能です。
例えば、ドメインは「お名前.com」で、サーバーは「Xサーバー」で取得するという方法です。
その際はドメインとサーバーを紐づける作業が必要になりますが、そんなに難しい作業ではないので知識のない方でも簡単に出来ます。

ホームページ開設に必要な技術的な知識

ホームページを開設するためのドメイン(住所)とサーバー(土地)が準備できたら、そこにホームページのデータ(建物)をアップロードします。
「ホームページ開設までの手順」の「STEP-3 webデータ作成(コーディング)」でできた仮のホームページをサーバーへアップロードして公開完了となります。

ホームページを制作するためには様々な知識が必要です。最低限知っていた方がいい知識が「HTML」「CSS」という言語です。
それぞれホームページを作るためのプログラムで、ネットで検索すると色々情報が出てきます。
僕もホームページ制作を初めた時に勉強しましたし、これを知らないと何も始まりません。

HTMLはホームページの骨組みのようなもの

HTMLはホームページの骨組みのようなもので、タグと呼ばれる言語で書いていきます。
ホームページ上で右クリックし「ページのソースを表示」でそのページのHTMLを見ることができます。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ホームページのタイトル</title>
</head>
<body>
	ここに書いたHTMLが表示されます
</body>
</html>

HTMLのタグの役割や書き方については、分かりやすく書かれている書籍やホームページがありますので、そちらをご覧ください。

HTMLにも様々なバージョやルールがあり、現在はHTML5が主流でW3CというWeb技術の標準化を行う非営利団体がWeb上で利用される技術の標準化を進めています。

CSSはホームページの装飾(デザイン)を担当

CSSは骨組みであるHTMLの見た目を担当する言語です。
例えば <h1>というタグで囲まれている文字を「赤色」で「文字サイズを20px」にする場合は、

h1 {
	color: red;
	font-size: 20px;
}

とCSSに書くことになります。

ちなみにサブローマルのCSSファイルはこちらになります。
見づらいですが、ファイルの容量を減らすために改行やスペースを省いています。
ちなみにCSSがないとこんな状態になりとても見づらいページになります。

ホームページは見やすさ、使いやすさがとても重要なので、CSSの知識はとても大事になります。

簡単にホームページが開設できるCMS

ホームページを開設するには様々な工程や知識が必要と説明してきましたが、そういった知識を必要としないホームページ開設方法があります。
それはCMS(コンテンツ・マネージメント・システム)というWebサイトを管理・更新できる夢のようなシステムです。

CMSには色々な種類・サービスがありますが、サブローマルではWordPressを利用することが多いです。
Wordpressはサーバーにインストールするタイプのシステムで、サーバー会社によっては簡単にインストールすることが可能で、慣れれば5分もあればホームページの開設が可能です。

CMSにはテンプレートと呼ばれるデザインの元があり、そのテンプレートを編集することで、自分好みにカスタムすることが可能です。

無料でホームページが開設できるサービスもあります

世の中にはものすごく便利なサービスがたくさんあります。
ホームページ開設も同じく、Web上で簡単にホームページが作れるサービスがあります。しかも無料で!
そんな便利なwebサービスをご紹介します。

誰でも簡単、無料でつくるあなただけのホームページ「WIX」

有名どころになりますが、無料でホームページが作れる、しかも「誰でも簡単に」というWIX
デザインテンプレートが豊富で、様々な機能が満載です。無料だとオリジナルのドメイン(独自ドメイン)が使えないんですが、サクッと始めたい方にはおすすめです。

ホームページ作成・ホームページ制作サービス「グーペ」

グーペは無料ではないですが、格安でホームページの開設が可能です。
こちらもデザインテンプレートが豊富で業種などから選ぶことができます。
マニュアルも用意されていて分かりやすく、WIXよりは難易度は低いかもしれません。

このほかにも様々なサービスがあり、ここでは全部ご紹介できそうにありません。
比較サイトがありましたので詳しくはホームページ作成サービス比較ランキング【総合】をご覧ください。

開設しやすいと作りやすいは別物。作るには慣れが必要

こういった無料のサービスを使うと開設はしやすいです。ただし、作りやすいかというとなれが必要です。
たまに、こういった無料サービスを使ってみたけど、うまく作れないくて困っているというお客様からのお問い合わせもいただきます。

結局、素人が自分でホームページを開設できるのか?

結論をいうと可能です。
ただし、ホームページで集客・お問い合わせを増やすにはページを作るだけではなく、マーケティングやSEOなどの知識も必要になりますので、そういったノウハウをもった制作会社やフリーランスに頼むのも一つの手だと思います。

ご自分で時間的コストをかけてホームページをゼロから開設することで費用を抑える方がいいのか、時間と手間をかけずにホームページを開設した方がいいのか、どちらをとるかは予算とあなたのやる気次第ではないでしょうか。

一覧ページへ戻る

日本一敷居の低いホームページ制作事務所を目指して!

サブローマルデザインは福岡県福岡市南区のホームページ制作会社です。
ご予算に合わせて必要な機能のみで制作し育てていくホームページを提供します。また、フリーランスならではの柔軟な対応でお客様に寄り添った対応を心がけていますのでお気軽にご相談ください。

メールでのお問い合わせ

メールフォームはこちら

ホームページ制作実績

リノベーションイージー 様

リフォーム

学習塾LOGOS 様

学習塾

茶郷 様

中華料理

糸島建築 様

住宅設計・施工、リフォーム

株式会社Cobblestone Technology 様

システム開発

株式会社 エクセレント トランスポート 様

運送業

株式会社エターナルプラス 様

不動産

わだ動物病院 様

動物病院

住彩株式会社 様

ログハウスキット販売

モノクライミングスタジオ 様

ボルダリングジム

Ayakadesign 様

アクセサリー製作販売

増田税理士事務所 様

税理士事務所

ホームページ制作実績一覧

MENU