ブレイントラスト EC LEARNING(ec・ラーニング)

ビギナーにも使えるヒントが満載。 ネットショップコンサルのプロがノウハウをお届け。

開店構築費5万円、最短5	営業日で完成! ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング

ショップ運営のお悩みを解決!

ショップ運営や売上アップの方法など、ショップオーナー様のお悩みにお答えいたします。
ショップ運営Q&A>デザイン
CMSを使ってホームページを作りたいと思っていますが、WEB初心者でHTMLや用語などに自信がありません。国内のもので、導入しやすいオススメのCMSを教えていただけませんでしょうか?

「クラウドCMS」という方法を検討されてはいかがでしょうか?
「クラウドCMS」の場合は、ソフトウェアやサーバーの準備・設定をする必要がなく、申し込むだけでサービスを利用できるため、従来までのCMSの構築にかける時間を削減することができます。
WEB初心者であれば、知識がなくても操作がしやすい「Jimdo」や「Wix」がオススメです。
どちらも多くのユーザーが利用しているので、参考になる情報が多い点も魅力です。
テンプレートやサンプルサイト、出来る事などを比べて、どちらのCMSが合っているかお選びいただければと思います。

参考URL:
「Jimdo」 https://jp.jimdo.com/
「Wix」  https://ja.wix.com/
スマホページでiframeを利用すると、機種によってiframe内の画像が途中で切れてしまいます。jsが使えない場合でも、大きく余白をとらずに、各機種できれいに高さを合わせることはできますか?

jsのプラグインが使えない場合は、css3のメディアクエリを使う事で、機種ごとの高さを設定する事ができます。
メディアクエリでは解像度ごとにcssを記載していきますが、今回の様に機種ごとに高さを調節する場合は、大きく4つのブレイクポイント(分岐点)を設定するといいでしょう。
まずはiPhone5Sまでの実質解像度「横幅320px」、アンドロイド端末に多い「横幅360px」、iPhone6、iPhone6S、iPhone7では「横幅375px」、そしてiPhone6 Plus、iPhone7 Plusの場合は「横幅414px」が縦画面で見たときのブレイクポイントとなっています。
これらをふまえ、下記のように横幅ごとに4つのcssを設定する事で、画像が途中で切れる事もなくなるでしょう。

/**最小(横幅320px)時の高さ**/
iframe {height: ○○px;}

/**横幅360px時の高さ**/
@media all and (min-width: 360px) {
iframe {height: ○○px;}
}

/**横幅375px時の高さ**/
@media all and (min-width: 375px) {
iframe {height: ○○px;}
}

/**横幅414px時の高さ**/
@media all and (min-width: 414px) {
iframe {height: ○○px;}
}

ただし画面を横にしてみた場合を含めたり、新しい機種が登場した際には、さらにブレイクポイントの追加が必要になりますので注意しましょう。
ページ編集中に誤ってデータを削除してしまいました。バックアップを取り忘れていたのですが何とか元に戻す方法はありませんか?

確実な方法ではないですが、「Wayback Machine」を使う事で元に戻せる可能性があります。
「Wayback Machine」は、インターネットアーカイブ(Internet Archive)が収集している過去のウェブサイトを閲覧できるサービスです。 インターネットアーカイブ(Internet Archive)は世界中の過去のサイトが収集されていて、その数は4600億件にもなります。
こちらで過去のページを検索し、消してしまったデータのページが表示された場合は、そのソースをコピーして利用しましょう。
ただし、全ての過去のページを保存しているわけではないので、データが残っていればラッキーといった感覚で利用することをおすすめします。

「wayback machine」 https://archive.org/web/
モール以外に自社サイトでの販売を考えているのですが、ネットショップのASPの中でも、スマホユーザーに特化、または様々な点でスマホで扱いやすいように設計されているASPがあれば教えて頂けませんか?

スマホに特化したショッピングカートASPとして「aishipR」があります。
“スマホで売れる”を追求して作られており、スマホでのカゴ落ちを軽減する「ワンページカート」の機能や表示速度の最適化など、様々な点でスマホ向けにチューニングされています。
また、完全レスポンシブデザインで設計されている為、従来のように各デバイス(PC、スマホ、タブレット)ごとのページ制作の手間がなくなり、作業効率の向上にも期待できます。
2週間のお試し登録もできますので、是非一度お試し下さい。

「aishipR」 http://www.aiship.jp/
エクセルでCSVファイルを開くと、先頭の数字の0が消えていたり、数字の文字が起きたりするので使いづらいです。CSVファイルを編集しやすい、オススメのフリーソフトがあれば教えてください。

Excel感覚で編集がしやすい「Cassava Editor」がオススメです。それほど高機能ではないですが、文字化けなど迴避するためには最適なソフトです。また、大容量のデータを扱う事が多いネットショップであれば、「SmoothCSV」をオススメします。機能面も充実していて、動作が軽いのがポイントです。
参考URL
「Cassava Editor」 http://www.asukaze.net/soft/cassava/
「SmoothCSV」 http://smoothcsv.com/
楽天/Yahoo!/ポンパレのショップを運営していますが、全ショップを一回の作業で更新できる良い多店舗管理ツールはありませんでしょうか?

「クロスモール」 https://cross-mall.jp/ という多店舗管理ASPがあります。
クロスモール内で、商品登録、在庫管理、受注処理などショップ運営に関する業務を一括で管理することが出来ます。
無料オンラインデモもありますので、ご覧になって検討してみてはいかがでしょうか。
楽天のサイトで、レフトナビが長くて、フッターとトップページとの間にスペースが空いてしまいます。このスペースを埋めるために、何か良い方法はないでしょうか?

楽天のサイトで、レフトナビが長くて、フッターとトップページとの間にスペースが空いてしまいます。このスペースを埋めるために、何か良い方法はないでしょうか?

A.トップページ説明文のコンテンツ量が少ないのが原因ですので、そこに季節物商品や、今一番売りたい商品など、詳細情報を載せたコンテンツページを作ってスペースを埋めてみてはいかがでしょうか?
また、手軽にスペースを埋める方法としては、商品管理番号を入力するだけで最大50商品まで表示する事ができる、目玉商品機能があり、買い周りにも効果的です。
楽天から「商品のメイン画像に文字を何か入れて一目でどんな商品か判るようにしてください」と指導されていますが、商品名以外にどんな文字を入れればよいのでしょうか?

商品名以外では、おすすめポイントをキャッチコピーにする、「送料無料」や「ポイント10倍」などアイキャッチになる言葉を入れてみるとよいでしょう。
その他、価格や容量などスペックを入れることで特徴が分かるデザインになる様に心がけてみてください。
テキストの大きさはできるだけスマホで画像をみても読みやすい文字・サイズにすると良いでしょう。
楽天でアンカータグを使うと、楽天の固定ヘッダーがかぶさってしまい、思ったところよりずれて表示されます。うまく表示できる方法はありますか?

アンカータグが始まる部分に任意のID(今回は’hogehoge’)を記載し、下記cssで高さを調整する事で解決できます。
<style>
#hogehoge {margin-top:-56px;padding-top:56px;}
</style>

こちらのタグをヘッダー、または共通説明文(大)などに読み込んで利用して下さい。
ショップの看板のところに簡単なGIF画像を作って入れたいのですが、GIFアニメは動くのでしょうか?ピクセルサイズ・容量制限などもあれば教えてください。

楽天でアニメーションGIFの利用は可能です。
楽天R-Cabinetでは、アップできる最大画像サイズと容量は「横1600×縦1200pxと容量2MBまで」となっております。
ただし、Goldを利用すれば無制限で画像登録できるため、容量の大きい画像はこちらを利用するといいでしょう。

▼GIFアニメ導入参考サイト
・festival-plaza
http://www.rakuten.ne.jp/gold/festival-plaza/
・看板PRO
http://item.rakuten.co.jp/kanban-pro
Photoshopの代用になる、オススメのフリーソフトがあれば教えてください。

「GIMP」というオススメのフリーソフトがあります。
画像加工ソフトとして約20年の歴史があり、専用の参考書も発売されるほどポピュラーなソフトですので、まずはお金をかけずに画像を編集したい方にオススメです。
レイヤー機能が使え、エフェクトやブラシも豊富に揃っていて、バッチ処理で画像を加工することも可能で、機能面も充実しています。
操作方法や追加プラグインを紹介しているサイトがたくさんあるので、分からない事があっても少し調べれば答えが見つかりやすい点も魅力的です。

[参考サイト]
GIMP入門
http://www.gimp.jp.net/

株式会社SYG
synclogue-navi
https://synclogue-navi.com/category/gimp

Mac版 GIMP日本語のダウンロードから使い方まで
http://xn--gimp-j79hm9d2w6i.com/
楽天GOLDを使わずに個性的なデザインのショップを作りたいのですが、参考になるショップを教えてください。

「大五うなぎ工房」 http://www.rakuten.co.jp/daigounagi/
上記ショップはGOLDを使用していますが、スライダーなどの動的コンテンツを使用していないので、RMSだけでも表現可能なサイトです。こちらのように横幅いっぱいに画像を使うと、GOLDを使わずに個性的なサイトを演出できます。
また、下記の楽天ページ「ユーザー高評価ショップ」では「有名メガストア」や「年間MVPショップ」も記載されておりますので参考にしてください。
「毎週月曜更新!レビュー4.0以上!ユーザー高評価ショップ」
http://www.rakuten.co.jp/shop/monday/
楽天市場で各ショップの商品ページの右上に、デフォルトで「この商品の関連商品」という項目があって表示されるのですが、競合他ショップ商品が出てくるので出したくありません。他ショップを調べてみると、出ていない商品ページもあります。どうしたらこれを出さないように出来るのでしょうか?

「この商品の関連商品」は、楽天デフォルトCSSの#rakutenLimitedId_header .ris-ar-triで設定されているので、その部分をCSSで出さないようにします。
記入場所は共通説明文(大)や、デザイン設定のヘッダー・フッター・レフトナビなどのフォームに下記ソースコードを記入して下さい。

■ソースコード
<style type=”text/css”>
#rakutenLimitedId_header .ris-ar-tri {
display: none !important;
}
</style>

その他にも同じ方法を使えば、離脱の元となるヘッダーの検索フォームも非表示にする事ができますので是非試してみて下さい。
現在、ショップで通常の仕様の通り、商品登録をしているだけですが、特集ページなどを作りたいと思っています。簡単に特集ページが作れる方法はありませんでしょうか?

通常、自由にレイアウトが出来るページを作ろうと思うと、HTMLの知識が必要ですが、登録している商品に決まりごとを作るだけで簡単に特集を組むことが可能です。
まず、集めたい商品の「商品名」に特定のキーワードを入れてみましょう。例えば「春の行楽シーズン必須アイテム」などを特集したい商品名に入れてください。
そしてショップ内検索で「春の行楽シーズン必須アイテム」と入れて検索結果を表示してください。
その検索結果のURLをコピーして、そのキーワードをタイトルにしたバナーを作成して、リンクを設定してください。
これで簡単に特集ページが出来上がります。
カメラを持っていなくて、スマホで商品を撮影しているのですが、キレイに撮影できません。スマホでうまく撮影できるコツはないでしょうか?

スマホできれいに撮影するコツとして、
– レンズをきれいにする
– デジタルズームはズームするほど画質が落ちるので使用しない
– 解像度は最高にする
– 保存の圧縮率は最低にする(保存時の質を最高にする)
– デジカメに比べてスマホは軽いため、手ぶれ補正機能を必ずオンにする
– 被写体の前や斜め前に光源を持ってくるように、光の位置を調整する
– 白色を認識して写真全体の色の調整をする、ホワイトバランスの検知を待つ
– LEDフラッシュの焚き方に気を付ける
– 露出(明るさ)を調整する
この9点を心がけて撮影して下さい。
また、アプリを利用するのであれば、「女神カメラ」というアプリがオススメです。写真のトリミング、明るさの調整など基本的な写真加工が簡単にできます。
元々自撮り用アプリですが、このアプリで商品画像を加工すると効果的に商品も綺麗に見せることができます。
iPhoneとAndroid両方に対応しているので是非お試しください。
楽天市場で新しくショップを作っているところなのですが、商品画像のピクセルサイズは横幅700ピクセル以上にしてください、と云われました。何か簡単に画像サイズを変えられるフリーの画像編集ソフトはありませんか?

それなら「Photoscape(フォトスケープ)」が良いでしょう。
Windows用もMac用も無料であり、しかも使い勝手が大変よいと思います。起動からすぐ立ち上がって、軽い動作で編集もスムーズに行えます。
使い方は検索すれば色んなレクチャーブログが見つかりますので、探してみて下さい。
バナーのリンクを、あるカテゴリーにしたいのですが、そのカテゴリーの商品は、分類上複数に分かれているので1つのリンクで一覧が表示できません。何か良い方法はありませんか?

先ず、検索対象となる全ての商品名に共通のワードを付けてください。
そのワードでショップ内検索を行い、表示された検索結果一覧のURLをバナーのリンクに設定してみましょう。
商品のメイン画像(サムネイル)に、文字や装飾を入れたいのですが、画像編集ソフトは高価な上、使えないので困っています。何か良い方法はありませんか?

スマホアプリで良いツールがいくつかあります。なかでも、iPhoneとAndroidで提供されている「DECOPIC(デコピック)」は最強です。オシャレで多彩なフォントが使えて、手描きにも対応している画像デコレーション専用アプリです。
もちろん商品の写真も綺麗に撮れて、加工も自由自在です。一部、有料のデコレーション素材がありますが、画像ソフトよりはるかに安上がりです。
楽天の各店舗のスマートフォンサイトで、楽天の仕様を書き換えて独自デザインを表示している店舗がありますが、その中でも参考にするべき店舗などお教えいただけますか?

楽天のスマートフォンサイトでcssやiframeを読み込む方法が広まってから、各店舗で様々な独自デザインを表示するようになりました。
その中でも「イーザッカマニアストアーズ」や「ロウヤ」のように、ヘッダー部にカテゴリーやバナーを表示している店舗を参考にしてはいかがでしょうか?
元々の楽天デザインでは、他ページへの導線がどうしても少なくなってしまうので、その点を強化できているのが大きなポイントです。
また、商品点数が多い店舗では「快適ねこ生活」や「カラフルボックス」のように、ヘッダー部に検索窓を設置して商品を探しやすくする方法なども参考にするべきでしょう。
スマホではUI/UXが非常に大切です。これらの店舗を参考にしながら、利便性を上げていけるようにしていきましょう。

参考:
「イーザッカマニアストアーズ」・・・http://www.rakuten.ne.jp/gold/e-zakkamania/
「ロウヤ」・・・http://www.rakuten.ne.jp/gold/low-ya/
「快適ねこ生活」・・・http://www.rakuten.ne.jp/gold/hinoki/
「カラフルボックス」・・・http://www.rakuten.ne.jp/gold/colorfulbox/
HTMLファイルをメモ帳で編集すると文字化けしてしまいます。フリーソフトで、HTMLを編集できるオススメのソフトを教えてください。

手軽に使えるフリーソフトでしたら「TERA PAD」がおすすめです。
余計な機能がついていないので、メモ帳と同じ感覚で使えて、文字化けの修正も簡単にできます。中級者以上の方には、多機能テキストエディタの「Sublime Text」がおすすめです。
こちらのソフトは世界的に人気で、プラグインが数多く用意されている為、拡張性に優れています。コーディングを快適にする機能がたくさんあるので、現状のエディタに不満のある方はぜひ使ってみて下さい。

●TERA PAD
  http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
●Sublime Text
https://www.sublimetext.com/
1 / 41234