VTRyo Blog

一歩ずつ前に進むブログ

「わかばちゃんと学ぶシリーズ」でお馴染みの湊川あいさんにアイコン制作依頼したらすごい反響だった！

しがないラジオ ブランディング

「わかばちゃんと学ぶ」シリーズでお馴染みの湊川あいさんにアイコン制作を依頼したら、良 い反響がたくさん来たのでご紹介しようと思います！

湊川あいさんとは

フリーランスのWebデザイナー・マンガ家・イラストレーター。 マンガと図解で、Web技術をわかりやすく伝えることが好き。著書「わかばちゃんと学ぶ」シリーズのほか、SchooにてGit入門授業の講師も担当。

今やわかばちゃんと学ぶシリーズで有名ですね！

先日行われた技術書典4で頒布された「マンガでわかるdocker」は現時点で1200部を超える状態となり、伝説と化しています。

blog.vtryo.me

依頼をした経緯

私がアイコン制作を依頼した経緯は、#しがないラジオmeetupに参加したところからです。

なぜこう思ったかというと、もともとMorixさんが個人名刺を作った話を聞いていて「それいいな」と思っていました。

そしてこのMeetupの日、もんりぃ先生の名刺を頂いたときに似顔絵アイコンだったんですよね。
さらに、もんりぃ先生のそのアイコンは湊川さん作でした。

「あ〜これすごいいいな」って、そう思って、その場でなんとか湊川さんにお仕事の依頼をさせて頂きました（笑）

湊川さんに依頼したいと思った主な３つの理由

１．アイコンの雰囲気がとてもよい

湊川さん作のアイコンを使用している方々は、業界で名が通っている方が多いと思っています。
なので、比較的にその方とリアルでお会いする機会や、写真を拝見する機会があります。

そういったときに「アイコンの雰囲気ママだ！」という体験が、実際に私の中でありました。

湊川あいさんが制作したicon

なので、私と関わってくださる方に「私はこんな感じですよ〜」「あ、ほんとだ！」という体験をしてもらえたらいいなと思ってました。

２．デザイナー領域を超えたお仕事

てぃーびーさんがアイコン制作を依頼したときの記事が、非常に湊川さんのスキルに詳しいです。

プロのイラストレーター「湊川あい」さんに個人アイコン制作を依頼してみたら評判がよかった

てぃーびーさんが湊川さんと非常に濃いBrushUPを繰り広げている様子が書いてあります。

初期発注要望から拾い上げた情報を分析し、
いいアイコンの法則を踏まえながら、てぃーびーさんの職業……イメージ……モチーフなどをラフに落としてこんでいます。

こちらを読むと、「自画像をただイラストに起こすだけでなく、きっとこちらの要望を捉えてくれるだろう」という期待をせずにいられません！

さらに、てぃーびーさんのこちらの記事は今から3年も前です。

「3年前でこのレベル感……！」

現在も進化し続けている今の湊川さんがどのようなアイコンを作られるのかと、とてもワクワクしました。

３．リスペクトしている人に制作してもらうということ

初めて湊川さんを知ったのは、『わかばちゃんと学ぶ Git使い方入門」でした。
Web業界に転職したあとにGitを学ぶ必要があったときに、こちらで学びました。

そして、初めてリアルでお会いしたのは「ゼロから始める技術書執筆」という勉強会。

ここで話されていた内容や、湊川さんの経歴と現在までの努力を見て感銘を受けたことからずっとファンであります！

やはり、アイコン制作に限らず、お仕事を依頼するなら自分が尊敬している人がいいなと思っています。

実際に作成頂けることも光栄ですし、なによりとても嬉しい。

それだけで、きっと今後の「しがないライフ」を向上させてくれるだろうとも思いましたし、
「このアイコンに見合う人間になろう」と奮起できそうです。

上記の理由も含め、今回の制作依頼に迷いはありませんでした。

実際の様子

ここからは実際のやりとりです！（なおこの記事の執筆がアイコン納品後なので、画像内のアイコンも現在のものに変わっています）

私はTwitterのDMでやり取りさせて頂きました。

↓最初に送ったメッセージ。

お忙しい中、DM失礼します。Ryoです。
先日はありがとうございました！
今日はイラストのお仕事をご依頼したくご連絡しました！

昨日少し考えたのですが、せっかくなので人物をイラスト化してもらえたら嬉しいなと考えてます。
恥ずかしながら、プロの方にこうしてお仕事を依頼すること自体が初なので、以下のパターンの相場等をご提示頂ければ幸いです。

・人物画像のみをイラスト化する場合
・モチーフ＋人物画像を混ぜてイラスト化する場合

アイコンの使用目的は以下です。
・SNSのアイコン（Twiiter, FB, Wantedly他）
・ブログ等のアイコン
・個人名刺

ご連絡お待ちしております！

このあと、湊川さんからご連絡を頂きました！
お値段はその時々で湊川さんとご相談という形になりますので、発注時にご相談してみてください。

f:id:vtryo:20180714115953p:plain

icon - llminatoll 湊川あいが制作したアイコンイラスト（一部）

そして進め方についてのご連絡を頂きました！

f:id:vtryo:20180714115958p:plain

f:id:vtryo:20180714120002p:plain

f:id:vtryo:20180714120009p:plain

そして私の初期発注がこちら。「実際にどうみせたいか」という話を公開するのは中々恥ずかしいですね（笑）

こんにちは、お疲れさまです。まとめてみましたのでご確認おねがいします！

・概要
モチーフにしているバイクと似顔絵で、キャッチーなアイコン

・似顔絵 or アバター
似顔絵＋モチーフ

・イメージカラー
黄色、赤、オレンジ
→明るさ、幸福さ、積極性を印象づけられればなーと思うのですがなかなか難しいです。
モチーフにお送りするバイクの色が赤なので、赤が結構ありなのかなあとも考えてます。
色に関しては、こちらを参照してます（http://utatanenikki.hatenablog.com/entry/2015/10/17/141643 …）

・伝えたい雰囲気
○楽しそう
○活動的
○話しかけやすそう

SNSやブログが最初の接触と想定して、アイコンを見たときの印象に「気さくさ」や「この人は楽しそうに仕事しているなあ」という雰囲気を伝えたいです。
なので、似顔絵・モチーフはデフォルメされていてもよいかなと思ったりします。

・見せたい要素
○エンジニア職なのでMac？
○モチーフのバイクで自由さ（バイクは自由の象徴と言われたりします）
○活動性（フットワークの軽さ感）

・補足（イラストに関連しそうな内容）
○Sierの孫請けからWEB業界に転職して人生を変えてもらった（不自由な業界から比較的に自由に働ける世界にこれた）
○現職：SRE（AWSエンジニアとも名乗ります）https://furien.jp/columns/327/
○ブログなど文章を書くことが好き

このあと、自分の顔写真と、バイクの画像（モチーフ）を送信しました。

f:id:vtryo:20180714120013p:plain

このあと、ラフを頂きました！

ラフ１

f:id:vtryo:20180714115914p:plain

ラフ２

f:id:vtryo:20180714115919p:plain

ラフ３

f:id:vtryo:20180714115924p:plain

ラフ３枚目では、口を開けて描いて頂きました！

f:id:vtryo:20180714120018p:plain

f:id:vtryo:20180714120022p:plain

それから、ウィンクさせてみてほしい！という要望を伝えてみました。

ラフ４

f:id:vtryo:20180714115929p:plain

ラフ５

f:id:vtryo:20180714115934p:plain

ラフ４は少年漫画風の眉、ラフ５はにこやかな印象です。

私は少年漫画風の眉がいいなと思いました。ただ、本人と乖離があるとよくないかな？と思ったので、湊川さんに聞いてみました。

その後「本人と乖離があっても、特に問題があったことはないよ！」というお返事をいただいたことと、以下の記事を参考にして、よし行こう！と判断しました。

ラフ６

そしてそのあとすぐ、赤背景のラフが届きました！とてもよい！

f:id:vtryo:20180714115938p:plain

ここで、黄色背景も迷っていたことを伝え、ちょっと見せていただくことに。

ラフ７

f:id:vtryo:20180714115943p:plain

f:id:vtryo:20180714120035p:plain

構成の迷い

赤と黄色を見せてもらったことで、かなり迷いました。どれも良さそうに見えてくるんですよね（笑）

あとは、構図の問題がありました。せっかく描いて頂いたモチーフが見えないのはもったいなーと。 f:id:vtryo:20180714120040p:plain

f:id:vtryo:20180714120043p:plain

f:id:vtryo:20180714120047p:plain

ラフ８

ということで、さすが湊川さんです！こちらがそのラフ。
Macだけにしました！バイクも私のアイデンティティだったので入れようかと思っていたのですが、赤背景がそのアイデンティティを引き継いでいるとおもったので、この形に。

f:id:vtryo:20180714115948p:plain

こちらのラフで、仕上げに入っていただくことにしました！

完成

f:id:vtryo:20180714115850p:plain

おお〜〜〜〜〜！
私は完全にイラストは素人なので、ラフがこんなふうに変わるとは全く想像できてませんでした！（いい意味で！）

ラフと完成って全く違うんですね。その過程も見ることができたので、本当に良い経験でした。

オリジナル

「左上の余白の部分は、プレゼン資料でのタイトル画面の文字入れエリアとして / ブログのアイキャッチの文字入れエリアとしてご活用いただけるイメージです。」

ブログやプレゼンが多いので、このお気遣いは非常に嬉しかったです。

f:id:vtryo:20180714135125p:plain

正方形

SNS等に使えるように正方形も頂きました。

f:id:vtryo:20180714135130p:plain

Twitterカバー

カバーとてもよいですね。赤すぎず、やわらかさを出しながらも雰囲気を維持しています。

f:id:vtryo:20180714135137p:plain

ありがとうございました！

f:id:vtryo:20180714115910p:plain

公開。そして反響

さて、納品後さっそく公開させていただきました。

リプの様子

f:id:vtryo:20180714115854p:plain

f:id:vtryo:20180714115858p:plain

f:id:vtryo:20180714115902p:plain

湊川さん

てぃーびーさん

みなさま

アツい連鎖反応！

やはり依頼してよかった！と思ったこと

運気が上がっている？

てぃーびーさんの記事に書いてある通り、湊川さんはいいアイコンの法則を知っており、さらに表現することができます。

アイコンは笑顔で私の方を見てくれています。それに釣られるように、自分自身の気持ちも押し上げてくれているような気持ちになります。
実は笑顔に関する心理学や脳科学の実験論文はあったりしました（ぜひ探してみてください）。

わかりやすいWEB記事をおいておきます！https://ferret-plus.com/8636

ちなみに湊川さん自身の幸運が付属しているという噂。
非科学的だと湊川さんはおっしゃってましたが（笑）

本当に話題になった

こちらのブログを5/31に即日公開してもよかったのですが、6/1にまたイベントがあったので少し様子見をしてみました（笑）

実際にしがないラジオも聴いていただいてようで、アイコンとの一致感もきちんとあったようです！やったね！

今後もよい効果が出てきそうです！

費用対効果の大きさが異常

お願いしてよかった、という感想につきますね。
それはこのブログの長さと内容に表れていますかね（笑）

プロの方はもちろんたくさんいらっしゃると思いますが、WEB業界で勢いのある方に書いて頂けたこと、それ自体が私の力になったりします。

このアイコンに恥じぬように私も頑張っていきたいです。

おわりに

さて、長文を最後まで読んで頂きありがとうございました！

また、お忙しい中でアイコン制作を受けてくださった湊川さんに感謝です！
がんがん使わせていただきます！

湊川さんへのお仕事依頼したいとき

関連リンク

blog.vtryo.me tbpgr.hatenablog.com blog.vtryo.me