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

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

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

Category: チャネル全般ほか, デザイン

2018年1月22日 月曜日

イラストレーターを使いランディングページを制作しています。スライス/書き出しをして素材を確認すると、1pxくらいズレて書き出しされて困っています。スライス作業中ではこのようなズレはありませんでした。キレイに書き出し出来るようにしたいのですが、良い方はないでしょうか?

Illustratorでは、デザイン作成時にピクセルに小数点以下の端数が含まれていると、書き出しの際にずれたり、滲んだりしてしまいます。
端数が含まれてしまう原因は様々ですが、制作時にミリ単位でデザインしていたり、アートボードそのものがずれていたり、パスの境界線を中央に引いてしまっているといったことが考えられます。
それらの点に注意しつつ、ピクセルがしっかりと合ったデザインになるように心掛けましょう。
webデザインなどピクセルベースでデザインする場合は、設定の「ピクセルにスナップ」をオンにしておくことで、自動的にピクセルを整数に合わせてくれるので活用するといいでしょう。
Illustrator CC2017では「選択したアートをピクセルグリップに整合」という機能が追加され、複数レイヤーを一括で調整してくれるようになったので、このバージョンを利用している方はこちらもぜひ活用してみてください。

2018年1月19日 金曜日

楽天の商品ページで、PC販売説明文に入れる商品イメージ画像の横幅サイズは、推奨で700ピクセル以上となっていますが、そんなに大きくすると商品が見づらいので少し小さくしようと思いますが、問題ありますでしょうか?

しっかりと商品の特長が判る画像であれば、700ピクセル以下でも問題ありません。商品特性や写真の写り具合によりますが、見やすさが確保されていれば楽天の審査も問題なく通過しますので、見やすい画像を登録してください。

2017年11月1日 水曜日

イラスト風の線画画像の作成で、Photoshopの輪郭検出や、フィルター機能を使って作っていますが、もっと簡単に作成する方法はないでしょうか?また、簡単に作成できるソフトなどがあれば教えてください。

画像から線画にしてくれる「PicSvg」というウェブサイトがあります。
作成したい画像ファイルを「Upload a picture」ボタンを押して選択し、「Download image.svg」ボタンを押してダウンロードするだけで簡単に作成することが出来ます。
「SVG Color」とい項目で線画の色の変更や、「Filters」のドロップダウンメニューで線画の調整など全て無料で利用することが出来ます。

参考「PicSvg」url:http://picsvg.com/

2017年9月11日 月曜日

楽天でパララックスを使用することはできますか?

楽天GOLDを使えば自由度のあるページが制作できるようになるので、jsを利用して実装する事は可能です。パララックスについては様々なプラグインがあるので、それを使うといいでしょう。
GOLD使わない場合は、jsを利用した時のような複雑なアニメーションのパララックスは難しいですが、cssのみのパララックスなら実装可能です。
cssで背景画像を固定するだけの簡易なパララックスなら「各セクションの背景画像をbackground-position: fixed;で固定配置」する事と「テキストやイメージ画像などのコンテンツをposition: absolute;で絶対配置」する事で、ページをスクロールしても背景画像は動かず、そのまま次のセクションに隠れるといった表現が実現できるようになります。

●html—————-
<header></header>
<div class=”one”></div>
<div class=”two”></div>
<div class=”three”></div>

●css—————-
header {
background: url(“../images/bg_header.png”) no-repeat;
background-attachment: fixed;
height: 500px;
}
.one {
background: #333333;
height: 500px;
}
.two {
background: url(“../images/bg_two.png”) no-repeat;
background-attachment: fixed;
height: 500px;
} .three {
background: #666666;
height: 500px;
}

この方法ならば楽天の各ページでパララックスを導入できるので、是非試してみて下さい。

2017年5月17日 水曜日

楽天GOLDを使わずに個性的なデザインのショップを作りたいのですが、参考になるショップを教えてください。

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

2017年5月12日 金曜日

現在、ショップで通常の仕様の通り、商品登録をしているだけですが、特集ページなどを作りたいと思っています。簡単に特集ページが作れる方法はありませんでしょうか?

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

2017年4月25日 火曜日

楽天市場に出店するのですが、商品画像は3点以上ご用意くださいと云われました。商品の画像が少ないのですが、どんな画像を使えばよいのですか?

1点目は、もちろん商品そのものが写ったイメージ画像が良いと思います。
例えば、商品を使用しているシーン、使用している人と一緒に写っているシーン、または特徴的なアングルなどの、ちゃんと商品自体がイメージできるものが良いです。
製造元などのメーカーがHPで使用している写真などがあれば、使用許可をもらって使うのも良いでしょう。
2点目は、例えば商品パッケージなど、外装の写真などを使用すると良いでしょう。素材が無い場合は、デジカメやスマホで撮影してみてください。
3点目は、例えば商品の詳細(パッケージ裏面などに記載された「原材料」「製造元」「生産国)などの情報を写真に撮って掲載してみましょう。
楽天市場では商品画像は、縦横700ピクセル程度のサイズの正方形の画像が良いとされています。できるだけ鮮明な画像をアップロードしてください。

楽天の各店舗のスマートフォンサイトで、楽天の仕様を書き換えて独自デザインを表示している店舗がありますが、その中でも参考にするべき店舗などお教えいただけますか?

楽天のスマートフォンサイトで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/