感情から表情を作れる絵文字を作った

感情から表情を作れる絵文字、VariEmojiというものを作りました。

 

6つの基本感情(喜び、悲しみ、怒り、驚き、嫌悪、恐怖)を操作して、怒ってるけどちょっと笑っていたり、通常の絵文字になさそうな表情を作ることができます。

f:id:junkino:20200719164454g:plain

 フォントはここから試せます。

juuunnnk.github.io

 

今回はこのフォントの作った過程と、使い方を説明します。

 

 

はじめに

この絵文字のベースとなっているのは、Variable Fontというフォント仕様になります。

Variable フォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを1つのファイルに組み込むことができる OpenType フォント仕様の進化版です。

引用:Variable フォントガイド - CSS: カスケーディングスタイルシート | MDN

 

VariEmojiは😐(U+1F610)のスタイルのバリエーションとしていろいろな表情を割り当てています。

Variable + Emoji で VariEmoji という名前にしているのですが、捻りがなさすぎてピンときてないです。もし他にいいのが出れば変えたいです。

 

 

 

作った経緯

このフォントを作る1週間前に小ネタ的なVariable Fontを作ったところ少しウケまして、以前から「ユニコードの規格にない絵文字を作りたい」という気持ちがぼんやりとあったこともあり、絵文字をVariable Fontで作ることにしました。

 

 

Variable FontはAxis(変化の軸)を設定することでパラメータを変化させることができます。

フリーザの時は一つの軸しか使用してなかったですが、Variable FontはWeightやWidthのように軸を複数設定することができます。今回の場合はその仕様を最大限活用したかったので6つの感情を軸にすることにしました。

 

f:id:junkino:20200719164845p:plain

引用元:Introducing OpenType Variable Fonts

 

なお、今回の6つの基本感情というのは、心理学者のポール・エクマンの理論にそって作成してます。(エクマン理論の感情と表情の関係は、厳密には文化圏によって異なるようなのですが、絵文字ということで今回はそこまで考慮してません。)

 

f:id:junkino:20200720003714p:plain

参考:It’s all in the _____(Embodiment)emotionalconnectionblog.wordpress.com

 

 

制作方法

自分はGlyphsを使ってVariable Fontを作ってます。Glyphs以外のフォント作成のソフトを使ってないので比較できないのですが、GlyphsはパスデータをIllustratorからコピペできたりするので楽です。

glyphsapp.com

 

大まかに作業内容をかくと、下記の内容になります。

  1. 極値となる形状の作成
  2. Glyphsで形状をベースにパスを調整
  3. Glyphsで軸・パラメータの設定
  4. variable font書き出し

作業として一番時間がかかるのは2の部分で、ここでパスが綺麗になっていないと4の書き出しで苦労します。

 

1. 極値となる形状の作成

はじめに極値となる部分のパスをイラレで作りました。今回の場合、Normalと6つの感情のあわせて7つ作ります。

f:id:junkino:20200719180800p:plain

最初に描いたスケッチ

 

f:id:junkino:20200719170602p:plain

スケッチから整えたベースとなる表情の絵文字

 

顔のパーツの共通化をしてます。基本的には眉、目、口で構成されていて、「悲しみ」と「怒り」の表情には顔以外の涙や💢マークを足しました。

 

2. Glyphsで形状をベースにパスを調整

目標とする形状ができたらGlyphsに持ってきます。通常のフォントと異なりVariable Fontを作る際には異なる軸の値同士でパスの数を合わせるように気を付けないといけないです。 

 

具体的には、NormalのパスをベースにしてJoyの表情にしていかないといけません。

f:id:junkino:20200719171925g:plain

地味ですが、Joyの表情になるようにパスを調整してます。

 

After Effectsなどでモーフィングのアニメーションを作ったとこがある人ならイメージがつきやすいと思います。

 

3. Glyphsで軸・パラメータの設定

(Glyphsの仕様かもですが、)Variable Fontは軸が6つまでしか設定できないようです。

Variable Fontには元々、Weight、Width、Ilatic、Slantと軸が設定できるようになっていますが、独自の名前の軸の場合はVirtual Masterの設定が必要になり、軸の名前は4文字の英字で構成しないといけないです。今回の場合はそれぞれ下記のように設定しております。

 

  • Joy JOYY 0 ~ 900
  • Sad SADD 0 ~ 900
  • Angry ANGR 0 ~ 900
  • Surprise SPRS 0 ~ 900
  • Disgust DGST 0 ~ 900
  • Fear FEAR 0 ~ 900

f:id:junkino:20200719231434p:plain

気付いたら「だんご7兄弟」がいたGlyphsの画面

 

 4. Variable Font書き出し

設定できたら、GlyphsからFontの書き出しをします。前述の通り、パスの数が合っていなかったり、パスのカーブが綺麗でないとVariable Fontとして書き出しができません。

 

基本的にはGlyphsのサイトに必要な設定など細かく載っているので、より詳しく知りたい方はこちらを参考にしてください。

glyphsapp.com

 

ちなみに自分がつまずいた時はこの辺が参考になりました。

Variable font won't export due to TrueType curves
Too many inflections

 

使い方

ブラウザで使う場合、CSSのfont-variation-settingから軸を指定することで使用できます。


仕様としてVariEmojiの感情の軸の値は0 ~ 900まで設定できるようにしていますが、デモではそれぞれの最大値を500までにしてます。と言うのもあまり大きい値同士を組み合わせると簡単に表情が崩れてしまったので。

f:id:junkino:20200719220839p:plain

数値を大きくしすぎて壊れたカービィのキャラのようになった例
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を2種類作ってみました。あくまで実験的なものですので、実際に有効性があるかどうかは大目にみてください。

 

例1)評価のアイコン

https://juuunnnk.github.io/VariEmoji/demo1.html

f:id:junkino:20200720003214g:plain

レビューのアイコンを可変にする例

SNSだったりECサイトでレビューする際の「いいねアイコン」がこんな風にパラメータに応じて変わっていくと楽しそうですよね。ゲームの難易度選択とか相性良さそうかなと思います。

 

例2)アニメーション

https://juuunnnk.github.io/VariEmoji/demo2.html

f:id:junkino:20200720221006g:plain

表情のアニメーション

 

Variable Fontの使用例としてアニメーションはよくあります。上のデモはCSSアニメーションだけで実現しているので比較的簡単にできます。

 

ちなみに、この記事の最初にあげたデモ(https://juuunnnk.github.io/VariEmoji/)について、今後は作った絵文字を画像でダウンロードできるようにしようと思っているのですが、一番簡単に実装できると思っていたCanvasがfont-variation-settingに対応していないみたいで頭を抱えてます。

OpenType Features and Variable Fonts for Canvas · Issue #3571 · whatwg/html · GitHub

画像ダウンロードを実現するには、裏でパペッター等を使ってスクショを撮る仕組みを作らないといけなさそうでして、ゆっくりと実現できればと思ってますので、すみませんがもう少しお待ちください。

 

 

最後に

フォントのファイル自体はここにあります。

github.com

 

最近の環境であれば、比較的簡単に扱えると思いますのでよければ触ってみてください。 

 

 

 

2019年、個人的に印象に残った言葉 ベスト3

f:id:junkino:20200124124453j:plain
毎年その年に印象に残った言葉をまとめてます。2019年は働くようになってからはじめての、あまり印象に残る言葉と出会わない「不作の年」でした。その中で辛うじて残ってくれた言葉を発表します。

 


 

 

f:id:junkino:20200124124506j:plain
第3位 ピゲ家

10月ごろに六本木であったオーデマ ピゲの展覧会を見に行った際、オーデマピゲの家系図とその横で解説しているお兄さんがいました。そこでお兄さんが家系図を指差しながら「ピゲ家の歴史は〜」「ピゲ家において〜」と言っていて、ずっと言ってる「ピゲ家」ってあんまり聞かない言葉だなと思って聞いてて印象に残ってました。すみません。2019年は不作の年です。

 

f:id:junkino:20200124124550j:plain第2位 髪の毛は起きてる時に伸びるんだよ

今年の8月ごろ、いつも行く美容室にて「今月はの髪伸びるの早かったね〜。遅くまで仕事してた?」と聞かれました。実際にその時期は忙しかったのですが、仕事と毛量になにか関係があるんですか?と聞いたところ、美容師さんから「髪の毛は起きてる時に伸びるんだよ」と教えてもらいました。

確かに、今までの自分の髪が伸びていたスピードを考えてみれば、徹夜をしがちな時はよく伸びていたなと思い印象に残りました。

 

その後、帰って色々と調べたら、科学的には伸びる時間は解明されていないが、よく寝ている人の方が比較的髪は伸びやすいらしいです。あれ?言ってたことと違くね?

 

f:id:junkino:20200124124608j:plain第1位 もっと青を足したら?

デザインを作って上司にレビューしてもらうことがあるのですが、今年はその上司が不眠症で悩んでいました。今年の8月の夜中、ある程度形になったデザインをみてもらうと、「青を足したら?」というレビューをもらいました。再調整して見せたのですが、それも「もっと足したら?」というアドバイス

「う〜ん」と思い上司を見ると、不眠症対策のブルーライトカットメガネをしている状態でレビューをもらってました。そりゃ色が違ってみえますよね!へへ!

 

そんなわけで2020年も印象に残った言葉がもしあればまとめます。

 

junk.hatenablog.jp

 

 

2019年に観た新作映画まとめ

今年もそろそろ終わりです。

 

毎度のことなんですが、今年観た新作映画をまとめます。

今年はまとめ方を変えた都合上、公開順になってないです。すみません。

 

2019年観た新作映画

- スパイダーマン:スパイダーバース
- ミスター・ガラス
- アクアマン
- アリータ: バトル・エンジェル
- メリー・ポピンズ リターンズ
- グリーンブック
- キャプテン・マーベル
- シュガー・ラッシュ:オンライン
- 名探偵ピカチュウ
- レゴムービー2
- シャザム!
- 名探偵コナン 紺青の拳
- アベンジャーズ/エンドゲーム
- 愛がなんだ
- ファースト・マン
- ゴジラ キング・オブ・モンスターズ
- プロメア
- トイ・ストーリー
- メン・イン・ブラック:インターナショナル
- X-MEN:ダーク・フェニックス
- ロケットマン
- ワイルド・スピードスーパーコンボ
- ミュウツーの逆襲 EVOLUTION
- ライオン・キング(2019)
- スパイダーマン:ファー・フロム・ホーム
- アラジン
- 天気の子
- 『劇場版 仮面ライダージオウ Over Quartzer』『騎士竜戦隊リュウソウジャー THE MOVIE タイムスリップ!恐竜パニック!!』
- ONE PIECE STAMPEDE
- ドラゴンクエスト ユア・ストーリー
- ワンス・アポン・ア・タイム・イン・ハリウッド
- ジョン・ウィック:パラベラム
- ジョーカー
- かぐや様は告らせたい~天才たちの恋愛頭脳戦~
- イエスタデイ
- ターミネーター:ニュー・フェイト
- アナと雪の女王2
- JESUS IS KING
- 映画 すみっコぐらし とびだす絵本とひみつのコ
- 映画 ひつじのショーン UFOフィーバー!

- スター・ウォーズ/スカイウォーカーの夜明け

 

ざっと41本になりました。

 

印象に残った映画

今年観た映画で印象に残ったものをまとめます。

 

スパイダーマン:スパイダーバース

去年の段階で一番観たかった映画。年始にアメリカに旅行に行ったタイミングで向こうの映画館で観ました。テンポ感もいいし、コミックの被写界深度の表現が観ていて気持ちよかったです。あと最初のSONY PICTURESのグリッチ表現でおしっこが漏れてました。

 

アベンジャーズ/エンドゲーム

インフィニティー・ウォーの時の興奮も凄かったんですが、そこから1年と待たされている間に「僕が想像するエンドゲーム」みたいなものをずっと考えていたため、それの答え合わせという感じでも非常に楽しかったです。

結果としては、どの予想を超えて良かったです。TOHOシネマズ新宿の初回で観たんですが、中盤のNYの展開での劇場の歓声(というか悲鳴)はいまだに新鮮に残ってます。

 

トイ・ストーリー

ディズニーの発表があってから「4マジでやるの?」と思ってたんですが、公開直前もずっと思ってました。

内容は多分今年みた映画の中で一番ビビりました。

 

来年観たい映画

- パラサイト

- シン・エヴァンゲリオン劇場版:||

キングスマン: ファースト・エージェント

ゴジラVSコング

 

来年は年明けして早々にパラサイトを観に行ければと思います。

来年もみるぞー。

 

iPhoneがだいたいチュートリアルになってた

f:id:junkino:20190113030112p:plain

 正月はハワイにいってました。向こうの気温、最高だった〜。ウキウキな様子はインスタにあげようと思います。

www.instagram.com

 

帰国後は録画してた正月番組をみてます。出発前だったので日本でもみてたんですが、特に紅白をみていて、ブログを書きながらも紅白プレイリストを聞いてます。Apple Musicだと、星野源とかジャニーズ系がまったくない&メドレー系がないので、手に入る範囲で補完してます。

 

以下、今日サウナに入りながら思っていた自分とデジタルツールのことです。

 

iPhoneアプリでツールの使い方を学ぶ

====サウナ内====

僕の仕事はWeb制作が主です。

仕事において、普段触ってるようなPhotoshopなり、AfterEffectsなりのツールの操作方法は、iPhoneアプリから基礎を学んだな〜〜とふと思いました。

 

僕みたいな人はたくさんいるだろうし、この先ずっと増えていくと思うのですが、デジタルツールの使い方は、パソコンよりもスマホから得ました。

 

多くの漫画作品がデビルマンの系譜にあるように(笑)、僕のデジタルツール学習の系譜は「iPhoneのアプリ」からあるんだなと。

devilman-crybaby.com

 

 

====水風呂====

iPhonePhotoshopのアプリで何となく触ってたから、その延長としてPhotoshop CCに特に違和感なくさわれたり、アプリのiMovieをずっと使ってたからそこまで障害なく触れはじめたな〜という気がしてます。

 

よくエンジニアの方の学習マップをみますが、自分の「クリエイティブツールに限定した話」だとだいたい始点はiPhoneアプリです。

  

アプリ用に限定されたツールから徐々に使い方を覚えてこれたので、クリエイティブツールを使いはじめる上で、iPhoneアプリはツールの考え方の良いチュートリアルになってたなーと思いました。

 

 

それ以外の学習効率悪い

====サウナ内====

何を思ってるかというと、iPhoneで触ってきてなかったようなツールの学習効率が非常に遅いんですよね。

 

デザインなどのクリエイティブ寄りのツールは、Adobeソフトの延長線で考えで使えるてるんですが、そもそもの話でiPhoneに初期の頃なかったFinderの整理の仕方とか、Office系のツールとか、あとはまぁ紙の書類とか、新卒で会社に入って時間かけて覚えてたのはアプリで触ってこなかったツールでした。まぁ当たり前ですね。

 

 

 

====水風呂====

iPhoneで触ってなかったようなツールをはじめに触るような時は、特に丁寧めにチュートリアルをやっていた & いるという感じです。

 

 

 

====サウナ内====

これから先、PC、スマホの境界は徐々に曖昧になっていく & タッチデバイスだからできるような作り方がもっと増えていくと思いますが、とりあえず新卒で制作会社に入った頃は、まぁまぁiPhoneを触ってて助かったなと思いました。

 

 

以上です。

 

今日の曲

これが聴きたい! 北島三郎

これが聴きたい! 北島三郎

 

 

 

2018年、個人的に印象に残った言葉 ベスト3

f:id:junkino:20181229174335p:plain

印象深かった言葉があるとiPhoneでメモを取っているのですが、年末になると、一連のメモの整理もかねて、それらの言葉を思い返す作業をしています。今年も印象に残った言葉がいくつかあったのでベスト3をブログに記載します。

 

参考までに2017年はこんな感じでした。

junk.hatenablog.jp

 

今年の特徴としては、会社の人周りの言葉が多めです。

さっそく第3位です。

 

第3位 『みよし x KREVA

f:id:junkino:20181230213955p:plain
10月ごろの会社の上司の発言。

 

夜中の会社にて、上司と2人だけ残り、作業をするという状況がありました。お互いの集中力が切れていたというのもあり、スピーカーでいろんなJ-POPを流して、かかっている曲にまつわるアーティストの話をしていると、ちょうどKREVAの曲がかかり次のようなことを上司が言いました。

 

これ、KREVAか。

KREVAとコラボしていた人って誰だったっけ?

 

ギターうまい人、えーっと、み、み、、みよしっ!

 

おそらく、MIYAVIのことを言いたかったのだと思いますが、「みよし」というめちゃくちゃ苗字感のある名前を上げてきたので、そのギャップに非常に印象を受けました。

 

その後、なし崩し的にでた「みよし x KREVAは会社からの帰路で何度も思い返してしまいました。

STRONG

STRONG

 

 

 

 

第2位 『もしも、僕が痴漢で捕まったら』 

f:id:junkino:20181230191049p:plain

ちょっとした小説のタイトルみたいですが、今年の11月ごろの、会社の上司の言葉です。ちなみに3位の方とは別の方です。

 

とある作業が、会社の中でその上司しかできなかったため、「リスク管理していきたいですね」という話になりました。

 

その会話の中で上司が、 

そうだよね。

明日の朝もしも、僕が痴漢で捕まったりしたら、この作業できる人いないわけだから、、

と発言しました。 

 

はじめは冗談として、そこまで違和感を感じていなかったのですが、あとになってじんわりとリアルな発言に感じてしまいました。

もしかしたら、この人は毎朝ギリギリのところで生きてるのではないかと思うようになり、非常に印象に残りました。

 

のちに発言の意図を詳しく聞くと、痴漢は冤罪のケースが多いため、たとえやってなっくても捕まるリスクがあるという意図での発言でした。

 

 

 

第1位 『基本、全部外食だからね(高校の友人)』  

f:id:junkino:20181230191101p:plain

5月ごろ、3ヶ月間かけてヒッチハイクで日本一周をした高校の友人が一周を終えていたので、居酒屋で旅の思い出などを聞いていた際に出た言葉です。

 

色々とヒッチハイク旅行の思い出を聞いたあとで、「結局、いくらかかったの?」と聞くと「60万円ほど」と返されました。自分は20万くらいを想像していたため、思わず「高っ!」といってしまい、

 

そこで

ヒッチハイクといっても)基本、全部外食だからね。

という言葉を返されました。

  

交通費はかけてないけど、普通に食事してたらそれくらいいくんだなと、いい勉強になりました。ちなみに、旅行の中で一番辛かったことは、北海道で2時間くらい歩いたことらしいです。

 

言葉としては普通ですが、それ以降、60万くらいあれば何ができるかの例としてヒッチハイクで日本一周(外食付き)をあげれるようになり、1年を通して非常に活用させてもらった言葉になりました。

 

まとめ 

第3位 みよし x KREVA(11月ごろ会社の上司)

第2位 もしも、僕が痴漢で捕まったら(10月ごろ会社の上司)

第1位 基本、全部外食だからね(5月ごろ高校の友人)

 

今年の印象に残った言葉をまとめるとこんな感じになります。

振り返ってみて思うのは、あんまり大したこと印象に残ってないなということでした。

 

良いお年を。

2018年に観た新作映画まとめ

f:id:junkino:20181224204518p:plain

毎年まとめているその年にみた映画のリスト。今年もまとめました。ほぼ観た順番です。

例によって、年末までに観た映画があったら再度更新するかもです。

 

 

--- 

 

計29本

昨年よりは多くなったものの、もっと観たかったなぁ〜〜というのが本音です。昨年に引き続き、今年もやっぱりアメコミ系、特にMCU系に興奮してました。

インフィニティー・ウォーを新宿のTOHOシネマズの最速上映に観に行って、震えて帰ったのが非常にいい思い出です。

 

未だに観れていない映画

今年公開された映画の中で、未だに観れてなくてもどかしくなってる映画の一覧は下記になります。年末年始で観ていきたいです。。

※()内には、観たい理由を書いてます。

 

来年期待している映画

大したリサーチをできていないですが、来年に観にいきたいなと思ってる映画はざっと下記です。

 

スパイダーバースは自分の人生ベスト映画のうちのひとつ になることがほぼ決まっているので、アメリカとかにいけるタイミングあったら観てこようと思ってます。

ファーストマン、アベンジャーズ エンドゲームも観たすぎて震えてます。

来年も健康に過ごせれば嬉しいです。

 

よければ2017年に観た映画まとめもどうぞ。

junk.hatenablog.jp

bodymovinばかり使ってます

僕の普段の仕事のほとんどはWebサイト制作です。

そんなサイト制作でよく使うのがbodymovinです。 github.com

2017年から、bodymovin(今はlottie?)を知って以降、7割くらいのサイトで使ってる気がします。

bodymovin(Lottie)は、AfterEffectsで作ったシェイプアニメーションをSVGアニメーションとしてjsonで書き出してくれるツール。

例えば、とりあえず制作途中の自分のサイト JUUUNNNKでは、ロゴアニメーションでbodymovinを使ってます。 f:id:junkino:20180526223436g:plain こんなの

bodymovinは実装する人にあんまり負担をかけず、アニメーションをポンと入れれるのでめちゃ便利です。

最近だとWebGLのすんげーカッコいいエフェクトばっかりのサイトとかあって羨ましいのですが、

そういったWebGLゴリゴリのサイトは、業界のWebデザイン合戦に持ち込まれたレーザー砲と思ってます。

bodymovinはそれに対して、手軽な手榴弾くらいだと思います。

シェイプアニメーションで作れば、Chromeではだいたい綺麗になりますが、バグりやすい条件などがいくつかあります。

よく言われてるのが、パスの結合で、 最近だと、主にIE系ではトラックマットの重ねすぎでも表示が崩れやすいことに気づきました。 上手いこと言ったら、会社のブログとかに実案件のロゴ内容とかと合わせてまとめようと思います。


下記の記事で知りました。ありがとうございます。