こんにちは。こねぴぃです。
みなさん、ネットでお買い物ってしたことありますか？？
そこで3年間働いていたこねぴぃの体験談です！
（学生の頃だったのでアルバイトです。）
ちなみに年商6億ぐらいあったからわりと人気サイトだったように思う（笑）
あと、 デザイナー歴8年のこねぴぃが、デザインの作業を爆速にするコツも書いたよ！
- ECサイトの仕事に興味がある人！
- 商品ページを早くたくさん作りたい方
- Photoshopの作業効率を上げたい方
もくじ
人気通販サイトの事務所とWEBデザイナーの求人は、田舎にポツンとあった
なんて思ってました。しかし、こねぴぃが働いていた事務所は、田んぼに囲まれていました。
「大きい事務所じゃないと在庫をたくさん置いておけないもんね！」
ですので、家賃の安い田舎にわざわざ建てたようです。
（でかい倉庫を持ってる会社は、田舎に事務所があることも多いよね）
だから、「田舎に住んでるからデザインの求人がない」って思ってる方。
意外と・・・、ECサイト運営してる事務所なんてその辺にあったりするのです。
よーく調べてみると良いですよ・・・！
WEBデザイナーなのに・・・バイト情報誌の求人を見て応募した
大学2年の頃、デザイン系のアルバイトを探していました。
そしたらWEBデザイナー募集の求人を発見。
（地方情報誌w リクナビなどは掲載料が高すぎて載せれなかったらしいw）
「すぐ来ていいよ〜」と言われたので、こねぴぃはWEBデザイナーとして雇われました。
試用期間は時給800円、その後は時給850円（笑）って感じ。
（在宅勤務だとちょっと変わった）
ネットショップ運営のWEBデザイナーの仕事って？
こねぴぃがやっていた仕事はこんな感じ。
- 商品ページを作成する
（楽天によくあるクッソ長い商品説明をPhotoshopで作っていました。）
（ちなみにその当時、ページは長ければ長いほど褒められた。） - 商品を撮影する
（公式サイトに良い写真があれば、わざわざ撮らずにそのまんま使ってましたが。） - 特集ページを作る
（たとえば季節ごとに、ハロウィンとかクリスマス向けの商品をまとめてページにして、リンクを貼ったりしていました。） - 電話対応をする
だいたいが「色が違う」とか「届かない」とか、クレームの電話です。
褒められることはまずない。
だからあんまり電話を取りたくなかった（笑）
ちなみに技術としてはPhotoshopが使えることが前提。
あとはHTMLとCSSを駆使してページを作っていました！
よく社長から、「画像のスライドショーとか、かっこよく写真を動かしてよ！」って言われてたけど。
あれは楽天のショップの「ゴールド会員」（ショップ側に、追加料金がかかる）にならないと、プログラム言語に規制が入るんです。
ページ内でJavaScriptが動かないので、どーやっても動かせないんだよ。
だから、「この楽天のWEBサイトかっこいい〜〜！」って思ったら 「このサイト・・・ゴールドだな・・・？」とこねぴぃは今になっても思ってしまう。
WEBデザインの在宅勤務もやってました！
事務所が田舎にありすぎて、車を持っていなかったこねぴぃは在宅勤務にしてもらっていました。
頼まれてる商品ページをPhotoshopでコツコツと作っていくような仕事です。
在宅勤務では成果給でした。
そしたら 月給22万になっちゃってね。
社長が「意外と速い・・・！（大学生にこんなに払うんかよ！・・・）」ってなってた。
（※正社員を手取り12万で雇ってるぐらいケチだからね）
ちなみに似たような仕事、クラウドソーシングとかおそらくランサーズなどにあります。
在宅でWEBデザインのお仕事を探している方は探してみたらいいと思います！！！この情報とセットでどうぞ！
「どうやって商品ページ作成の仕事を時給2000円レベルまで早くできるのか」
をざっくり紹介します。
(ちなみに単価が良ければ、これ以上稼ぐことは可能だと思う。）
どうやれば早く商品ページを仕上げられるの？
それでは、どうやったら商品ページを早く作れるのかを紹介します。
ちなみに、商品ページをどれだけ凝ったらよいかは、あなたの仕事先や商品がわからないのでなんとも言えませんが、、
こねぴぃの働いていた会社は「とにかくたくさん商品ページを入れて！」という方針だったので、テンプレート的に入れていました。
クオリティよりも速さ重視だった。
ですので、クリエイターというよりかはオペレーターに近い方法です。
クリエイティブなところは後から肉付けしてあげてください。
とにかく爆速化のために、いろいろと「テンプレート化」しちゃうと良いです。
まずPhotoshopのショートカットを覚えよう
Photoshopのショートカット早見表がadobeのサイトで配布されていました！
全部は覚えなくていいと思うけど、とりあえず、使いそうなショートカットは覚えてくださいなー。
出典: adobe公式サイト
単純作業は、Photoshopでアクションを作ろう
商品ページ作ってると、同じことばっかりやってませんか？
あれは単純作業の塊だと思っています。
たとえばカンバスサイズのでかいjpgを、800×600pxに統一したいとか。
文字サイズやフォントを一括で変えたいよ〜とか。
アクションに登録しとくと便利ですよ〜〜〜！
「これ、できるの！？？？」っていうアクションでも試すと意外とイケることもあるので、たくさん実験してみることをお勧めします。
よく使うアクションはF1〜F9に登録しておくといいよ！
Photoshopでアクションを登録したら、ドロップレットを活用しよう
ドロップレットって何？って方はたくさんいると思うので・・・
「アクションで登録した作業を一括で実行する」って感じです。
ドロップレットの作成方法
これを作っておくと便利！
Photoshopのアセットを使おう
PhotoshopCC2015あたりからの新機能です！
アセットを使えば、画像を切り出すのが爆速になるので、WEBデザイナーさんには必須機能。
これはマジで覚えておいた方が良いです。
レイヤーからのアセット生成
レイヤー名とかフォルダ分けとか、てきとーにやってませんか？
これをやっておくと、PSDレイヤーの中身もめっちゃ綺麗になるよ！！！
【上級編】Photoshopのデータセットを活用しよう
ここまでくると上級編になってきます！
データセットの設定はけっこう難しいです。
「わからん！」と思ったら、多少の画像差分なら手作業でやったほうが早いかも。
あかつか ゆうこさんのブログ記事がめちゃくちゃ分かりやすいので貼っておきます。
http://blog.yuko-design.com/design/4335/
30枚〜100枚ぐらいの画像差分を機械的に作りたいんだったら、試す価値ありです。
【超上級編】自分でJSXを作っちゃう
ここまでくると効率化の鬼になってきますが、Photoshopは「JSX」というスクリプトをいれることができます。
単純作業しかできない「アクション」ではできなかった複雑な作業が、JSXを読み込むとできるようになります。
こねぴぃの自作スクリプトもあるよ〜〜〜！！テキスト入力が爆速になるので試してみてね。
たとえばDearpsさんで配布されている 「ぶっこ抜き」というスクリプト。
http://dearps.lovwar.com/2010/12/27/bukko/
レイヤー名を一括置換してくれるGroup Layer Renamingというスクリプトも。
https://www.tam-tam.co.jp/tipsnote/html_css/post12129.html
この辺はめちゃくちゃ便利なので、配布スクリプトを探してみるのも良いかも。
ただ、デザイナーさんでここまでJSXを組める人は相当レベルが高いです（笑）
もし「自分オリジナルのJSXを一から作りたい！」と思った方はこちらのページがおすすめです。
Photoshop自動化作戦
http://www.openspc2.org/book/PhotoshopCC/
ただ、自作スクリプトまでいくと、プログラミングができない初心者のJSX作成は、挫折間違いなしです。
もしあなたの周りにプログラミングが得意な人がいたら、頼んでみるのも良いですよ。
うちの旦那（プログラマー）はPhotoshopを使ったこともなかったんですが、頼んでみたらJSXを20分ぐらいで作ってくれました。
（私が1ヶ月かけても完成しなかったのに）
JSXで詰まったら、Adobeフォーラムで質問してみるのもおすすめです。
作業効率UPさせると、ECサイトのWEBデザイナーは楽しい
こんな感じで作業効率をUPさせて、時給を上げていきました。（笑）
「よくわからんけど速くやりたいっ」って方は「アクション」と「アセット」さえ覚えておけば十分です。
あと、配布されてる便利スクリプトを探す（笑）
成果給の人、定時で帰りたいデザイナーは覚えてて損はない機能だから試してみてね！
あと、もっとPhotoshop高速化を目指したかったらこの本がおすすめ。
残業減らしのメンタル面ってどうしたらいいの？って方はこっちの記事もおすすめだよ！
