月: 2017年4月

以下の条件を満たす、ホームページ作成サービスということで、「Ameba Ownd」を使ってみました。

作成したサンプルサイトはこちら

◇条件

  • 初期費用・月額無料
  • 商用利用可
  • ネットショップを設置できる
  • スマホ対応
  • 余分な広告の掲載が少ない
  • 独自ドメインが利用可能(設定が無料)

テンプレートをベースに機能ブロックを貼り付ける手順で作成していきますが、WIXほどの自由度はありません。

ただ、htmlも挿入可能ですので、アフィリエイト広告なのども簡単に入れられます。

使ってみて、以下が不足と感じました。

◇不足

  • 問合せのパーツがない
  • ショップ機能は最低限で、送料は固定となる。(=BASEで基本にAppカテゴリ管理追加)

BASEに入ってBASE App送料詳細設定を追加することで、地域別送料も設定できました。

  • Owndの広告が最上部とPoweredに入る
  • 段組みができない(大きなレイアウトは、テンプレートで決まってしまう。)
  • 独自ドメインでは、SSL対応できなくなる(BASEショップは出来る。)
  • すでにあるBASEとアカウントは共有できるが、商品は共有できない(NG

ショップ作成時にすでにOpenしているBASEショップのアカウントで連携してしまいました。すでに発売中の商品がOwnd側で見えないので問合せした結果、不具合が発生する可能性があるので、既存のショップとは別に新規アカウントで連携してくださいとのことでした。すでにBASEショップをお持ちの方は注意が必要です。

優れていると感じたのは、

◇特徴

  • 標準でAMP対応(但し、独自ドメインには未対応の模様)
  • SSL対応(Owndドメインの場合)
  • 簡単にスタイリッシュなページができる
  • BASEの商品ページより詳細な商品説明が作れる

 

結論:

ショップ機能は、詳細商品説明文はBASEに対して優れていますが、商品検索機能がないので、商品数が一画面に収まる程度の場合にしか実用的ではありません。

受注案件で作成した 農業法人 株式会社 FFT様のホームページ 赤の元気

上下とBlogページの下側に広告がありますが、見栄えも機能も必要十分な出来栄えと思います。純粋なホームページや商品数が1ページに収まるショップを構築する場合の事例となります。

先に記載したようにAmeba Owndでは、カテゴリ・商品検索が標準の機能としてはないので、カテゴリ・商品数が多い場合は、BASEが良いでしょう。また、ホームページとショップを二つ運用するのは、手間がどうしても増えるので、現状では、比較的ホームページ的な要素を盛り込みやすいテンプレート(例えば、「DEPARTMENT」)を使いBASEで構築するのが良いと思います。商品説明が弱い部分は集客対策も兼ねてBASEのBlogで補うことで対策できる(もともとそういう意図の作りになっている)と思います。


WiXは、無料で簡単にきれいなホームページができるそうです。

ん、確かに簡単にきれいなホームページができます。

作り方は簡単

  1. アカウントを作る
  2. テンプレートを選ぶ
  3. テンプレートに中身を入れていく
  4. 配置・サイズはつまんで簡単に変更
  5. 足らなコンテンツパーツは、アプリ追加で簡単
  6. 全部中身を埋めたら公開

作成にあたり、絶対やってないと後悔するのは、編集する度にセーブすること。勝手に再読み込みで編集途中のデータがロストすることが平気で発生します。実は、私はほぼ完成していたのですが、これで完成させる意思を消失しまいました。

WiXは、確かに簡単にきれいで、まるでデザイナーズのホームページができますが、余程のこだわりがない方でないと無料では使えないように思います。自前の独自ドメインを使用する場合でも416円/月が必要となり、これではWiXの広告が表示されます。個人利用でもコンボ814円/月が最低ラインのように感じます。

簡単で、きれいにできること以外にネットショップ機能が使えるのもWiXの魅力と思います。eコマース1641円/月が必要となりますが、完全にホームページとショップの一体化ができますので、格安感を感じます。

海外を対象としたページつくりには、外せないサービスと思います。ただ、海外のサービスですし、日本語のサンプルページでも少々重い感じがするので、国内向けに限定したサービスの場合は、カラーミーやBASEなどの国内のサービスをお勧めしたい。

四月から始まったWindows10 Creators Updateした結果

ん~

個人的にはしないでOKならしたくない結果となった。

手持ちのパソコンすべて、問題なくUpgradeは出来ましたが、肝心のメインのデスクトップパソコンが不調となってしまいました。

一番痛いのは、マイクロソフトのEdge移行を促す陰謀ではないかと思いたくなるほど、Internet explorerがエラーを吐く頻度が上がってしまい、止む無くEdgeに切り替え....でも銀行などまだEdgeは使えない.....

このおかげで、何本記事を書き直したことか(-_-;)

標準のメールソフトが機能アップしてやっと使えるものになったりで、機能アップも良いのだけれど、入力モードの変更のたびにポップアップ(Microsoft IMEの設定で無効にできる)してきたり、ポップアップする説明が邪魔な場所に出る場合が増えたりとあまりうれしくない。(設定を変えることで対処は可能なようだが、Updateというのなら、現状の操作環境はそのままで、機能アップした部分は使うなら使える的な設定にしてほしいものです。)

Windows10になってから、どうもマイクロソフトの将来に向けての思惑を感じます。万が一、マイクロソフトが悪意をもった行動をとったら…..と思うと怖いと感じるこのころです。

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のカラーミーショップ