常時SSL

常時SSLのメリット

ネットショップを常時SSL化するメリットとしては主に以下の3点が挙げられます。

  • セキュリティ強化
  • SEOに有利
  • 信頼性の向上

常時SSLとは

安全なネットショップを運営していただくために、インターネット上で通信を暗号化する技術を常時SSLといいます。
第三者によるデータの盗聴や改ざんなどを防ぐことやSEO(検索エンジン対策)効果も期待できます。
またURLは、「http://~」→「https://~」となります。
詳細については[ こちらのページ ]をご覧ください。

マンガでSSLを理解

SSLを理解するのは難しいので、だれにでも理解しやすいようにマンガ「崖っぷちアイドルと学ぶ常時SSL入門」を用意しました。こちらも参考にしてください。

1. 「アカウント・設定 >ドメイン > 常時SSL」画面へ

以降のステップは独自ドメインとサブドメイン(https://○○○○.shop-pro.jp)の場合とで異なります。

▼ 独自ドメインの方はこちら

▼ サブドメインの方はこちら

▼ よくあるご質問



独自ドメインの方

1.ドメインと契約についての自動チェック

独自ドメインが正しく設定されているかチェックします。

以下の画面が表示された場合、画面の指示にしたがって原因についてご確認ください。

01_domain

カラーミーショップの本契約が完了されていない方はご利用いただけません。
以下の画面がこちらから契約を完了させてください。

02_https

また「for ロリポップ!プラン」等の無料プランの場合もご利用いただけません。
通常プランへのアップグレード完了後、オーナー情報をご入力いただき契約をしていただくと、ご利用可能となります。

2.テンプレート等の自動チェック

常時SSLへ切り替えた後にショップページが問題なく動作するようテンプレート等のチェックを行います。

まずは自動チェックを行います。自動チェックの進捗状況が表示されますので、終了するまでお待ちください。

skitch

3.フィッシング等の自動チェック

なりすまし等の不正行為ではないかの判定を行います。
以下の画面が表示された場合24時間以内に判定を行いますので恐れ入りますが判定結果をおまちください。

03_fishing

審査通過の場合、以下のような画面が表示され、プレビューチェックへ進むことができます。

f93e318a-b631-11e6-97b6-1341912c36c5

正しくメタタグが設定されているか判定を自動で行います。
下記の画面が表示された場合、「独自ドメイン設定」を今一度ご確認ください。

05_meta

4.プレビューチェック

1.ご利用のテンプレートを自動でチェックします。

・自動チェックについてのよくある質問はこちらから

・自動チェックを行うと「修正が必要な箇所」と「自動で変換された箇所」が結果として表示されます。

  • 「自動で変換された箇所」とは

    ご利用のデザインテンプレートの他、HTMLを入れることのできる設定箇所をチェックし、自動で変換されます。結果には変更の対象となった箇所が表示されます。

  • 「修正が必要な箇所」とは

    手動にて修正が必要な箇所となります。結果に従って修正をお願いします。
    修正が完了しましたら【再度チェックする】をクリックし、0箇所となるまで修正を行ってください。

auto_check

2. テンプレートをプレビューで確認します。

・プレビューチェックについてのよくある質問はこちらから

・自動チェック完了後、プレビューチェックを行います。目視にてhttpsとなっている事、常時SSLを示す鍵マークが付いている事をチェックしてください。

スマートフォン表示モード設定が「PC版表示」の場合は4箇所、「スマートフォン最適化」の場合は8箇所のプレビューをお願いします。

preview_check

※ 上記はスマートフォン表示モード設定が「スマートフォン最適化」の場合になります。

7.常時SSLへ切り替え

プレビューチェックが終わりましたら、チェックボックスにチェックを入れて【常時SSLに切り替える】ボタンをクリックします。

switch_ssl

以上で設定は完了です。

kiyakuakanryo

サブドメインの方

1.自動チェック

常時SSLへ切り替えた後にショップページが問題なく動作するようテンプレート等のチェックとプレビューでのご確認を行ってください。

まずは自動チェックを行います。自動チェックの進捗状況が表示されますので、終了するまでお待ちください。

skitch

2.プレビューチェック

1.ご利用のテンプレートを自動でチェックします。

・自動チェックについてのよくある質問はこちらから

・自動チェックを行うと「修正が必要な箇所」と「自動で変換された箇所」が結果として表示されます。

  • 「自動で変換された箇所」とは

    ご利用のデザインテンプレートの他、HTMLを入れることのできる設定箇所をチェックし、自動で変換されます。
    結果には変更の対象となる箇所が表示されます。

  • 「修正が必要な箇所」とは

    手動にて修正が必要な箇所となります。結果に従って修正をお願いします。
    修正が完了しましたら【再度チェックする】をクリックし、0箇所となるまで修正を行ってください。

auto_check

2. テンプレートをプレビューで確認します。

・プレビューチェックについてのよくある質問はこちらから

・自動チェック完了後、プレビューチェックを行います。目視にてhttpsとなっている事、
常時SSLを示す鍵マークが付いている事をチェックしてください。

・スマートフォン表示モード設定が「PC版表示」の場合は4箇所、「スマートフォン最適化」の場合は8箇所のプレビューをお願いします。

preview_check

※ 上記はスマートフォン表示モード設定が「スマートフォン最適化」の場合になります。

4 .常時SSLへ切り替える

自動チェックとプレビューチェックが終わりましたら、チェックボックスにチェックを入れて【常時SSLに切り替える】ボタンをクリックします。

switch_ssl

以上で設定は完了です。



よくある質問

自動チェックについてよくある質問

Q. なぜテンプレートをチェックする必要があるのですか?

A. 常時SSLへの切り替え後にショップページが正常に動作するためです。

Q. 何をチェックするのでしょうか?

A. ご利用いただいているテンプレート等を対象にHTMLタグが有効な箇所がチェック対象となっています。

Q. チェックに引っ掛かったらどうすればよいですか?

A. 引っ掛かった自動チェックの内容をご確認いただき該当箇所を修正してください。
例えばテンプレート内で http://example.com/images/banner.jpg を読み込んでいる場合、下記のような対応を行います。

  • example.com が https からもアクセスできるのであれば、

    https://example.com/images/banner.jpg で読み込むよう修正する。

  • example.com が https からはアクセスできないのであれば、

    http://example.com/images/banner.jpg を一旦PCに保存して、FTP でアップロードする。
    カラーミーショップのFTPオプションをご利用いただくか、他でご契約のレンタルサーバーをご利用ください。

プレビューチェックについてよくある質問

Q. チェックする項目はどこを見れば良いですか?

A. 主に下記の3点をご確認ください。

  • ショップのURLが https となっている事
  • 常時SSLを示す 鍵マーク が付いている事
  • ショップに崩れが起きていない事

Q. プレビューで確認したのですがエラーが出ている場合はどうしたら良いですか?

A. 例えばプレビューをご確認いただいた際に、常時SSLを示す鍵マークが出ていなかった場合、
ご利用のテンプレートやHTMLの記述が可能な箇所(商品説明など)の記述に原因があると考えられます。
自動チェックに引っ掛からなかった箇所になりますので手動にてエラーを改善いただきますようお願いします。

一概に原因となるエラー箇所があげられないため、そのヒントを探すにはChromeのデベロッパーツールが効果的です。
(Chromeのデベロッパーツールの使い方はサポート対象外になります。)

【参考】HTTPS接続の状態をチェックできるGoogle ChromeのSecurityパネル:海外SEO情報ブログ

常時SSLにした後のよくある質問

Q.商品詳細ページで「Mixed Content: ...」のアラートが表示されてしまう

A.商品詳細ページで以下のようなアラートメッセージが表示されてしまう場合は商品詳細ページのHTMLの修正をお願いします。

Mixed Content: The page at 'https://ショップのURL' was loaded over HTTPS, but requested an insecure image 'http://secure.shop-pro.jp/img/star_**.png'. This content should also be served over HTTPS.

修正前... https://secure.shop-pro.jp/img/star_<{ $reviewlist[num].star|string_format:"%02d" }>.png
修正後... https://img.shop-pro.jp/img/review/star_<{ $reviewlist[num].star|string_format:"%02d" }>.png
※赤字の部分が変更点になります。

Q.ショップアドレスがhttpからhttpsに切り替わることで、ブックマークやQRコードのリンクが切れてしまいますか?

A.常時SSLを設定した場合、「http」のショップアドレスにアクセスすると
自動的に「https」にURLが切り替わります。

そのため、ブックマークなどの再登録は不要です。
必要に応じて適宜変更をおこなっていただけますようお願いいたします。

Q. 画像を追加したいのですが、注意する点はありますか?

A. 例えばテンプレートへ画像を入れる際には
誤...http://example.com/images/banner.jpg とはせずに
正...https://example.com/images/banner.jpg としてください。
https となっている事をご確認ください。

※ HTMLの記述が可能な箇所(商品説明など)も同様になります。

Q. httpに戻したいのですが、どうしたら良いですか?

A 下記手順にそって進める事でhttpへ戻す事ができます。

https
shop-pro.jpのサブドメインをご利用の場合
  1. サイドメニューから 常時SSL をクリック
  2. ページ上部にある【httpに戻す】をクリック
  3. OKをクリック後に http に戻ります。
switch_no_ssl

注意:独自ドメインの場合、設定を戻すだけでは常時SSLのご契約解除になりません。
「アカウント設定>オプションサービス」より「常時SSLの有料オプション」のご契約状況をご確認ください。

keiyaku