お名前.comで取得した独自ドメインをShopifyに接続する

お名前.comで取得したドメインをshopifyに接続するイメージ

ShopifyでECを作る際に、すでに『お名前.com(ドットコム)』で契約し取得した独自ドメインをShopifyに接続してECサイトのURLを取得した独自ドメインで表示させたい方のための記事です。

お名前.comのDSN設定を変更

今回はすでに『お名前.com』で独自ドメインを取得したと仮定して進めます。
まだドメインを取得していない方は、お名前.comでドメインを取得してからお読みください。

まずはDSN設定を変更します。DNS(Domain Name System)設定 は、簡単に言うとドメイン名とサーバーを接続する設定のようなイメージです。
ドメイン側で、接続したいサーバー側で指定する合言葉のようなものを設定することで、ドメインとサーバーが連携し、ブラウザを通してサーバーに保存されているウェブページ(サイト)が閲覧できる仕組みです。

「そんな仕組みがあるんだ〜」程度で大丈夫です。


詳しく知りたい方は、レンタルサーバーのカゴヤさんのサイトがわかりやすいと思います。
→【図解】DNSサーバーとは?設定・変更と確認方法

『お名前.com』にログイン後、トップページの【ご利用状況】の【ドメイン一覧】をクリックします。

ShopifyのECサイトに接続したいドメインを確認し、『DNS』レコードの【変更】をクリックします。

対象ドメインにチェックを入れ、【次へ】をクリックします。1個手前でドメインを選んでるはずなので、もう一度ドメインを選ぶ必要ない気がしますがしっかり確認しろってことでしょうかね‥?

『DNSレコード設定を利用する』の【設定する】をクリックします。ページ遷移が無駄に多い…

レコード入力欄を見つけましょう。

まずは『TYPE』が『A』であることを確認し、『VALUE』の各枠に順番に『23.227.38.65』と入力し【追加】をクリックします。

次に、CNAMEレコードを設定します。『TYPE』で『CNAME』を選択します。

『ホスト名』に『www』と入力、『VALUE』の欄に『shops.myshopify.com』と入力し【追加】をクリックします。

『追加』の欄に、『Aレコード』と『CNAMEレコード』が追加されているのを確認します。

下部にスクロールし、『DNSレコード設定用ネームサーバー変更確認』にチェックを入れ、【確認画面へ進む】をクリックし、確認画面で【設定する】をクリックし、設定を完了します。

Shopifyで『外部ドメイン』の追加する

お名前.com側でドメインのDNS設定ができたら、Shopify側でも作業を行います。

ログイン後にサイドメニューの『オンラインストア』→『ドメイン』の順にクリックし、ドメイン設定ページを開きます。

『アクション』をクリックし『既存のドメインを接続する』をクリックします。

外部サービス(お名前.com等)で取得したドメインを、外部サービスにて支払い・管理のまま他サービスのサイトに紐づける『接続』と、外部サービス(お名前.com等)で取得したドメインを他サービスに支払いや管理を移す『移管』という方法の2種類あります。
『移管』と『接続』がごっちゃになってるサイト記事などもあるので、覚えておいても損はないかもしれません。

取得済みの独自ドメインを入力し、【次へ】をクリックします。

【接続を確認する】をクリックします。

DNS設定をおこなった後スグに接続しようとすると、上記のようなエラーメッセージが表示されます。
これはお名前.com側の設定の反映が未完了ということですが、10〜20分ほどで完了しますので、こまめに【もう一度確認する】をクリックして確認してみましょう。

接続されると、画面がドメイン設定画面に切り替わり、『外部サービスのドメイン』の中に『接続済み』のマークとともに、追加したドメインが記載されていることが確認できます。

現状では追加したドメインを入力してブラウザで見てみると、サイトが表示されるのですが、URLが以前のサイトのままになっているはずです。

追加したドメインをプライマリードメインに設定することで、サイトのURLも独自ドメインで表示できるようになります。
『プライマリードメインを変更する』をクリックします。

外部サービスのドメインのwww有り/無し好きな方を選択し『保存する』をクリックします。
(ちなみにどちらを入力しても、リダイレクトされサイトが表示されますが、私は短いほうが好みです。)

この作業が完了すれば、取得した独自ドメインがサイトのURLとしてウェブサイトが表示されます。私の場合は20分ほどしてようやく独自ドメインのURLが適用されました。
それまでは独自ドメインをブラウザに打ち込んでも『〜〜〜.myshopify.com』の方にリダイレクトされ、ドメインが接続されていないのか、あたふたしましたがタイムラグがあるようでした。

Shopifyの開発スピードはすごく早いですし、Shopify案件を多く抱える有名な制作会社さんのブログでも、細かいサイト導線が、現在(2021年8月)のサイトと異なっていたり、デザインが変わっていたりしたので、改めて備忘録としても残しておきたくて、記事にしました。

みなさまの参考になれば幸いです。

【Shopifyブログ】ネットショップにドメインを設定・指定する方法をご紹介

【お名前.com】DNS関連機能の設定:DNSレコード設定