ホームページ制作で行う内容

ホームページの制作で行う内容は目に見えるデザインや文章作りだけでなく、Webサイトが表示されるまでの工程を行わなければなりません。

ここではホームページが公開されるまでの内容をご案内します。

1.ページ作成

ホームページの製作では、業種や目的に応じてページを作成していきます。

ページにはトップページの他、ご利用の流れや、お問い合わせページなど目的に沿ったページがあります。

業種問わず製作することが多いページ

ページ名	詳細
トップページ	ウェブサイトの顔として、主要なキーワードやビジネスの概要を含めた説明を提供します。
サービス内容	提供するサービスや製品に関連するキーワードを含め、詳細な説明を提供します。
ご利用の流れ	サービスや製品の利用方法を明確にし、ユーザーの疑問を解消します。
会社情報	企業の信頼性を高めるために、詳細な会社情報を提供します。
お問い合わせ	ユーザーが容易に連絡できるように、明確な連絡手段を提供します。
求人	企業への関心を高め、人材を確保する有益なコンテンツを提供します。

業種に応じて製作する機会が多いページ

ページ名	詳細
料金メニュー	サービスや商品の価格を明確に表示し、顧客の意思決定をサポートします。
よくある質問	一般的な疑問や懸念に対する回答を提供し、ユーザーの不明点を解消します。
コンセプト	企業の概念や独自の価値提案を紹介し、ブランドイメージを強化します。
プライバシーポリシー	ユーザーの個人情報の取り扱いに関する方針を説明し、法規制への準拠と信頼性を示します。
新着情報(お知らせ)	企業の最新情報、イベント、休日などを告知し、ウェブサイトの更新を促します。
実績/事例	成功事例や過去の施工内容を紹介し、企業の実績と信頼性を示します。
ブログ	定期的なコンテンツ更新を通じて、SEOの強化と既存顧客獲得の促進を図ります。
商品販売	オンラインでの商品の紹介と販売を行い、直接的な収益の源泉となります。
予約	オンラインでの予約システムを提供し、自社と顧客の利便性を高めます。
出勤情報	従業員やスタッフの出勤スケジュールを公開し、サービスの透明性を提供します。

2.ドメイン取得・設定

ホームページをWeb上に公開する場合ドメインの取得と設定が必要となります。

ドメインとはインターネット上の住所を表し、検索エンジンやURLからWebサイトにアクセスする際に必要となります。

「https://9box.jp」といったURLの場合「9box.jp」がドメインとなります。

ドメインにはこの他にも下記のようなドメインが主に使われます。

〇〇.com（世界中の個人や組織で取得可能）
〇〇.jp（日本国内の個人、企業のみ取得可能）
〇〇.co.jp（法人のみ取得可能）
〇〇.or.jp（特定非営利活動法人や医療法人等のみ取得可能）

しかし、このドメインを取得しただけではどこの何を表示するのかが決まっていない為、ネームサーバ（DNS）を設定し、サーバ上のファイルを表示させるドメイン設定を行います。

製作内容	詳細
ドメイン名の選定	URLで使いたい文字列を選定
ドメイン取得	ムームードメインやお名前.comなどのドメイン会社にて取得
ドメイン設定	ドメインの登録者情報としてWhois情報の登録サーバごとに用意されたネームサーバ（DNS）をドメイン会社で設定

3.サーバの設定

ドメインの取得と設定が完了したらサーバ側の設定を行います。

ドメインのネームサーバを設定したことでサーバを参照するようになる為、サーバの設定ではドメインの登録、Webサイトに表示するファイルの配置、PHP.iniの編集を行います。

また、ホームページを公開するサーバには、主に共有サーバと専有サーバがあります。

9BOXではWebサイト稼働の安定性を図った専有サーバを使用しております。

製作内容	詳細
ドメインのDNS設定	取得したドメイン名をホスティングサーバに関連付けるために、ドメインのネームサーバ（DNS）を設定
php.ini編集	メモリ制限やアップロードファイルの最大サイズ等Webサイトの規模に応じて設定

4.URLの正規化

URLの正規化ではリンクポピュラリティ(評価)の分散を防ぐ為、「wwwの有無」「/の有無」などURLの正規化を行います。

URLは下記のように一部分が異なるだけで別ページと判断されます。

https://○○.jp
https://○○.jp/
http://○○.jp/
http://www.○○.jp/

どのURLにも間違いはなく、統一させることが重要となります。

9BOXでは「https://○○.jp/」で正規化しておりますのでその場合、「.htaccess」ファイルに下記のように記載します。

.htaccessの制作内容例

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.9box\.jp
RewriteRule ^(.*)$ https://9box.jp/$1 [R=301,L]

5.キャッシュの設定

キャッシュの設定を行うことで一度読み込んだ画像やcss、Javascriptなどのファイル表示の速度を高速化します。

画像の変更をした際、即時更新を行いたい場合は、ページ内の画像の規模に応じて読み込み速度が変わる為、仕様を変更する場合もございます。

キャッシュの設定では「.htaccess」ファイルに下記のように記載します。

.htaccessの制作内容例

# gzipで圧縮して転送する
<IfModule mod_deflate.c>
# Mozilla4、IE7-8は正しく動作しないので制限をかける
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
# 画像等は再圧縮させない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
# プロキシサーバに圧縮済みのキャッシュを送信する対象を制限させる
Header append Vary Accept-Encoding env=!dont-vary
# 圧縮するコンテンツタイプを指定
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/js "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
</IfModule>

6.SSL(https暗号化)設定

SSLの設定はデータを第三者に盗まれるのを防ぐことや改ざんを防ぐ為に現代において必須の設定といえます。

SSLの設定を行うことでURLが「http://〇〇.jp」から「https://〇〇.jp」となりインターネット上のデータを暗号化することができます。

SSLの設定はサーバ上からSSL証明書を発行し暗号化の設定を行います。

7.サイトマップの設置

サイトマップとはxml形式で記載したWebサイトのページ構成を検索エンジンに伝えるものです。

サイトマップをサーバ上に設置し、Googleのサーチコンソールから送信することで、検索エンジンのクローラーを呼び寄せることができます。

サイトマップの最大のメリットは早く検索エンジンに認識させることができる点です。

Webサイトはすぐに検索順位が上がる訳でなく、徐々にサイトの内容を理解し上がっていく為、少しでも早く認識させるに越したことはありません。

サイトマップは下記のように作成していきます。

サイトマップの制作内容例

<?xml version="1.0" encoding="UTF-8" ?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://9box.jp/</loc>
<lastmod>2022-01-05</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://9box.jp/contact/</loc>
<lastmod>2022-01-05</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
</urlset>

ファイル名は一例ですが「sitemap.xml」で保存します。

8.アクセス解析の設定

アクセス解析の設定はGoogleのアナリティクスを使用します。

設定完了後はアクセス数を確認できる画面が表示されますが、初めての場合はWebサイトの情報を入力する為、アカウントを作成しプロパティを設定します。

※9BOXでホームページ制作依頼をした場合は設定完了後のお渡しとなりますので設定は不要です。

設定が完了するとトラッキングコードが発行されますので全てのページのheadタグ内に下記のように記載します。

全ページに設置するGoogleタグマネージャの製作内容例

<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src ='https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-トラッキングコードを記入');
</script>

9.メールアドレスの発行

メールアドレスの発行は取得したドメインの@より前の部分を任意で作成することができます。

例えば「9box.jp」のドメインを取得した場合、「info@9box.jp」や「name@9box.jp」などのメールアドレスの発行が可能です。

info@9box.jp
test-1@9box.jp
test_2@9box.jp

文字数は32文字まで、半角英数字または「.（ドット）-（ハイフン）_（アンダーバー）」の記号で作成することができます。

その他9BOXでメールアドレスの発行を行う際の詳細はメールアドレスの発行についてをご確認ください。

10.外観デザインの制作

外観デザインの制作ではヘッダー部分、コンテンツ部分、フッター部分の大きく3つに分けた共通デザインを作成していきます。

また、フォントや色、横幅などWebサイト全体の細かい部分のデザインも作成します。

ヘッダーデザイン
コンテンツデザイン
フッターデザイン
フォント
文字サイズ
文字色・背景色
見出しデザイン
ボタンデザイン
横幅
入力フォーム
リスト
表
その他要件に応じて

11.グローバルメニューの制作

グローバルメニューの制作では、全ページ共通のメニューバーを作成していきます。

ウェブサイトの全体的な構造を考慮し、ユーザーが必要とする情報に素早くアクセスできるように、メニューの項目を計画します。

閲覧者が目的のページに辿り着けるよう、ページ数やカテゴリに応じて作成し、利便性の向上を図ります。

12.レスポンシブデザイン設定

レスポンシブデザイン設定ではデバイスに応じたデザインを制作していきます。

Webサイトは、パソコンやスマートフォン、タブレット端末など様々なデバイスで閲覧する可能性があります。

その為、どのデバイスからでも最適にWebサイトが表示されるようレスポンシブデザインの設定を行います。

例えばグローバルメニューをパソコンでは横一列に表示できますが、スマートフォンでは横一列で表示した際形崩れを起こしてしまいます。

その場合、スマートフォンでは3本線のメニューバーを押した時のみ、横からスライドさせて縦に並べて表示するといった設定を行っていきます。

13.ヘッダー画像の制作

ヘッダー画像の制作ではトップページ及び下層ページの上部に配置する画像を制作します。

ヘッダー画像にはいくつか種類がありお客様の要望に応じて制作します。

固定画像

ヘッダー画像を1枚固定で表示する方法となります。

スライダー画像

スライダー画像には横に自動スクロールする効果や、フェードインで画像を切り替える効果などの一定間隔で自動的に切り替わるアニメーション効果を付ける方法となります。

パララックス画像

パララックス画像はスクロールに応じて背景画像が前景コンテンツと異なる速度で動く方法となります。

ビデオヘッダー

ビデオヘッダーは動画をヘッダーとして使い、ウェブサイトに動的で魅力的な雰囲気を与える方法です。

テキストオーバーレイ

テキストオーバーレイは、画像の上にテキストを配置し、メッセージを強調する方法になります。

14.ファビコンの作成

ファビコン（お気に入りアイコン）の制作では、ウェブサイトのブランドを象徴する小さなアイコンをデザインします。

このアイコンはウェブブラウザのタブ、ブックマークリスト、アドレスバー、履歴ログなどに表示されるため、ウェブサイトの識別性を高める重要な役割を果たします。

また、スマートフォンやタブレットでウェブサイトがブックマークされた際、ホーム画面に表示されるアイコンとしても機能します。

ファビコンのサイズ

パソコン用作成サイズ：64px×64px
スマートフォン用作成サイズ：150px×150px

15.遅延読み込みの設定

遅延読み込みの設定ではWebサイトで負荷がかかる画像を表示領域内に入った際に読み込む設定を行います。

通常はページが開かれた時、一度に画像を読み込む為表示速度が画像の容量や枚数に影響します。

遅延読み込みを行うことで必要な分だけ画像を順次読み込む為、表示速度を改善することができます。

16.SNSの設定

SNSの設定では、フェイスブック、インスタグラム、ツイッターなどの人気SNSへのリンクをウェブサイト上に設置することが含まれます。これらのリンクは、通常、SNSのロゴを使用したアイコンとしてウェブサイトのフッターやヘッダーに配置され、訪問者がクリックすることで直接SNSのページにアクセスできるようになります。

また、SNSのウィジェットをウェブサイトに組み込むことも一般的です。これにより、最新のSNS投稿をリアルタイムでウェブサイトに表示することができます。例えば、フェイスブックの「いいね！」ボックス、ツイッターのタイムラインフィード、インスタグラムの写真ギャラリーなどがあります。