Welcart 1.3.3 がリリースされました

Welcart公式サイトにて、Welcart 1.3.3 のリリースが発表されました。

http://www.welcart.com/community/archives/5055?utm_medium=twitter&utm_source=twitterfeed

更新内容は以下のようになっています。

* 一部のサーバー環境で、incart_checkでのリダイレクトがうまく行かない不具合を修正
* 商品一括登録で、postnameにスペースが入るとリンクが利かなくなる不具合を修正
* カスタム・メンバーフィールドにシングルセレクト項目を追加するとNoticeが出る不具合を修正
* wc_templatesを使用していると、商品詳細ページにパスワード保護がかからない不具合を修正
* ゼウスの入金おまかせで、決済処理途中でキャンセルされたときでも、受注データが作られる不具合を修正
* 受注データ削除時に、使用ポイントを戻すよう仕様を変更
* 受注データ編集画面の「配送希望日」の表示日数を変更できるようにするよう仕様を変更
* フロントから会員情報が削除されたとき、管理者にメールを送信するよう仕様を変更
* イプシロンの注文番号を、受注データ編集画面に紐付けするよう仕様を変更
* ゼウス決済で、セキュリティーコードとクイックチャージとの併用を可能に変更
* 関連商品の画像サイズのフィルターフックを追加

テーマに関係する変更はございません。

「テーマに関係する変更はございません。」となっていれば、テーマレベルで対応する作業がないことを示されています。

Welthemesのデモサイトでは管理画面からプラグインアップデートを行いました。

DemoSite1: https://demo.welthemes.com/?themedemo=welcart_novel
DemoSite2: https://demo2.welthemes.com/?themedemo=welcart_hipster

オンラインショップにおける商品写真の考察

オンラインショップにとって、商品画像は命といっても過言ではありません。

手間や機材コスト、最終的な成果物のクオリティを考えるとプロに依頼するのはかなりよい選択だと思いますが、最近は機材のコストも安くなり自宅で撮影する方も多いのではないかと思います。

基本的な物撮りの知識やテクニックは沢山の参考書に任せるとして、ここでは撮影パターンについて考えてみます。

商品写真の種類として、

  • 背景付き写真
  • 抜き写真
  • イメージ写真

と3つに分けてみます。
以下、Welthemeでダウンロード可能なテーマを事例とし、スクリーンショットをクリックするとそのライブデモが表示されます。

1. 背景付き写真

screen 2013-06-24 at 18.48.06

バック紙なり、雰囲気のあるテーブルなり、背景を入れた写真です。
商品だけ、あるいは商品の1部分にピントを合わせて周りをボカシを入れる。いろいろなテクニックがありますが、立体感、空気感、雰囲気を感じることができる最も良い方法です。

上の写真では白背景を完全に飛ばして見せていますが、画像としては「背景を含めそこにある商品の様子」を撮っているもので、奥行きを感じる写真です。

これは立体的な商品(つまりほとんどの物)に適しています。

2. 抜き写真

screen 2013-06-24 at 18.51.30

商品の輪郭で切り抜いた写真です。
非常に手間のかかる作業ですが、アパレル系でよく見られオンラインショップなどでやるととてもかっこよく見えたりします。

ファッション誌ではよく見られますが、シャツを下に置き、適度にシワを作り、撮影。そして周囲を切り抜いていく。

Webではpngという透過画像として扱えば、サイトの背景に馴染んでとてもかっこよく見せることができます。

Hipsterテーマでは、このサンプルをデモしていますのでぜひご覧ください。

https://demo2.welthemes.com/?cat=7&themedemo=welcart_hipster

背景色との境界=商品の輪郭となるだけでまるでファッション誌の1ページのように見えます。

服のように、平面的な商品の場合はとても使えるテクニックです。

3. イメージ写真

screen 2013-06-24 at 18.53.27

商品そのものではなく、それを使っている1シーンを見せていくテクニックです。
ロケーション、モデル等、周りに映り込む全てに配慮する必要がありますが、「その商品がどうか」ではなく「その商品のある生活がどんなに素敵か」を提案することは、物を売るにはとても重要なポイントです。

1つ1つの商品すべてに対してそういった写真を用意するのは難しいですが、トップページのイメージ写真だけでも、そういう写真を用意できるとよいでしょう。

商品写真の大切さ

商品そのものがどんなに良い物であったとしても、写真が良くなければ全く伝わりません。逆に、商品がさほど良い物ではなくても写真のセンスによって売れてしまうという面もあります。

問題は、どんな商品であれ適当に撮るよりはちゃんと撮る必要があること。また本当に良い商品が、良い写真で売られているというのは、売り手も買い手も継続的にハッピーになれる最高のショップだと言えるのではないでしょうか。

Welcartテーマのショップロゴをカスタマイズする

Welthemesのテーマでは、ショップロゴにそれぞれデザインの雰囲気に合ったWebフォントにしています。(Webフォントについてはこちら

分かりやすい例としては「Espresso」テーマでは特徴的なWebフォントを読み込んでいます。
https://demo.welthemes.com/?themedemo=welcart_espresso
screen 2013-06-23 at 18.22.20

Webフォントを利用している理由は明確で、ダウンロードして使って頂くテーマなので「最初から固定のロゴ画像を入れる訳にもいかず」かといって「一般的なPCフォントではデザインができない」からです。

ですが、実際に利用する際にはまず最初にカスタマイズしたくなる部分だと思います。
ここでは、具体的にどのようにカスタマイズするとよいかを解説します。

お店のロゴ画像にする場合

customizer_logo

お店のロゴが決まっていたり、画像でしか表現できない場合(特殊なフォントやマーク等)は画像ロゴを設定します。

付属のマニュアルファイルにある通り、
Wordpress管理画面 > 外観 > 現在のテーマの所にある「カスタマイズ」 
をクリックしてカスタマイズモードに入ります。

そこで、「ショップロゴ」という部分に画像をドラッグ・アンド・ドロップして完了です。

シンプルにフォントで済ませたい場合

例えば、

  • 既存店舗として統一ロゴがあるわけではない
  • 全く新しく立ち上げるオンラインショップ

のような場合はロゴ画像はまだないかもしれません。

その場合、最初から設定してあるフォントのままでよしとするか、あるいは自分でWebフォントを選んでみましょう。

Google Webフォントから選ぶ

本格的なWebフォントのサービスは有料ですが、Googleが提供しているGoogle Fonts は無償で利用することができます。

GoogleFonts

  1. http://www.google.com/fonts/ から好みのフォントを選ぶ
  2. Quick-use をクリック
  3. 「Add this code to your website:」とある部分のコードをコピーし、テーマファイル header.php のの直前にペースト(そこにはデフォルトで選択したフォントのコードがあるので、それは削除しておきます)
  4. 「 Integrate the fonts into your CSS:」にある「font-family: xxxxxxxx;」というCSSをコピーし、「テーマ名.css」の「h1#site-title」という部分に貼り付けます。(ここでも初期設定状態のfont-family 指定は削除しておきます)

これで、ショップのタイトルが先ほど選択したフォントで表示されていると思います。

有償になりますが、Typekitのように本格的な物もあります。
https://typekit.com/

シンプルなテーマでは、ロゴとトップページの写真、商品写真が、そのショップの印象のほとんどを占めることになります。
つまりそれらをちゃんと自分のブランドイメージに合ったものに入れ替えていくだけで、他にはない個性を出すことができます。

シンプル系テーマ

Tips: Welcart商品登録のコツ

Welcartの「商品画像登録」について解説します。

商品画像のしくみ

Welcartでは、商品登録の画面でアップロードするということをしません。画像に関しては商品登録画面ではなく、WordPressとしての「メディア」という所で全てを管理します。つまり、別々の場所で登録し、商品コードとファイル名の一致により紐付けされ、画面に表示されます。

この特徴的な仕組みは聞いただけでは「分かりにくい」と感じる人が多いようですが、仕組みを理解してしまえば実は作業がとても楽ちんです。

1. 商品コードを決める

商品コードはここ

商品コードはここ


まず自分の商品全てには商品コードというものがあると思います。なくても自分で考えて付ければよいのです。
例えば「ジャンル頭文字+商品名頭文字」のように決め「AB001」とするなど。
要は全商品、そして将来的に増え得ていっても、規則的に命名でき、さらに商品コードが分かれば一瞬でその商品が出てこればよいのです。
上の画像の例はあまりよくありません(笑)。将来的に白くて鳥の形をした商品が出てくるかもしれないので。

2. 商品画像のファイル名を整理する

画像ファイル名を商品コードに合わせる。サブ画像は「-02」と連番にする。

画像ファイル名を商品コードに合わせる。サブ画像は「-02」と連番にする。


そしてその商品の画像ファイル名を「AB001.jpg」とします。
複数画像がある場合、サブ画像のファイル名を「AB001-02.jpg、AB001-03.jpg、AB001-04.jpg」とします。

この作業は面倒に思えますが、Photoshop等で画像処理する場合は、書き出し時にそのルールで命名するだけのことですし、パソコン上でそのようにファイル名整理しておけば後々の管理や検索がとても楽になります。

3. 一気にアップロード

screen 2013-06-19 at 11.46.00

画像ファイル名が整理できれば、あとは管理画面のメディア > 新規追加 にある「ここにファイルをドロップ」というエリアを開き、画像ファイルを全部選択してドーンと放り込むだけです。

もう何十枚の写真でも一瞬でアップロード完了し、登録された商品データと自動的に紐付けされ商品ページが出来上がります。

先に画像をアップしておくか、先に商品データを登録しておくか、はどっちでもよいと思います。先に画像がアップロードされていれば商品データ登録した瞬間に表示されるので分かりやすいかもしれませんね。

まとめ

普通に考えると「商品登録画面で画像もアップロードする」ものと思いがちなので、この仕組みに違和感を感じる方は多いかもしれません。

しかし「文字情報の入力」と「ファイルのアップロード」という作業をあえて別にして、しかも画像はWordPressの優秀なメディア管理機能に任せてしまうというのは、実はとても便利だと思います。

何と言っても、登録作業が非常に楽です。ファイル名整理した画像を「全選択してドラッグ・アンド・ドロップ」で一瞬で完了するのですから。
この辺りの動きだけであれば、Welcartのデフォルトテーマでも体験できるのでぜひお試し下さい。

公式サイトの解説はこちらです
http://www.welcart.com/documents/manual-2/%E5%95%86%E5%93%81%E7%94%BB%E5%83%8F%E7%99%BB%E9%8C%B2

Welcartデザインテーマ:Hipsterリリース

Hipster-Responsive-Screen

アパレルやセレクトショップ系オンラインストアを想定したテーマ Hipster をリリースしました。

画面いっぱいに広がる大きなスライド画像、そして商品画像が主役となり、ヘッダーやナビゲーションは極めてシンプルにまとめられています。

Next Posts