Cntlog > WEB全般 > 簡単にできる独自SSL(https対応)化対応のコツと方法(HTML版)

簡単にできる独自SSL(https対応)化対応のコツと方法(HTML版)

2014年頃から常時SSL化はGoogleから推奨すると発表され、2017年にはGoogle Chromeで「保護された通信」の表示が広まり、続々と対応する人が増えてきました。

この記事では、SSLの対応方法となぜSSL対応が必要なのかをお伝えします。

常時SSLとは

常時SSLとはウェブサイトの全てのページをHTTPS化するセキュリティ手法です。

多くの大手サイトの対応が対応しており、最近新規で立ち上がるサイトはSSL対応された状態で公開されるのが当たり前になっています。

なぜSSL化は必要なのか

SSL対応によりhttps通信で通信が暗号化されます。
http://で始まるURLのままだと、通信を傍受される可能性があり、フォーム送信の際にクレジットカード情報などの個人情報が盗まれる可能性があります。

以前はお問い合わせフォームなど、個人情報を含むページに限られていましたが、常時SSL対応で全てのページが暗号化されより安全になるのです。

SSL化してないことで、フォームを送信する時に

公共のWifi環境などでアクセスしていた場合、通信の傍受が自宅や携帯回線より簡単にされてしまうので、SSL対応(https化)による暗号化が重要視されます。

SSLに対応していれば、そのサイトが偽物の場合は警告がでるので、「情報が漏洩する可能性があります」とアラートが出るようになったので、ユーザーの離脱を回避するにはSSL化は重要な役割を持っています。

また、googleはSSL対応のサイトを検索結果の上位に表示しやすくすると発表もあり、SEOの対策としての意味もあります。

主な理由は対応の目的は下記のようにお考えください。

  • 個人情報の保護のため
  • ユーザーの信頼を失わないため
  • SEO対策の一貫

SSL証明書の有料と無料もの違い

実はSSL証明書は無料でも有料でも暗号化の強度において違いはありません。
実は私も最初誤解していました。

無料のSSL証明書は「Let’s Encrypt(れっつえんくりぷと)」が有名です。

よくSSL無料をううたい文句にしているサーバーがありますが、ほとんどがこの「Let’s Encrypt」を利用しています。

ガラケーに非対応だったり、サイトシールは使えませんが、維持費用がかからないのがメリットです。
ほとんどの方は、無料のSSL証明書で問題ないのですが金融関係や個人情報をモロに扱うサイトですと信頼を得るために有料のSSLを使場合もあります。

有料のSSLで有名どころですとジオトラストやグローバルサインなどがあります。
名前が知られている有料のSSL証明書は、サイトシールを掲載することでできこれで、ユーザーからの信頼感を得ることができます。

しかし、有料の証明書の場合、購入の手間以外にもインストールや更新の作業の手間がかかるので、ITに不慣れな方にはオススメしません。

SSLの対応をするとどうなるか

今はほとんどのサイトがSSL対応ずみですので、現在の検索順位が大幅に上がるようなことはありません。

ただ、過去には上位を取れていたけど常時SSL化を行なっていないために順位が下がっている場合などは元の順位と取り戻すことはあるかもしれません。

またSSL対応をしていなかった事で離脱していたユーザーの信頼を取り戻せる可能性はあります。

これらの成果はサイトによって全然変わってくるので、「絶対にこうなる!」という結果はありません。

たまに「SEOを目的としてSSL化したい」という人もいますが、正直期待はできないので顧客の情報保護を目的にしたほうが良いです。

SSL対応方法の手順

大まかには以下のような流れとなります。
SSLは契約してるサーバー設定以外にも触らないと行けないところがありますのでお忘れなく。

今回記載しているのはHTML版です。
WordPressの場合はPHPの変更やデータベースの変更も必要なケースがありもう少し複雑になります。

バックアップを取る

HTMLやCSSを変更しますので、まずは全部のファイルのバックアップデータを取ってください。
バクアップのとり方はHTMLメインのサイトでしたら、FTPからダウンロードするのが一番カンタンです。

契約されてるサーバーにもよりますが、管理画面からボタン一つでバックアップが取れるレンタルサーバー会社もあります。(例えば、MixHostとか)

バックアップの準備が終わったら常時SSL化後にHTTPSで公開するための作業していきます。

ソースの書き換え

SSL対応ではSSL証明書の準備以外にも読み込みファイルをhttphttpsにする必要があります。

書き換える可能性のあるタグは下記になります。

  • aタグの『href』属性 = リンク先の指定
  • linkタグの『href』属性 = スタイルシート(CSS)やファビコンの参照先
  • imgタグの『src』属性 = 画像の参照先
  • scriptタグの『src』属性 = Javascriptの外部ファイルの参照先
  • CSSの”background-image”の『url』 = 画像の参照先 など

書き換えが不要なもの

ファイルの読み込みパスにも色々な書き方があります。
「相対パス」の場合は書き換えが不要です。

相対パスの場合

現在のファイルの位置を基準にしたパスの記述方法です。
参照するファイルの位置関係が変わらなければ、リンクやパスの修正は不要です。

相対パスの書き方:../

<img src="../ディレクトリ名/ファイル名">
<a href="../ディレクトリ名/ファイル名"></a>

サイトルート相対パスの場合

Webサイトのドキュメントルートの位置を基準にしたパスの記述方法です。
参照するファイルのドキュメントルートからの位置関係が変わらなければ、リンクやパスの修正は不要です。

サイトルート相対パスの書き方:/

<img src="/ディレクトリ名/ディレクトリ名/ファイル名">
<a href="/ディレクトリ名/ディレクトリ名/ファイル名"></a>

書き換えが必要なもの

絶対パス

「絶対パス」はWebサイトのURLでページやファイルを指定してリンクする方法です。
「絶対パス」を使っている場合SSL化に伴って参照するURLが変わりますので、リンクやパスの修正が必要になります。

ただし、修正するのはあなたが今修正しているサイトのドメインだけになります。
他のドメインにリンクしているものは変更不要ですのでご注意ください。

修正前
<img src="https://example.com/ディレクトリ名/ディレクトリ名/ファイル名">
<a href="http://example.com/ディレクトリ名/ディレクトリ名/ファイル名"></a>
修正後

httpの部分をhttpsに変更しています。

<img src="https://example.com/ディレクトリ名/ディレクトリ名/ファイル名">
<a href="https://example.com/ディレクトリ名/ディレクトリ名/ファイル名"></a>

ファイルの上書き

ファイルの修正が完了したらFTPなどを使ってもとの場所に上書きしてください。

SSL証明書のご契約

SSL証明書は基本的にご契約のサーバーで契約ができます。
契約の設定は各サーバー会社によって異なりますので、各会社のサポートに問い合わせるか、ヘルプページを探すとすぐ見つかります。

無料でSSL証明書を発行できるサーバー会社は後述します。

httpsの読み込みディレクトリ設定

これは設定しないサーバー会社もあるのですが、http://example.com/で読み込むディレクトリ(フォルダみたいなもの)とhttps://example.com/で読み込むディレクトリを別々に設定するサーバー会社もあります。

もし設定が必要な場合はhttpと同じディレクトリを設定すると別のディレクトリを作らなくても良いのでオススメです。

ブラウザのチェック

SSL証明書の発行が確認できたら、あなたのサイトにアクセスしてみてください。

成功している場合

Google Chromeでアクセスすると、下記のような、鍵マークのアイコンがついているはずです。

失敗している場合

Google Chromeでアクセスすると、下記のように「保護されていない通信」と表記されているはずです。

http→httpsの転送設定

転送設定(リダイレクト)とは、自動的に指定したURLに強制的に移動させることです。
今回の場合はhttp://example.com/https://example.com/に移動させる目的です。

ドメイン(example.com)が同じでもhttphttpsではURLが別と認識されているので注意してください。

特にこれまでhttpで検索結果に表示されていたので、httpsに強制的に移動させないと、せっかくやったSSL対応も効果を発揮しません。

リダイレクトをしておくと、検索結果でもhttpsのURLが表示されるのも早くなります。

リダイレクトは必ず301リダイレクト(恒久的に転送)を行います。

基本的には下記のコードをhtaccessに追記すれば転送が完了します。
htaccessはそのサイトのTOPのディレクトリにあると思いますのでFTPなどでダウンロードしてください。

なければ新しく作って設置してください。

さくらサーバーでは「HTTPレスポンスヘッダー」の兼ね合いでエラーが発生するケースもあったので、サーバー環境によっては少し記述が変わってきますのでご注意ください。

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

これであなたのサイトのhttpにアクセスしてhttpsにリダイレクトされるかを確認してください。

https化の後にすること

これら全てが完了したら提携サービスの変更も必要になります。

例えば利用者の多い、サーチコンソールはGoogle アナリティクスですね。

サーチコンソールにhttpsから始まるURLで新しく登録し直します。
httpで登録してある分は検索結果が残っているので削除せずに残しておきましょう。

Googleアナリティクスは「プロパティ設定」と「ビュー設定」のURLを切り替えるだけで大丈夫です。

常時SSL化が簡単で無料で行えるレンタルサーバー

最近は色んな会社さんが無料SSL対応されてます。
私が利用していて、使いやすかったのは下記の2社です。

どちらも新しくできたばかりのレンタルサーバーの会社ですが、新しく参入されただけあって管理画面が使いやすかったり、HPのサポートが丁寧に書かれてたりします。

価格もどちらも月額1,000円以下で始められるので、もしお使いのサーバーが無料のSSLに対応していない場合は乗り換えを検討されたほうがSSL対応はすばやく出来るかと思います。(有料のSSL証明書を使うのは大変なので…)

最後に

もしSSLの設定ができるか不安…とかでしたら、お問い合わせからご連絡いただければ、相談にのれるかと思いますよ。(ゝω・)

関連記事

簡単かつ速攻でWebサイトを持てるGoogleマイビジネスの新機能... 2017年6月からGoogleマイビジネスに簡単なウェブサイトを作れるWebサイトビルダーの機能がつきました。 簡単かつ無料でつくれるのでホームページを持っていない人には朗報ですね。 すぐにインデックスされるので、検索でもすぐに引っかかる事ができそうです。 使い方 Goo...
マーケティングオートメーション「Mautic」とWebデザイナーの初めての付き合い方... Mautic Advent Calendar 2016 の5日目を担当記事です。 本記事ではオープンソース唯一のマーケティングオートメーションツール 「Mautic」とのWebデザイナーとしての付き合い方の私なりに思う紹介をします。 マーケティングオートメーションとWebデザイナ...
Webデザイナーが定期的に情報発信しないデメリット... 私は2015年の7月からブログを週一回は更新するようにグループをつくりました。 時々、ノルマを達成できないときはあったのですがおかげさまで、年間の平均値を取れば週1回くらいは更新できているペースでブログをずっと更新できるようになりました。 ただスキルの伸び悩みしている人に、週1でブログを書く...
常時SSLに対応するためのレンタルサーバー選定と移管の手順(Zenlogic編)... 先月に重い腰をあげてようやく常時SSLの対応をしました。 去年からやろうやろうと思っていたのですが、調べてみると自分の契約しているサーバーで常時SSLの対応をするとなると結構費用がかさむ(無料でできない)のが発覚したので、初動から苦労をしてしまいました。 常時SSL対応をするために 常...
Webデザイナが開発環境を作るにあたっての課題について考えてみた... 先日個人的にWordPressのお仕事いただいて自分で開発環境を作っていたのですが、ふとこの工程を自分でできるWebデザイナってどのくらいいるのかなと疑問を覚えました。 幸い私は大きなトラブルなく構築できた(以前似たような構成の案件があった)のですが、従来案件確定の段階で重要視されるのはスケジ...
放置は怖い、SNSのアプリ連携の解除方法... Googleやtwitterなど連携してアカウントを作るサービスはとても便利ですが、一方で使わないサービスも出てきてそれをずっと放置するのは危険かなと思います。 連携の仕方はボタンひとつで簡単ですが、解除の仕方はよく知らないなと思ったので、調べてみました。 Googleの連携 まずは下記に...