ブログ移行しました
こちらに、ブログ移行しました。
http://carbonara-tsubochi.tokyo/
よろしくお願いいたします。
EC系のスタートアップで働く私が普段使っているツールをまとめました
普段使っているツール
AIをPSDにできる「AI PSD 変換。オンライン フリー — Convertio」
https://convertio.co/ja/ai-psd/
よく、クライアントさんから、イラストレーターでファイルがきたりします。その時にPSDに変換して、バッチが適用できるようにし、バナーのリサイズを早く終わらせるようにしています。
アプリアイコンのサイズを全て書き出してくれる「makeappicon」
一つアイコン作って、それを全てのサイズで書き出してくれます。
タスク管理の「asana」
asanaとToggleを連携させて、タスク（プロジェクトごとに分けた）の作業時間を測るようにしています。
時間管理の「Toggle」
測った作業時間を見て、次回にどこが短縮できるかを考えながらやっています。
デザインレビュー用に使っている「invision」
こちらは、共有でレビューができるツールです。大勢の人に、デザインレビューをもらう場合に非常に便利だと思います。
デザインレビュー用に使っている「aun」
こちらは、1対1でレビューができるツールです。URLを送ると、その人も同じURLで見ることができます。
個人のメモように活用している「ever note」
個人のメモとして、数年ためています。検索できたりして、便利です。
RMSを一瞬で更新できる「編集マッハ」
https://www.commerce-design.net/tools/mach/
こちらは、コマースデザインさんが、無料で提供しているツールです。楽天のRMSからいちいちログインして、編集せずに、一発で編集できます。
git hubとつないで？連携して？利用している「ソースツリー」
https://ja.atlassian.com/software/sourcetree
会社のサイトは、全て、ソースツリーとgithubで管理しています。
バージョン管理の「git hub」
会社のサイトは、全て、ソースツリーとgithubで管理しています。
Google Chromeの便利な拡張機能
画面キャプチャー拡張機能「FireShot」
ページの中のある要素の高さなどを測る時などに使用している拡張機能「Page Ruler」
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=ja
QRコードを生成してくれる拡張機能「The QR Code Extension」
一括で画像ダウンロードできる拡張機能「Image Downloader」
https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj
Gmailのチェック漏れ対策に使用している拡張機能「Checker Plus for Gmail™」
キャッシュをクリアしてくれる拡張機能「Clear Cache」
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja
サイト内のフォントを教えてくれる拡張機能「WhatFont」
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
皆さんも、使っている便利なツールとかあれば教えていただければ嬉しいです♪
バナーを模写してみました〜01〜
普段からピンタレストで、いいバナーを保存しています。
ピンタレストで集めたバナーは、随時、こちらのサイトに更新しています。（更新止まっていてすいません。。）
今回から、勉強のためにバナーの模写をこのブログに公開して、私がいいと感じた点と逆に悪い点も書いていこうと思います。
良いところ
・文字のバランス。
・MAX70%OFFが目立つ。
逆に直した方がいいところ
・女性の体の下が切れていて、不自然。
・文字と女性がかぶっている部分の視認性が低い。
やっていて困ったところ
・フォントを探すのに時間がかかった。結局分からず、似たフォントにしました。（ちょっと太さが違うけど）
・同じ写真を探すのが難しいので、写真系は、模写しにくい。
外人の女性の写真は同じような写真がなかったので、日本人の写真で断念。。
模写したバナーはこちらです
次回は、こちらを模写します。
https://www.pinterest.jp/pin/478718635373055932/
テンプレートエンジンpugを使って、LP用テンプレートを作った話
pugとは、何？
pugとは、htmlを出力するためのテンプレートエンジンです。
pugを使うには、gulpのインストールとgulp pugの設定が必要になります。
なぜ、テンプレートを作ろうと思ったか？
特にECモールのLP用のコーディングは、ほぼどのページでも共通のパーツが多いです。
少しでも早く作業を効率化するために、作成しました。
テンプレート作る際に適している「extends」
まず、ベースとなるpugを作成します。
gista55b486fc929988c50f398b83a4ffeb6
ファイルごとに違うコンテンツを入れたいものには、[block 名前]で書きます。
ベースとは異なるpugを作成します。 そこに、▽を書きます。
gistb65941748e4de39e7043d84fc3535b31
※pugを書く際は、インデントが正しくないと、コンパイルできませんので、注意してください。
[参考]私がpugを勉強する際に見ているサイト
→こちらのサイトは分かりやすくて、いつも、分からなくなったら、見ています。
そもそも、なぜ、pugを使うようになったのか？
今働いている会社が、pugでコーディングが必須です。htmlはダメです。
pugの方が、プログラマーの人たちがやりやすいらしいです。
私がデザインする時に参考にするサイト集
どうやって参考のデザイン探しているの？
とよく聞かれます。
今回は、私が、デザインする時に、参考になるページやデザインのイメージなどを探す時に必ず見るサイトを紹介します。
ランディングページのみのギャラリーサイト
こちらは、リューキデザインさんが運営しているサイトになります。
楽天・ヤフーのページ作成するときに必ず見るサイトです。
ピンタレストで、「ページ 高級」などで検索してみる
https://www.pinterest.jp/tsuboin/banner/
https://www.pinterest.jp/tsuboin/page/
ピンタレストで、いいと思ったページとバナーをボードで分けて集めています。
いいと思ったバナーのどこがいいのかを考えながら、日々集めています。
T-mall(中国)のページを集めたサイト
http://huaban.com/from/skii.tmall.com/
http://huaban.com/from/tsubaki.tmall.com/
http://huaban.com/from/luxgf.tmall.com/
http://huaban.com/from/lecreuset.tmall.com/
前職で、化粧品のLPを作る際に、イメージが見つかったのが、こちらのサイトでした。
以降、こちらも見るようにしています。
[気になっているサイト！]あえてのトップページではなく2ページめを集めたサイト
ツイッターで流れてきて、あえての2ページめを選んでいるのが、面白くていいなと感じました。
見た感じ、すぐ参考に出来そうなので、今後、サイト制作とかする機会ありましたら、参考にしようと思います！
snapmartさんのアプリのここが分かりにくいから自分なりに考えてみた。
まず、他社さんのアプリに関して、物申すことに、大変恐縮いたします。
snapmartを使おうと思った理由
前々から気になっていたサービスで、ちょうど、良さげな写真があったので、登録してみることにしました。 アプリでの使いにくい点や分かりにくい点をまずあげて、自分なりに考えてみました。
下にあるアイコンが分かりにくい
企業リクエストも大事ですが、私は、カテゴリーにどういう写真があるのか見たかったです。
下にあるアイコンも、何の意味があるアイコンなのか、押して見ないと分からず、ストレスを感じました。
出品する際の分かりにくさ
出品する→写真をアップロードすると、すぐに販売中ってなるので、その前に確認と編集がしたい。
タグ追加が、キーワード入力する→タグ追加押すという操作が最初マジで分かりませんでした。
よく使ってるキーワードとかは、みんなが使ってるキーワードが出るかと思いました。
>マークではなく、編集とかの文言の方が分かりやすい。
アプリ開くと企業リクエストがデフォルト
企業リクエストと公式が一緒になってて、分かりづらいので、企業リクエストからと公式を分けた方が良い。
HOTや新着や終了したやつは、並び替えで表示した方が良い。
カテゴリーページの中に入ると写真だけ出てくる
企業リクエストと一緒ですが、新着・売れている順で、並び替えをしたい。
[アプリUIデザイン提案！]勝手に考えてみた！
私が感じた3つの問題点を、自分なりに勝手に考えてみて、snapmartさんのアプリUIを考えてみました。
今回、作成したみたのは、企業リクエストの画面だけ考えてみました。
Webデザインを4年ほどやっていますが、UIデザインとsketchは、初心者的な感じですが、 自分自身の勉強にもなるため、恐縮ですが、書かせていただきました。
今回私でUI考えたsketchファイルはこちらになります
※応募数180枚（リアルタイムで更新）に対して、当選は1枚とかの表記がおもしろいかなと思いました。
↓こちらは、デザインしたsketchファイルとアイコンなどに使用しているUI kitになります
→http://firestorage.jp/download/b17045ab3f14f74b1658e3c607fe2e4ea2df832a
→http://firestorage.jp/download/c5eb8805c862003e09334c55edf640d681840e51
率直に言うと、自分で考えると言って、全部のデザインを考えようと思いましたが、いざデザインすると良い例があまりなくて、難しかったです。。
snapmartさんのサービスは、すごくいいアイディアだと思うので、ぜひ、みなさん使ってみてください！
sketchの勉強もしたいので、引き続きアプリUIを考えながら、sketchをマスターしていこうと思います。
楽天のページはなんで、縦に長いの？
普段どこのECサイトで買ってますか？
普段どこのECサイトで買ってますか？と聞かれると、多分、多くの人がAmazonと言うと思います。
若い人とかでは、楽天を使ってるは、あまり聞きませんからね…。
楽天を使わない理由として、Amazonより、ページが長く見にくいということがあると思います。
なんで、楽天のページは、あんなに縦に長いの？とよく聞かれます
私の予測で書かせていただきますが…
楽天には、楽天大学というものがあり、出店者だけが通える学校があります。
楽天大学に通った時に誰かが、「商品ページにはストーリーが重要です！物語です！！」と熱弁していました。
だから、「商品ページにストーリーが大事だから、ページ長くなってもいいから、いっぱい語らないと！！」と思うようになったんだと思います。実際、この私も、その人の本読んで、いっぱい書かないと思い、当時ページを作ってました。
一部しか紹介できていませんが、こういうのが、俗に楽天メソッドと言われています。
楽天メソッドって何？
簡単にまとめるとこの2つが重要なポイントです
・ひとけ（いっぱいのお客さんが買っているよ！アピールの演出）
・商品を使うであろうユーザーの悩みや物語や歴史やこだわりを書いて、商品の背景にあるストーリーを描く
長いページ作成時の悩み
長い商品ページだと、文字数オーバーになっちゃうんだけど？
運用代行会社で働いていた時に学んだことですが、これらを解決するために、タグ壊しという技を使います。
通常の使えないタグは、こういう風に書きます
そして、特殊なJSやCSSを商品のページに読み込ませるには、この=""を繰り返し書きます
この、タグ壊しを使うことで、通常はできないスマホでのiframeも可能になります。
PCもスマホも通用する、便利な技なので、覚えていただけたら嬉しいです。
[応用編]ページが長いから、アンカーリンク貼りたいんだけど？
楽天の商品ページでは、iframeにすると、アンカーリンクができなくなります。
↑こちらのタグをRMS（iframe置いた場所と同じ場所）に貼り、iframeの中のHTMLに、通常のa hrefを、コーディングの際に指定してください
なにかとECモールは使いにくいですが、こういう技もあるんだということを頭に置いていただければ幸いです
自己紹介
自己紹介
26歳の都内で、WEBデザイン・UIデザイン・コーディングをさせてもらっているカルボナーラつぼちーです。
四国のECショップで3年間EC運営・都内でEC業界のWEBデザイン・UIデザインを2年程度やらせていただいております。
この業界に入った理由
私は、16歳で高校入学から5ヶ月で、経済的な理由で、高校中退をしています。俗にいう、文化祭なども経験していません。
そこから社会人として、飲食店で5年ほど働きました。
17歳の時、「働きながら高卒認定の資格勉強しよ」と思い、高卒認定を独学で勉強してから3年後ギリギリ20歳の時に受かることができました。
そこから、「デスクワークがしたい」と思い、パソコンの職業訓練に通い、3ヶ月後就職しようと思っても、どこも高卒認定だけでは、就職することが出来ませんでした。
その時、学歴不問で受けれることができるのは、webデザイナーでした。
なので、WEBデザインの職業訓練に通いました。
初めて就職したのは、四国のネットショップのデザイナー
四国のど田舎で、未経験で学歴が高校中退の私は、雇ってくれるところがありませんでした。そこで、タウンワークを見ていて、見つけた、某ネットショップのデザイナーとして、働き出しました。
働いて1年目は、商品の切り抜きや簡単な作業ばかりでした。
2年目から、ネットショップ運営全般と言える作業をほぼ全般やるようになりました。商品ページのデザイン・バナーのデザイン・広告運用・ セール企画提案…etc
ただのバイトが、粗利や利益を考えて、セール企画していき、結果がでないと怒られるそれが日常でした。売り上げ目標額が、目標に達した3年目の春に、東京で働いてみたいと思い、辞めました。
一番楽しかったのは、たくさんの大人たちと話せるところでした。
私自身、人と関わるのが疲れていた時期がありました。そんな私を暖かく受け入れてくて、毎日が楽しかったです。
上京したのは大手EC支援会社に採用されたから
よく名前を聞いていた大手EC支援会社に採用されたのは、今から1年前半前くらいです。ま、受かるかどうか分からないけど、受けてみようと思い、受けました。そしたら、一発で受かりました。正直、嬉しくて嬉しくてたまらなかったです。初めて、デザインしたのは、某有名ケーキ屋さん。結論、私には、スピードと基礎と納期に対する危機感と努力が足りなかったと思います。でも、ここで働いていなかったら、ガイド・写真の加工・Photoshopの基本操作を学ぶことは出来なかったので、大変感謝しています。私なりには、頑張ってはいましたが、その頑張りが足りず、1年3ヶ月働いたのちに、やめました。その経験があったからこそ、今でも、自分でデザインチェックリスト作ったり、バナー模写したりしています。
前職辞める時にタイミングよく入った会社が今の会社
前職を辞めるときに、ちょうどタイミング良く声かけいただいて、今の会社に入社しました。今の会社では、EC業者向けに、人工知能でデータ分析するシステムを作っています。今の会社は、システムの管理画面のUIデザインから受託で受けているデザインまで諸々やっています。今の会社でも、まだまだ自分が納得できるデザインは出来ませんが、頑張っています！
ここで急に黒歴史おさらい
16歳で高校中退→役者目指し、初めて上京
当時、今より30kg細く、五反田の劇団に通ってました。
17歳でアコギ習う→都内の某フェスに刺激されて
YUIのチェリーをアコギ弾いて歌ってた。
18歳で美術学校通う→四コマ漫画家目指す
同時に小説家も目指す。
