モノクロタイム

I'm from the future!

【SNSマーケティング】アクセサリーブランドを作ったので販促の為にあれこれやった話

こんにちは、れいじです。

社会人になってからめっちゃブログ放置してる。。。年始からクライマックスの忙しさでした。

そろそろ別の場所で働いてみたいなーとも思いつつ、あまり行動力がないのでした。とりあえず気になっているところは英語必須っぽいので英語の勉強だけはしています

それはさておき。

大学生の時は「東京のIT企業でエンジニアになりてぇ、バチバチに稼いで贅沢の限りを尽くしてぇ、あわよくばコミケに行きてぇ」という歪んだ目的でエンジニアを目指して今働いているわけですが、

3年目ともなると

・ 東京のIT企業でエンジニアになりてぇ←なった

バチバチに稼いで←激強プレッシャーと精神力を引き換えになんとかお金を錬成している

・贅沢の限りを尽くしてぇ←まだ尽くそうと思えば尽くせる、将来的に高級タワマンの上でいい感じのワイン飲むとか貴族の遊びがしたい

コミケに行きてぇ←同期から「夏だけはマジでやめろ」って言われて行けてない

このように大学生の考えるような目的はそこそこ達成できていて、そろそろ次の目標が必要だなぁって感じています

コードしか書けないエンジニアでいいのか

よく「コードしか書けないエンジニアはいらない」なんて言われますが、じゃあコーディング以外に何を勉強するかっていってたどり着いたのがマーケティングでした。ここまでは割と一般的。

自分の作ってるサービスがどういう目的で使われてるのかを考えるのにも役立つし、一石二鳥じゃないかなーと思います。

加えて、最近「真夏のデザインフェスタ」にハンドメイドアクセサリーを展示しにいったのもあって、割と服飾系に熱を上げていたので「あーこれでマーケティング勉強すれば一石三鳥だな」と。

デザフェスを機会に自身のハンドメイドアクセサリーブランドをきちんと作って、マーケティングの勉強をすることにしました。

かくして、「エンジニア」×「マーケター」×「ハンドメイドクリエイター」を一人三役で頑張ってみる目標ができたのでした。

SNSマーケティング神器

将来的に銀座のど真ん中に激マブオフィスビル「CANDY CHUPS Office」をブチ立てたいので、利用できるツールやスキルはなんでも使うことにします。

公式Twitterアカウント

twitter.com

これまで直接中の人(わたし)のアカウントに凸してもらう形式にしていたのですが、きちんと公式アカウントを作ることにしました。

公式アカウントの中の人は私なので結局お返事する内容とかは何も変わらないのですが、これからアカウントを育てていって、よりリーチする層に情報提供していければいいのかなーと思ってます。

あと、TwitterInstagramFacebookと違ってビジネスアカウントにしなくてもインサイトが見れるのでサクッとリーチ数を見たいときとか結構便利です。

f:id:yomoyamareiji:20190825230525p:plain

これまでのアカウントだと気にしていなかったけど、割とこれ便利。どのハッシュタグ付けるとより効果的かとかで模索している途中です。

BASEの各種App

ブランド用として作ったアクセサリーはBASEで販売しているのですが、BASEには公式でApp(拡張機能)が提供されていて、特にプッシュ通知を送ることのできる機能が人気です。

f:id:yomoyamareiji:20190825230922p:plain

新商品の販売を開始した時はTwitterでも告知を出すようにするのですが、Twitterだと(ツイートする時間によっては)漏れてしまうので、ショップをフォローしてくれているお客さんにBASEを経由してプッシュ通知を送れば、気づいて貰えやすい傾向にあります。BASEのプッシュ通知自体切ってたらアウトだけど!

公式Instagramアカウント

Twitterアカウントから数日遅れて、Instagramアカウントを作りました。

f:id:yomoyamareiji:20190825231508j:plain

Instagramにはショップ機能という簡易的なEC機能の仕組みが提供されていて、Instagramで紹介した商品をそのまま購入できる仕組みが存在します(要Facebookアカウント)。

私の場合はInstagramのショップ機能を使わず、BASEのショップへの導線づくりとして使っています。ただしInstagramのコメント欄はURLを書いてもリンク化されないので、商品が気になった場合はわざわざアカウントのプロフィール画面からショップのURLを探し出さないといけません。。。ワンクッションあるので、Twitterよりは導入数が少ないです。ただし、フォロワーではないアカウント(ユニークユーザー)の目に留まる確率は非常に高く、また既読感覚でいいねを付けてくれるので同じような内容の投稿でもInstagramの方がインプレッションもリーチ数も高いです。

Facebookビジネスアカウント

www.facebook.com

Instagramのアカウントをプロアカウントにするときにほぼ強制的に作らされるページで、今のところこちらを直接更新するような使い方はしていません。Instagramへの投稿をFacebookに連携してるくらい。

将来的にFacebook広告を出すことになればいろいろ本格的に使うことになりそうだけど、どのツールに広告を出すのが適切なのか見極められていないので、保留。

タグ付けを恐れるな

TwitterInstagramでよく行われるのがハッシュタグをつけた宣伝ツイートですが、今のようにフォロワーやそもそものインサイトが低いうちはハッシュタグの多用は不可欠だと考えます。

よっぽど有名人か、なんらかのバグでバズらない限り、新規のアカウントでフォロワーが爆発的に増えることはまずありません。そんな中でツイートを見てもらうには(あるいはアカウントをフォローしてもらうには)まず投稿を見てもらう必要があって、知らない人のアカウントをつらつら~っと眺めることができるのがハッシュタグ検索です。

特にInstagramだと、ハッシュタグごとに大まかな投稿数を閲覧できるので、より利用されている・人気のハッシュタグが何なのかがわかります。投稿数が多いということはよりメジャーで、ハッシュタグ検索にもより利用されているのではと考え、投稿にふさわしいハッシュタグを吟味して投稿にくっつけるようにしています。

よくInstagramはタグで文章作ってるなんて言われていますが、今となっては存外笑うことはできないもので、「投稿をいろんな人に見てもらう」「ブランドの存在を知ってもらう」ことが目的で、なおかつ広告を出すかどうか迷っている状態であるならば非常に有用です。ハッシュタグセンテンス最高。

広告課金兵になるか

自社サービス使えって言われるとそれまでなんですが、せっかくなのでInstagramTwitterの広告にいくらか突っ込んでみたいなーと思っています。

ハンドメイド系の広告ってどこで出すのが適切なんだろう。Twitterであまりみかけない気がするけど、私が属するクラスタが違うだけかもしれないですね。。。

おわりに

ありがたいことに、ぼちぼちと作品が売れてきて軌道に乗りつつあるので、この流れを継続していきたいと思っています。

Webサービスを作れるエンジニアはごまんといるけど、Webサービスも作れてアクセサリーも作れて、その上ブランド化して波に乗れるエンジニアってそういないと思うんで、そういう感じになりたいです。

CANDY CHUPS Lab Shopはこちら!!

cclshop.base.shop

【HackDay2018】HackDayに参加して、アクセサリーのデザイン・オーダーメイドサービス「ASYMER」をローンチしました

こんにちは、れいじです。

昨年12月15-16日に行われた「HackDay2018」に参加していました。

hackday.jp

今回は助っ人として機械学習エンジニアをメンバーに迎え、3人でハッカソンに取り組みました。

結果は受賞ならずといったところでしたが、シンプルながらビジネス展開もできそうなサービスが作れたこと、審査員コメントで「すぐにサービスとしてリリースができそう」といったものが目立っていたことから、自分たちが作ったサービスも早めにローンチしてみようということで年末にいろいろ動いておりました。

何を作ったのか

「ASYMER(あしめあ)」というWebサービスを作りました。

Asymer - アシメア

片方だけ無くしてしまったイヤリングやピアスをアシンメトリデザインのアクセサリーとして蘇らせるサービスで、スマートフォンで撮影したアクセサリーの画像を元に、色調やモチーフ検出を行うことでピッタリのアシンメトリーデザインをサジェストします。

材料をすべて手芸店で購入可能なので、ハンドメイドが好きな人はレシピをもとに自作することができます。

もちろんオーダーメイドも可能で、手頃な価格から自分だけのアクセサリーを手に入れることができる・・・といった内容です。

こちらHackDayで開発して、12月20日頃からリリースに向けて準備して、1月2日でめでたくリリースと相成りました。

リリースするにあたって

UIについて

HackDay後に31日か1日に出そうという話をしていたので、ほぼ2週間ないくらいでリリースまでこぎつける必要がありました。なんでこの時期に出したかったかというと、年末年始でローンチすれば何かとインパクトあるんじゃないかと思ったからです。

HackDayで作ったUIをそのままAWSに乗せてリリースするという方向性もあったのですが、全てReactでフルスクラッチで書き直しています。デザインも(ロゴ等を除き)すべて刷新を行いました。

技術選定については完全に「自分たちができる技術」を使うことにしました。ライブラリの選定諸々は少し冒険しましたが、本業がフロントエンジニアで、Reactを使った仕事をしていることもあり、特に何を話し合うわけでもなくReactでやろうといった感じになりました。

決済について

本サービスではオーダーメイドサービスを取り扱っているので、金銭のやり取りが発生します。まだ無名のサービスですし、我々自体もまぁ無名なので独自の決済形式ってやっぱり不安がある。リリースまでの時間もまぁ短いし。

ということで実際の商品注文に関してはBASEに寄せることにしました。

thebase.in

ASYMERが担当するのはあくまでアクセサリーのデザインとパーツのサジェストだけで、あとの注文に関するやり取りは外部サービスに任せちゃおうと。

BASEでは取引に手数料がかかるので、売上金額の数%はBASE側に持っていかれてしまうのですが、逆に「その数%払えば金銭周りのリスクが回避できるならまぁいいかー」ということでこういう形にしています。もしサービスが成長してきたらちゃんとPaypalなり何なり使うかもしれないです。。。

あとはハンドメイド作家の販売ツールとしてBASEがかなり一般的なサービスであることも選択した理由の一つです。一点物アクセサリーを購入したり、あるいは好きなアーティスト、クリエイターのグッズを買うためにBASEを使用したことがある方はそんなに少なくはなさそうでした。

ASYMERに関しては、ある程度の期間までは購入する人が知ってるサービスを使うことで、注文への心理的不安が軽減できればいいのかな、と思っています。

セキュリティについて

投げ銭サービス「Osushi」、開設直後にセキュリティなど不具合露見 運営は一時停止のうえ全額返金対応 - ねとらぼ

ちょうど昨年の2月にセキュリティ面に問題があって騒がれたサービスがあって

Osushiに見るフロントエンドのセキュリティ - Speaker Deck

「早く世に出して仮説検証したかった」というのが先行しすぎた結果諸々炎上しちゃったという例があります。

やっぱり自分で作ってるうちは気づかないんですよね、こういうの。とくにクレジットカードの扱いとかは本当に怖いです。まだまだ自分は未熟だし、このあたり自分で実装できる気がしない。

さいごに

今後はデザインや使用パーツを増やしたりして、様々なテイストのピアスやイヤリングが入力されてもピッタリのデザインを提案できるようにデータの数を増やして行きたいと思っています。

また、材料の購入元であるパーツクラブさんや貴和製作所さんともコラボして新作パーツを使用したデザインの考案などもできたらいいなあと思っています。持ち込みするのめっちゃ緊張するけど・・・

シンプルですが、オシャレなサービスが作れたんじゃないかと思っています。

ぜひ使ってみてもらえればと思います。

ではでは~

www.kiwaseisakujo.jp

www.partsclub.jp

【React】axiosを使用してmultipart/form-data形式の通信をする

こんにちは、れいじです。

年末なので趣味の開発に時間をつぎ込んでいます。Webサービスを作っているのですが、あまり複雑なシステムではないのでreduxなどは導入せずにシンプルに作っています。

APIとの通信に使用するモジュールとしてはredux-sagaとかredux-thunkとかまぁいろいろあるわけですが、上述の通りreduxは導入しないのでこれらは候補に入りません。

なので最近ナウいと噂のaxiosを使用してAPI通信を実装したいと思います。

github.com

やりたいこと

  • ReactAppでAPI通信をする。今回は画像を受け取り、APIに投げる処理を実装したい。

  • 画像をポストする場合の通信形式はmultipart/form-dataとする。

  • 通信メソッドはPOST。

ボタン側

※UIデザインにmaterial-uiを使用しています。そのあたりの記述はうまく読解してもらえればと

material-ui.com

<div>
    <input accept="image/*" multiple type="file" className="input" id="upload-img" onChange={this.uploadFile.bind(this)} />
    <label htmlFor="upload-img">
        <Button variant="contained" component="span" color="secondary" aria-label="Add" className="uploadIcon">
              <CameraIcon />
              UPLOAD
         </Button>
    </label>
</div>

ボタンを押すとファイル選択用ブラウザが開きます。画像を選択した後は、取得した画像をAPIにポストします。

画像を受け付ける部分(uploadFile())

 uploadFile(e) {
    this.setState({
      file: e.target.files[0],
    }, () => {
      this.sendFile();
    });
  };

最新の画像をStateに保持・更新した後にAPIに画像を送ります。

画像をAPIに送信する部分(sendFile())

いよいよaxiosが出てくる部分です

  sendFile() {
    // show loading modal
    this.setState({isLoading: true});
    const params = new FormData();
    params.append('file', this.state.file);
    axios
      .post(
        'https://api/upload',
        params,
        {
          headers: {
            'content-type': 'multipart/form-data',
          },
        }
      )
      .then((result) => {
        this.setState({
          isLoading: false
        });
      },
      )
      .catch(() => {
        console.log('upload failed...');
        this.setState({
          isLoading: false
        });
      });

axiosでPOST通信をするときのTipsとして、paramsをそのままjson形式で送信すると通信メソッドを.postで定義していてもOPTIONになってしまいます。

参考:

qiita.com

ここではパラメータをURLSearchParams()で定義してあげているのですが、今回私はmultipart/form-dataでデータを送りたいので、

const params = new FormData();
params.append('file', this.state.file);

と指定しています。

さらにヘッダーにも

{
    headers: {
        'content-type': 'multipart/form-data',
    },
}

をつけてあげます。これでOK。

f:id:yomoyamareiji:20181231112904p:plain

いいかんじにpostできました。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

【vvvv Advent Calendar 2018】vvvvの薄い本を3冊書いて技術書典4/5で頒布していました

こちらの記事は「vvvv Advent Calendar 2018」の19日目の記事です

qiita.com

こんにちは,れいじです.

2018年は割とvvvvをあれこれやってた年でして,具体的には本書いてました(Not 商業誌)

2017年末にHackDay 10th Aniv.で受賞→YJTC2018でShakeを支える技術という本を無料配布していたので,これを皮切りに執筆やり始めたっていう流れです.

詳しくはこちら↓ reiji1020.hatenablog.com

書いたもの

vvvvでCGプログラミングやってみる本ービジュアルプログラミングことはじめー

4月に行われた技術書典4でこちらを頒布しました.

gyaopan.booth.pm

vvvvのハンズオン本です.そもそもvvvv知らないっていう人から若干知ってる~くらいの人まで多くの方に手に取っていただきました.

頒布時点で最新バージョンのvvvvのインストール~vvvvでのビジュアルプログラミングを行うための基本的なところ~実際にCGを作ってみる部分までを解説しています.

私のブースで立ち止まってくれる方はどの方もオシャレというか,「あっクリエイターさんかな?」って感じで割と同業っぽい感じがすぐわかる方が多かった気がします.

冊子版は完売してしまって再販の予定がないのですが,電子版はBoothにてワンコインで買うことができます.

vvvvでCGプログラミングやってみる本ーSpreadをマスターしてステップアップ!ー

2冊目は10月に行われた技術書典5で頒布しました.

gyaopan.booth.pm

こちらはvvvvのインストール~Spread周りを中心に解説,実際にCGを作る部分を通して本格的なパッチングに挑戦するための本でした.

ステップアップと題したこともあり,もともとvvvvについて少し知っている方向けに書いていますが初心者でも大丈夫です(大丈夫な感じに書いたつもりでした…!)

比較的新しいvvvv(vvvv50系以降)ではSpreadの種類が増え,様々なSpreadを簡単に作ることができるようになりました.これらの使用方法や実際のCGでの活用方法などを1冊にまとめた本でした.

こちらは冊子版・電子版ともにBoothより通販が可能です.

vvvvでCGプログラミングやってみる本ーマイクやKinectを使ってみよう!ー

こちら3冊目ですが,同じく10月に行われた技術書典5で頒布しました.

gyaopan.booth.pm

こちらは実際に外部接続機器を使用してCGを作ってみるTipsの詰め合わせ本になります.

余談ですが1冊目がグレースケール印刷だったのに対し,2冊目と3冊目はフルカラー印刷です.

USBカメラの他,MIDIキーボードの扱い方についても記述しています.

こちらも冊子版・電子版ともにBoothで通販を行っています.

vvvv本は反響があったか

正直ハンズオン本はかなり売れましたが,その後のステップアップ本まで進んでくれる方はまだまだ少ないです.

そろそろ「vvvvをはじめるための動機付け」が必要なのかなーと思っています.vvvvの使い方を提示するのではなくて,「vvvv使うとこんなことできるよー」的な感じ.

そもそも学ぶ動機がないとやってみよう!ってならないですよね.そのためにも採用実績とかは公開していった方がいいのかなーとか思います.

最近は世界中のパッチャーの作品やイベントでの採用実績などの報告が多く(結構有名どころのメーカー・イベントがvvvv,VLを使ったりしている),vvvv公式サイトのブログは頻繁に覗くようにしているのですがまだまだ日本は実績が少ない…!日本でもガンガン実績作って知名度上げていきたいですね.弊社コラボしてくれ頼む…

と思ってたら地味にHackDay2018の弊社ブースでvvvvで作った作品が体験できたのだった.シルエットでダンスを楽しむ「VANCE」という作品を展示していました.ヤフーブースだけどちゃんとCANDY CHUPS Lab.名義で出してもらったよ.

hackday.jp

来年はvvvv本を出すのか

多分出しますし,ニッチのさらにニッチを突く本(VL徹底解説)とか出したいなーとぼんやり考えてます.でも冊子版は作らないかも.

あとは上記3冊を1冊にまとめたコンプリート版とかも出すと思います.これは冊子にすると思う.vvvv本だとやっぱりvvvvookが偉大な教科書的立ち位置なので,私が書いた本はサブ的に使ってもらえる本になればいいなーと考えてます.

おまけ

実は明日「U-30 Yahoo! JAPAN Tech Advent Calendar 2018」で私が書いた記事が公開されます.vvvvの話もちょっと出ますが,大枠としてはメディアアートとかビジュアルプログラミングについての話になります.

挿絵とかも頑張って書いたのでみてみてくださいね.

techblog.yahoo.co.jp

ではでは!

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

  • 作者: Jan Barth,Roman Stefan Grasy,Martin Lukas,Markus Lorenz Schilling,Jochen Leinberger
  • 出版社/メーカー: Schmidt Hermann Verlag
  • 発売日: 2013/06/01
  • メディア: ハードカバー
  • この商品を含むブログを見る