カテゴリー: ホームページ作成

ホームページにカートボタンを置こう!

WordPressで作成されたホームページであれば、「WooCommerce」や「Welcart」のプラグインを使うことでホームページ自体をショップ化することは比較的容易ですが、決済システムの導入やセキュリティ管理など考え始めるとなかなか難しい点もあります。

そこで、先の記事で書いたYahooショップを用意して、そのカートをホームページやブログに置いてショップ化することと頻繁に商品内容が変わらないのであれば、運用はYahooショップに絞れますので簡単になります。

ただ、これには欠点があり、複数種類の商品を1つのカートに入れるような購入方法が難しくなります。(できるのかもしれませんが、現時点(2020年2月)のYahooカートに「お買い物を続ける」ボタンがないので、購入元に戻れません。)

STORESのストアボタンだとこれができてしまいます。その代わりにカートに入れる前に熨斗の設定など購入オプションはつけられません。個数はカートページで、熨斗などオプションは備考で記載して頂く形になります。

STORESを始める

STORESから必要事項を登録していくことで簡単に作成することができます。

登録は簡単ですが、注意しないとあとで後悔することがあります。

特に独自ドメインを設定される方は、気をつけないといけません。

(なんで、こんな大事なこと、FAQを読まないと書いてないんだ!と思ってしまいましたが)

独自ドメインを設定してもカートのドメインは、元々の「https://?????.store.jp」となります。

そして、独自ドメインを申請後はこの「https://?????.store.jp」を変更することはできません。

なので、

独自ドメインを設定する場合でも「https://?????.store.jp」でお客さんが見てもおかしくない設定を事前にしておきましょう。

クレジット決済の審査は、指示される手順通りに進めてショップの基本設定が入力できた時点で審査が始まります。特に別途提出書類はありません。審査には通過したのがわかるのが2W程度、実際に使えるようになるのが1M程度となるようです。AmazonPayの申請は、3日程度で完了するようです。

ストアボタン機能を使い、カートボタンを貼り付ける

ショップがオープンできたら、いよいよストアボタンを作成設置します。

ストアボタンの作成は、STORESのストア設定(管理ページトップの右上のショップ名の所をクリックしたメニューにあります。)を開くと

「ストアボタンを設置」の設置をクリックすると、設定画面となります。

大きさ、デザインなど必要に応じて設定して、作成したい商品を選択して、ストアボタン(Javascript)を作成します。

作成できたストアボタンを設置したい場所に貼り付けて完了となります。

 

赤の元気 トマトケチャップ 180g赤の元気のケチャップの購入はこちら↓

 

こんな感じ….本当に購入できます。

このケチャップは、有名メーカ品に比べお高いですが、リピータも多く、たくさんの方に価値ある商品と認めて頂いています。

Yahooショップカートを外部に貼り付けてみました

ここから


食塩無添加 濃厚 トマトジュース 赤の元気 夏獲れ秋獲れ 180ml 各6本

3,720円

のし:

ここまで

ソースコードは、

<style type="text/css">
.item_pic {
width:70%;
max-width:300px;
}
.item_name {
font-size:large;
}
.item_price{
font-size:large;
}
.item_opt {
padding-bottom:5pt;
}
.opt_name {
white-space: nowrap;
}
</style>
</p>
<table class="cart" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="item_name">食塩無添加 濃厚 トマトジュース 赤の元気 夏獲れ秋獲れ 180ml 各6本</td>
</tr>
<tr>
<td>
<p><img class="item_pic" src="https://item-shopping.c.yimg.jp/i/l/hyakujyu_218253156-2" /></p>
<p class="item_price">3,720円</p>
</td>
</tr>
<tr>
<td>
<form accept-charset="EUC-JP" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form" method="post" name="addCart"><span class="hidden"> <input name="vwcatalog" type="hidden" value="hyakujyu" /> <input name="vwitem" type="hidden" value="218253156-2" /> <input name="のし" type="hidden" value="なし" /> <input name="vwquantity" type="hidden" value="1" /> <input name=".autodone" type="hidden" value="https://www.himeport.co.jp" /> </span>
<div class="item_opt"><span class="opt_name">のし:<select name="のし" data-cart-option-select="">
<option selected="selected" value="なし" data-calcoptionprice-priceoption="0">なし</option>
<option value="内祝" data-calcoptionprice-priceoption="0">内祝</option>
<option value="御祝" data-calcoptionprice-priceoption="0">御祝</option>
<option value="お歳暮" data-calcoptionprice-priceoption="0">お歳暮</option>
<option value="寒中御見舞い" data-calcoptionprice-priceoption="0">寒中御見舞い</option>
<option value="御年賀" data-calcoptionprice-priceoption="0">御年賀</option>
<option value="お中元" data-calcoptionprice-priceoption="0">お中元</option>
<option value="暑中御見舞い" data-calcoptionprice-priceoption="0">暑中御見舞い</option>
<option value="残暑御見舞い" data-calcoptionprice-priceoption="0">残暑御見舞い</option>
<option value="御見舞" data-calcoptionprice-priceoption="0">御見舞</option>
<option value="(無地)" data-calcoptionprice-priceoption="0">(無地)</option>
</select></span></div>
<div class="pt1"><input alt="カートに入れる" src="/wp-content/uploads/2020/02/e_company_523.png" type="image" /></div>
</form>
</td>
</tr>
</tbody>
</table>

同じようなことを他のページでも紹介されているのですが、日本語オプションがあったりするとうまく動かなかったりします。

その原因は文字コード!!

カートを貼り付けるポイントだけ書くと

<form name="addCart" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form" accept-charset="EUC-JP">
<input name="vwcatalog" type="hidden" value="サイト名(ショップurlの最後)">
<input name="vwitem" type="hidden" value="商品コード">
<input name="のし" type="hidden" value="なし" >
<input name="vwquantity" type="hidden" value="数量">
<input name=".autodone" type="hidden" value="戻り先URL">
<input type="image" src="カートボタン画像" alt="カートに入れる" border="0">
</form>

 

これを飾り付けしたり、数量やオプションを変更できるようにします。

多少の手間はかかりますが、yahooショップをお持ちであれば、ホームページに立派な無料カートが掲載できます。

 

※ 掲載時に「このカートはYahooショップカートを使用しています」とかの記載があったほうが良いかもしれません。

 

ホームページやネットショップに載せるバナーや商品画像を作成

バナーや商品画像を作成したり、修正する場合、外注に出すと最低限5,000円(+消費税)程度は、必要になってしまいます。

バナーや商品画像をアドビ イラストレーターなどで作成されていると、ほぼイラストレータでしか編集できないので、ソフトウェア自体の使用費が発生する上に操作も独特で、デザイナーなどには使いやすいと言われているようですが、私個人としては、ん〜難しい!直感的でない!結局テキスト読んで勉強しないと使えない.....その上、毎月費用が発生する。

以前にも紹介したが、漫画作成でプロも使っているCLIP STUDIO PAINT PRO が、操作が直感的でマニュアルはどうしても困った時に見る程度で、機能もイラストを扱う上では十分な機能がある上にProはなんと5,000円で購入できてしまいます。CLIP STUDIO PAINT EX だとアニメーションも作成できるので、動くPOPなどもできてしまいます。

CLIP STUDIO PAINTでバナー作成

バナーのサイズを決めておけば、その上に画像レイヤーやテキストレイヤーを重ねていく感じで、背景が透過の素材を集めておけば、レイヤーの順番を変えたり、表示/非表示を切り替えることで、一度作成したバナーがいろいろなバナーに簡単に変更できます。

商品画像などは、一律の形式で作るようにしていれば、上記と同様な手順で複数の商品画像を1個のCLIPファイルにまとめて管理できます。

と、大変便利に使っているのですが、パソコンのメイン環境がほぼ完全にLinux環境に以降してしまったので、今後のどうするかを検討していました。

CLIP STUDIO PAINTがLinux上で動作すれば良いのですが、残念ながら私のwine環境ではインストールの途中で失敗してしまいました。

やむなく、Oracle Virtual BoxにWindows10をインストールして使用しています。

が、

Linuxのネイティブアプリでは、代替えできるほど使いやすいプログラムは見つけられていませんが、Linuxにインストールできてほぼ実用の範囲で使いやすいプログラムを見つけてしまいました。

Windows10でもCLIP STUDIO PAINTのライバル的扱いとなっている無料で利用できるソフトウェアです。

LinuxにインストールしたMediBang Paint Pro

ジャンプPAINTで最近注目されているようですが、MediBang Paint Pro

は、CLIP STUDIO PAINTと(ブラシの種類など機能不足もあるらしいですが、私の用途では問題ない)同様にプロの使用にも耐えうる高機能で、操作性も直感的で使いやすいです。

なにより、wineで問題なく動作しています。但し、マルチディスプレイ環境だとコマンドウインドウが別画面に表示されることもありますが、許容範囲かと思います。

そうそう、これ無料なんですよね。

無料で使ってもらって素晴らしいイラストや漫画を投稿して下さいというコンセプト

ん、漫画もかけるようになりたいので、暇を作って、投稿できるようになれればなぁ.

..と少々中二病的な爺でした。

 

ぜひ、バナー作りや商品画像作りに挑戦してみて下さい。

もちろん、弊社に作成依頼していただいても、喜んで対応させて頂きます。

お気軽にご依頼ください。

ご要望によっては勉強会的なものも対応させて頂きます。

(試し体験しながら、体で覚え頭で覚えない、頭で考える人なので、講師と一緒に実際に触って頂きながらいろいろなこと体験学習し、困ったときの解決の糸口の見つけ方を学んで、一人で試しながら使えるようになることが目標となります。時間はかかるかもしれませんが、講師の知らないことも自分の必要性に応じて自力で学べるようになって頂ければと思います。….ん〜、さらに仕事が減っちゃう_(汗))

Windows10で使うなら、これ1択

Googleが提供している「reCAPTCHA」がV3に

botをガードしてくれるありがたいサービスですが、最近V3にUpgrade

ユーザーはreCAPTCHAを意識しないで使えるようになりましたが、Web運用者は注意が必要になるようです。

使用の関連アプリ/プラグインもV3に対応するとreCAPTCHA v2のままだと、お問合せなどがすべてスパム判定される可能性があります。

実は恥ずかしながら、お客様から問い合わせが届かないとのご連絡を頂き、判明しました。

WordoressだとContact7をほぼ確実というくらい使用されていると思いますが、まさにこの状況が発生します。

まぁ、Contact7のバージョンアップ後、reCAPTCHAが無効になり再設定が必要になりますが、この時に必ずv3のキーにしないといけません。

 

メールを登録すると、レジストリURLを配信するようなサイトをいくつか確認してみましたが、メールが届かない(もちろんspamになっていないのは確認)ところがありました。似たような問題が発生しているのかもしれません。

あなたのホームページは大丈夫ですか?

自家製Wordpressテーマ「pureframe」最低限は完成?

面倒なところはプラグイン頼りだけど、テーマ本体は軽量高速なpureframe

このサイトは格安レンタルサーバーで運用していますが、pureframeを使用することで、PageSpeed Insightsの値は90以上は普通に出ます。

フレームワークにPure.cssを使用して、テーマ本体は、必要最小限の機能だけ組み込んで、一切JavaScriptを使用しないことで高速化しています。

その為、navが貧弱だったりします。

上記のnavやデザインについては、cssを調整することで多くの場合に対応はできるとは思います。

「pureframe」の今後の展開

弊社サポートの顧客向けの利用を1つの目的に開発してきましたが、熟成には時間が必要ですし、対応する時間がなかなか取れなくなっているので、当面は社内利用に留めることになります。

もう1つの目的であったWordpressの理解度を深めることは出来たと思っています。本テーマ開発の経験で、公式公開されているテーマやフリー公開のテーマの利用もより突っ込んで出来るようになりました。

自家製Wordpressテーマ「pureframe」のダウンロード

ダウンロードされる前に以下の事項を見てください。ご了解頂けない場合は、ダウンロードしないでください。

「pureframe」のご利用で生じた如何なる事に対して、弊社は一切の責任を持ちません。

ご利用はあくまでも自己責任でお願いいたします。

また、ご質問・問題を提示頂いても、基本的には対応しません。

以上を理解&ご了解頂いた上で、試されたい方は、こちら⇒ WordPressテーマ「pureframe」

ご利用にあたり、以下の本サイト用の設定をしていますので、必要に応じてfunctions.phpの修正してください。

  • デフォルトのgoogle-fontを取り除くようにしてあります。
  • カスタム投稿タイプ”ブログ/private_blog”が初期設定されている。
  • Widgetにも”ブログ/private_blog”が初期設定されている。
  • Contact Form 7 を /contactだけで読み込むようにしています。
  • FontAwesome(Version 4.4.0 2016)が組込まれます。

 

 


ホームページ作成・運用 |ネットショップ作成・運用については、以下よりお願いいたします。

お気軽にお問合せ下さい
(ご要望の内容如何で、愛媛県以外の事業者様も対応させて頂きます。)

 

ホームページやネットショップで期間限定キャンペーンを表示したい

表示させること自体は、通常のバナー表示と変わりませんので簡単ですが、そこは期間限定バナー

期間を設定して表示したいと思います。

サンプルソースはたくさん転がっていて、楽天市場向けなどは多く公開されています。

WordPressのページで期間限定ナバーを表示

別に楽天市場やYahooショップでの方法と変わりありませんが、制約が少ない分より簡単に表示できます。

ここでは、ウィジェットに簡単コピペできるように、JavaScriptもStyleもhtmlも一緒にしちゃっています。

<script type=”text/javascript”><!–
// イベントの開始、終了設定
var startday = new Date(‘2018/08/10 13:39:00’);
var endday = new Date(‘2018/08/10 13:40:00’);

window.onload = function(){
var today = new Date();
if ( startday < today && today < endday ){
document.getElementById(“pic”).style.display=”block”;
}else{
document.getElementById(“pic”).style.display=”none”;
}
};
// –></script>
<!– ======期間限定キャンペーンバナー======= –>
<style type=”text/css”>
div.limitedBanner{
display:none;
text-align: center;
max-width: 616px;
width: 95%;
padding-bottom:10px;
}
</style>
<div class=”limitedBanner” id=”pic” >
<a href=”クリックしたときのとび先URL” target=”_blank”><img alt=”期間限定キャンペーンバナー” src=”バナー画像のURL” ></a>
</div>

貼り付けたい場所にウィジェットがある場合は、「カスタムHTML」に上記を記述すればOK

但し、SiteGuardのプラグインを有効としている場合、保存に失敗するかもしれません。

その場合は、WordPressのカスタムHTMLやカスタムCSSが保存できない場合の対処

を参考に対処しましょう。

Metro Magazineのカスタマイズ

Metro Magazineについて

一応、日本語も対応(独自部分は日本語にはなりません)のNewsやMagazine形式のテーマとなります。

写真を使ったプロダクトの紹介などにも適したテーマとなっていて、proバージョンを購入して機能アップもできます。

テーマのReadmeより

Metro Magazineは、インタラクティブな WordPress スタイルのウェブマガジンで、ニュース、新聞、雑誌、スポーツ、テクノロジー、グルメ、トラベル、ブログ、出版、ビジネス、その他様々な分野に適したテーマです。このテーマは、カスタマイザー(Customizer)上に構築されており、瞬時にプレビューを確認しながら、あなたのウェブサイトをカスタマイズできます。Metro Magazineには、カラースキームやカテゴリー毎に色を変える機能も含まれており、 クリック一つであなたのウェブサイトの色合いを変えることができます。このテーマでは、検索エンジン最適化(SEO)機能を使用しているため、Googleのランキングで上位にランク付けされやすいのも特徴です。他には、ソーシャルメディアとの統合、カスタム・ウィジェット、著者のプロフィール、ブレッドクラム、広告設定、カスタムCSS、トランスレーション・レディなど様々な機能があります。

ここでは、公式テーマで配布されている「License: GPLv2 or later」のものをカスタマイズして使用する一例を記載します。

子テーマの作成

子テーマの作成方法は、いろいろな方が丁寧に説明されているので、詳細は省略します。

functions.phpとstyle.cssを含む子テーマを作成します。

WordPressのインストールされた環境で、/wp-content/themesの下に子テーマのフォルダーを作成して、functions.phpとstyle.cssを置きます。

style.cssには最低以下の記載をします。

/*
Theme Name: 適当なアルファベットの名前
Template: metro-magazine
Description:
Author: 
Tags:
Version: 
*/

functions.phpには、とりあえず、以下の記載をします。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}

カスタマイズ準備が出来ましたので、いよいよカスタマイズ開始です。

子テーマを有効にして「外観ー>カスタマイズ」

子テーマの内容が正しい前提で、プレビュー表示ができれば、OKですが、ひょっとすると「リダイレクトの繰り返し……」とかでプレビュー表示に失敗するかもしれません。その場合は、functions.phpの最初に(<?phpの次の行)以下を追記します。

// リダイレクト繰り返し対策 おまじない
remove_action('template_redirect', 'redirect_canonical');

真の対策をする場合は、もっと深く調べてみる必要がありますが、とりあえずはこれでOK

カスタマイズのヒント

カスタマイズ画面の「プロバージョンの案内」は日本語の場合はみ出して見栄えも悪いので削除、footerのCopyrightのPowerd表示も削除しました。

カスタマイズ内容をズバリ書きにくい部分なので、ヒントだけ記載します。

手順としては、子テーマのfunctions.phpで、設定をしている部分の「add_action()」を「remove_action()」して、必要に応じて新たに異なるfunction名で再定義します。

ちなみに「プロバージョンの案内」は、

add_action( ‘customize_register’, ‘metro_magazine_sections_pro’ );

「Copyright」は、

add_action( ‘metro_magazine_footer’, ‘metro_magazine_footer_credit’, 40 );

子テーマを作成できる方なら、これだけのヒントで対応できると思います。

スライドショーの追加

スライドショーは、Wegit対応で使いやすいプラグイン「MetaSlider」を利用します。

直接、表示したい場所にスライドショーを組み込む方法もありますが、ここでは折角の子テーマですし、「Metro Magazine」はあらかじめhookが何か所か設置されていますので、サイドバーを作成して、ウィジェットでいろいろな使い道ができるようにします。

functions.phpに以下を追加します。関数名やサイドバー名は適当に変えられますが、function名には「_」は使えますが、「-」は使えませんので注意が必要です。(まぁ、エラーとなるので見逃しはないと思いますが…..)

function metro_child_widgets_init() {
register_sidebar( array(
'name' => __( 'トップスライドショー' , 'metro-child' ),
'id' => 'front-slide-widget',
'before_widget' => '<div id="%1$s" class="container">',
'after_widget' => '</div>',
'before_title' => '<aside>',
'after_title' => '</aside>',
) );
}
add_action('widgets_init','metro_child_widgets_init');
function metro_child_slider(){
if ( is_active_sidebar( 'front-slide-widget' ) ) : ?>
<div class="content-top">
<?php dynamic_sidebar( 'front-slide-widget' ); ?>
</div>
<?php endif;
}
add_action( 'metro_magazine_header', 'metro_child_slider', 51 );

これでウィジェットにトップスライドショーというサイドバーができます。

最後のadd_action( ‘metro_magazine_header’, ‘metro_child_slider’, 51 );の部分を表示させたい場所のhookに変更してください。

ちなみにhookは、親テーマの

/inc/template-hooks.php

などを見るとわかります。

TOPページのカテゴリー4の画像を変更

カテゴリー4の表示をしている部分をリムーブして、アドするのが綺麗と思いますが、ここではあまり変更しない前提で、子テーマにimageを置くようにします。

この部分は、CSSでバックグランド画像として表示させているので、子テーマのstyle.cssに以下を追記します。

.section-four .img-holder{
float: left;
width: 55%;
min-width: 400px ;
height: 885px;
background: url(images/A002.jpg) no-repeat center;
background-size: cover;
position: relative;
}

子テーマのフォルダーにimagesフォルダーを作成して、表示させたい画像を置きます。

表示サイズや、表示のさせ方は、必要に応じて変更します。

 

とりあえず、第1弾のカスタマイズはここまで

 

 

 

弊社が良く利用する写真・イラストの掲載サイトをご紹介

弊社が良く利用する写真・イラストの掲載サイトをご紹介します。
一部使えない用途などもありますので、各サイトの利用規約を確認してご利用ください。

誤って使用することは少ないとは思いますが、いずれのサイトもスポンサー画像・広告を含む場合がありますので、注意しましょう。

※ このページのリンク先は保護されていないページも含まれます。

写真・素材 類

写真素材 足成
http://www.ashinari.com/

様々なジャンルの写真が探しやすいように分類されて掲載されています。


ぱくたそ
https://www.pakutaso.com/

足成と同様に様々なジャンルの写真が探しやすいように分類されて掲載されています。

BEIZ Graphics
https://www.beiz.jp/

掲載ジャンルは少ないですが、背景に使用しやすい様なベタな素材が多くあります。


Natural Material
https://natural-material.com/

そのまま使える写真もありますが、加工素材として利用するのに適した写真が多くあります。


.foto project ※利用規約に注意が必要
https://free.foto.ne.jp/

使用条件に注意が必要ですが、様々な写真があります。

Pixabay
https://pixabay.com/

世界中の様々な写真、イラストがあります。
Wordpressで利用する場合は、プラグインを使用することで簡単に記事に差し込めます。

イラスト・素材 類

いらすとや
http://www.irasutoya.com/

可愛いイラストが沢山あります。


無料素材倶楽部
http://sozai.7gates.net/

主にアイコンなどの素材となりますが、イラストもあります。

音楽・BGM など

こちらは画像ではなく音楽ですが
Music-Note
http://www.music-note.jp/

BGMやアクションの擬音に使えそうなものとか多数の音楽が掲載されています。使用時に引用元の記載が必要となります。

ボタン・イベント などショップ素材

E.Commerce予備校
http://ec-yobiko.com/

EC design(デザイン)
http://design-ec.com/

無料素材倶楽部
http://sozai.7gates.net/

福岡発の純国産CMS『OneThird CMS』とは

baserCMSと同じ福岡発の純国産CMSで、baserCMSがフレームワークにcakePHPを使用しているのに対して、すべてオリジナル設計で、無駄な部分がなく、高速動作、超軽量を謳っています。

まだ、マニュアル類が整備されていない事がネックで、サードパーティーのテーマやプラグインも現時点では公開されていないようですが、指摘されていたセキュリティー問題も対策されたようですし、今後、コニュニティなどができて永続開発される体制ができれば化けるかもしれません。

プロ向けのようで、難しいのかもしれませんが…..

ドキュメントに記載を見つけられませんでしたが、OSDN(SourceForge)を見る限り、GNU General Public License v2 (GPLv2)のようです。ここら辺もソースなりドキュメント内で明示されていると安心できるのですが、ソース内にGPLの規約の添付も宣言も見当たらないし、OSDN(SourceForge)も紹介だけで実際のパッケージは公開されていないなど、業務で本格的に使用するには、少々厳しいのが現状かと感じています。

OneThird CMS のローカル環境を構築

OneThird CMSは、SQLiteにも対応で安価なレンタルサーバーでも運用可能なのも売りですが、ここでは、お試しということで、簡単にWordpress環境を構築できるLocal by Flywheelを使って、超簡単にMySQLを使った環境を構築します。

  1. Local by Flywheelをインストール、インストール済みなら次へ
  2. Local by Flywheelを起動して、Local Siteを追加
  3. 追加したSiteのフォルダ(/app/public/)のWordpressのファイルをすべて削除
  4. OneThird CMSのOnline Installerをダウンロードし、解凍したファイルを上記フォルダにおく
  5. Local by FlywheelでLocal SiteのVIEW SITEをクリック
  6. 表示されたセットアップ画面に従って、セットアップ
  7. セットアップにあたり、database情報は、Local by FlywheelのLocal SiteのDATABASEのタブを参照
  8. Admin/Admin passwordはとりあえずdatabaseのアカウントを入れておき、セットアップ後、OneThird CMS アカウント設定で正しい情報に入れ直す。
  9. 次回から、Local by FlywheelでLocal SiteのADMINで設定画面が表示できるようになる

 

おしまい。簡単でしょ~(^_-)-☆

サンプルサイト作成(将来…..?)

サンプルで金魚の紹介サイトでも作ってみようかと思いましたが、最初に書いたようにまだライセンスや開発継続性に不安がある状況なので、工数を割いて作業するのは、今後の動向をみて考えたいと思います。

現状、Wordpressでも弊社作成のテーマで十分な高速性を出せることが確認できていますし、SQLlite環境ではbaserCMSが使用できますし、baserCMSの高速化の検証を先に実施したいと思っています。

お店が成功するループ/流れを作る

あなたがお客様に喜んでもらえる商品を扱うお店をオープンしました。成功させるためには、どのようにすればよいでしょうか?

  1. お店を知ってもらう。
  2. 訪れたお客様に満足して頂く。
  3. お客様にリピートして頂く。
  4. お客様にお客様をご紹介頂く。
  5. お客様の声を聴いて、商品・サービスにフィードバックする。

ざっくり、このような流れとなるでしょう。

お店を知ってもらう

あなたのお店が、あなたの商品に興味を持つ通行人が沢山いる場所にあるならば、「のぼり」で十分な場合もありますが、人は見えていても見ていない事が多いので、チラシ配布/呼び込みなどで積極的にPushしたり、デジタルサイネージのように画像や音の動きがあるもので認識度を上げるなどは必要になろうかと思います。

通常は、事前にフリーペーパーや新聞、雑誌に広告やチラシを掲載したり、FAX業者に依頼してFax DMをばらまいたりとなりますが、あなたの商品を必要としている人を特定してアピールできないので、非常に効率の悪い、コストパフォーマンスの悪い結果となる結果が多々発生してしまいます。

もし、あなたのお店の商品を探している人にアピールできれば、どうでしょう? きっと、効率の良い広告となりますね。

ところで、あなたがお店を探す場合、どのようにしていますか?

電話帳で調べられる方もまだいるかもしれませんが、殆どの方が、パソコンやスマホで探されると思います。とくにスマホは、音声で「近くのお弁当屋さん」としゃべるだけで、自分がいる場所の近くのお弁当屋さんを案内してくれるなど、パソコンの扱えなかった方でも簡単に使えます。

パソコンやスマホで探したときにあなたのお店が表示されれば、あなたのお店の商品を探している人にアピールできることになります。

ひょっとすると、あなたは何もしていないのに、スマホやパソコンで調べるとあなたのお店が出てくるかもしれません。でも、情報が不正確だったり、必要な情報がなかったりします。あなた(オーナー)がちゃんと正しい情報を設定することで検索で表示されやすくなり、広告(情報)としてもお客様へ必要な情報と安心感を提供できますので効果を発揮することになります。具体的には後程

訪れたお客様に満足して頂く

ここはあなたの商才を発揮して、お客様が満足する商品とサービスを提供してください。

お客様にリピートして頂く

DMなどお店や商品を知って頂くアピールの適度な繰り返しが必要となります。さらに、会員になって頂き、会員ならではのお得なサービスを提供するなどがあるとリピートされやすくなると思います。

ここでも先ほどのパソコンやスマホで探したときにあなたのお店が表示されれば、お客様に思い出して頂け、良い印象(満足)を感じて頂けていたなら、また訪問して頂けます。また、もし会員登録にメールアドレスを記入して頂いていた場合は、メールでのDMを新商品や催しの際に通知を差し上げると訪問して頂ける可能性が高くなります。

また、ご購入後の1~2週間後のフォローメールなどもお客様に好印象を感じて頂けます。

お客様にお友達をご紹介頂く

お客様が満足する商品とサービスの提供と、アフターフォローなどによって、お友達とともにご訪問頂けるかもしれません。また、お友達ご紹介ポイントや割引などの特別なサービスの提供も効果があるでしょう。

お客様の声を聴いて、商品・サービスにフィードバックする

より良い商品とサービスを提供し続けるには、常にお客様の声を聴き、世の中の流行に敏感になることが必要と思います。

また、他の同業者の商品やサービスとベンチマークして、優れた面をお客様にアピールしてファン(お客様)を作っていくとともに、負けている部分の改善もしくは視点を変えてそれが特徴としてアピールする方法なども検討して、常に前向きな成長が必要と思います。

例えば、他社競合店より高額になるなら、なぜ高額になっているかが他社比較でアピールするポイントになっていないかなど……

店舗運営以外に、ローカルビジネスだからこそ必要なこととは <結論>

誰もがネットで情報検索する時代です。たとえお店に訪問中でもネットでお店の情報を調べる方は少なくありません。そこで有意義な情報を提供できるかどうかで、お客様の反応も大きく変わることでしょう。

  • Google Mapにあなたのお店が正しく表示されるようにしましょう。
  • 同時にGoogleビジネスのアカウント設定して、必ずビジネスオーナーの登録をしましょう。
  • インターネット販売していなくてもホームページも用意して、お店の詳細な情報を発信しましょう!
  • インスタグラム、facebookなどのSNSもお店用のアカウント、ページを用意して、Google map、ホームページ、SNSを連携させましょう!

詳しくはこちらまで
お気軽にご相談ください。