株式会社fiika(フィーカ)|ウェブ制作・情報設計・システム開発・ウェブコンサル

１０月１４日自社ホームページのリニューアルを行いました。 
会社設立時から合わせて３度目の改定です。 
サイトリニューアルを検討している方の参考になれば幸いです。
初回と、２回目のホームページは、WEBFLOWというノーコードサービス（HTMLコーディングをせずにホームページが作れるサービス）を利用していました。理由は、どのようなお客様におすすめ出来て、どのような事から対応が難しくなるかを判断するためでした。 
実際に半年近く運用してみて、これができればいいのに！など、不自由を感じる事も増えてきたためMODxに変更することに決めました。 
ノーコードでできないことは、また機会があったら記事にします。
今回のリニューアルでは、 
MODxというCMS（コンテンツマネジメントシステム）と、 
NewtというヘッドレスCMSを使ってブログ機能を追加しています。
<h2>なぜ、MODxを選んだのか？</h2>
MODxというCMSは、日本ではあまり馴染のないCMSかもしれません。 
しかし、隠れた名作CMSだと感じています。 
私はもう、14、15年くらいの付き合いになるCMSです。
■MODx 
https://modx.jp/
MODxの良さは、キャッシュ機能が優秀で、表示速度が速く、複数のプログラムを同時に同一ページで走らせても問題なく動作する点につきます。 
が！一番の魅力は、官公庁のウェブサイトにも導入される実績と、WordPressのようにメジャーではないため、悪意のある第三者から攻撃を受けにくいという点につきます。 
また、WordPressは、複数の機能を追加した際に、各機能がぶつかり合ってしまい機能不全を起こすことが多いため、安易にモジュールの追加できず、相性のチェックをしなければいけないという問題が起きないことにあります。 
旧サイトで使用しているPHPなどのプログラムをできるだけ使いながら、サイトのリニューアルを行いたい場合、置き換え候補になるCMSです。過去に前述の理由で、採用媒体や大規模サイト、官公庁のウェブサイトで採用されています。
MODxには、エボリューションと、レボリューションというパッケージが存在しますが、うちで今回選んだのは、「エボリューション」です。
<h2>なぜ、Newtを追加したのか？</h2>
手軽に記事更新を行うために、ブログ機能を追加したいと考えていましたが、MODxはブログ機能がほぼ皆無で、MODx用にブログをつくるよりも、別のブログシステムを追加することを検討していました。 
そんな折、「ヘッドレスＣＭＳを試してみたい」と言われたことをきっかけに、Newtが候補に上がって来ました。
ヘッドレスＣＭＳとは、、、説明が難しくなるので是非ググってみて下さい。
Newtの特徴として、PCでもスマホでも非常にコンテンツの表示が早いことがあげられます。 
ブログシステムは、ユーザーからのアクセスのたびに、表示させる情報（HTMLや画像など）を毎回動的に生成して吐き出すため、比較的表示に時間がかかるものも多いのですが、このNewt！爆速です！！！ 
ローディングの時、くるくる回るアイコンをあまり見る事がなく快適です！
<h2>これから使ってみて、使い勝手や効果をチェック！</h2>
現状MODxについては、不満は全くありません。 
Nwetに関しても、特段困る事はありませんが、スマホからブログを更新する際にPC用の画面が表示されるため、スマホから編集する機能をもう少し高めてもらえるとさらにありがたいと感じているくらい。
今回の組み合わせが使えるようなら、お客様にもご提案していき 
効果を上げていただけるように、ノウハウをためてお伝えしていこうと思っています。
まずは、ヘッドレスCMS「Newt」を使い倒してみたいと思います。

ウェブ制作会社が自社サイトのリニューアルで選んだブログとCMS

今回ネットショップを構築させていただいたのは、純銀のワイヤーや金属線を編み込んでアクセサリーの制作を行われている作家の「木曽 淑枝（きそ としえ）」様のサイトになります。
これまでにテレビ出演や、カルチャースクールで教鞭をとられ数百人のお弟子さんを持つアクセサリー作家さんです。 
日本ではじめて「純銀クロッシェ」という技法を確立され、商標権もお持ちの先生ですが、ネット販売は行っておらずデパートの催事や展覧会で作品を披露し販売されてきました。 
木曽先生の作風は、海外でも需要が見込めそうなため、Shopifyを使って販売することをご提案いたしました。
<h2>外国人に発信・販売</h2>
国内販売については、販路の確立をされていたことから、海外展開と周知を目的に本サイトの構築を行いました。 
そのため、基本的にサイト内の文章は全て英語表記を取っています。国内外の外国人の方々を対象に、パーティや社交界、ショー、イベント、結婚式などで身に付けていただきやすい作品をメインに取り扱いをしていく予定で商品ラインアップを決定しています。
市場としては、主に英語圏と東南アジア各国を見ており、シンガポール、台湾、香港、中国、アメリカ、韓国などが対象国となっています。公開初期は、配送を日本国内に限定することで配送リスクを減らし、日本国内にお住いの外国人や仲介者に販売することからスタートする予定です。 
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/5a88716a-b256-4f59-8878-0bb5dda0f38c%2Fimg-blog-toshiekiso02.png" alt="img-blog-toshiekiso02.png">
<h2>SNS運用では自然な表情や日常生活に触れる撮影をする</h2>
SNSｎ運用も含めご契約予定の為、運用方法についても詳細なお打ち合わせを行ってきました。 
先生の作品は、植物や自然の造形美、曲線を活かしたものが多く、日常生活で触れる素材からインスピレーションを得ているため、普段から作品に活かせる素材はないかと探している先生の感性を多くの方に感じてもらうことを目的としています。 
素材探しのスナップショットや、海や川、はたまた蚤の市などで覗かせる先生の表情を切り取り作品の世界観を感じさせる戦略を取ることで、作品が生まれる裏側をSNSで発信しより作風の理解をしていただくことを目標にしています。
<h2>純銀クロッシェが生まれる経緯をヒアリングして しっかり原稿をウェブコピーライティング</h2>
植物や自然の造形美、曲線を活かした作品の数々は、日常生活で触れる素材からインスピレーションを得ているため、普段から、作品に活かせる素材はないかと探している先生の感性を多くの方に感じてもらうことを目的としています。 
素材探しのスナップショットや、海や川、はたまた蚤の市などで覗かせる、先生の表情を切り取り、作品の世界観を感じさせる戦略を取ることで、作品が生まれる裏側をSNSで発信し、より作風の理解をsh手いただくことを目標にしています。 
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/ffddaa0d-b490-45db-950a-465fbf588bef%2Fimg-blog-toshiekiso03.png" alt="img-blog-toshiekiso03.png">
<h2>高解像度の写真の撮影を行い、作品のディテールを余すところなく魅せる！</h2>
商品の物撮り撮影も当社でも行い、作品の緻密な編み込みや繊細な曲線、光と影が織りなす複雑な色合いの変化を楽しんでいただくため、高解像度の写真をあえてショップに掲載しています。 
すべてが一点ものの作品の為、カタログや作品集としてもご利用いただけるクオリティで写真撮影を行っています。
ご購入いただくまでに時間を要するアクセサリーをぜひじっくりご覧いただきユーザーにご満足いただけるサイト作りを目指しています。
<h2>レベニューシェア契約や、構築のみのご相談も承っています。</h2>
ネットショップをすでにお持ちの方や、集客がうまくいかず伸び悩んでいらっしゃる場合はぜひご相談ください。 
もしかしたら、潜在顧客や見込み顧客は別のキーワードで検索していたり、まったく別の切り口で需要を持っているかもしれません。 
ターゲットの洗い出しやペルソナの想定、検索キーワードや、読み物コンテンツの制作など、幅広い確度でお手伝いが可能です。 
ショップの構築のみでも承っています。 
また、レベニューシェアリングによる運用支援も行っています。 
詳細は、お問い合わせいただければ幸いです。

Toshie Kiso様 Shopifyを使った純銀線アクセサリー販売ネットショップ構築

インターペット2022でご利用になられるブースのコーディネートと、商品紹介動画の作成をさせていただきました。 
実際に設計・デザインさせていただいた展示会ブース内のパネルや、ブース内への誘導パネルと商品紹介動画がキービジュアルの画像です。
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/38b02860-eeac-4281-86df-0e09518bb7c1%2Fimg-blog-cure-01.png" alt="img-blog-cure-01.png">動画内の商品紹介部　商品の特徴と対象ペットに対しての配慮を記載
<h2>展示会で、継続販売事業者を見つけるためのブース設計</h2>
<ul>
<li>商品紹介動画作成</li>
<li>展示パネルデザイン（キャッチコピー　コピーライティング）</li>
<li>展示ブース導線設計</li>
<li>ターゲット層洗い出し　ペルソナの整理</li>
</ul>
今回お手伝いさせていただいたお客様は、自社プロダクトとして犬・猫やペット用に天然・無農薬・無添加素材で作られたスキンケアプロダクトを開発されている企業様です。 
キュア株式会社様は、2022年４月初旬に開催された、インターペットという展示会に出展されるという事で、動画制作のみのご依頼で当社にご相談をいただきました。 
ペットの肌や身体に負担をかけない商品を展開されており、まずは、BtoB販売で継続的なご利用をされる事業者様と繋がり、販売数を増価させる事を目標とされていました。 
そのため、潜在顧客・見込み顧客の洗い出しを行い、想定されるペルソナを検討。 
そのうえで、展示会場の通路からブース内への導線計画を行い、展示パネルのデザイン制作を行いました。建築設計を行っていた昔取った杵柄が非常に役立ちました。 
パネルデザインには、ウェブやネットショップ、実店舗のマーケティングで有用なキャッチコピーの設計ノウハウを活かし、商品動画のデザイン・コピーライティング全般を行っています。 
本件は、建築設計ノウハウや、ウェブコピーライティング、商品販売におけるマーケティング手法でお力添えさせていただけたウェブ制作にとどまらないプロジェクトとなりました。 
 
<h2>他社との差別化がしやすく、ユーザーの悩みを解決できる商品</h2>
天然無添加をうたっている商品は他社製品にも存在しましたが、防腐剤や化学薬品を使わないことに徹底的にこだわった製品は、他社がなかなか手を出せない領域という事もあり、非常に特徴的な商材です。化学薬品を不使用とすることで商品の消費期限が短くなることもいとわず、ペットの皮膚に対する負荷を如何に軽減させるかを追求された商品に驚きを隠せませんでした。 
一般的には、防腐剤などを使用して消費期限をできるだけ伸ばすなか、こちらの商品は、弱酸性シャンプー以外は、徹底的に天然・無添加・無農薬・化学物質不使用にこだわって作られたものでした。 
オーナーの動物たちに対する想いが、アレルギーや皮膚病、化学物質に対して反応しやすい体質のペットのために生み出された商品だという事が非常によくわかります。 
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/a013a531-2b26-40e4-9ff7-0b7b2784ab4c%2Fimg-blog-cua-04.png" alt="img-blog-cua-04.png">ペット用 天然無添加スキンケア商材「Laru/Laru」 
左からスキンケアクリーム、泡ハーブソープ、植物石鹸シャンプー、食用荏胡麻オイル、鹿肉ブロック 
 
<h2>コストを抑えつつ・ハイブランド感を演出</h2>
既存商品ラベルでご利用になっていたアートワークを活用し、ハイブランド感と訴求メッセージをどのように調和させるかを模型を制作しながら、何度もスクラップアンドビルドを重ね検討させていただきました。
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/36cdbd63-7bb4-4703-bbd9-2a7b610386f0%2Fimg-blog-cure-02.png" alt="img-blog-cure-02.png"> 
検討を重ね、何度も作り直した模型や、お客様とのミーティング時に行ったブレインストーミングの手書き資料
UX（ユーザーエクスペリエンス）ユーザー体験を、ペルソナ別に推測し、各ペルソナの中で最も訴求したい、事業者（トリマー、動物病院など）へのキャッチコピーを複数作り、模型上での確認を行いました。主に３エリアに分類し、ユーザーのブース内誘因設計を行いました。 
<ul>
<li>通路側導入部（最初の顧客接点で、天然・無添加スキンケア商材の取り扱いを訴求）</li>
<li>展示ブース壁面（商品の特徴や、商品への想いの訴求）</li>
<li>展示物前（各種商品別に、どのような効能と利用シーンがあるかを説明）</li>
</ul>
という形で、来場者の導引レベル別タッチポイントを設計しました。 
通路導入部では、クライアントの製品にどのような特徴があるのかを伝え 
展示ブース壁面は、通路からも可読できる文字サイズで、商品及び、だれのために作られたものかを訴求し 
展示物前では、各商品についてブレイクダウンした内容を掲示し、スタッフが補足説明をする流れを構築しました。 
動画は、スタッフが商品を薦める際に、実際の使い方を撮影していただき、画面を見ながら説明することを念頭に置いて制作しています。 
動画をループ再生し、スタッフが応対できない際も商品を手に取っていただけるように動画内で製品別の特長を記述して、商品への興味を引くような設計を施しました。 
上記施策をもっても、実際にターゲットにしている顧客層は、 
ペットの取り扱い時に、アレルギーや肌トラブルを持ったペットに関わっている方の為、 
健康な犬猫のみ対象としている方は中に入ってくることはないだろうという状態でターゲットのフィルタリングを意識しました。 
商品原価が比較的高いため、ご利用いただける対象者も多くなく、 
実際に肌トラブルを抱えたエンドユーザーや、事業者との接点を創出することを目的としたブースに仕上げました。 
継続的に事業者様へ販売し、継続的なキャッシュフロー獲得を意識したブース設計をご提案しました。 
 
<h2>能動的に検索している動物の皮膚トラブルに困っている方々へお届けしたい</h2>
キュア株式会社様の製品は、ユーザーの「困りごと」を解決してあげられるものであり、また、競合性が低いため、まさにネット販売向きの商材といえます。 
そのため、今後はネットショップのウェブコピーライティングに力を注ぎ、コンシューマーにアプローチを行うネット戦略を行っていく予定です。 
今すぐ需要が強いユーザーのみならず、見込み顧客、潜在顧客を発掘するために、オウンドメディアの立ち上げを行い、記事コンテンツできちんと製品の知識を得ていただき、理解が深まったユーザーもしくは、問題解決を望むユーザーから購入していただける仕組みづくりを行っていく予定です。 
弊社では、お客様の商材の潜在顧客発掘や、オウンドメディアづくりをお手伝いし、ウェブコピーライティングや、ウェブマーケティングの効果を実感いただけるお手伝いを行っています。 
同様のお悩みをお持ちの方は、お気軽にお問い合わせいただければ幸いです。

#制作実績

ウェブ制作会社が自社サイトのリニューアルで選んだブログとCMS

Toshie Kiso様 Shopifyを使った純銀線アクセサリー販売ネットショップ構築

キュア株式会社様　獣医・トリマー事業者向け　ペット用天然無添加スキンケア用品の展示会ブース設計、商品紹介動画作成、コピーライティング

#制作実績

ウェブ制作会社が自社サイトのリニューアルで選んだブログとCMS

Toshie Kiso様 Shopifyを使った純銀線アクセサリー販売ネットショップ構築

キュア株式会社様 獣医・トリマー事業者向け ペット用 天然無添加スキンケア用品の展示会ブース設計、商品紹介動画作成、コピーライティング

キュア株式会社様　獣医・トリマー事業者向け　ペット用天然無添加スキンケア用品の展示会ブース設計、商品紹介動画作成、コピーライティング