オフィシャルサイトオープン！ – 宮古島セレクトショップ WEATHER PERMITTING OKINAWA

さいしょに

2021年あけましておめでとうございます！今年もどうぞよろしくお願いいたします。

不思議なもので、新型コロナウィルス禍・リモートワーク開始から早1年、時が過ぎるのが早いのか遅いのかわからず過ごしておりました。

そんな中、縁あって2020年末より、宮古島セレクトショップ WEATHER PERMITTING OKINAWA さまのオフィシャルサイト（ブログ + ショップ）の立ち上げにMAGi Consulting合同会社代表として関わっておりました。

宮古島セレクトショップ WEATHER PERMITTING OKINAWA

WEATHER PERMITTING = 天気次第

とても素敵な言葉ですよね。

オープンはWEATHER PERMITTING OKINAWA さまの9周年「2021年1月11日 11時11分」、現在カウントダウン中！

オープン記念送料無料クーポン

2021年1月はオープンを記念し、送料無料となるクーポン「WPO-9thAnniversary!」をご利用いただけます！

オンラインショップ立ち上げ

今回、オンラインショップ立ち上げに際し、以下を行わせて頂きました。

• ビジネスレビュー・要件定義・ヒアリング
• ビジネス / マーケティング / IT コンサルティング
• 素材写真撮影
• サイト設計及びデザイン
• ブログ + オンラインショップ構築 及び 付随するページ作成
• オンラインショップ運用支援
• 運用開始前キックオフ・引き継ぎ

とても広大に対応させていただき、かつ、MVPにより１ヶ月で納品させて頂きました。今後も追加機能リリースは続きますが、MAGi Consulting合同会社として最もお力になれる、とても楽しい機会をご一緒させて頂きました。

技術的メモ

さて、上述のプロセスのうち、技術メモ的に構築内容を残しておきたいと思います。

基盤的なシステムとして以下を採用しました。

• CMS：Wordpress
• オンラインコマース：WooCommerce
• デザインテンプレート：Flatsome
• クレジットカード決済：Square

上記を中項目にブレークダウンしてみたいと思います。

以下の項目になります。

事前準備

• ドメイン取得
• レンタルサーバー本契約化
• メールアドレス作成
• php.ini設定
• データベース（MySQL）作成

CMS：Wordpress

• WordPressインストール
• Basic認証設定（リリース前のみ）
• Google Console / Analytics / reCaptcha設定
• プライバシーポリシー作成
• 特定商取引法表示作成
• 利用規約作成
• 404ページ作成
• メンテンナンス画面
• SSL設定
• 表示ドメイン（wwwあり / なし）統一
• プラグインインストール
• プラグイン翻訳・文言変更（「wp-content/plugins」にあるそれぞれのプラグインフォルダ内の言語ファイルを翻訳し、「wp-content/languages/plugin」へ配置）

オンラインコマース：WooCommerce

• インストール
• 日本語翻訳修正（「wp-content/plugins」以下のWooCommerce関連フォルダにあるPHPファイルを編集、Flatsome子テーマフォルダである「wp-content/themes/flatsome-child」以下に同名フォルダを作成、保存）
• 日本語化ファイル修正（woocommerce-plugin-framework-ja.mo と woocommerce-plugin-framework-ja.po）
• 送料テーブル・ロジック設定
• クーポン設定
• 注文にかかわるメールデザイン・追跡番号表示
• マイページ設定・追跡番号や請求書表示、注文履歴等

デザインテンプレート：Flatsome

• インストール
• WooCommerceとの競合解消
• ハードコードPHPファイル変更（翻訳変更含む）
• Instagram連携

WooCommerceとの競合解消

例えば、指定したいページを「/shop」として、固定ページとして作成・カスタマイズしたとします。

ショップのトップページ設定で「/shop」 を設定すると、Flatsomeのショップトップページ設定でのデザイン（カテゴリ・商品・両方等の設定）にオーバーライドされて表示できなくなってしまいます。

解決策

• 例のように「/shop」をショップのトップページにしたい場合、「/dummy-shop」のような固定ページを作成し、Wordpress / Flatsome / WooCommerceでののショップトップページ設定したのち、ゴミ箱に移動して保管する（「/dummy-shop」をショップトップページ設定にしたまま、ゴミ箱に配置することで、設定を残したままアクセスできない状態にすることができます。（ショップトップページ設定ではなく、サイト内でリンクし、表示させる設計にする必要があります。）
• 上述の設定により、必要に応じて各プラグインのショップのトップページが引数やプレースホルダーで設定されている場合、手動で書き換える必要が出てきます。

日本語や翻訳変更が、相当量

細かい言い回しが、アメリカンすぎるんですよね・・・。

クレジットカード決済：Square

• サンドボックスでのテスト
• クレジットカード決済で出現する各ページデザイン修正

とまぁ、たくさんあります・・・。

FlatsomeとWooCommerceを利用した感想

Flatsomeは、WooCommerceでのデザインテンプレートとして世界中で最も利用されているそうです。私にはメリットが多いデザインテンプレートでした。例えば以下のような点です。

良い点：理由

• デザインが秀逸
• デザインのみならず、エレメント、ウィジェットのテンプレートが多い
• コスパ最強

ですが、日本語でご利用したい方はそれなりの覚悟が必要です。理由としては・・・

日本語での利用をおすすめしない理由

• サポートは有料、無料ユーザーサポートコミュニティは英語（参加申請したが私はまだ承認されていません）
• PHPが読めないと直しようがない
• 英語がわからないと、同梱されているヘルプや文書（からリンクされているYouTubeの説明動画）がわからない
• 日本語サポート文書はほとんど存在しない
• WooCommerceとの相性で問題点もある（どちらかというとWooCommerceの問題）

ですが、一度感覚を掴んでしまうと、非常に使いやすいと思います。

さいごに

宮古島セレクトショップ WEATHER PERMITTING OKINAWA さまのおかげで、MAGi Consulting合同会社として最もお力になれる、とても楽しい機会をご一緒させて頂きました。今後も追加機能リリースは続きますが、ぜひご注目ください。

また、WooCommerce + Flatsomeで構築したご参考になるかと思います。

ご相談はぜひとも、MAGi Consulting合同会社 までいただければ幸甚です。