感情から表情を作れる絵文字を作った
感情から表情を作れる絵文字、VariEmojiというものを作りました。
6つの基本感情（喜び、悲しみ、怒り、驚き、嫌悪、恐怖）を操作して、怒ってるけどちょっと笑っていたり、通常の絵文字になさそうな表情を作ることができます。
フォントはここから試せます。
今回はこのフォントの作った過程と、使い方を説明します。
はじめに
この絵文字のベースとなっているのは、Variable Fontというフォント仕様になります。
Variable フォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを1つのファイルに組み込むことができる OpenType フォント仕様の進化版です。
引用：Variable フォントガイド - CSS: カスケーディングスタイルシート | MDN
VariEmojiは😐（U+1F610）のスタイルのバリエーションとしていろいろな表情を割り当てています。
Variable + Emoji で VariEmoji という名前にしているのですが、捻りがなさすぎてピンときてないです。もし他にいいのが出れば変えたいです。
作った経緯
このフォントを作る１週間前に小ネタ的なVariable Fontを作ったところ少しウケまして、以前から「ユニコードの規格にない絵文字を作りたい」という気持ちがぼんやりとあったこともあり、絵文字をVariable Fontで作ることにしました。
フリーザが変身するバリアブルフォントを作りました。#Frieza #variablefont pic.twitter.com/nmFF9A22br
— のだ (@juuunnnk) 2020年7月5日
Variable FontはAxis（変化の軸）を設定することでパラメータを変化させることができます。
フリーザの時は一つの軸しか使用してなかったですが、Variable FontはWeightやWidthのように軸を複数設定することができます。今回の場合はその仕様を最大限活用したかったので６つの感情を軸にすることにしました。
引用元：Introducing OpenType Variable Fonts
なお、今回の６つの基本感情というのは、心理学者のポール・エクマンの理論にそって作成してます。（エクマン理論の感情と表情の関係は、厳密には文化圏によって異なるようなのですが、絵文字ということで今回はそこまで考慮してません。）
参考：It’s all in the _____(Embodiment)emotionalconnectionblog.wordpress.com
制作方法
自分はGlyphsを使ってVariable Fontを作ってます。Glyphs以外のフォント作成のソフトを使ってないので比較できないのですが、GlyphsはパスデータをIllustratorからコピペできたりするので楽です。
大まかに作業内容をかくと、下記の内容になります。
- 極値となる形状の作成
- Glyphsで形状をベースにパスを調整
- Glyphsで軸・パラメータの設定
- variable font書き出し
作業として一番時間がかかるのは２の部分で、ここでパスが綺麗になっていないと4の書き出しで苦労します。
1. 極値となる形状の作成
はじめに極値となる部分のパスをイラレで作りました。今回の場合、Normalと６つの感情のあわせて７つ作ります。
顔のパーツの共通化をしてます。基本的には眉、目、口で構成されていて、「悲しみ」と「怒り」の表情には顔以外の涙や💢マークを足しました。
2. Glyphsで形状をベースにパスを調整
目標とする形状ができたらGlyphsに持ってきます。通常のフォントと異なりVariable Fontを作る際には異なる軸の値同士でパスの数を合わせるように気を付けないといけないです。
具体的には、NormalのパスをベースにしてJoyの表情にしていかないといけません。
After Effectsなどでモーフィングのアニメーションを作ったとこがある人ならイメージがつきやすいと思います。
3. Glyphsで軸・パラメータの設定
(Glyphsの仕様かもですが、)Variable Fontは軸が6つまでしか設定できないようです。
Variable Fontには元々、Weight、Width、Ilatic、Slantと軸が設定できるようになっていますが、独自の名前の軸の場合はVirtual Masterの設定が必要になり、軸の名前は４文字の英字で構成しないといけないです。今回の場合はそれぞれ下記のように設定しております。
- Joy
JOYY0 ~ 900 - Sad
SADD0 ~ 900 - Angry
ANGR0 ~ 900 - Surprise
SPRS0 ~ 900 - Disgust
DGST0 ~ 900 - Fear
FEAR0 ~ 900
気付いたら「だんご7兄弟」がいたGlyphsの画面
4. Variable Font書き出し
設定できたら、GlyphsからFontの書き出しをします。前述の通り、パスの数が合っていなかったり、パスのカーブが綺麗でないとVariable Fontとして書き出しができません。
基本的にはGlyphsのサイトに必要な設定など細かく載っているので、より詳しく知りたい方はこちらを参考にしてください。
ちなみに自分がつまずいた時はこの辺が参考になりました。
Variable font won't export due to TrueType curves
Too many inflections
使い方
ブラウザで使う場合、CSSのfont-variation-settingから軸を指定することで使用できます。
仕様としてVariEmojiの感情の軸の値は0 ~ 900まで設定できるようにしていますが、デモではそれぞれの最大値を500までにしてます。と言うのもあまり大きい値同士を組み合わせると簡単に表情が崩れてしまったので。
body {
font-family: "variemo";
font-variation-settings: 'JOYY' 900, 'SADD' 900, 'ANGR' 900, 'SPRS' 0, 'DGST' 0, 'FEAR' 900;
color: #37b6db;
}
使用例
このfontの良さをあげるとするならば、構成がシンプルなのと実装がしやすいことかと思ってます。 Variable Fontに対応している環境であれば、すぐにパラメータで絵文字を作れます。
そんな訳でおまけとしてこのVariEmojiの使用例のdemoを２種類作ってみました。あくまで実験的なものですので、実際に有効性があるかどうかは大目にみてください。
例１）評価のアイコン
https://juuunnnk.github.io/VariEmoji/demo1.html
SNSだったりECサイトでレビューする際の「いいねアイコン」がこんな風にパラメータに応じて変わっていくと楽しそうですよね。ゲームの難易度選択とか相性良さそうかなと思います。
例２）アニメーション
https://juuunnnk.github.io/VariEmoji/demo2.html
Variable Fontの使用例としてアニメーションはよくあります。上のデモはCSSアニメーションだけで実現しているので比較的簡単にできます。
ちなみに、この記事の最初にあげたデモ（https://juuunnnk.github.io/VariEmoji/）について、今後は作った絵文字を画像でダウンロードできるようにしようと思っているのですが、一番簡単に実装できると思っていたCanvasがfont-variation-settingに対応していないみたいで頭を抱えてます。
OpenType Features and Variable Fonts for Canvas · Issue #3571 · whatwg/html · GitHub
画像ダウンロードを実現するには、裏でパペッター等を使ってスクショを撮る仕組みを作らないといけなさそうでして、ゆっくりと実現できればと思ってますので、すみませんがもう少しお待ちください。
最後に
フォントのファイル自体はここにあります。
最近の環境であれば、比較的簡単に扱えると思いますのでよければ触ってみてください。
6つの基本感情を調整して、自由に表情を作れる絵文字を作ってみました。
— のだ (@juuunnnk) 2020年7月12日
怒ってるけどちょっと笑っている、みたいな微妙な表情の絵文字が作れます。https://t.co/2dLS3LWq9s#variablefont pic.twitter.com/QTS18CGP0X
2019年、個人的に印象に残った言葉 ベスト３
毎年その年に印象に残った言葉をまとめてます。2019年は働くようになってからはじめての、あまり印象に残る言葉と出会わない「不作の年」でした。その中で辛うじて残ってくれた言葉を発表します。
第3位 ピゲ家
10月ごろに六本木であったオーデマ ピゲの展覧会を見に行った際、オーデマピゲの家系図とその横で解説しているお兄さんがいました。そこでお兄さんが家系図を指差しながら「ピゲ家の歴史は〜」「ピゲ家において〜」と言っていて、ずっと言ってる「ピゲ家」ってあんまり聞かない言葉だなと思って聞いてて印象に残ってました。すみません。2019年は不作の年です。
第2位 髪の毛は起きてる時に伸びるんだよ
今年の8月ごろ、いつも行く美容室にて「今月はの髪伸びるの早かったね〜。遅くまで仕事してた？」と聞かれました。実際にその時期は忙しかったのですが、仕事と毛量になにか関係があるんですか？と聞いたところ、美容師さんから「髪の毛は起きてる時に伸びるんだよ」と教えてもらいました。
確かに、今までの自分の髪が伸びていたスピードを考えてみれば、徹夜をしがちな時はよく伸びていたなと思い印象に残りました。
その後、帰って色々と調べたら、科学的には伸びる時間は解明されていないが、よく寝ている人の方が比較的髪は伸びやすいらしいです。あれ？言ってたことと違くね？
第1位 もっと青を足したら？
デザインを作って上司にレビューしてもらうことがあるのですが、今年はその上司が不眠症で悩んでいました。今年の8月の夜中、ある程度形になったデザインをみてもらうと、「青を足したら？」というレビューをもらいました。再調整して見せたのですが、それも「もっと足したら？」というアドバイス。
「う〜ん」と思い上司を見ると、不眠症対策のブルーライトカットメガネをしている状態でレビューをもらってました。そりゃ色が違ってみえますよね！へへ！
そんなわけで2020年も印象に残った言葉がもしあればまとめます。
2019年に観た新作映画まとめ
今年もそろそろ終わりです。
毎度のことなんですが、今年観た新作映画をまとめます。
今年はまとめ方を変えた都合上、公開順になってないです。すみません。
2019年観た新作映画
- スパイダーマン：スパイダーバース
- ミスター・ガラス
- アクアマン
- アリータ: バトル・エンジェル
- メリー・ポピンズ リターンズ
- グリーンブック
- キャプテン・マーベル
- シュガー・ラッシュ:オンライン
- 名探偵ピカチュウ
- レゴムービー２
- シャザム！
- 名探偵コナン 紺青の拳
- アベンジャーズ/エンドゲーム
- 愛がなんだ
- ファースト・マン
- ゴジラ キング・オブ・モンスターズ
- プロメア
- トイ・ストーリー４
- メン・イン・ブラック：インターナショナル
- X-MEN：ダーク・フェニックス
- ロケットマン
- ワイルド・スピード／スーパーコンボ
- ミュウツーの逆襲 EVOLUTION
- ライオン・キング（2019）
- スパイダーマン:ファー・フロム・ホーム
- アラジン
- 天気の子
- 『劇場版 仮面ライダージオウ Over Quartzer』『騎士竜戦隊リュウソウジャー THE MOVIE タイムスリップ!恐竜パニック!!』
- ONE PIECE STAMPEDE
- ドラゴンクエスト ユア・ストーリー
- ワンス・アポン・ア・タイム・イン・ハリウッド
- ジョン・ウィック:パラベラム
- ジョーカー
- かぐや様は告らせたい～天才たちの恋愛頭脳戦～
- イエスタデイ
- ターミネーター:ニュー・フェイト
- アナと雪の女王2
- JESUS IS KING
- 映画 すみっコぐらし とびだす絵本とひみつのコ
- 映画 ひつじのショーン UFOフィーバー！
- スター・ウォーズ/スカイウォーカーの夜明け
ざっと41本になりました。
印象に残った映画
今年観た映画で印象に残ったものをまとめます。
スパイダーマン：スパイダーバース
去年の段階で一番観たかった映画。年始にアメリカに旅行に行ったタイミングで向こうの映画館で観ました。テンポ感もいいし、コミックの被写界深度の表現が観ていて気持ちよかったです。あと最初のSONY PICTURESのグリッチ表現でおしっこが漏れてました。
アベンジャーズ/エンドゲーム
インフィニティー・ウォーの時の興奮も凄かったんですが、そこから１年と待たされている間に「僕が想像するエンドゲーム」みたいなものをずっと考えていたため、それの答え合わせという感じでも非常に楽しかったです。
結果としては、どの予想を超えて良かったです。TOHOシネマズ新宿の初回で観たんですが、中盤のNYの展開での劇場の歓声（というか悲鳴）はいまだに新鮮に残ってます。
ディズニーの発表があってから「４マジでやるの？」と思ってたんですが、公開直前もずっと思ってました。
内容は多分今年みた映画の中で一番ビビりました。
来年観たい映画
- パラサイト
- シン・エヴァンゲリオン劇場版:||
- キングスマン: ファースト・エージェント
- ゴジラVSコング
来年は年明けして早々にパラサイトを観に行ければと思います。
来年もみるぞー。
iPhoneがだいたいチュートリアルになってた
正月はハワイにいってました。向こうの気温、最高だった〜。ウキウキな様子はインスタにあげようと思います。
帰国後は録画してた正月番組をみてます。出発前だったので日本でもみてたんですが、特に紅白をみていて、ブログを書きながらも紅白プレイリストを聞いてます。Apple Musicだと、星野源とかジャニーズ系がまったくない&メドレー系がないので、手に入る範囲で補完してます。
以下、今日サウナに入りながら思っていた自分とデジタルツールのことです。
iPhoneアプリでツールの使い方を学ぶ
＝＝＝＝サウナ内＝＝＝＝
僕の仕事はWeb制作が主です。
仕事において、普段触ってるようなPhotoshopなり、AfterEffectsなりのツールの操作方法は、iPhoneアプリから基礎を学んだな〜〜とふと思いました。
僕みたいな人はたくさんいるだろうし、この先ずっと増えていくと思うのですが、デジタルツールの使い方は、パソコンよりもスマホから得ました。
多くの漫画作品がデビルマンの系譜にあるように（笑）、僕のデジタルツール学習の系譜は「iPhoneのアプリ」からあるんだなと。
＝＝＝＝水風呂＝＝＝＝
iPhoneのPhotoshopのアプリで何となく触ってたから、その延長としてPhotoshop CCに特に違和感なくさわれたり、アプリのiMovieをずっと使ってたからそこまで障害なく触れはじめたな〜という気がしてます。
よくエンジニアの方の学習マップをみますが、自分の「クリエイティブツールに限定した話」だとだいたい始点はiPhoneアプリです。
アプリ用に限定されたツールから徐々に使い方を覚えてこれたので、クリエイティブツールを使いはじめる上で、iPhoneアプリはツールの考え方の良いチュートリアルになってたなーと思いました。
それ以外の学習効率悪い
＝＝＝＝サウナ内＝＝＝＝
何を思ってるかというと、iPhoneで触ってきてなかったようなツールの学習効率が非常に遅いんですよね。
デザインなどのクリエイティブ寄りのツールは、Adobeソフトの延長線で考えで使えるてるんですが、そもそもの話でiPhoneに初期の頃なかったFinderの整理の仕方とか、Office系のツールとか、あとはまぁ紙の書類とか、新卒で会社に入って時間かけて覚えてたのはアプリで触ってこなかったツールでした。まぁ当たり前ですね。
＝＝＝＝水風呂＝＝＝＝
iPhoneで触ってなかったようなツールをはじめに触るような時は、特に丁寧めにチュートリアルをやっていた & いるという感じです。
＝＝＝＝サウナ内＝＝＝＝
これから先、PC、スマホの境界は徐々に曖昧になっていく & タッチデバイスだからできるような作り方がもっと増えていくと思いますが、とりあえず新卒で制作会社に入った頃は、まぁまぁiPhoneを触ってて助かったなと思いました。
以上です。
今日の曲
2018年、個人的に印象に残った言葉 ベスト３
印象深かった言葉があるとiPhoneでメモを取っているのですが、年末になると、一連のメモの整理もかねて、それらの言葉を思い返す作業をしています。今年も印象に残った言葉がいくつかあったのでベスト３をブログに記載します。
参考までに2017年はこんな感じでした。
今年の特徴としては、会社の人周りの言葉が多めです。
さっそく第３位です。
第３位 『みよし x KREVA』
10月ごろの会社の上司の発言。
夜中の会社にて、上司と2人だけ残り、作業をするという状況がありました。お互いの集中力が切れていたというのもあり、スピーカーでいろんなJ-POPを流して、かかっている曲にまつわるアーティストの話をしていると、ちょうどKREVAの曲がかかり次のようなことを上司が言いました。
これ、KREVAか。
KREVAとコラボしていた人って誰だったっけ？
ギターうまい人、えーっと、み、み、、みよしっ！
おそらく、MIYAVIのことを言いたかったのだと思いますが、「みよし」というめちゃくちゃ苗字感のある名前を上げてきたので、そのギャップに非常に印象を受けました。
その後、なし崩し的にでた「みよし x KREVA」は会社からの帰路で何度も思い返してしまいました。
- アーティスト: MIYAVI vs KREVA
- 出版社/メーカー: EMI MUSIC JAPAN INC.
- 発売日: 2012/11/14
- メディア: MP3 ダウンロード
- この商品を含むブログを見る
第２位 『もしも、僕が痴漢で捕まったら』
ちょっとした小説のタイトルみたいですが、今年の11月ごろの、会社の上司の言葉です。ちなみに3位の方とは別の方です。
とある作業が、会社の中でその上司しかできなかったため、「リスク管理していきたいですね」という話になりました。
その会話の中で上司が、
そうだよね。
明日の朝もしも、僕が痴漢で捕まったりしたら、この作業できる人いないわけだから、、
と発言しました。
はじめは冗談として、そこまで違和感を感じていなかったのですが、あとになってじんわりとリアルな発言に感じてしまいました。
もしかしたら、この人は毎朝ギリギリのところで生きてるのではないかと思うようになり、非常に印象に残りました。
のちに発言の意図を詳しく聞くと、痴漢は冤罪のケースが多いため、たとえやってなっくても捕まるリスクがあるという意図での発言でした。
第１位 『基本、全部外食だからね（高校の友人）』
5月ごろ、３ヶ月間かけてヒッチハイクで日本一周をした高校の友人が一周を終えていたので、居酒屋で旅の思い出などを聞いていた際に出た言葉です。
色々とヒッチハイク旅行の思い出を聞いたあとで、「結局、いくらかかったの？」と聞くと「60万円ほど」と返されました。自分は20万くらいを想像していたため、思わず「高っ！」といってしまい、
そこで
（ヒッチハイクといっても）基本、全部外食だからね。
という言葉を返されました。
交通費はかけてないけど、普通に食事してたらそれくらいいくんだなと、いい勉強になりました。ちなみに、旅行の中で一番辛かったことは、北海道で２時間くらい歩いたことらしいです。
言葉としては普通ですが、それ以降、60万くらいあれば何ができるかの例としてヒッチハイクで日本一周（外食付き）をあげれるようになり、１年を通して非常に活用させてもらった言葉になりました。
まとめ
第３位 みよし x KREVA（11月ごろ会社の上司）
第２位 もしも、僕が痴漢で捕まったら（10月ごろ会社の上司）
第１位 基本、全部外食だからね（5月ごろ高校の友人）
今年の印象に残った言葉をまとめるとこんな感じになります。
振り返ってみて思うのは、あんまり大したこと印象に残ってないなということでした。
良いお年を。
2018年に観た新作映画まとめ
毎年まとめているその年にみた映画のリスト。今年もまとめました。ほぼ観た順番です。
例によって、年末までに観た映画があったら再度更新するかもです。
- キングスマン：ゴールデン・サークル
- バーフバリ2
- ブラックパンサー
- リメンバー・ミー
- シェイプ・オブ・ウォーター
- パシフィック・リム：アップライジング
- アベンジャーズ インフィニティ・ウォー
- レディ・プレイヤー1
- 仮面ライダーアマゾンズ THE MOVIE 最後ノ審判
- GODZILLA 決戦機動増殖都市
- デッドプール2
- ニンジャバットマン
- ハン・ソロ／スター・ウォーズ・ストーリー
- インクレディブル・ファミリー
- ミッション：インポッシブル／フォールアウト
- カメラを止めるな
- 劇場版 仮面ライダービルド Be The One(ビー・ザ・ワン)／快盗戦隊ルパンレンジャーVS警察戦隊パトレンジャー en film(アンフィルム)
- ジュラシック・ワールド／炎の王国
- アントマン＆ワスプ
- SUNNY 強い気持ち・強い愛
- プーと大人になった僕
- ヴェノム
- ボヘミアン・ラプソディ
- ファンタスティック・ビーストと黒い魔法使いの誕生
- ドラゴンボール超 ブロリー
- 平成仮面ライダー20作記念 仮面ライダー平成ジェネレーションズ FOREVER
- シュガー・ラッシュ:オンライン
- ブラック・ミラー: バンダースナッチ
---
計29本
昨年よりは多くなったものの、もっと観たかったなぁ〜〜というのが本音です。昨年に引き続き、今年もやっぱりアメコミ系、特にMCU系に興奮してました。
インフィニティー・ウォーを新宿のTOHOシネマズの最速上映に観に行って、震えて帰ったのが非常にいい思い出です。
未だに観れていない映画
今年公開された映画の中で、未だに観れてなくてもどかしくなってる映画の一覧は下記になります。年末年始で観ていきたいです。。
※（）内には、観たい理由を書いてます。
- メイズ・ランナー 最期の迷宮（前作、前々作を観ているので謎が気になる）
- ちはやふる 結び（前作、前々作を観ているので展開が気になる）
- GODZILLA 星を喰う者（前作、前々作を観ているので展開が気になる）
- ピーターラビット（観た周りの人たちが、よく比喩表現に用いていたから）
- 響 HIBIKI（欅坂46の平手さんをみたいから）
- クソ野郎と美しき世界（宣伝はよくみていたけど、あまり周りから感想を聞かないから）
- アリー スター誕生（すごい流行っているっぽいから）
- ファミリー☆ウォーズ（あらすじとポスターがめちゃハマってて面白そうだから）
- 劇場版 若おかみは小学生！（SNSでめちゃめちゃ絶賛されてるから）
- グレイテスト・ショーマン（観た人みんなアホほど絶賛しているから）
- ニセコイ（みてないで感想を言ってしまったから）
来年期待している映画
大したリサーチをできていないですが、来年に観にいきたいなと思ってる映画はざっと下記です。
- スパイダーマン：スパイダーバース
- ファーストマン
- アクアマン
- キャプテン・マーベル
- シャザム!
- ゴジラ キング・オブ・モンスターズ
- アベンジャーズ エンドゲーム
- スパイダーマン:ファー・フロム・ホーム
- トイ・ストーリー４
- スター・ウォーズ エピソード9
- レゴムービー２
- 名探偵ピカチュウ
スパイダーバースは自分の人生ベスト映画のうちのひとつ になることがほぼ決まっているので、アメリカとかにいけるタイミングあったら観てこようと思ってます。
ファーストマン、アベンジャーズ エンドゲームも観たすぎて震えてます。
来年も健康に過ごせれば嬉しいです。
よければ2017年に観た映画まとめもどうぞ。
bodymovinばかり使ってます
僕の普段の仕事のほとんどはWebサイト制作です。
そんなサイト制作でよく使うのがbodymovinです。 github.com
2017年から、bodymovin（今はlottie?）を知って以降、７割くらいのサイトで使ってる気がします。
bodymovin（Lottie）は、AfterEffectsで作ったシェイプアニメーションをSVGアニメーションとしてjsonで書き出してくれるツール。
例えば、とりあえず制作途中の自分のサイト
JUUUNNNKでは、ロゴアニメーションでbodymovinを使ってます。
こんなの
bodymovinは実装する人にあんまり負担をかけず、アニメーションをポンと入れれるのでめちゃ便利です。
最近だとWebGLのすんげーカッコいいエフェクトばっかりのサイトとかあって羨ましいのですが、
そういったWebGLゴリゴリのサイトは、業界のWebデザイン合戦に持ち込まれたレーザー砲と思ってます。
bodymovinはそれに対して、手軽な手榴弾くらいだと思います。
シェイプアニメーションで作れば、Chromeではだいたい綺麗になりますが、バグりやすい条件などがいくつかあります。
よく言われてるのが、パスの結合で、 最近だと、主にIE系ではトラックマットの重ねすぎでも表示が崩れやすいことに気づきました。 上手いこと言ったら、会社のブログとかに実案件のロゴ内容とかと合わせてまとめようと思います。
下記の記事で知りました。ありがとうございます。
