合同会社ひめぽーと は、愛媛の店舗、生産者様のホームページ作成・制作・管理、ネットショップ作成・制作・管理、パソコン関連サポートなど、バックアップ致します。

カテゴリー: ネットショップ

掲載日: / 更新日:
カテゴリー: ネットショップ

ネットショップ構築・運用にオススメツール

CLIP STUDIO PAINT

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

受注・発送業務において、効率化のために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が良く使われています。

掲載日: / 更新日:
カテゴリー: ネットショップ

カラーミーショップで、レスポンシブデザイン ECサイトを作成する その2


「カラーミーキット(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>」で括れば、この塊りの中で画面サイズに合わせて表示の並びが変わっていきます。

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

掲載日: / 更新日:
カテゴリー: ネットショップ

カラーミーショップで、レスポンシブデザイン ECサイトを作成する

安納芋のジェラートとフレンチトーストでちょっとリッチなモーニング

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

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

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

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

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

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

(次回に続く)

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

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

Amazon マケプレプライム 参加資格について

Amazon primeについて

対応させて頂いているお客様にAmazonから

マケプレプライム 参加資格

があるので、利用されませんかと打診があり、要件を調べてみた。

翌日配達可能な地域として、北海道、沖縄、離島は除くことができますが、東北地方が含まれています。

この結果、中国、四国より西の地域から発送のクール便の商品はプライムが使用できないことになります。

特に冷凍クール便の取扱は、ヤマト運輸と佐川急便のみとなりますが、どちらもクール便では宅急便タイムサービスが利用できないので、例えば、広島から青森に翌日着で発送は不可となります。(チャーター便を除き、お金を出したから届けられるという話ではありません。)

Amazon seller centralが「新しい配送設定」に移行することで、配送不可地域が設定できるようになったので、てっきりプライムも東北など任意の地域を除外することが可能になったかと単純に思ってましたが、

 

マケプレプライム 利用規約

配送サービス配送対象の住所
お急ぎ便の配送料無料
  • (本州、四国、九州:翌営業日のお届け。北海道、沖縄、離島:翌々営業日までのお届け)
通常配送の配送料無料
  • 日本のすべての住所(沖縄、離島を含む)
対象外
  • 海外の配送先

また、出品者は、マケプレプライム対象商品の通常配送について、すべての購入者に対して配送料無料を提供する必要があります。

プライム会員以外の購入者は、お急ぎ便については出品者が設定した配送料を支払います。

失礼ながら、これは現実の日本の配送事情を理解してないのか、「関東に配送センターを持ってない地方企業は参加資格なし」と言っているように感じてしまいます。

地域活性に最大限に努力している地方の企業にも、参加可能なようにお急ぎ便の配送対象地域を限定できるようにして頂きたいと願います。

しつこく、重ねて

実際、Amazon発送でも翌日着しない場合、もしくはプライムなのにお急ぎ便指定できないことが、多々ある実情で、マケプレプライム対象出店者のみ不可能な足かせはぜひ再考すべきと思います。

さらに重ねて、

東北地方の方には申し訳ないですが、クール便(冷凍)ではお急ぎ便翌営業日お届け地域から外せるようにお願いしたい。

 

最後に

Amazon Primeは、出品者にとっても非常に魅力的と感じているからこそ残念に思っています。

Amazonの日本国内でのさらなる発展のためにも再考すべきと思います。