年: 2017年

BASEでショップを始めました。

カスタマイズ性が高く、無料のテンプレートでレスポンシブデザインのShopが比較的簡単にできてしまうカラーミーショップ押しの最近の私ですが、無料で簡単にショップができることが売りのBASEで、ショップを作ってみました。

まずは、BASEについて簡単に

  • 初期費用 無料
  • 月額無料
  • クレジット決済とコンビニ決済が標準でついてくる
  • 標準でSSL対応(これからは有利?)
  • Blogが同じドメインで作成できる。(これはseo上メリット)

 

早速、作ってみました。

噂通り、簡単にできてしまいました。

驚いたのは、今年からSSL対応は必須と言われていますが、独自ドメインでも無料でSSL対応になったこと。

が、…..見慣れたショップに比べると寂しい。

無料の範囲では、

  • 商品画像は5枚まで
  • 商品説明はテキストのみで、画像追加できない。
  • 共通説明文が物に用意できない。
  • 商品・カテゴリーバナーなど置けない。
  • トップページやフッターなどにお買い物ガイドなど挿入できない。
  • ファビコン(ブラウザのタブに表示されているアイコン)が変更できない。
  • 必ずBASEのロゴが表示される
  • 送料設定が、地域別しか設定できない。
  • 熨斗やメッセージカードオプションを設定できるようになっていない。

など、さすがに制限が多い。

但し、有料のテンプレートが比較的低価格ですし、有料テンプレートを使用することでここで書いた制限事項の多くは緩和されますので、本気で売るお店にするには、レスポンシブデザインの有料テンプレートの適用が必須と思います。

HTML編集機能もありますが、月額費用900円が発生してしまいますし、折角簡単なBASEなのに残念なことになります。

ファビコンやBASEのロゴに関しては月額費500円必要ですが、BASEロゴを非表示にしてファビコンも設定できるようになり、オリジナルECショップぽくなります。(ちなみにテンプレートを編集して非表示することは禁止されています。)

ホームページを別に持っている場合は、BASEはカートとしてだけ利用して、ホームページに商品説明ページを用意して、ショップカート<iframe>をはめ込む利用が良いかもしれません。但し、この場合は、<iframe>で表示されることを意識した商品画像を用意しないとロゴや文字入れした画像では見栄えが良くありません。

決済機能が標準で付いてくること、独自ドメインでSSL無料、BlogのURLがShopと同じというこの3点は大きなメリットですので、BASEの簡単という部分を多少犠牲にして、有料テンプレート+BASEロゴ非表示(500円/月)、有料テンプレートで不足なら、+HTML編集(900円/月)で運用しても良いかもしれません。

あ!作ったショップは、こちら⇒ https://shop.ehime.website/

お試し程度に商品を登録しただけなので、登録商品もボチボチ増やしていければと思います。

隣接する分家にはインターネット環境があるのですが、母屋にはインターネット環境がなく、いろいろと不便があったので、分家からネットワークを拡張して対応しました。

幸い分家には無線LAN環境があり、母屋の分家に最も近い部屋では、十分接続可能な状態ですが、主に使用する部屋では残念ながら、安定して接続できず、iPadのOS updateなどは全くできない状態でしたので、これ↓を導入しました。

 

無線LAN 中継器 11ac/n/a/g/b 433+300Mbps 11ac対応 RE200

無線LAN中継器はいろいろありますが、親のAPを選んだり、電波が混線して思ったほど安定して接続できず、性能も出ないものが多いように思います。これは優れモノでした。

2.4GHz + 5GHz 高速のデュアルバンドですので、親機のAPとは、2.4GHzで接続して、拡張範囲では5GHzで接続するなども可能となります。また、有線LANポートも持ってますので、有線LANの口しかないテレビなども容易に接続できます。

WPSボタンを使って簡単セットアップはもちろん対応していますが、有線LANにPCを接続してマニュアルで設定可能で、今回の親機となる接続対象のAPはかなり古い規格の無線ルーターでしたが、マニュアルで検索して親機のSSIDにキーを入力するだけで、2.4GHzで無事接続できました。

有線LANには、ストレートケーブルでスイッチハブに接続して、ハブからテレビとビデオの2系統に接続しました。また、もともとの目的のiPAD Airは、5GHzで無事安定接続できました。

最新の規格11acに対応している一方、今回のように相当に古い規格のAPにも接続可能で、守備範囲の広い優れたおすすめできる無線LAN中継器でした。

集合住宅(マンション、コーポ)などで、2.4GHzが入り乱れて、3LDKくらいの広さでも無線がつながらない、安定しない事があります。実は、我が家もこれに相当する状況ですが、無線環境を増やすことでより被害者を増やすことになりかねないので、デュアルバンドの無線ルーターの設置場所を工夫することで対応しています。工夫しても改善できない場合は、今回紹介しました手段が利用できると思います。

カラーミーショップをカスタマイズするには、いろいろな無料のテンプレートの中身を見てみると参考になる部分が沢山あります。

Previewしながら、良いところを見つけたら中身を見て、参考にしちゃいましょう。

無料のテンプレートを他の無料のテンプレートの良いとこどりで、有料のテンプレート相当のものにUpgradeもできると思います。有料テンプレートにしかない画面いっぱいのスライドショーなどは、有料テンプレートのサンプルページなどのソースを見ることで、実現方法もわかると思います。

カラーミーショップは、SmartyというPHP用のテンプレートエンジンを使用しているそうで、テンプレートの中身を見るときにsmartyの公式ページのドキュメントが役に立ちます。(なかなか全部読んで理解するのは大変なので、いろいろなテンプレートや実際に表示させてみると大体は理解できるとは思いますので、わからないところや不安なところ、応用したいときなどに参考にするだけでも良いと思います。)

あと、テンプレートを理解して応用するには、カラーミーショップの独自タグを概要だけでも見ておいた方がよいでしょう。なんとなくでも意味が分かるような表記にはなっているので、すぐわかると思いますが、このカラーミーショップの独自タグの説明ページだけ見ただけでは、どうやって使うのかわからないことがあります。

例えば、「フリーページを1から100まで利用する場合」で、フリーページ98のURLはというと”<{$freepage[98].link_url}>”といった感じになります。これもテンプレートの中身を見ているとわかると思います。(昔、「プログラムを覚えるのに良いプログラムを読め」と言っていたのを思い出します。)

さて、テンプレートを見ているとよくある構文をいくつかあります。

1つは、ループ、もう1つは、分岐(if)これを知っていれば、流れの部分はカバーできると思います。あとは、ループを使う上で、ループの中の状態を知る方法でしょう。この3つを知っていれば、ほとんどのテンプレートは読めると思います。もちろん、html/CSS/Javascriptなどもある程度は理解できる知識が必要です(^-^;

<ループ section>

以下は、カテゴリリストを表示する処理です。「<{section……}>  ~  <{/section}>」

      <{section name=num loop=$category}>
        <{if $smarty.section.num.first }>
          <div>
            <h3 class=”pad_l_10″>カテゴリーから探す</h3>
            <ul class=”unstyled bor_b_1 mar_b_20″>
        <{/if}>
              <li class=”pad_10 bor_t_1″>
                <a href=”<{$category[num].link_url}>” class=”show txt_c_333″>
                  <{if $category[num].img_url != “”}>
                    <img src=”<{$category[num].img_url}>” class=”show hidden-phone mar_b_5 cat-left” />
                  <{/if}>
                  <{$category[num].name}>
                </a>
              </li>
        <{if $smarty.section.num.last }>
            </ul>
          </div>
        <{/if}>
      <{/section}>

<分岐 if>

以下は、ショップ会員機能が有効であれば、ログインしているかどうかで表示を変える部分です。

          <{if $members_use_flg == true}>
            <{if $members_login_flg == false}>
              <li class=”header-link”>
                <a href=”<{$members_login_url}>” class=”btn btn-01″><i class=”icon-w icon-login”></i>ログイン</a>
              </li>
              <{if $members_register_flg == true}>
                <li class=”header-link”>
                  <a href=”<{$members_regi_url}>” class=”btn btn-01″><i class=”icon-w icon-adduser”></i>会員登録</a>
                </li>
              <{/if}>
            <{else}>
              <li class=”header-link”>
                <a href=”<{$members_login_url}>” class=”btn btn-01″><i class=”icon-w icon-logout”></i>ログアウト</a>
              </li>
            <{/if}>
          <{/if}>

<ループ状態 smarty.section>

<{smarty.section.xxx.yyyyy}> : section name=xxxのなかのプロパティyyyyyの値となります。

yyyyy:iteration(ループの現在の反復回数),index(ループのインデックスでしてしない場合は0から始まります),first(1回目の処理時にtrue),last(最後の処理時にtrue),rownum(iterationと同意,1から始まる),loop(ループの最後のインデックス番号,{section}の外で使えます。)

ネットショップ運用において、いくつかあると便利なツールがあります。

受注・発送業務において、効率化のためにCSVファイルの取扱いは不可欠です。しかし、CSVファイルをExcelなどで取り込むと、期待しない自動変換がされて支障が出ることが多々あります。CSVエディタを利用しましょう。

SmoothCSV

慣れるまで、多少使い勝手が悪いところもありますが、通常業務で必要な機能はすべて持っています。(カラーミーショップ、ポンパレなどの公式ページでも紹介されています。)

使用する上で、最初に使いにくいと感じるところとして、「セル内の情報が多い場合に見難い」ではないかと思います。列の幅を自動調整で表示される方法もありますが、注文データなどは横長となり都合が悪いです。そんな場合は、編集したいセル(複数セルも可)を選んで、「編集」>「選択範囲をテキストで編集」(Ctrl+T)とするとそのセルだけ別ウィンドウに表示してくれます。この機能を使うことで、商品情報の編集など、CSVファイルの取扱う業務全般で大変便利で強力なツールとなります。

ページ作成において、若干でもhtml/cssの編集は必要になるケースが多々発生します。楽天市場のrms、YahooショップのストアクリエイターProなども、多少のhtmlの補完・エラーチェックなどできますが、別途htmlエディタを使用して作成するのが便利です。

Crescent Eve

大変シンプルで汎用的なエディタとしても利用でき、プレビュー機能などもあり小規模な商品説明の作成には大変向いています。ただ、最小限の機能しか備えていませんので、機能不足を感じることもあるかもしれません。そんな場合は、次に紹介するNotepad++が使ってみましょう。

Notepad++

高機能で、動作も軽く、大規模なソースの記述も可能な優れたツールですが、オープンソースで開発されていますので、商用でも無料で使用できます。文法の補完・チェックはもちろん、プラグイン機能を使うことで、さらに多機能・便利に自分好みのツールにできます。タブ表示なので、CSS/html/javascriptなどを同時編集しながらデバッグなどにも便利です。

オススメのプラグインは、

  • Plugin Manager 名前の通りプラグインの管理ツールです。
  • Preview HTML 表示IEを選んでプレビューできます。
  • Quick Color Picker 画面に表示された任意の場所のカラーコードを取り込めます。
  • その他にも、converter、Nppftpなど様々便利なプラグインがあります。

その他にも、国産HTML/CSSエディタ StyleNote5(SN5)などがあります。機能が豊富で使いやすいと評判ですが、私自身が現状使用していないので、ここでは紹介だけに留めます。

ショップページ、商品ページ作成で、画像編集は不可欠で、商品画像、イベントバナー、説明画像などの作成、編集、縮小、色彩調整など必要になります。

有料ソフトであれば、illustrator/Photoshopがありますが、月額では低価格になりましたが、薄利なショップ運営には負担に違いはありません。また、少々専門的で直感で利用できるソフトではありません。フリーソフトならInkscape/gimpですが、Inkscapeは比較的使いやすいですが、まだ開発途上で機能不足や不安定な部分があり、gimpは操作に癖があり、Linuxでは軽いですがWindowsでは起動時時間を要したりで、この組み合わせは非常に強力ではありますが、ショップ運用のために覚えるには少々敷居が高いように思います。

そこでお勧めしたいのが(私自身が愛用しています)

CLIP STUDIO PAINT PRO です。漫画を描くためのソフトで有料ではありますが、この種類のソフトとしては低価格で、動作も軽く安定しています。このソフトの本来の使用用途とは違いますが、ショップ運用時に必要な機能は必要十分にもっています。レイヤーも使いやすいので、複数の画像と文字をレイヤーごとに作成しておくことで、簡単に画像の差し替え、文字の変更もできてしまいます。ポスターの作成などにも利用できますが、pdfは直接書き出せませんので、印刷を外注する場合、別のソフトでjpegからpdf変換が必要となります。(MS officeのPowerpoint / LibreOffice Impressあたりに貼り付けてpdfにエキスポートするのが確実でしょう。)

なにより、操作が直感的で、覚えることが負担にならないと思います。

illustratorから入った人には機能不足や使い勝手が悪いと思う部分があるようですが、難しいことを考えないで、紙に書いて重ねていく感覚で使えますので、パソコンは苦手という人でも使っていただけるのではないかと思います。アニメーション機能も追加されましたので動くバナーなども容易に作成できると思います。

欠点も多少ありますが、ショップ運用においては問題ないでしょう。

  • GIFが扱えないこと、GIFの代わりにPNGを使いましょう
  • illustratorのファイルが取り込めないこと(逆にベクターとラスターが混在して使用できる)

その他、画像を見たり、サイズ変更、切り出し、フォーマット変更など、気軽に行うのに便利なツールとして、IrfanViewが直感的で使いやすく良く紹介されますが、商用利用は無料ではありません。同様の機能を持っていて無料のソフトとしては、MassiGraがあります。IrfanViewほど直感的な操作性ではありませんが、慣れると使いやすいソフトだと思います。

その他、ftpソフトですが、以前は、ffftpが主流でしたが、最近ではオープンソースで頻繁に更新されセキュリティ対応も十分ということでFileZillaが良く使われています。

「カラーミーキット(2カラム)」の基本

カラーミーショップで用意されているドキュメントはこちら

必要十分な情報が記載されているのですが、「CSSフレームワーク」を使ったことのある方以外は、取っ掛り難いかもしれません。

出来上がり想像してコーディングし易く、レスポンシブデザインが組みやすいように配慮して、予め沢山のclassが定義されたcssと考えればよいでしょう。

ワイヤーフレームで出来上がりをPC/タブレット/スマホで作って、それに合わせてフレームごとに作ったhtmlに必要なclassを並べていく感じで組みあげていけます。予め定義されたclassについては、テキストのスタイル、パディング、マージン、など沢山あります。cssを見れば、コメントもありますし、htmlでコーディングする最低限の知識があれば難しくないでしょう。

レスポンシブデザインで実際に組んだことがないとグリッドというのが意外にわかりにくいかもしれません。

デバイスのサイズに応じたclassの書き方は以下の表をご参照ください。

class 参照デバイス デバイスサイズ
.col-lg-[n] デスクトップ 全てのデバイスサイズに適用
.col-md-[n] デスクトップ~タブレット 980px以下のデバイスに適用
.col-sm-[n] タブレット~スマートフォン 768px以下のデバイスに適用
.col-xs-[n] スマートフォン 480px以下のデバイスに適用

それぞれの画面の幅を12等分していますの、nは1~12の数字になります。

n=12なら画面幅、n=3なら画面に残りn=9分横に並ぶ(n=3のフレームなら4つ横に並ぶ)

これを必要に応じでそれぞれの画面サイズごとにclassに並べていけばよいだけです。

例えば、

レスポンシブデザインのグリッドのイメージ

「デスクトップでは4列、タブレットでは2列、スマホなら1列にしたい」なら、「class=”col col-lg-3 col-md-6 col-sm-12″」とすればよいだけです。これらのグループを「<div class=”row”></div>」で括れば、この塊りの中で画面サイズに合わせて表示の並びが変わっていきます。

そのほか、タイポグラフィー、テーブル、ボタン、アイコンなどあります。これはカラーミーキットの説明で必要十分でしょう。

伊予鉄高島屋地下階の延長にある「まつちかタウン」にあり、愛媛県産の農作物を生かしたジェラートを製造・販売をされている「ジェラテリアUNO」様の自社ショップの作成をさせて頂きました。

ショップ作成にあたり、すでに運用されている楽天市場店のデザインをベースにホームページからショップに移った際に違和感が少ないように考慮して作成しました。

今回は、お客様とご相談の結果で、カラーミーショップ で構築させて頂きました。構築にあたり、全部込みの有料テンプレートもありますが、カラーミーショップのテンプレートは比較的触りやすく自由度も高いので、今回は無料のテンプレートをベースに構築させて頂きました。

お客様の様々なデバイスからアクセスの想定と(読みやすい記事作成にあたり配慮が必要となりますが)携帯端末(スマホ、タブレット)向けショップをPCショップに一元管理できるレスポンシブデザインのECサイトにするために、カラーミーキットを使用した無料テンプレートをベースに作成しました。

使用にしたテンプレートは、カラーミーキット(2カラム)をベースにWASHIの一部を流用して作成しました。

レスポンシブなホームページの作成は、何度もしましたが、テンプレート/テーマのマイナーチェンジで対応した物件が多く、ほとんどのケースでは(出来上がり確認時以外は)レスポンシブデザインを意識しないで構築できていますが、今回は改めてレスポンシブデザインを意識して作成しました。

(次回に続く)

出来上がったショップは↓

愛媛産ジェラート・アイスクリームのジェラテリアUNOのカラーミーショップ

2014年にGoogleが「httpsをランキング アルゴリズムでのシグナルとして使用する」とアナウンスされて、ついに本年度から本格化します。その流れに従い、Yahooショップや楽天市場などのモールも常時SSL化されます。

ローカルビジネスで地域検索で見つけて頂ければOKなホームページを除いて、Google検索を重視するホームページは常時SSL化を遅ればせながら、急がなければならない状況になっています。

弊社ホームページは、現在ロリポップ!のレンタルサーバーを利用しています。

【スタンダートプラン】

  • 独自ドメイン利用可/マルチドメイン100個まで
  • 30個までDB利用可のためWordPressはもちろんEC-CUBEで複数ECサイト作成も可能!
  • 独自SSL、SSH利用可!のパワーサーバーです!
  • 月額500円~  の【スタンダードプラン】は大容量の120GB!

弊社の運用実績から、非常に安定しており、性能改善も行われており、格安価格ですし、大変魅力的なレンタルサーバーとなります。しかし、残念ながら、現状は、常時SSL化にドメイン当たり別途2,000円/月(長期契約割引あり)必要となってしまいます。(年間契約で、常時SSL込みでスタンダードプラン2,170円/月~)

そこで、今現在、格安で常時SSLが導入できるレンタルサーバーをピックアップしてみました。(弊社が移行も視野にいれて検討しているサービス)

なんと年間4,680円(税別)で常時SSLホームページが構築できます。

■Z.comレンタルサーバーの各種プラン

  • 全プラン ~初期費用無料!!~
  • 【Zeroプラン】は月額290円で容量10GB  初めてホームページを作る方やコストを抑えたい方にオススメ
  • 【Zetaプラン】は月額680円で容量100GB  複数のサイトや法人サイトの運用にオススメ
  • 【Zeusプラン】は月額1,430円で容量なんと無制限!  動画や高画質写真など大容量ファイルの公開にオススメ
  • 【Z.com for WordPress】は月額720円で容量10GB  安心、高速なブログ環境をお探しの方にオススメ

■サービスの特長

◇Zero/Zeta/Zeusプランの特長

  • 訪問者の閲覧をより快適にし、離脱も防ぐ【超高速SSDストレージ】
  • 140種類以上のアプリケーションを1クリックでインストールできる【かんたんインストール】
  • 世界最高水準の技術をもって撃退する【迷惑メールフィルター】etc・・・

◇Z.com for WordPressの特長

  • インストール作業不要ですぐにWordPressが利用できる【自動セットアップ】
  • 何かあったときは1クリックで元に戻すことができる【自動バックアップ機能】
  • 本番とまったく同じ環境でテストすることができる【ステージング環境】
  • WordPressサイトの部分的なコピーも丸ごとコピーも1クリックで!【サイトコピー機能】etc・・・
  • セキュリティ対策もしっかり出来る【独自SSL】は月額100円!! 

高速性と高い技術サポートが評判のサーバが、常時SSL無料で月額900円(税抜)で使用できます。マルチドメインで運用ならこれで決まり

■エックスサーバーの特長

エックスサーバーは高速・多機能・高安定性のそれぞれの観点において、 下記特長を備えています。

▼ 高速サーバー

  • 高速性を重視し、最新16コアCPU(Xeon E5シリーズ) +192GBメモリ+RAID10を採用!
  • 快適232Gの国内高速バックポーン!
  • FastCGIやキャッシュモジュールに対応! PHP高速化や負荷軽減を図ることが可能!

▼ 充実の多機能 ・月額900円(税抜)から、大容量200GBからの高コストパフォーマンス

  • マルチドメイン・メールアドレス無制限!
  • 独自SSLを無料で利用可能!
  • 操作性を重視した簡単操作のサーバー管理ツール!
  • PHP7などの幅広い言語に対応!
  • SSHやcronによるコマンド、プログラムの実行も可能!
  • 人気のブログやショッピングカートを簡単インストール!

▼ 高い安定性

  • 安定のサーバー稼働率99.99%以上
  • お客様の大切なデータが消失してしまう可能性を大幅に 減らすことが可能な『自動バックアップ』機能に標準対応!
  • 初心者でも安心の24時間365日メールサポート!
  • 電話サポートあり!専任スタッフが対応

「プランS」(2017年6月30日までの期間限定)ディスク容量300GBで独自SSLも無料で上記の2サービスよりお得感がありますが、上位プランの様子からマルチドメインよりデータサーバ的な運用に向いていると思われます。

Yahoo! JAPANグループならではの高品質なサーバー環境で低価格&大容量。 容量、メモリ、CPUを自由自在に拡張OK。保守管理はファーストサーバにすべておまかせで安心です。

●Zenlogicの特長●

  • 初期費用:0円/月額:890円 【2週間無料トライアル付】
  • 最大ディスク容量2TB(2,000GB)
  • 電話&メールサポート無料
  • シマンテックグループのSSL証明書0円+無制限<Zenlogicだけ>
  • マルチドメイン、メールアドレス無制限
  • ビジネスに必須のセキュリティ機能標準搭載
  • 専門スタッフによる個別サポート、作業代行サービス
  • 継続的に機能強化・改善し、常に最新の環境をご提供

 

これまで上げた3件は、構築にはそれなりの知識と経験が必要ですが、こちらは簡単にホームページが構築できます。

兎に角、簡単に構築できて、常時SSLで2,000円/月。但し、テンプレート以上のことをするには知識が必要で、制約も多くなります。

ブログのように更新ができるお知らせ更新、 メニュー一覧やアクセスマップ、ネットショッピング機能など、 ホームページ作成に必要なコンテンツがあらかじめ用意されているため、 情報を登録すれば、すぐにオリジナルのホームページが完成します。 デザイン作成は、4,000通りものデザインパターンから、 イメージに合ったデザインを選択できるほか、 HTMLとCSSでカスタマイズすることも可能ですので、 初心者だけでなく、中・上級者の方も満足。 もちろんスマートフォン・タブレットも対応!

 

裏技的ですが、通販もされるのであれば、ネットショップでホームページを構築する方法もあります。

カラーミーショップなら、テンプレートをかなり自由に変更できますので、トップページをホームページの体裁にすることは比較的容易です。常時SSLは独自ドメインの場合、残念ながら、1,000円/月必要ですが、エコノミープランであれば、常時SSL込みで1,900円/月でショップ兼ホームページが構築できることになります。

但し、いくつか注意点があります。

  • エコノミープランだと自由ページが10ページまで(年ごとに増えて100ページまで)ですので、大規模なホームページの作成には向きません。
  • ホームページ化には、テンプレートを編集できるhtmlの知識が要求されます。
  • クレジット審査を受ける場合にショップとしての記載以外部分が不適切と判断されるリスクがあります。