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

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

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

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

1.ドメイン取得・設定

ドメイン取得・設定

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

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

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

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

ドメイン名 URLで使いたい文字列
ドメイン取得 ムームードメインやお名前.comなどのドメイン会社
ドメイン設定 サーバごとに用意されたネームサーバ(DNS)をドメイン会社で設定

2.サーバの設定

サーバの設定

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

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

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

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

サーバの設定
ドメイン登録
Webサイトに表示するファイルの配置
php.ini編集※phpを使用する場合処理に応じて記載
サーバの種類
共有サーバ(他のWebサイトの影響を受け障害発生の可能性あり)
専有サーバ(リソースを確保している為安定的な稼働が見込める)

3.URLの正規化

URLの正規化

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

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

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

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

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

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

4.キャッシュの設定

キャッシュの設定

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

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

  1. # gzipで圧縮して転送する
  2. <IfModule mod_deflate.c>
  3. # Mozilla4、IE7-8は正しく動作しないので制限をかける
  4. BrowserMatch ^Mozilla/4\.0[678] no-gzip
  5. BrowserMatch ^Mozilla/4 gzip-only-text/html
  6. BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
  7. # 画像等は再圧縮させない
  8. SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  9. # プロキシサーバに圧縮済みのキャッシュを送信する対象を制限させる
  10. Header append Vary Accept-Encoding env=!dont-vary
  11. # 圧縮するコンテンツタイプを指定
  12. AddOutputFilterByType DEFLATE text/plain
  13. AddOutputFilterByType DEFLATE text/html
  14. AddOutputFilterByType DEFLATE text/xml
  15. AddOutputFilterByType DEFLATE text/css
  16. AddOutputFilterByType DEFLATE text/js
  17. AddOutputFilterByType DEFLATE text/javascript
  18. AddOutputFilterByType DEFLATE image/svg+xml
  19. AddOutputFilterByType DEFLATE application/xml
  20. AddOutputFilterByType DEFLATE application/xhtml+xml
  21. AddOutputFilterByType DEFLATE application/rss+xml
  22. AddOutputFilterByType DEFLATE application/atom_xml
  23. AddOutputFilterByType DEFLATE application/javascript
  24. AddOutputFilterByType DEFLATE application/x-javascript
  25. AddOutputFilterByType DEFLATE application/x-httpd-php
  26. AddOutputFilterByType DEFLATE application/x-font-ttf
  27. AddOutputFilterByType DEFLATE application/x-font-woff
  28. AddOutputFilterByType DEFLATE application/x-font-opentype
  29. AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  30. </IfModule>
  31. ## EXPIRES CACHING ##
  32. <IfModule mod_expires.c>
  33. ExpiresActive On
  34. ExpiresByType image/jpg "access plus 1 year"
  35. ExpiresByType image/jpeg "access plus 1 year"
  36. ExpiresByType image/gif "access plus 1 year"
  37. ExpiresByType image/png "access plus 1 year"
  38. ExpiresByType image/svg+xml "access plus 1 year"
  39. ExpiresByType text/css "access plus 1 week"
  40. ExpiresByType text/js "access plus 1 year"
  41. ExpiresByType application/x-javascript "access plus 1 year"
  42. ExpiresByType text/javascript "access plus 1 year"
  43. ExpiresByType application/javascript "access plus 1 year"
  44. ExpiresByType image/x-icon "access 1 year"
  45. </IfModule>

5.SSL(https暗号化)設定

SSL(https暗号化)設定

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

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

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

6.サイトマップの設置

サイトマップの設置

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

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

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

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

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

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  3. <url>
  4. <loc>https://9box.jp/</loc>
  5. <lastmod>2022-01-05</lastmod>
  6. <changefreq>weekly</changefreq>
  7. <priority>1.0</priority>
  8. </url>
  9. <url>
  10. <loc>https://9box.jp/contact/</loc>
  11. <lastmod>2022-01-05</lastmod>
  12. <changefreq>weekly</changefreq>
  13. <priority>0.5</priority>
  14. </url>
  15. </urlset>

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

7.アクセス解析の設定

アクセス解析の設定

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

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

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

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

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

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

メールアドレスの発行

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

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

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

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

9.外観デザインの制作

外観デザインの制作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12.ヘッダー画像の制作

ヘッダー画像の制作

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

ページを開いた時に、まず目にする場所となる為一目で伝わるデザインで画像を制作します。

13.ファビコンの作成

ファビコンの作成

ファビコンの作成では、スマートフォンでブックマークされた際に表示されるアイコン画像とパソコンのタブ上に表示されるアイコン画像を作成します。

基本的にはお店や会社のロゴをファビコンとして作成します。

14.遅延読み込みの設定

遅延読み込みの設定

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

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

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

15.SNSの設定

SNSの設定

SNSの設定では、SNSへリンクを飛ばしたり、ウィジェットの設置を行うことができます。

フェイスブックやインスタグラム、ツイッターなど様々なSNSの設定が可能です。

16.パフォーマンスのテスト

パフォーマンスのテスト

パフォーマンスのテストではGoogleのPageSpeedInsightを使って表示速度の改善を行います。

Webサイトの表示速度が遅い原因は、主にCSS、JS、画像、レンダリングの4つとなっており、不要なソースコードの削除や圧縮などを行っていきます。

17.PC・スマホ等の表示テスト

PC・スマホ等の表示テスト

PC・スマホ等の表示テストではWebサイトの形崩れをテストしていきます。

今ではパソコン、スマートフォンの他にもタブレットからの閲覧者も多くいる為、様々なデバイスに応じて表示テストを行っていきます。

18.コンテンツデザインの制作

コンテンツデザインの制作

コンテンツデザインの制作ではページ内にある文章や画像を装飾しコンテンツデザインを制作していきます。

項目数や文章量に応じて適切なデザインを考慮し制作していきます。

19.文章の制作

文章の制作

文章の制作ではページごとのテーマに沿った文章を制作します。また、ページタイトルに沿った見出しも制作していきます。

文章の制作はお客様ご指定の文章及び9BOXにて文章をお作りすることも可能となっております。弊社で制作する場合、お店の情報が記載されているパンフレットなどの資料があると制作がスムーズにいきます。何もない場合、ヒアリングまたは一度制作したうえでお客様の経営方針のもと文章内容のズレを修正していきます。

20.画像の制作

画像の制作

画像の制作では文章では伝わりにくい場合や、一目で伝えたい場合に最適な画像の制作をします。

画像の制作においては適切なサイズと圧縮も行います。また、画像の制作はお店のイメージにあった高級感やポップ調などの様々なデザインでお作りすることが可能となっております。

21.titleタグの設定

titleタグの設定

titleタグの設定では検索エンジンに表示されるタイトル部分の設定を行います。

SEO対策としてもtitleタグは重要な要素でコンテンツの内容がどんなに良くてもタイトルの書き方が悪いと検索エンジンでよい成果をだせない程重要な要素です。

22.descriptionタグ(要約)の設定

descriptionタグ(要約)の設定

descriptionタグ(要約)の設定では検索エンジンに表示される要約部分の設定を行います。

descriptionタグはCTRというクリック率に非常に影響がでる要素となる為、タイトルで書き表せない内容を120文字程度に凝縮した文章作りを行っていきます。

ウェブの技術で企業をサポート

9BOXは会社に必要不可欠な「集客媒体」と「業務改善」において多くのお客様からご相談やご依頼をいただいております。

新しい技術を取り入れ、ウェブに関する様々なサービスを一元管理できる会社として企業をサポートしております。

CONTACT
お電話でのお問い合わせ
0285-36-3931
営業時間 09:00~18:00 月~金
メールでのお問い合わせ