徒然畑

徒然なるままに。

【制作メモ】GIFアニメ簡単だよ3ステップでできちゃうよという話【animation】

どうもです。おせち美味しかったです。

先日思い立ってGIFアニメ作ってみました。
今年はアニメーションをやる、と去年の暮れ頃決意していたということもあり、一番とっかかり安いと言われるGIFアニメにトライしてみました。
作ってみた結果言えることとしては、イラスト描けるよ!という人にとってはちょー簡単です。私みたいな動物が動物に見えないものを描く人間でも描けるくらいです。もっといえば、イラストを描かなくても自分で用意できる画像が何かあれば作れます(最低枚数2枚)。
今回は実際の私の制作過程を晒しながらどんな感じか説明します。

【作業環境】
CLIP STUDIO PAINT EX(作画用)
Photoshop CC(アニメーション用)
※クリスタにうごイラ作成機能があるのでそれ使えばクリスタ一本で行けますが、今回はフォトショさんを使ったアニメーションGIFをやってみたかったのでこの二つを使用しました。

ステップ1:画像を作る or 準備する

まずは画像を準備します。年賀用GIFということで鏡餅犬を描くことにしました。

【下書き】
鉛筆でグリグリ書きながら発想を膨らませます。

f:id:mio_U_M:20180104182217j:plain

犬を吠えさせて2018の1を補う(ワン = ONE )という薄ら寒い親父ギャグかましてみることにしました。
可愛く描けばきっと許されるという目論見をここで持ちます。

【ペン入れ〜仕上げ】
ここでクリスタで作業します。仕上がりはこんな感じ。

f:id:mio_U_M:20180104182856p:plain

午年の時に鏡餅馬の年賀状を描いていたので、そのデータをうまいこと引っ張って来てうまいこと手を抜けるところを手を抜きます。
あと普通にイラストを作るのと違い、画像作るタイミングでアニメーションの差分を作ります。ステップ2の画像書き出しに向けてレイヤー分けをある程度考慮しておくのがポイントです。
今回は

  • ONE以外の数字が一個ずつ登場するアニメーション
  • 右の犬が吠えるアニメーション
  • 右の犬が吠えてONEが出てくるアニメーション

の3つの要素を盛り込みたかったので、数字のレイヤー分けと犬の口元の差分作成を心がけました。

f:id:mio_U_M:20180104201131j:plain

f:id:mio_U_M:20180104201138j:plain

正直口元の差分は2つでもよかったかもと思ってます(人間の目優秀なので)。
ただ差分を増やした分動きの滑らかさが増すので、そこは作りたいものの雰囲気次第というところでしょうね。
(今回は様子見ということで3つにしました)

可愛く描けなかったのでさっきの目論見が外れそうな気がして来ましたがとりあえず横に置いて次に進みます。

ステップ2:画像を書き出す(セル作り)

レイヤーを表示したり表示させなかったりして画像書き出すだけです。以上。
…とだけの説明だとあまりに雑なのでちょっと説明。

数字が一個ずつ出てくる画像についてはそのまま表示・非表示を繰り返しながら書き出していますが、右の犬とONEの画像はいい感じに動いてるなーと感じさせるために伸縮させながら書き出してます。
特に犬の吠えている様子は口を半開きにしたタイミングで犬全体を若干縮ませ、吠えて口が大きく開いたタイミングで犬全体を若干伸ばしています。

f:id:mio_U_M:20180104201156j:plain

これ何やってるかというと、吠える前の予備動作と吠えた後の後動作を作ってそれらしく動いているように見せようとしているんです。
犬の吠えている様子を思い返してみるとわかるかと思うんですけど、吠える前って吠えるためにちょっと溜めて、吠えたらがばあっと体が大きく見えるじゃないですか。
犬が吠える動作がすぐ観察できないよ、という人はならない場合は素直にYouTubeググるか、試しに犬になりきって吠える真似してください。
吠える前にちょっと頭屈ませて、吠えた時に頭上向きになるはずなので。
※最初この伸縮をせずに書き出してアニメーションさせた時にすごくぬめーっとした動きをしたので試しに犬になりきった結果発見しました。

ここらへんのアニメーションを作る際の物体の動きについては以下の記事がとても参考になると思います。作った後この記事読み返してなるほどと納得できたんで。

photoshopvip.net

※ちなみに例で用いられているアニメーションは全てCodePenで見れるので、フロントエンドエンジニアの方がアニメーション実装の際に参考にできるかと思います

ほんとは吠える用に犬の顔も差分作ればよかったかなあと思いましたが、伸縮だけでもそれっぽく見えるので後からレイヤー分けはしませんでした。(人間の目は優秀だし)
犬の吠える動作のロジックと同じ考えでONEの文字も適度に伸縮させつつ必要な画像を書き出したら、次のステップに進みます。

ステップ3:アニメーションする

私はみんな大好きPhotoshop先生で作りました。
あらかじめアニメーションさせる画像を作っているので、以下の要領で作ります。

1.「ファイル」>「スクリプト」>「ファイルをレイヤーとして読み込み」を選択
f:id:mio_U_M:20180104202107p:plain


2. 「レイヤーを読み込む」パネルが開いたら、ステップ2で書き出した画像を選択して「OK」をクリック
f:id:mio_U_M:20180104202217p:plain


3. レイヤーとして読み込まれたら「タイムライン」ウィンドウを表示し、レイヤーをフレームとして読み込み、表示秒数やループ設定をする
f:id:mio_U_M:20180104203907j:plain
f:id:mio_U_M:20180104203911j:plain


そんな感じで出来上がったGIFアニメがこちら。

f:id:mio_U_M:20180104175931g:plain

ね、(画像の準備さえ頑張れば)簡単でしょ。

まとめ

アニメーションGIFって難しくないって聞くけどどうせ難しいんだろケッと思っている方に向けて書きました。
制作時間としては9フレームで6時間弱くらいで作りましたがそのうち大半は画像作りです。つまり画像の準備さえできれば、思い立ったら簡単にばーっと作れます。
あと今回はフォトショの力を借りましたが、ウェブ上にはGIFアニメつくるためのサイトが色々あるので、フォトショなんてねーよって方はそちらを使ってみてはどうでしょうか。
※参考URLにまとまっているリンク貼っています

次は少ない枚数でクリスタのみを使ったGIFアニメにトライしてみたいと思います。気が向いたときにやるので早くやれよコラという方は督促してください。励みにしますので。

参考URL

photoshopvip.net
このリンクはGIFアニメやってみたい!という人にとってはおすすめです。とてもよくまとまってます。
今回のフォトショで作る手順はこちらを参考にしながら作りました。
またGIFアニメーションが作れるサイトまとめも書かれてあるのでぜひチェック。

www.haconiwa-mag.com
サンプルがめちゃ可愛いです。。。!次はこの可愛さ目指す。

2017年毎月ごとの「初!〇〇」を振り返ってみる

どうもです。最近水族館にいきたくて仕方がないです。

この記事は今年やったことAdvendCalender17日目の記事としてお送りします。

adventar.org

今年は私の人生の中でも特に印象的な一年になりました。
もともと気をぬくと物理的にもメンタル的にも引きこもりになる人間が信じられない勢いでアクティブに動きまくった年なので、毎月何かしら「初!」な体験があったのです。
そんなわけで毎月ごとに対面した「初!〇〇」を綴っていこうと思います。

※先に宣言します。長いです。

1月:初!デザインスクール

そもそも今年の始まりが「Webデザインよりなことがしたいから転職するぞ!」という意気込みで始まった年なので、転職のために東京デザインプレックス研究所に1月から顔出し始めました。
転職についての詳しい話は先日公開したこの記事にまとめたので詳細は以下を読んでもらえたらと思います。

SIerのSEがWeb制作会社のフロントエンドエンジニアへの転職を決めるまで - 徒然畑

上の記事にも書いてはいますが、ここを選んでよかったなーとしみじみ思ってます。後述する私の「初!〇〇」をさらに生み出すきっかけとなる友人との出会いがあったこと、さらに言えば私が行けるとは思ってなかった企業に最終的にお声がけいただけたので。

平日、土曜、日曜と選べたのですが、私は土曜日クラスに通っていました。(平日:業務がいつ何が起こるかわからない運用担当 日曜:朝のクラスだったのですが、絶対起きれないと思った)なので基本的に土曜はいつもスクールで潰れるかと言われたらそうでもなくて、特定の週に別のクラスに振り替えすることも可能でした。なので私の場合どーしても行ってみたい勉強会があるとかいう時に振替制度発動!とかしてました。他のスクールに比べたら知名度はまだ低いかもですが、割と本気で勉強取り組んでる人が多い印象だったので、もしwebクリエイト系をスクールで勉強したい人は1つの候補として考えてみては、と思います。

2月:初!LINEスタンプ販売

思いついた衝動そのままに作ったLINEスタンプを販売開始しました。
store.line.me

(何の因果かわからないんですけどブログとかSNSで表示しようとすると勝手に英語表記になってしまいます。公開当初1日くらい悩みましたがそういう仕様だと思うことにしています)

その時書いた記事がこちら。
【LINEスタンプ】全国津々浦々のすべてのSEに捧げるLINEスタンプ 「がんばれ!SEスタンプ」 - 徒然畑

アイディアさえあればLINEスタンプ結構簡単に作れる、というのが作ってみての私の感想です。
意外と知られてないみたいなのですが、LINEスタンプは最低枚数は16枚から作れるので、何でもいいから早く作りたい!という人はとりあえず図案を16個ひねり出せば販売にこぎつけることができます。
ちなみに私の制作過程的には11月末に思いつき→12月に構成ねり&下絵完成&線画完成→1月に完成&申請、というサイクルで作りました。(早い人はもっと超速だと思います)

ただし今回「LINEスタンプを作る」という経験値重視で販促なことは全くと言っていいほどしなかったので(完成してブログとツイッターに告知したのみ)、スタンプドリーム的な話は他所様の売れている方のブログを見ることをお勧めします。。。
自分としてはポートフォリオに載せる作品ができた&交流会の場で話すネタができたのでとりあえずOKかなと思っています。次に出すときはちゃんとマーケティング的なこと踏まえながらトライしてみようーと思っています。

3月:初!動画作成

iPad mini が私の基本的なツールなのですが、やたらとアプリを試すのが好きです。
そんな私がアプリサーフィン中に見つけたAdobe系のアプリを使って簡単な動画を作ってみました。


LWC -The company providing Leather band watch-


Men's suits collection vol.2 Overcoat × suits

もともとイラスト描くのが好きでインスタにあげまくっていたのですが、アーカイブ的な感じで見れたら楽しいかな〜と思い作り出したら、案の定楽しくなって調子乗って今年は4本制作しました。
主に使用したのはこの3つです。

spark.adobe.com

www.adobe.com

spark.adobe.com


特にAdobe Spark Postはグラフィックだけでなく軽いアニメーションをつけられることができるのでとても遊びました。 videoは一番最後に使い始めたのでまだまだ模索中ですが、楽しい使い方思いつたらこいつでも色々遊んでみよう〜と思っています。
いやーAdobe先生相変わらず素敵で便利なアプリを出している。PCだけでなくモバイル端末もAdobeに囲い込まれてます。
私は基本的な作業端末がiPad miniなので結構Adobeのモバイルアプリにはお世話になっています。今度気が向いたらAdobeモバイル向けアプリについてのまとめ記事でも書こうかなと思います(気が向いたらなので書かないかもしれないです。知りたい方がいたら督促ください ←)

他にも今月やったこととして初めて事業ロゴ制作を依頼されて作ったりもしましたが、それ書いちゃうと長くなるので割愛します。

4月:初!meetup参加

スクールの友達に誘われて初めて交流会に参加しました。
海外でもよく使われているというWebサービスmeetup経由で参加したのですが、調べてみたところ様々なジャンルでイベントが開催されているみたいです。

www.meetup.com

meetupの特徴としては、海外勢に強いという特色柄日本以外の国の方の参加者が圧倒的に多いので、英語を使って自分の興味のあるジャンルでコミュニケーションしたい方にはおすすめです。
ちなみに私が友達に誘われて参加したのは国際交流的なmeetupで、日本にいる様々な国の人が集まって色々話したりお酒飲んだり的な感じのものでした。
友達と参加した後個人的に他のmeetupにも参加してみました。アート系のmeetupも結構種類が豊富なので、デッサン会やドローイング会なmeetupにも参加しました。ITとかデザイン系のものもあるみたいなので、ちょっと英語で人と話したいな、という人は使ってみるといいかもしれません。

5月:初!もくもく会参加

そんな感じで4月にmeetupに参加したことで弾みがつき、Web系の勉強会
交流会にも参加してみよう!と思い立って突撃参加しだしたのが5月です。
Web系の勉強会で初めて参加したのはこちらの「カフェで勉強会」。いわゆるもくもく会です。この会で自分の会社以外のIT系、Web系の人に出会うことができ、同じITでも色々な人がいる!Web系こんなことやってるんだ!と刺激をもらいました。

atnd.org

その後もこばしゅんさん主催のもくもく会に参加したりと、時間が合いそうなときはもくもく会に参加するようにしています。基本的にもくもく会は何かしら目的意識を持って参加されている方しかいないのでもくもく会でのモチベーション持続力高いんですよね。来年は勉強会参加ペースを減らそうと思っていますが、こういったもくもく会については今後も定期的に参加しようと考えています。

6月: 初!落合陽一さん講演会

当たったらラッキーだなーという気持ちで落合陽一さんの講演会に参加応募したところ、見事当選しました。

supporterzcolab.com

実は私が落合さんの存在を知ったのは今年に入ってからで、母から「見た目が男版のあんたや」と言われたのがきっかけで知りました。
インタビューとか色々読んでみた感じだと頭の作りが常任の数千倍違う人なんじゃないかなあと思っていたら講演会の冒頭の説明で「落合さんの話は全部理解できなくて戸惑うかもしれませんが、参加者の人がおそらくほぼ同じ気持ちに陥るので大丈夫です」と言われた時はちょっと安心しました(いいのだろうかそれで)。

いざ話を聞いてみるとやっぱりその通りといった感じで、何が人と違うかというと膨大な知識量とそれらの知識のつなぎ合わせたネットワークの大きさ、そして自分の専門分野にかけて来た集中と熱中の量が違う。
多分最初のスタートは好奇心なんでしょうけどその好奇心で得たものをわらしべ長者あるいは芋づる式に別の知識を吸収していって今の位置にたどり着いた、ということなんだなと感じました。あとはご本人がもっているドラスティックで自由な発想。そこを保ち続けるある種の無邪気さと純粋さ。そういった大人になるにつれてみんなが無くしてしまいそうな心をうまく保ち続けると開ける世界があるんだなとちょっと希望が見出せた気分でした。本当にこの講演会に参加できてよかったです。

他にも初めて出したコンペで採用されたりとか、突然OJT担当になって新人ビシビシ鍛える羽目になったりもしましたが、これまた長くなるので割愛します。

7月:初!出雲

突然母が「出雲大社いくよ!!」と言い出したので出雲旅行行ってきました。今まで人生で一度たりとも彼氏ができたことがない私を祈祷させようとのことでした。なんか心配させてごめん。

www.izumooyashiro.or.jp

歌手の竹内まりやさんのご実家である「竹野屋」をお宿に、出雲大社と参道周辺、あと松山市内をちょと散策してきました。竹野屋は出雲大社の参道沿いにあるので、確かに参拝者にとってはベストなお宿でした。宿の内装や雰囲気、出されるお食事もほっとするような心地になりましたので、参拝予定の方はこちらを利用するのをおすすめします。

参道周辺はたしかに霊験あらたかというか、歩いてるとすー、っと気分が晴れる心地でした。出雲だけ10月のことを神在月という理由も納得です。ちょうど仕事や通っていたスクールも大詰めになっていた中訪れることができたので、良い気分転換になりました。
また機会があれば気分転換に行きたいなと感じてます。あとついでにいうと本当に出雲大社に祈祷に行ったんですが、つい最近本当に彼氏ができてしまったのでお礼参りに行かないとなとも感じてます。縁結び効果ちゃんとあります(当社比)。

他にもインスタでいいねが初めて3桁超えたりとか(インスタ壊れたかと思った)、大学時代からお世話になっていたVAIOのノートからiMacに乗り換えたりがありましたが、これまた長くなるので割愛します。

8月:初!Dist参加

Web系の勉強会で一度は聞いたことがあるんじゃないでしょうか。沖さん主催のDistに初めて参加しました。

dist.connpass.com

がっつりLT系の勉強会に参加したのはこれが初めてでした。この会のおかげで今現在のWeb制作やアプリケーション制作で使われる制作ツールだったり技術だったりを知ることができました。もともとが業務系でレガシーなデスクトップWebアプリケーションの開発にしか携わったことのない私にとっては全体的に「なんかよくわからんが色々ある」と若干白目向きかけたのが本音です。でもそれと同時に自分の知らない辛くも面白い色々があるんだなーと感じました。そもそもデザイナーとエンジニアが協力して何かをつくる、という現場を体験したことがなかったので、それだけでも魅力的に思えたからです。そんな感じで興味が芽生えてフロント近辺のこと勉強しだしたのもこの頃からです。
(ついでにいうとこの後Distの運営側にも参加表明しちゃいました。色々知れる現場にいたいなという思いだけで突っ込んでいっちゃいました。。。)

9月:初!デ部会参加

いつもすぐに満席になってしまう勉強会の一つ、cloudpackさんのデザインセクションチーム主催の「デ部会」に参加しました。

devkai.connpass.com

私が参加した会は「Webと写真のこと」をテーマにした勉強会でした。カメラのことや画像のことはあまり詳しくなかったのでこれは参加せねばーと思い聞いてきました。
特に興味深かったのは工藤さんのLT。実際に画像をWebページ上で扱うときにどう実装するの?画像をどう扱うの?ということを詳しく解説してくださいました。

cloudpack.media

そしてこの勉強会にでたあたりから「フロントエンドエンジニア」という職種を意識し始めました。今やもうWebやアプリを取り扱う場合にデザインとエンジニアリングの境目はなくなってきている。だったら、その療法を見つめることが出来る立場の人間になりたい。そういう思いを抱かせてくれたのは、実はこの勉強会に参加がきっかけだったのです。そして結果として、Webデザイナーではなくフロントエンドエンジニアとしての道を選択することとなるのでした。

10月:初!ライブハウス!

人生で初めてのライブハウスでのライブ!行ってきました。
佐野元春さんやギタリストの布袋さんや福山雅治さんのベースを担当してきたベーシスト、井上富雄さんの個人プロジェクトのTOMIO BANDのライブでした。ベース&ボーカルの井上さんに、ギターの尾上サトシさん、ドラムの田中轍さんの3ピースバンドでした。

440.tokyo

基本はロック、時々アコースティックも交えながらの編成だったのですが、ライブハウスって演奏の音が体に染み入るんじゃないかというくらい音が響くんですよね。その音の臨場感だけでも感動なのに、TOMIO BANDのみなさんが奏でる音楽がまためちゃくちゃかっこいいんです。どういうかっこよさかというと、色気のある格好良さ。この世の酸いも甘いも色々見てきた上でそれらを受け入れた上で音を奏でているように感じられて、「音だけで情景を彷彿させる」という体験をこのライブで初めて行いました。あんなかっこいい音楽を奏でられる大人って、本当にずるいです。
ライブ終了後は演者と直接お話しすることができるのがライフハウスのよさ。素直に感動したことを伝えつつ、井上さんのアルバム2枚を購入してしまいました。また機会があれば聴きに行きたいです。

あとはこの時期に初めてポートフォリオサイト開設したりとかもしましたが、まあその話も長くなりそうなので割愛します。

11月:初!CSSNite参加

Web界隈に身を置く人間なら誰もが知っていると言っても過言ではないイベントCSS Niteに初めて参加しました。

cssnite.jp

フロントエンドエンジニアやコーダ向けな会でしたが、わりとデザイナーさんも参加していました。やっぱり今はもうデザインもフロントエンドも垣根がなくなって来ているんじゃないかなということを一人色濃く感じた記憶があります。フロントエンドエンジニアとしてどういう知識が必要なのかを整理できたのと、懇親会で普段ツイッターでしかお目にかかれなかった方にお会いできたのとで、刺激ももらいながらも充実した勉強会となりました。

12月:初!退職

そして今月、3年ちょっとお世話になった今の会社を退職します。
来年からはWeb系制作会社でフロントエンドエンジニアとして新たなスタートを切ります。
色々ありましたが今の会社での3年ちょっとを通じて社会人の基礎は構築したかなーというのとIT世界の基礎はみてこれたかなーという感じなので、来年は「今まで抑えていたことをばんばん放出する年」というキャッチフレーズで進んでいこうと思っています。
今の会社や現場で色々お世話になった方には本当に感謝の気持ちでいっぱいです。ありがとうございます。(と来週の送別会で伝えようと思っています)

あとついでにいうとそもそもアドベントカレンダー初めて参加した、というのも今月の初!でした。勢い余って3記事も書いちゃいました。。。

総括:2017年をふりかえって

今年はとにかく運が良かった&動いた分だけ視野が広がった

自分で言うのも何なんですが、今年は私の今までの人生で稀に見る変化の年でした。一言でいうと「種蒔き」の年だと感じています。
種を蒔くためにあれこれやってみたら、色々と前向きに進んだ上に「運がいい!」と思うことが色々起きた。。。という心地です。
もしかすると来年どーーんと不調な時期がくるかもしれませんが、今年はそのどーーんが来てもいいように備えはできたと思いますし、何よりメンタル的にも気持ち的にもさらに明るくなった&強くなった気がしますので、まあ来年どうなっても大丈夫です。なんとかしようとすればなんとかなる。

色々な人の出会いが今年一番の財産

とまあそういう感じにめっちゃ楽天的に考えることができるようになれた一番の要因は「人との出会い」です。今までは社外に知り合いなんてほぼいない&SNSはとりあえずやってるというだけの基本ぼっち勢な人間が今年はめーっちゃ色んな人を見たり色んな人と話したりしました。それらを経たことで「自分が何を大切にしたいか」「何をやりたいか」というのをはっきり見出せて来た。人との出会いによって自分の軸が強化された一年だと感じてます。
なので私の今年のベスト・オブ・スペシャルサンクスは今年お会いしてご縁があった皆様です。みなさまが私のこと覚えていようがいまいが関係なしに今年私と出会った方には感謝の気持ちを献上します。私に色々な人生経験値をくださってありがとうございました。


そんなわけで。締めもまとめもへったくれもない気持ちの赴くまま書いたこのブログを最後まで読んでくださり、ありがとうございました。

SIerのSEがWeb制作会社のフロントエンドエンジニアへの転職を決めるまで

どうもです。今日もとり天が美味しいです。

この記事は転職アドベントカレンダー14日目の記事としてお送りします。

adventar.org


10月末から転職活動をしていた私が、この先ここで頑張ろうと思える会社に出会うことができ、今週内定受諾しました。
転職活動は終了ということで自分のこれまでの振り返りの意味も込めて転職レポを書こうと思います。

私について

SIer企業でSEを3年ちょっとやってきた人間です。
業務用Webアプリケーションの開発に2年ほど携わり、今は開発を担当したアプリケーションの運用担当としてお問い合わせ対応とか小規模改修対応とか工数見積もりとかをやってきました。
現在のメイン言語はJava、ほかにはC#とかを扱ってました。
現場のシステムの都合で今年からCとかシェルとかも見たり触ったりしだしましたが、一向にデレる気配を見せないままお別れしそうな予感です。

元々高校時代は理系にいましたが、物理が最後までデレてくれなかった&英語はめちゃデレてくれたという理由で文転した文系学部出身で、大学ではデザイン史を専門に勉強・研究していました。
中学くらいの時に友達とホームページ運営ちょっとやったりタグとかCSSいじったりしたことがきっかけで情報系に興味を持ち、大学在学中に約一年ポーランドにある情報系の大学に交換留学に行ってました。

小さい頃から何か手を動かしてものを作るのが好きなこと、
特に絵を描くのが好きで、グラフィックデザインとかWebデザインとかに派生して興味を持ったという経緯から、就職活動時はSEとWebデザイナーの2つを軸に進めていましたが、最終的にご縁があったのがSEの方でした。

転職しようと思ったきっかけ

遡ること去年の8月頃、お偉いさんとの面談で「この先どういうSEとして社内でやっていきたいんだ?」と3年目を迎えるとよく聞かれる質問に対し「そもそも私この先もこの会社でこの仕事でやっていきたいのか?」という疑問に直面したのがきっかけです。
そして色々考えた結果、

  • 仕事で一番楽しいなあと思った瞬間は自分の手でプログラムを書くことだということ
  • 自社の「カタイ感じ」(基本同じ言語しか使わない、割とみんな安定思考、年功序列な雰囲気)がなんとなく合わなかったこと
  • 就活時代にWebデザイナー目指して企業に採用応募をしまくったこと
  • そもそもプログラミングとかに興味を持ったのは中学時代にHTMLとCSSをいじったことがきっかけだったということ
  • そもそもデザインとかビジュアルとかに昔から興味があって大学でもデザイン史やウェブ広告の研究をしていたということ

 →やっぱりWebデザインに関わる仕事がしたい!

という結論に至り、「転職してSEからWebデザイナーになる」を今年の目標に掲げました。

転職準備をどうするか

そうとなったらWebデザイナーとしての勉強をしよう作品を作ろう、ということであえて専門学校に行ってみることにしました。
入る前に色々調べたんですけど、今の時代オンライン学習サイトもあるしその気になれば独学である程度スキル身につけたり作品作ったりができます。
だけど私は

  • 同じ志を共有する仲間が欲しい(そして「自分も負けたくない」と思わせる環境が欲しい)
  • 現場のデザイナーとの繋がりが欲しい(講師はもちろんのことステップアップのためにWebを学びにきているデザイナーさんも生徒にいるとのこと)
  • 一人だとダラける可能性が高い(コツコツやるというのが苦手&短期集中が得意な人間は集中できる環境や体制を構築した方がいい)
  • 一度くらいデザイン系の学校行ってみたかった(これは感情的理由。美大行きたかったけどお金がかかりすぎることを理由に断念した人間なので)

という4つの点からスクールに通う選択をしました。

私が最終的に通おうと決めたのはこちらの東京デザインプレックス研究所です。

www.tokyo-designplex.com

デザプレ含めて3つくらい話聞きに行ったんですけど、対面クラス授業形式で先生一人が生徒10人くらいの面倒を見る、という体制を取っているのはここだけだったので、仲間が作りやすい&先生に何かあれば質問しやすいと判断してここにしました。

スクールに通ってる期間中の活動

結果としてここに入って良かったと思っています。
同じクラスの人たちの作品クオリティやレベルが高かったことと、スクール卒業後も一緒に励まし合いたいと思える友人との出会いがあったので、刺激ときっかけをここでもらいまくりました。

あとスクールにお金を投資した分危機意識が芽生えたのか「通うだけで満足したらダメだ」と授業外の活動も活発になってました。
主にやったこととしては、Webサイト以外の作品や制作、そして勉強会や交流会への参加です。
自分の名詞だったりLINEスタンプだったりバナー制作だったり動画制作だったりを平日仕事が終わってから作りつつ、今まで参加したことがなかったWeb系の勉強会やクリエイター交流会などに足を運ぶようになりました。
特に勉強会や交流会に参加し出したことで、今まで出会うことがなかったデザイナーさんやフロントエンドエンジニアさんなど様々なジャンルの方にご縁ができたのは自分にとって一番大きかったです。単純にスクールだけ通っていたら得られない情報や考え方を獲得できたのも、こういった場に参加したおかげです。

  • 学びの場は一つに限らず複数の手段を持つこと
  • 現状の環境に満足せずいろんなものに出会おうと行動すること
  • 常に自分が尊敬できる人、すごいと思う人と近い距離に居られるような環境を作ること

スクールに通っていた頃はこの三つを無意識のうちに意識していたような気がします。
そしてこれらは、今後の私の活動においても意識していきたいことです。
(ここら辺の具体的に何を作ったりどんな勉強会行ったりの話は後日公開予定のブログにて書こうと思います)

スクールを終えて転職活動に入る頃

実際にスクールに通ったのは半年強くらいでした。
色んな勉強会に出たりネットでWeb系の記事を呼んだりしながら9月に授業を終えたころには私の中で心境の変化が起きていました。
それは「フロントエンドエンジニアという選択肢もありなのかも」ということ。

実はフロントエンドエンジニアという職種を認識したのは勉強会に参加し始めてからでした。
とある勉強会のフロントエンドエンジニアさんのお話を聞く機会があり、その方のユーザーがWebサイトを快適に閲覧するための技術や、モバイルファースト時代に合わせた技術の具体的な使い方を紹介している姿を見て、とても魅力的に感じたのと同時に「Webデザイナーとエンジニアの境目ってなんだ?」と感じたのです。
そう思った背景には2つの要素がありました。まず1つはコーディングの知識を持っていることがWebデザイナーの前提条件であることに加え、今後ますます技術力を持っていることが求められると感じたこと。もう1つは昨今のWebサイト構築が段々と今関わっているアプリケーション開発と変わらないように思えたことです。そういった中でWebデザイナーの存在感を見出すのは今後難しいのかも、と個人的に感じました。

そもそも私は、色んな勉強会やスクールでの学びを経て、「デザイナー」という仕事は「クライアントの目的に沿い、かつエンドユーザの体験に貢献するための最適なものを提案するプロ」という風に捉えていました。
そしてその姿勢が私が目指したいものだと感じていたので、そういう意味だとフロントエンドエンジニアもWebの体験をコーディネートするプロだし、ビジュアルに関わりつつ、細かい作り込みを追求できるのもこの職種なのでは?と感じたのです。
技術もデザインも好きで、できるだけその両方の要素を潰したくないと感じていた私にとっては、フロントエンドエンジニアとしてのキャリアチェンジもありなのかも、と思うのは無理もなかったのかなと感じています。

転職活動、そして内定

転職活動期間としては1ヶ月ちょいでした。
転職活動に入る前に今いる会社には今年度いっぱいで退職する旨を伝えていたので、「この月は転職活動月間だ、決めるぞ」と思ってばーっと集中して動いてました。
基本的には複数のエージェントや転職サービスを使いながら転職先にエントリーを行なっていました。あとは個人的に気になった会社のエントリーフォームに出したりしてました。

結果として3社内定をもらいましたが、内定を決意した会社の決め手は「働く人」「環境」「作品のレベルの高さ」でした。
特に印象的だったのは、Webデザインの勉強がてらに見かけた「すごい!」と思ったWEBサイトの製作に関わった方に面接官としてお会いできたことです。
面接を受けることになる前までその会社が作ったということを知らなかったので、これは何かの縁だ!と思い勢い余って色々質問してしまいました。
そしてその方々から「つくることが好き」「真剣に楽しむ」「全力なプロ意識」を感じ取り、その会社にいる人の特徴や姿勢、大事にしていることに共感や魅力を感じて、私もここで全力でチャレンジしたいと思うようになりました。
その思いを最後まで素直に伝えた結果、内定をいただくことができました。

転職活動を終えた今だから言えることですが、私は面接に臨む際に「面接官として出てくる方は、その会社を具現化した鏡だ」と思ってお話ししていました。
特に役員やリーダークラスの方が面接官として出てきた場合、今面接を受けている会社の価値観に沿ってみたときに、それだけのポジションを与えるに値する人間だと判断された人がどういう方なのかを知ることができるとてもいい機会です。
もしその人に自分が尊敬の念や共感を覚えたなら、その会社と自分がマッチする可能性が高い。その観点から見ても内定を承諾した会社と自分は何かしら縁があるとひとり強く感じています。

これから

そんなわけで1月からフロントエンドエンジニアとして新たなスタートを切ります。
正直なところ、楽しみ半分、緊張半分、加えて全力でやるぞ100%な気持ち、というよくわからない心境でいますが、そうやって全力で取り組みたいと思える会社に出会えたのは幸運です。
来年の今頃にはさらにパワーアップしている自分になるように、来年もまた邁進していきます。
楽しむぞー(`・ω・´)

とり天 -My Best Fantastic Food-

突然ですが皆さんはとり天を食べたことがありますか?
ないならぜひ食べましょう。
あったとしてもぜひ食べましょう。

とり天との出会い

とり天ーーー南は九州の大分県発祥のローカルフードであり大分県民のソウルフードであるこの天ぷら。
私ととり天はちょっと変わった出会い方をしています。
というのも、一番最初にとり天の存在を知ったのは、漫画なのです。

鹿楓堂よついろ日和 2巻 (バンチコミックス)

鹿楓堂よついろ日和 2巻 (バンチコミックス)

和風喫茶で働く四人のイケメンスペシャリストと喫茶店に訪れるお客さんたちとのストーリーを描くウルトラ飯テロスイーツテロ漫画なのですが
この巻の第6話で振舞われたとり天丼が妙に美味しそうに見えたのが始まりです。
しかもこの巻末のあとがきで作者さんが「予想以上に美味しすぎて思わずとり天に謝る」一コマをみてこいつはやべえ奴がいるぞ・・・と思ったのが第一印象でした。
(ところで鹿楓堂よついろ日和2018年にアニメ化決定したそうです!おめでとうございます!)

そしてそんなファーストインプレッションから少し経ったある日…
業務でふらふらになった昼休み、たまたま見つけた天丼屋でたまたま期間限定で売り出されていたとり天丼を注文した私。
一口食べた瞬間感じたことは
「力が。。。みなぎってくる。。。!」
超スピードで瀕死状態からHP値MP値共にMAXになってその後の仕事をバリバリこなした驚異の一品、とり天。
以来すっかりとり天の虜になりました。

今年ヘビロテした罪深きとり天写真

そんな感じで今年は私の中でとり天とり天とり天大フィーバーしまくって
Twitterにそのうるささを吐き出さないように自制心が働いてアプリをアンインストールしたほどだったのですが
たまたま今回「今年食べた最高のご飯の写真Advend Calender」を見つけてしまったので
せっかくなので普段抑圧していた私のとり天フィーバーを放出します。

天や 柚子こしょう鶏天丼

f:id:mio_U_M:20171204225524j:plain

ご覧ください、こいつが私をとり天フィーバーに叩き落とした張本人です。
いつみても綺麗な顔していやがって...(号泣)
では早速罪深いポイントを上げていきましょう

ポイントその1:ボリュームたっっぷり!しかも3種類?!のとり天

そもそもとり天って普通の天ぷらとどう違うの?と感じる方もいらっしゃるかもしれません。
とり天の特徴はあげると鶏肉がふっくら厚みを増してジューシーになり、
だけど味は衣で包んでいるのでぎとぎとしないしっとりした味わいになるのです。
サクサク、ジューシー、しっとり。このトリプル体験を一枚で味わえる驚異的な存在がとり天なのです・・・!
しかも天やのとり天は通常のとり天より大きめなのでな上に「とり天2枚とつくね天1枚」がデフォルトなので満足感の持続力が違います。

ちなみに・・・あくまで私の食べた感じで、ですが
この二枚どうやらムネ肉とモモ肉をそれぞれ使っているみたいなのです。
ただし天やのWebサイトを見まくりましたがムネ肉とモモ肉それぞれ使っていますとは一言も書いていないのですが、どう考えても二枚の食感と味が微妙に違う。。。
これはムネ肉とモモ肉それぞれ使っているのでは…こいつ、さらっと3種類のとり天をお客様にサービスしている・・・?!
と天やの恐ろしさ(褒めてる)に慄きながら食べていました。
※ただしあくまで個人的な推測です。実は二枚ともムネ肉だよと言われたらもっと利きとり天修行に励みます。

ポイントその2:魅惑の温泉卵と奏でる絶妙ハーモニー

天やの通常のとり天丼だとシンプルにとり天が乗っているだけですが
私は温泉卵乗せを注文することをおすすめします。
鳥と卵、親子が織りなすコンビネーションの味わいの破壊力が凄まじいのです。
温泉卵をチョン、と割るととろりと溢れる黄身をとり天に絡ませて食べると口の中で鶏肉のジューシーさ、衣のサクサク感がさらに引き立つのです。
親子丼、鶏肉と卵の相性がとても良いですよね。それは鶏肉を揚げても同じことが言えるのです。

ポイントその3:ほのかに香るゆず胡椒の奥ゆかしさ

天やの勘所が素晴らしいと思ったのが味付けにゆず胡椒を使っているところです。
甘だれに馴染むほんのりゆず風味のおかげで、ご飯と食欲ととり天が進むこと進むことこの上なし。
ゆずは和食との相性がいいことで定評がありますが
(ゆず風味の味ポンとかゆずの皮入りの浅漬けとか私はめちゃくちゃ好きです)
それはとり天においても例外ではありません。
天ぷらの油みをあまり感じることなく爽やかな味わいになっているのは
このゆずの存在があってこそ、とも言えます。
(ちなみに天やで使われている油は植物油なので、体に重くならないのも嬉しいポイントです)


ちなみにちなみに。
この華味鳥のとり天丼は期間限定のため今は販売していないのですが
現在は嬉しいことに期間限定でふもと赤鶏のとり天丼が発売されています!
www.tenya.co.jp

先日私は究極な腹ペコ状態な時に食べにいきましたが、こちらもこちらでめちゃくちゃ美味しかったです。
(あまりに空腹状態だったため写真を取り損ねたことをお詫び申し上げます)
どうしようとり天丼食べたくなっちゃった。。。と言う人はこちらをぜひお試しを!

やよい軒 とり天とだんご汁の定食

f:id:mio_U_M:20171204232412j:plain

寒さが身に沁み出すころに現れたのは、やよい軒の大分味わおうなこの定食でした。
この定食の罪深いポイントを挙げていきましょう。

ポイントその1:揚げたてサクサク!なとり天

やよい軒がこの定食に関してうたっているのが「注文してから揚げる、できたてのとり天」
なので歯ごたえサクサク、中はジュワァ、なとり天が堪能できるのです。
鶏肉のジューシーさと天ぷらの衣のさっくり感が絶妙なハーモニーを奏でており、これだけでまず疲れやストレスが約40%吹っ飛びます(当社比)
そのままガブリと行くのもよし、ポン酢につけて味わうのもよし、
さらにゆず胡椒もセットでついてくるので、お好きな方はゆずごしょうと一緒に食べてもよしなのです。

ポイントその2:一口飲めば故郷が広がる。懐かしのだんご汁の味

そしてこの定食、そもそもはとり天定食、ではなく、大分の郷土料理を味わうことをテーマにした定食なので
とり天と同じくらいに存在感があるのがだんご汁です。
実は私はこのやよい軒のとり天定食で初めてだんご汁を食べたのですが
食べた瞬間目の前に田園都市風景が・・・
と言ったらちょっとヤバい食べ物じゃないかと思われてしまいますが
もうちょっとくだいて言うと、日本人によくなじみのある味噌汁とうどんのいいところを掛け合わせて作り出された、胃腸に染み渡る味わいなのです。
そしてこのだんご汁には付け合わせのゆず胡椒がとても合います。
味噌と野菜、そしてゆず胡椒のほんのりスパイシーさを麺に絡めて食べるとこの上なく幸せな気持ちに浸れますのでおすすめです。

ポイントその3:ご飯がもっと食べたくなる!ご安心ください、ご飯おかわり自由です

私が住んでいた家の近所にはやよい軒大戸屋がどちらも徒歩圏内にあるというあからさまな定食屋戦闘地域だったのですが
私は迷うことなくやよい軒派でした。
というのも、やよい軒はご飯おかわり自由!
とり天やだんご汁を食べていると思わずその味わい深さにご飯が進んでしまうはずです。
心ゆくまでご飯も食べたい人にとってもオススメなのです。


こちらも期間限定で現在は販売を終了している模様なのですが、
どうも毎年この定食は期間限定で販売している模様なので
一度は味わいたい!と言う方はやよい軒の情報をぜひチェックしておいてください。
www.yayoiken.com


来年も素晴らしいとり天に出会いたい

そんなわけで今年はとり天を食べまくっていた年でした。
反省点としては同じものを何度もヘビロテして食べるばかりで新しいとり天を楽しめる飲食店を発掘するのがおろそかになっていたことです。
とり天フィーバー勢としては新しいとり天のお店開拓を怠ることは由々しき事態だと重く受け止め
来年はより素晴らしいとり天が楽しめるお店を発掘していきます。
その布石として、最後に私が最近見つけたとり天好きはブクマ推奨なサイトを載せておきます。

とり天ワールド ☆☆☆ 鳥天、鶏天、トリ天、とりてん、toritenの専門サイト

(「TORITENで世界の平和を!」 素晴らしきとり天ガチ勢ですね)


※この記事は「今年食べた最高のご飯の写真Advend Calender」の9日目の記事としてお送りしました。
adventar.org

電車の中で一目惚れしたあの子(Webサイト)の秘密(ページソース)を知るためのテクニック(iPhoneでの表示方法)

良いデザインのあの子(Webサイト)やいつも気の利く情報をくれるあの子(Webサイト)のことをもっと知りたい…
そう思って意中の人の秘密(ページソース)を知りたいと思うことはよくある話だと思います(少なくとも私は)。
そしてそんな出会いは、いつも電車の中…
一目惚れしてしまった、君のことをもっと知りたい、だからページソースを見てみたい…
けどiPhoneでのソース表示どうすればいいの

この記事はそんな疑問にぶち当たった人のためのまとめです(決して恋愛ポエムや恋愛小説ではありません)

ブックマークレットを使って知る

Snoopy

snoopy.allmarkedup.com

ブックマークレット使った場合だとこれが有名どころかもしれませんね。
ページに書いてある手順に沿ってブクマに登録し、気になるサイトを開いた状態でSnoopyのブクマをタップすると表示してくれます。
ただし、どうも触ってみた感じだとhttpsページでは反応してくれない模様。。。

Appを使って知る

iSource

iSource Browser

iSource Browser

  • Gamu apps
  • ユーティリティ
  • 無料

HTMLソースはもちろん、コンソールやHTTPヘッダーの中身まで見ることができる無料のアプリ。
URL欄にキーワードを入れて検索することも可能です。シンプルで使いやすい。
サッと確認する程度ならこれくらいで十分ですね。

ScriptBrowserPlus

ScriptBrowserPlus

ScriptBrowserPlus

  • UNI-LABO Co.,Ltd.
  • ユーティリティ
  • 無料

無料でおすすめしたいのはこのアプリです。
ソース表示以外にも色々な機能がありアレコレ知りたい試したい人には便利(ソースコードテストもできるのは素晴らしい)
ただし残念ながらiOS11では動作対応していない模様。。。残念(;;)

View Source

View Source – HTML, JavaScript and CSS

View Source – HTML, JavaScript and CSS

  • Paul Hudson
  • ユーティリティ
  • ¥120

有料ですが個人的に一番使いやすいのがこれです。
Safariの共有メニューからこのアプリを呼び出せるのはめちゃくちゃ大きい。
DOM階層やページに含まれるアセットを見れるのも便利です。

最後に

謎のテンションで一気に調べて一気に検証して一気に書き上げた記事なので、誤りや間違いがあったり「こんな秘密兵器もあるんだぜ。。。」というのがあればコメント等頂けると幸いですm(_ _)m

【勉強会ノート】2017/11/18開催「HTML5感」での勉強会メモ

どうもです。最近めちゃくちゃ焼肉が食べたいです。

今回はLPI-JAPAN主催のイベント「HTML5感。」に参加してきました。

▷イベントページ
html5exam.jp

HTML5認定試験を行なっているLPIさんの勉強会なので気になって参加してみましたが、
行ってみた感想としてはWebフロント勉強し始めの人にとってもフロント技術駆使して色々やってみたい人にとっても盛りだくさん!な内容だったんじゃないかなと思います。
(あとマスコットキャラクターのセマンくんが可愛かった)

んで今回の勉強会で新しく学んだことの復習として
今回受けてきたセッションの概要と、そこで出てきたこれはチェックしておいた方がいい知識、技術を自分用のメモとしてまとめたいと思います。

HTML5~JavaScriptの応用例と学び方(山崎大助さん)

まずはじめの基調講演として山崎大助さんは「Webの領域ってそもそもどういうことをやっているのか」や「Web言語をどう学ぶか、学んだ言語をどう活かして行くか」をベースにしたWebフロント入門者から中級者以上向けのお話をしてくださいました。
山崎さんが主催しているジーズアカデミーでの学びの活かし方を事例に挙げながら、最近のアプリについての特徴等もお話してくださったので、個人的な感想として「Webアプリ、簡単なものでもいいから作ろう」とモチベが刺激されました。個人的に今日一番面白いと思った講演でした。
そんな山崎さんのお話の中で私がチェックしたことはこちら。

PHPはじめてのフレームワーク

はじめに山崎さんの著書等の紹介があったんですけど
その中でPHPフレームワーク入門として紹介していたのがこれです。
これ、なんで私が注目したかと言うと、Amazon Unlimitedに加入している人なら無料で読めるとのことです。
ちょうど今私PHPの基本を一通りやって次もうちょっと難しいのやりたいなと思っていたところだったので
これを機にAmazon Unlimitedに加入しようか。。。と心が大きく揺れた瞬間でした。。。

ブラウザ上で使えるJavascriptエディタ Ace

Ace - The High Performance Code Editor for the Web

プログラムの内容の中に「最近のオススメのエディターは?」と言う項目があったので
ちょうどDWやBrackets以外に何かいいエディタないかなあと思っていたので「あ、最近のエディタについての話かな?」と思ったら
「エディタを自分で作ろう!」と言うお話でした。
エンジニアの「いいものがないなら自分で改造してしまえ!」気質、やっぱり好き。(なので相変わらずエンジニア周りから離れられない)
んでご紹介にあったAceはブラウザ上で動く上に自分で好きなようにカスタマイズ可能な代物らしく、山崎さんはこれを使ってBootstrap用のエディタを自分で作った!とのことでした。(私の周りにいた方も興味があるらしく「すげえ・・・」と小声が聞こえてきたほどでした)
www.venezia-works.com


▷個人的参考URL
qiita.com

開発を促進させる諸々---FireBase/画像認識API

コンテンツファーストの時代だから、思いついたら誰よりも早く作るのが勝ちであり価値である、ということで
実際にアプリ制作でも使えるBassやWebAPIの紹介もありました。

◾️Firebase
firebase.google.com

Baasとして紹介があったのはFireBase。
私これ知らなかったんですけど、みた限りなんだか色々すごく便利そうですね。。。
始める前にさっと読むのに良さそうな記事があったので一緒にメモ。

▷個人的参考URL
qiita.com

◾️画像認識API
Microsoft
azure.microsoft.com

IBM
www.ibm.com

今回私が特に気になったのが、画像認識API
画像認識APIはアプリでも取り入れやすいものが多く、特徴として読み取ったデータをJSON化して書き出せると言うことなので俄然興味が湧きました。
各種APIの比較としてはこの記事が参考になるかなあと思ったのでメモしときます。

▷個人的参考URL
qiita.com

上記で紹介した数々のAPIにみられるように、今は色々なAPIが公開されています。
逆に言うと個人でもそれなりの機能を備えたものは作ろうと思えば作れるわけなので
これらをうまく取り入れたアイディア力が新しいWebアプリやサービス制作においてカギとなる、と言うことで
ジーズアカデミーでは必ず授業の中に何か一個小さいものでもWebアプリを作るようにしているとのこと。
プログラミング言語は基本的に一個理解すれば他の言語に応用して考え方を持って行くことが可能なので、
まず初心者は何か一つの言語の基本をしっかりやり、そこから他のものを広げて行く方が幅が広がるとのことでした。
自分の尖ったところをまず1つ磨く。最近色々目移りしがちな私の頭にガツンときた気がしました。。。

長期Webサービス受託開発こう困ったのでこうした(高津戸 壮さん)

先日参加したCSS Niteでも登壇されていたところをお見かけしたピクセルグリッドの高津戸さん。
今回の勉強会ではサービス受託開発でのご自身が経験したことやそこで使ったツール、サービス開発と捕手での心構えなどを交えたお話をしてくださいました。
この話は聞いていて一番「わかる。。。(涙目)」なポイントてんこ盛りでした(現に私がWebサービスの開発と保守両方経験している人間のため)
そんな中で私がチェックしたのはこちら。

構文チェック/ ツール

jshint.com

circleci.com

講演の中で紹介されていた構文チェックツールです。JSHintはjavascriptのフォーマット不整合や構文のおかしなところをチェックしてくれるツール、CircleUIはビルド、テストを自動で行い、設定すればそのレポート通知までしてくれるツールだそうです。
それぞれ入門に良さげな資料を探してみましたが、JSHintの場合他にも色々なJavascript構文ツールがあるようで、今回は比較記事で他にどういうものがあるのかを一緒に見れたらいいかなと思ったのでメモ。

▷個人的参考URL
www.tam-tam.co.jp

www.slideshare.net

プロジェクト管理:かんばん方式

カンバン: ソフトウェア開発の変革

カンバン: ソフトウェア開発の変革

この考え方私は知らなかったんですが、Trelloを個人で使っているのでそいつの具体的な活用方法としてこの考え方を導入すると相性がいいのかなと思いました。
高津戸さんのプロジェクトではクライアントから来た要件を整理しながらかつ作業者がすぐに着手しやすいように整理するために「要望、要件定義、着手可能、実装済」とボードを区切ってタスク整理をしていたそうです。(そもそもかんばん方式の使い方がこのセオリーとのこと)

▷個人的参考URL
ソフト開発に「かんばん方式」を導入すべき理由とスクラムとの違い - WPJ

AR for HTML5(須山 陽一さん)

ブラウザ上で今後ARを実装していくにあたってのサンプルを示してくださったのが須山さん。ちょうど私が興味を持っていた分野だったのでお話で出て来た技術をチェック。

ARフレームワーク---AR.js

github.com
ARを手軽に実装するためのライブラリとして紹介されたのがこのAR.jsです。セキュリティ上の観点からHTTPS通信でなければ動いてくれない点に注意です。
入門記事等探してみましたが、結構色々ありそうです。

▷個人的参考URL
getar.jp

Web上で軽快に動作するオープンソースのARツール「AR.js」とは何か? | Tech2GO

VR用フレームワーク--A-FRAME

aframe.io

そしてVRフレームワークの紹介も。Mozillaが開発したVRフレームワークのA-FRAMEがお手軽でお勧めとのことで今回のデモではAR.jsと組み合わせた活用例を披露してくれました。最近iOSSafariでもAR.jsを使った表現ができるようにになったので、今後この組み合わせでの開発が増えるのではとのことでした。

▷個人的参考URL
qiita.com

www.webprofessional.jp

qiita.com

AR用ライブラリ--ARToolKit / ArUco

Open Source Augmented Reality SDK | ARToolKit.org

ArUco: a minimal library for Augmented Reality applications based on OpenCV | Aplicaciones de la Visión Artificial

AR用のライブラリとして紹介されていたのがこの二つ。ARToolKitC言語、ArUcoはC++ベースのライブラリだそうです。ブラウザ上で利用するにあたっては、ブラウザで動かせるようにコンパイラを別途かます必要があるとのことです。まずはAR.jsを触れてみて、そのあとこのライブラリにチャレンジ、という感じかなと思いました。

▷個人的参考URL
「攻殻機動隊」「電脳コイル」の世界を実現! - ARToolKitを使った拡張現実感プログラミング - 工学ナビ

qiita.com

tips.hecomi.com

CreateJSでつくるインタラクティブなコンテンツ(野中 文雄さん)

WebでのARの話を聞いたのでこれも聞いておこうと思い野中さんの講演も聞いて来ました。

CreateJS

createjs.com

Flashライクなことを今後行いたいのであればHTML5Canvas機能とCreateJSを組み合わせれば大体のことは楽しくできるということ。すごい。
野中さんが過去にgihyo.jpで公開した連載記事が導入編として挙げられていましたので、これと併用して他のCreateJS入門記事を読むと学習しやすそうな印象です。

▷個人的参考URL
gihyo.jp

CreateJS入門サイト - ICS MEDIA

まとめ

そんなわけで内容の濃いセッションづくしでお腹いっぱいになれました!APIを利用したWebアプリ開発は実際に作ってみたいなと考えていたことのヒントになったのでちょとチャレンジしてみたいなと思います。あとはCreateJS楽しそう。
そして今回ラッキーなことに大抽選大会でセマンくんの携帯ストラップ当たりました。やったあ。

【勉強会ノート】マーケティングデザイン論勉強会に行って学んだ事と、自分なりに学び考えた事をまとめてみる

f:id:mio_U_M:20171112183110j:plain

どうもです。めちゃくちゃ久しぶりにブログ更新します。

先月のことになりますが、10月29日に都内にて行われたデザイン系勉強会「初心者歓迎!マーケティング+デザインで「伝わる伝える」考え方を知ろう!」に行ってきました。

▽イベントページ
https://atnd.org/events/91662?kme=clicked%2Bevent%2Bremind%2Bmail_url

もともと大学時代にポスターデザイン史やウェブ広告という、いわゆる「商業美術」を勉強、研究した結果「ただ美しいだけじゃなくて、ちゃんと機能性や商業価値を考慮したデザインをもっと学んだり試してみたりしたいなあ」と思っていた私にとって「この勉強会はタイトルからしてまさに求めていたものだ!」と思い即決で参加したこの勉強会。講師はCSS Niteでもご登壇経験のあるデザイナー/ディレクターのたじまちはるさん(@DesignHumore)ということで、現場でご活躍されているデザイナーさんからみたマーケティングとデザインの掛け合わせとは一体どういったものだろう?とわくわくしながら参加しました。

結論から言うと
「ほんとに参加してよかった!」
「今日学んだことをもとに、もっとマーケティングやデザインを追求しよう!」
と心の底から思いました。
思わず個人的にマーケティングについて勉強し始めてみたほどです。

なので今回は、たじまさんの勉強会で学んだこと+自分で個人的に学んだこと、感じたことを(放っておくとすぐに忘れるトリ頭な)自分用のまとめとして残したいと思います。

マーケティングとデザインをつなぐキーワード
「See Tnink Wonder」

今回のたじまさんの講義でのキーワードはこれでした。

「See Tnink Wonder」
(よく見て よく考え 魔法を起こす!)

マーケティングと出会いを繋げる思考の可視化」のプロセス、というサブタイトルで掲げられたキーワード。最初にこれだけ聞くと「どういうことだ?」となりますが、結論から先に言うと次のような意味でした。

  • Seeは商品を売り出そうとしている環境や相手を知ること
  • Thinkはその商品をどういった方向性、内容で売り出すかを考えるということ
  • Wonderは売りたい商品・サービス、その商品の販売戦略のために何をデザインするか、どういった技術で落とし込むかということ

マーケティングとデザインが両立して生み出された商品やサービスはこの3つのプロセスがちゃんと存在している、というのが全体を通してたじまさんが伝えたかったことだと私は解釈しました。

マーケティングって、そもそも何?

まず初めにそもそもマーケティングとは何か?について。たじまさんはドラッガーコトラーの名言を用いつつ紹介してくださいましたが、まとめるとこの一言に集約するとのことでした。

「もの・サービスの価値を理解したうえで、
 必要とする人へ選んでもらうように届ける」

世の中は需要と供給であふれています。でもただ単に売りたい人が売りたいものを売るだけで必要とする人がやってくるわけではないです。では必要とする人に自分の商品やサービスが届くためにはどうしたらいいか?そのために大切なプロセスが「See Tnink Wonder」の3ステップなのです。

Seeは事実以上に相手の世界を理解すること

必要とする人に自分の商品やサービスが届くためにはどうしたらいいか?その目的を達成するためにまず取り掛かるべきことは「事実以上に相手の世界を理解する」ということです。
ここでいう「相手の世界」とは何かというと…

・商品の競合他社
・顧客の特色、行動心理
・顧客の置かれている状況
・クライアントの商品を売ろうとしている場所

などなどです。

マーケティングの話を持ち出すとき、競合他社や販売される場所(市場)を調査することは当たり前のように話の引き合いに出てきます。また、最近マーケティングの用語としてよく聞くペルソナやカスタマージャーニーなどは、顧客の行動や心理を理解するための考え方や手法の一つとして提示されていますよね。「この人は必ずこういう商品・サービスが欲しいと思うはずだ!」という推測をもって作って見ても、いざユーザーテストをやってみるとこっちが思っている以上にあれこのユーザーはこの商品・サービスを必要としていない…?と期待外れになることがあります。そういった市場や顧客を行動や動向も含めて具体的に検証や調査を行い、商品周りについてのひとつ一つの理解を積み重ねる行為。それがSeeの部分ということです。

Thinkは商品やサービスを理解し戦略を練ること

売りたいものはある!どういう市場でどういう顧客がいるかも知った!という段階に来た時に、次に取り掛かるのは「商品をその市場や顧客に対してどう売って行くかを考える」ということです。
具体的にどういうことを考えるかというと…

・ 広告媒体は?
・どういうブランディングにする?
・販売活動はどうやってやる?
・ターゲットユーザーに届くようにするには?

などなどです。

ここで重要なのは「そもそもこの商品やサービスってどんなものか」を理解する、ということです。競合他社や市場の流れ、ユーザーなどについての情報をSeeのプロセスで洗い出したのなら、「その中でこの商品の特別なポイントは何か?」「何をコンセプトとしてこの商品を作ったのか?」を出発点として商品戦略を展開していくのがThinkのプロセスなのです。逆に言えば、この「そもそもこの商品やサービスってどんなものか」がなければ、商品の方向性や戦略がブレてしまいます。また、後述する実例のプロセスでも「なぜそのデザインになったか」の前に必ず「そもそもこの商品やサービスってどんなもの?」の理解が前提としてあることが見受けられます。SeeとThinkの過程で得た情報や考え出した戦略がWonderのタネとなるのです。

Wonderは売りたい商品・サービス、その戦略を効果的に魅せること

そしてここで製品を具体的にどういう形にするか、というのがWonderのステップです。
売りたいものと、売りたいものの戦略を実現するために必要なのがデザインの力。ここで初めて具体的なヴィジュアルの話をするから、デザイナーの出番やっと登場だぜ!というケースが多いかもしれません。ですが、マーケティングデザイン論の文脈で言えば、SeeやThinkで揃った情報と戦略を繋げて最終的な成果物に落とし込むというプロセスなので、本来ならばSeeやThinkの過程からデザイナーが加わっていることが望ましいのでしょう。商品のパッケージも宣伝媒体も、効果的なものを打ち出すにはマーケティングやデザインと繋げて考えると成功率が上がる。それならば、上の方の過程から見通せている状態で制作に取りかかることが一番ベスト!ということを私自身は感じました。
(実際にデザイナーとして現場に関わった経験がないので、ここら辺の話はたじまさんのお話や自分の勉強を通して感じたことです。デザイナーとしてそういう現場に関わってみたい…!)

Wikipedia先生を見てみると構造がわかりやすいよ

実際にこのマーケティングとデザインがつながっている構造をみるにはWikiをみると良いですよ〜ということでググってみると、なるほど確かにページ右端のところにある概要説明バーに3つの構造が書いてあります。

マーケティング - Wikipedia

◆要約するとこんな感じ
・主要概念 → 商品を売り出そうとしている環境や相手を知る(See)
・宣伝内容 → 商品をどういった方向性、内容で売り出すかを考える(Think)
・宣伝媒体 → 売りたい商品・サービス、その商品の販売戦略のためにデザイン、技術をどう用いるか考える(Wonder)

こうしてみると、マーケティングの目的を達成するには、「市場調査や商品戦略はしっかりやってるけど、その良さを伝えるデザインはまあよしなに」なことにしても意味がないし、「このメディア媒体や技術は流行りだから市場調査とか戦略とかろくにしなくても売れる!」という考えも通用しないということが見えてきます。

実例で見る!「See Tnink Wonder」

売れる商品、よくできているサービスはちゃんとSee Think Wonderの3ステップがある。実際にたじまさんが紹介してくれた例から考えてみます。

実例1:明治 おいしい牛乳

See
・世の中の牛乳に対するイメージとは?
雪印の食中毒問題で、健康的でないイメージが強くなっていた…

・人々が牛乳の嫌いな原因とは?
→牛乳の臭みが嫌われる原因。
→成分テストをした結果、牛乳が酸化することで臭みが発生することが発覚
→牛乳から酸素を抜くことで、新鮮で臭くない牛乳に!

Think
・ネーミングはどうする?
→流行りのネーミングスタイルよりも、こだわったことをそのままストレートに表す!

・家庭で選ばれる牛乳のパッケージの色は?
→消費者テストをした結果、スーパーなどで目を引く赤色より、
 家庭の朝食風景に馴染む青の方が好まれることがわかった!

・スーパーや店頭で選ばれる場合何を意識したら目につきやすい?
→商品陳列におけるゴールデンゾーン(=自然と目に入りやすい位置。人の少し下向き気味の目線位置)を意識すると届きやすい

Wonder
・おいしさを表現するためのパッケージの絵柄は?
→今までの牛乳パッケージにあるような牧場や牛のイラストを使用せずに、
 グラスに注がれた牛乳の写真を使って、美味しさと新鮮さをアピール

・ゴールデンゾーンに商品を配置するにあたって各部位をどう見せるか
→注ぎ口は商品名が目立つような配置に、
 本体部分は商品名と牛乳の写真が目立つような縦型レイアウト、
 商品下部は、陳列棚の支えが被さることを考慮して、
 商品説明や商品名が入り込んでしまわないように調整

・おいしい牛乳が一つのブランドとして長く愛されるためには
→パッケージ上部にアーチ状の装飾を拵え、
 そのアーチ状の装飾を他の場所でも展開し、
「青色アーチ=おいしい牛乳」を想起させるようにした!
(ブランド関連の招待状のデザインにアーチ状の飾りを取り入れる、など)

今や牛乳の主要ブランドの一つとなっている明治おいしい牛乳。15年前までは牛乳といえば雪印、というイメージが強かった時代があったことをご存知ですか?雪印は不正と食中毒問題で一気に人気が暴落し、それに変わって人気ブランドとなった明治おいしい牛乳。人気になったわけは、徹底して人に向き合い、普通に選ばれる牛乳を目指したこと。このパッケージを担当した佐藤卓さんは、売場における子供や高齢者の目線まで考えたうえでフォントの位置もミリ単位で調整したそうです。それらも全て、人々に普遍的な牛乳として選ばれるための工夫。デザイナーの仕事の真髄を感じられる一例です。

実例2:三菱地所グループカード販促キャンペーン

See
・そもそも依頼主のクレジットカードはどういうものなのか?
→クライアントのサイトをみて、より詳細な情報を収集

・カードに対するお客様の評価は?
→口コミ(知恵袋やSNSなど)を調査

・他社と比較してポイント交換レートはどんな感じ?
→比較評価やポイント交換比較サイトなども調査

・実際にお店の人が案内している現場はどんな感じ?
→実際に店舗に行ったり、案内の現場をみたり、リーフレットを実際に取ったり…

Think
・他と比べて魅力的に見せるためには?
→良さを一言でまとめることで、訴求力を増すようにする!
→様々なサービスや特典を満喫できることが伝わるフレーズに集約

・ただのお客様へのパンフレットとしての役割以上にするには?
→販促現場で、店員さんがパンフレットを利用して説明を行なっていたことから、
 お客様に取ってわかりやすい機能はもちろん、
 店員さんに取っても説明しやすい機能も備えたものとして制作する!

Wonder
・良さを伝えるためにどうデザインに落とし込む?
→どういう風に使えるか、実際のシュミレーションや使用例を示す
(ポイント交換シュミレーション例を示す、会員の特典の具体例を示す、などなど)
 →実際にお客さんに伝わるかどうかを確認!

・お客様にとっても店員さんにとっても最適なリーフレットとは?
→お客様視点からの疑問や質問などを集めたQ&A集を記載
 =店員にとってはお客様に説明しやすくかつ魅力を伝えるためのツールとなる!
→カードと同じ形のリーフレットにすることで、
 何のパンフレットかわかりやすくかつ持ち運びしやすくなる


これは実際にたじまさんが関わったプロジェクトのお話です。三菱池所グループカード(クレジットカード)の契約数を伸ばすための販促手段を刷新してほしいという依頼で、最終的に反則パンフレットのデザインを刷新した例です。最初企画概要がコピー用紙一枚でポイント数とキャンペーン内容のみしか書いていなかったという情報の少ない依頼の中、「見た目は仕組みが作る」という考えの元、サービス内容、カードの販促現場の実態、評判の調査を積み重ね、最終的に「お客様にわかりやすいパンフレット」としての機能だけでなく「カードを販促する店員が実際にお客様に説明する際に助けとなるパンフレット」という二つの機能を備えたものに昇華させたそうです。実際に講義の中でそのパンフレットを見せてもらいましたが、パッとみただけでわかりやすいのはもちろん、店員さんの説明の助けになる部分は裏面に記載して表裏で役割を分けるという工夫もこしらえていました。よく考えられているデザインを見ると発見が多いので勉強になる上にみていて楽しいです…

たじまさんのお話から私なりに3つに分類してみましたが、「あれこれってThinkじゃなくてWonderなのでは?」とか「SeeというかThinkなのでは?」というものもあるかもしれません。というのも、実際のところうまくこの3つのステップがつながっているものほど厳密に分けるのが難しいというのがあります。最初から市場調査の結果や戦略やデザインが一本軸でつながっている前提のプロジェクトは、そもそもデザインにもちゃんとした意図が組み込まれているものが仕上がっているし、戦略を練る段階でパッケージや広告などデザインの領域に入っているということなのでしょう。

個人的に思ったことまとめ

ここからはマーケティングデザイン論の導入部分を学んでみて個人的に感じたことを書き記して置こうと思います。基本的に私の個人的な感想なので「マーケティング以外の話は興味ないんで!」って方はここら辺からページ離脱してください。

マーケティングって「おもてなし」!

この講義を聞いて一番感じたことです。
マーケティングとデザインを掛け合わせた実例を聴きながら、成功するマーケティングの条件の根底にはお客様に対する「おもてなし」の心があるんだと感じました。
そしてデザインにそういったマーケティング的考え方を持ち込むと言うことは、クライアントがターゲットとしているお客様に対してのおもてなしの心はもちろん、クライアントに対してもおもてなしをしているということになります。

マーケティング + デザイン」な考え方のデザイナーは
物を売りたい企業と、物を欲しいと思うお客様に対して、とっても「おもてなし」をしている!

この姿勢、私はとても共感しました…
もともと私は、友達の誕生日プレゼント考えたり選んだりするの好きな人間で、「せっかく渡すなら、その人が本当に欲しいものをプレゼントしたい!」と考えているので、誕生日を迎えようとしている友達が何を必要としているのか注意して会話をしたり、その子の持ち物や行動をみながら「こういうプレゼントなら今必要としているのではないかな?」と推測して、友達にプレゼントを渡すということをしているんです。その結果「これ好き!」「ちょうど新しいのが欲しいと思ってた!」と喜んでもらえてプレゼントを使ってもらう様子を見たときの達成感や喜びは、半端ないことこの上なし。たじまさんの言葉を借りると、「その人のことをよく見て、その人のことをよく考えて、結果その人にWonderな体験をしてもらう」ということがしたかったんでしょうね。なので私にはとても合うデザイン思考だなと感じました。

こういうデザインをやりたいんだ!と気づかせてくれた

個人的な話をすると、私はちょうど転職活動中の身でして、この勉強会に参加する前、ちょっと自信無くして落ち込みかけていた状態だったのです。
というのも、転職活動と並行して色々な交流会に参加しており、その中で業界のお話や実際にデザイナーとして活動している方とお話しした結果「スキルや経験が全然追いついてないのにデザイナーとして転身しようとしている私は、一体何を信念にして活動しようとしているんだ?」とぐるぐるぐるぐるドツボにハマってたのです。
ですが、この講義を聞いたことで「そうだ、私はこういうことをやってみたいのか。そのためだったらスキルやら経験やら何でもキャッチアップして前進しよう!!!」と元気をもらえたのです。結局のところ「好きすきやってみたい!」という気持ちがあれば経験とかスキルとかは気持ちの強さで何とかできると思い出したんです。
元々私は文系出身でSEをやっているんですけど、今まで何とかやって来れたのって「設計考えるのって面白い要素あるな」「プログラミングって学べば学ぶほどもっと色々とやってみたくなるな」という「すきすきやってみたい!」精神があったからなんです。なので何かをはじめる際に必要なものってエンジンとなる自分の軸(「すきすきやってみたい!」精神)だけなんです。
ちょうど私は様々な情報に圧倒されてしまって、デザイナーを目指すに当たってそこの自分の軸を見失っていました。スピードがでない車のように自信消失低速モードだった私を、「やってやる!」な爆速モードに戻してくれたたじまさんの今回の講義にはとても感謝の気持ちでいっぱいです。


私の与太話が入ったせいでだいぶん記事長くなってしまいましたが。。。
とても刺激になった講義でしたので、備忘録として執筆しました。
もっとこの分野について知りたいことも色々あるので、さらに個人的に勉強しつつ、私自身もこういうことをやるデザイナーになれるように行動していこうと思います。

最後に、今回の講義はもちろん、記事執筆にあたって公開の許可や協力をいただいたたじまちはるさんには心の底から感謝です!
マーケティングとデザインをつなぐことの面白さ、教えていただきほんとうにありがとうございました!