東村山1丁目 diary

渋谷のIT企業から波佐見焼の会社へ転職!Webディレクション・デザイン・ECなど仕事の話から、食事や映画の感想まで。

3D押し出しベベル

f:id:higashimurayama1:20170418122350p:plain
f:id:higashimurayama1:20170418122409p:plain
f:id:higashimurayama1:20170418122421p:plain
やや遠近感もつけてみた。つけすぎるとフォントが崩れてしまう。

パスのオフセットを重ねるとフォントの角を丸くできるらしい。
http://suzukimemo.com/post-102

トレースオプションの場所

f:id:higashimurayama1:20170418120850p:plain
トレースオプションは、プリセットの右側にある小さなアイコンをクリックすると出てくる。
f:id:higashimurayama1:20170418120906p:plain
カラーモードをグレースケールにしてパスとコーナーとノイズを最大化すると元画像に近くなる。
けど、保存容量が大きくなってしまうので、適度に調整した方が良さそう。

手書きのバナーリボンをブラシに登録する

ペンで紙にバナーリボンの真ん中部分と右半分を書く。
f:id:higashimurayama1:20170416170923p:plain

スキャンしたものをPhotoshopで線画データにし、Illustratorのキャンバスに配置し、トレース。
トレースのオプションはいっぱいあったけど、今回は「画像トレース」>「16色変換」にしてみた。
(どれもあまり変わらないように思えたけど、どうすれば一番元画像に近くなるのかな?)

その後、真ん中部分(B)右部分(C)左部分(A)を作成。
左部分は右部分をリフレクトして作成。
f:id:higashimurayama1:20170416172210p:plain

リボンを囲うような長方形のガイドを作り、ガイドに沿って線なし塗りなしの枠を3つ作成。
枠と一緒にA~Cをスウォッチに登録。
f:id:higashimurayama1:20170416170839p:plain

その後、ブラシ>新規ブラシ作成で、A~Cを選択。
f:id:higashimurayama1:20170416170824p:plain

ブラシに登録されました。
f:id:higashimurayama1:20170416170833p:plain

その後、直線ツールで線を引き、線の上にブラシをドラッグアンドドロップ
すると、線の長さに合わせてバナーリボンが完成。

今回は元のデータに手書き線の強弱が付いていたため、つなぎ目がうまくいかなかった。
線の太さを一定にしてからじゃないとブラシ登録するのは厳しい・・。

f:id:higashimurayama1:20170416170811p:plain

参考にさせていただいた書籍:
井上のきあさん Illustrator Design Method

フォントの縁取り/ずらしカゲ 〜4月は、Illustratorがんばる月間〜

はい、タイトルの通りです。
これまでPhotoshopにばかり頼ってIllustratorをほぼ使ってこなかったので、一通りのスキルが身につくようにがんばります。

最終成果物として想定しているのは、とあるサービスのキャンペーンHTMLメルマガを作ること。
そのメールの中のバナー画像を、Illustratorを使って作ろうと思います。

上記の目標を達成するにあたり、キャンペーンバナー画像を構成する要素を一つずつ練習していきます。
今日は数字を強調するのに使う「文字の縁取り」。

アピアランスパネルで塗りと線を追加するなんて全然知らなかった!
追加したのち、塗りの下に線を置くのがポイント。
線を増やせばよく見かける二重縁取りもできます。
ちなみにフォントのカラーパネルからだと塗りと線の順番を入れ替えられないので注意。
ずらし影は、パスの変形で。

f:id:higashimurayama1:20170413113923p:plain

f:id:higashimurayama1:20170413113927p:plain

f:id:higashimurayama1:20170413133654p:plain

f:id:higashimurayama1:20170413133700p:plain

f:id:higashimurayama1:20170413134147p:plain

※参考にさせていただいたページ
https://www.cherrypieweb.com/weblog/technical/20120128183317.php

※おまけ
Macでアクティブウィンドウのスクショを取る方法
command + shift + 4 → スペース → クリック

利用中ドメインのサブドメインでオンラインストアのドメインを設定する

オンラインストアを立ち上げる際に、ドメインどうしよう?という話になりまして。

メールサーバーとドメインの両方を既にSクラで利用していましたので、そのサブドメインオンラインストアにも適用する形になりました。

という二つの条件でドメインを設定する場合、ドメインのゾーン編集が必要になります。

インフラ面に詳しくなかった私には、この対応にとても手こずりました。
そして更に悲劇だったのが、Sクラさんのカスタマーサポートに質問するとMショップに聞いてくださいと言われ、Mショップに質問するとSクラさんに聞いてくださいとたらい回しにあったことです(T T)

自分で色々調べましたが、用語が難しくて紛らわしいのが辛かったです。
ドメインのゾーン設定」と「DNS設定」は別のことを意味しているの?
SPFレコード」と「TXTレコード」は同じもの?
こんな感じで、何が何だかわからなくなってきます。

一旦まとめました。

DNS

ドメインネームシステム。ホスト名を元にホストのIPアドレスを教えてくれる。

DNSレコード(リソースレコード)

ドメイン名とIPアドレスの対応するデータ。Aレコード、CNAMEレコード、MXレコード、TXTレコードなど色んな種類がある。

DNSゾーン(ゾーンファイル)

特定のドメインDNS レコードをホストするために使用される。レコードの集合体。

SPFレコード

メールの配信元サーバーが偽装されたものではないと証明する仕組みのこと。RFC(インターネットに関する技術の標準を定める団体であるIETFが正式に発行する文書)では、SPFレコードはDNSのTXT RRかSPF RRとして公開するよう定義されている。が、現時点ではSPFという新しいリソースレコードを取り扱えないリゾルバやDNSサーバの実装が存在するため、SPF RRとTXT RRの両方を利用して公開するのだとか。



つまり、以下はほぼイコールと解釈してOK。
ドメインのゾーン設定 = DNS設定
SPFレコード = TXTレコード



結果、以下の操作を行いました。

Sクラ管理画面に入り、

会員メニュー>ドメイン>ゾーン編集

エントリ名:XXXX(サブドメインにしたい名前)
タイプ:A:157.7.183.167 (MakeshopのIPアドレス
タイプ:TXT:v=spf1 include:spf.makeshop.jp ~all

その後、Mショップ管理画面で適用ドメインの切り替えを行う。

以上です。

参考にさせていただいた記事:
http://salt.iajapan.org/wpmu/anti_spam/admin/tech/explanation/spf/

Google Adwords動的リマーケティング広告タグの設置メモ

Google Adwordsの動的リマーケティングタグはオンラインストアのどこに記述すればいいのか?
のメモ。

オンラインストアサービスのカスタマーサポート担当の方に聞いても「サポート外」としか返答をもらえなかったので自分で調べました。
実際には稼働させなかったので間違いがあるかもしれません。
間違いを見つけた方はコメントからご報告いただけるとありがたいですm(_ _)m

動的リマーケティング広告とは:
https://support.google.com/adwords/answer/3124536?hl=ja

1. Google マーチャントセンターに商品データを登録する

https://support.google.com/merchants/answer/160588?hl=ja

データ作成例
f:id:higashimurayama1:20170411150722p:plain

identifier_existsの項目を入れていないとエラーが出るので注意。
https://support.google.com/merchants/answer/6324478?hl=ja

2. Google Adwords で動的リマーケティングコードを取得する

3. オンラインストアの管理画面からコードを設置する

共通部分コード

設置位置:MakeShop管理画面>下段メニュー管理
いじったのはコンバージョンidのXXXXXXXXXの部分だけ。

<!-- リマーケティング タグの Google コード 共通部分-->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXX/?guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- / リマーケティング タグの Google コード -->

商品ごとのコード

設置位置:各商品ページのPC用追加商品説明文
サイトに合わせて3ヶ所変更する必要があり。
変更するのはecomm_prodid、ecomm_pagetype、ecomm_totalvalue。
pagetype以外は使用中のオンラインストアサービスの独自コードを入れるパターンが多いと思います。
(下記[ ]はMakeshopの独自コード)

<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: ‘[UBRANDCODE]’,
ecomm_pagetype: ‘product’,
ecomm_totalvalue: ‘[CONSUMERPRICE]’,
};
</script>

オンラインストア立上げ時に付随するサービス選択ポイント

2017年1月に陶磁器のオンラインストアを立ち上げました。
立ち上げ時のサービス選択ポイントを自分なりにまとめてみました。

ECサイト構築サービス

まず自社の現在の状況を知り、どういうターゲットに向けて売りたいのか、今後サイトをどの程度拡張したいかを考えます。
その上で、選択ポイントは大きく次の5つにまとめられると思います。

1. 実店舗や他のECサイトと在庫連携の必要性があるか
2. 機能カスタマイズの必要があるか
3. 海外展開する予定があるか
4. 商品登録・情報更新作業が簡単にできるか
5. レスポンシブなど今時のデザインを適用できるか(デザインの自由度はどれくらいか)
6. かけられるコスト(人・お金・時間)はどれくらいか

自分が携わった会社の場合、以下のような状況でした。

かけられる人の数…少ない(企画運用1人、生産管理1人、出荷2~3人)
在庫連携…マスト(人員が少なく、MD/SKUが多いため)
かけられる時間…少ない(リリース時期は入社3ヶ月後と決められていた)
かけられるお金…ギフト向け機能と業務効率化のためのカスタマイズにはお金をかけてもいい
海外展開…(社外秘)

国内の主要なECサイト構築サービスのほとんどが、個別カスタマイズと実店舗との在庫連携に対応していなかったため、必然的に選択肢は絞られました。

自分は拡張機能が多く海外展開も容易なShopifyを使ってみたかったのですが、生産管理担当の方が英語が苦手という理由で却下され、結局国内のECサイト構築サービスを利用することになりました。

ちなみに、ECに限らず、導入店舗数・導入実績数をサービス選択の判断基準の一つにしている方が多いようですが、自分はそれだけではあまり意味がないと思っています。
なぜなら、単純にサービスの運営期間が長ければ累計の導入数は多くなるからです。
導入実績を見るなら、累計よりも、直近1年間の導入数の実績や伸び率を他社と比較したほうが参考になると思います。
また、サービスの運営期間が長いと裏側のコードが古くなっている可能性もあります。
無料試用期間をフル活用して、管理画面やデザインをしっかりチェックしたいところです。
(このあたりの記述は自分が以前働いていた会社のサービスのことを遠回しに批判しているように解釈されかねませんが、違います。むしろそのサービスはリニューアル後とても使いやすくなったような印象です。)

機能のカスタマイズをする場合は、打ち合わせを頻繁に行い、必ず議事録を残しましょう。カスタマイズ機能の初回納品からリリースまでの修正期間は1ヶ月は見積もった方が安全確実です。

配送会社

ECと連携できる送り状発行システムがあるかどうかが重要です。
送り状発行システムには、郵便局のゆうプリR、クロネコヤマトのB2Webなどがあります。
ECと送り状ソフトの連携とは以下のような事を指します。

<ECサービス側>
  • ECサービスの注文情報から配送に必要な情報を抽出し、送り状ソフト用にデータ変換・アウトプットできる
<配送会社側>
  • 送り状ソフトで配送済みデータを抽出し、ECサービス向けにデータ変換・アウトプットできる

陶磁器の通販で有名なとある会社さんにお話を伺ったところ、連携効率を重視するなら、楽天クロネコヤマトの組み合わせが一番いいとおっしゃっていました。

また、その他の指標として、破損が少ないことも重要です。
破損が多いとユーザーからのクレーム対応に時間を割かれてしまいます。

配送会社によって運賃・連携効率・配達クオリティがかなり違いますので、何を一番重視したいのか、時間をかけて吟味しましょう。

選択手順:
1. まず使用予定のECと連携している配送会社を探す
2. 3社ほど配送会社をピックアップし、それぞれ運賃の見積もりを出してもらう
3. 梱包配送作業にかけられる人的コストを考慮した上で配送会社を選択する

決済会社

ECサイトとの連携がスムーズかどうかで選ぶのが無難です。
実店舗と連携するためにPOS連携対応も確認しておきましょう。

実際にサイトを立ち上げてみて思うのは、
・クレジットカード
・代金引換
・銀行振込
でほぼ事が足りるということです。
コンビニ決済は、利用者が少ない上入金確認作業が手間ですので不要かと思います。
最近は後払い決済というのもありますが、まだまだ導入事例は少ないようです
(自分の観測範囲では中川政七商店がありました)。
こちらで入金確認を待たずに発送作業に入れるので、出荷業務効率は上がります。ただ、手数料がそれなりにかかるので、平均注文金額が小さいサイトには向かないと思います。

銀行振込について

銀行振込の場合、注文者と振込者で名前が違うと入金確認ができません。ですから、サイトの利用案内と注文画面と注文確認メールに「正確に入金確認を行うため、注文者と同じ振込名義の口座からご入金ください」など注意文を記載することをお勧めします。
また、注文に紐付けた振込先口座番号を都度発行できる楽天ジャストマッチなどのサービスもあります。これを使えば入金消し込みが楽になるのか思いきや、番号を発行・管理する作業が新たに発生するため、トータルの作業効率はあまり上がらなさそうです。銀行振込件数がめっちゃ多くて消込大変だよ〜〜という段階になってから利用検討しても遅くはないでしょう。
銀行振込に使う銀行口座は、EC専用のネットバンキングを用意した方がよさそうです。複数人の口座管理に対応しているものを使うと安全かと思います。(ジャパンネット銀行楽天銀行など、使用者ごとに権限を選択できるもの)
小規模サイトの場合は既存の口座を使って問題ないでしょう。

その他

自分たちのサイトではあまり考慮しなかったものの、実はかなり重要なのが入金確認から発送までの時間を短くすること(当日〜翌日発送対応)だと思います。
その点を最も重視する場合は、選ぶサービスも変わってくるのではないかと思います。

はー、いっちょめいっちょめ。