絵文字のもたらす新webデザイン時代

絵文字は様々な文化で使われるようになりました。もともと絵文字は携帯電話使用者とコンピュータマニアの象徴でした。しかい今や、このキャラクターはTシャツやマーケティングキャンペーン、あまり面白くない映画にまで様々なところで目にします。

 

絵文字はもはや言語の一つです。英語や日本語、スワヒリ語などを話すより、世界的に理解できるキャラクターだからです。ある意味、私たちは言語と文化の壁をかわいいものにっよって乗り越えました。

 

webデザインコミュニティは絵文字をかなり使い、実験をしています。今日はCode penを使って面白くて楽しいケースをみていきます。全部シンプルなCSS反応で、命をこの小さな絵文字たちにも与えます。

では楽しんで😊

 

踊る絵文字

このJavaScriptのアニメーションはこれだけで十分面白いです。これは、相互作用的でもあります。カーソルを顔の上に持っていって画面から消してみてください。炭酸が弾けるように動きます。初めから行うにはキャンバスでクリックをします。

 

See the Pen
gap – pure JavaScript by Toshiya Marukubo (@toshiya-marukubo)
on CodePen.

 

 

擬似猫に教えてもらおう

 

絵文字は世界的なので、とても良い学習ツールです。このCSSの擬似クラスのインタラクティブなデモは、便利な「擬似猫」を使います。

 

See the Pen
Structural pseudocats 🐱 by Wendy Kong (@wendko)
on CodePen.

 

簡単に書けるCSS

 

開発者のCSSの技術はどんどん向上しています。ここに驚いている絵文字があります。これはとても短いコードで書くことができるのです。

 

See the Pen
Surprise face by Alexander Vega (@alexandervega28)
on CodePen.

ゲームをしよう

 

ゲームは絵文字の人気な使いかたです。わかりやすいキャラクターで行うゲームはとても楽しいです。このゲームはスロットマシーンになっています。「spin」を押してみましょう。何の動物が出てくるかな？

 

See the Pen
Emoji Spinner by Melvin Idema (@melvinidema)
on CodePen.

 

愛らしいアニメ

 

この絵文字の熊、すごくかわいいですよね。愛らしい動物がサングラスと帽子をしている。そして、何とスクローリングアニメーションのコードを書いています。

 

See the Pen
Shades Loader 🐻 by Jhey (@jh3y)
on CodePen.

 

ウイルス

 

いいことなのか、絵文字は社会で起きていることとは関係ありません。しかし、中には　COVID19を模したようなものもあるのです。この不機嫌そうなウイルス、考え事をしながら跳ねています。治療されることを怖がっているのでしょうか。

 

See the Pen
Corona Virus SVG (Covid-19) by Sourav Pradhan (@sourav204)
on CodePen.

 

バーチャル旅行

絵文字の街はどのようなものなのでしょうか。きっと、アニメーションでできた、楽しい世界に違いありません。最新の技術とレトロな見た目の融合がまた味がありますよね。

 

See the Pen
3D Emoji Town (Pure CSS) by George W. Park (@GeorgePark)
on CodePen.

自分の絵文字を作ろう

絵文字を動かしているだけじゃ楽しくない？なら、自分の絵文字を作っちゃいましょう。このツールでは顔のトーンや特徴、アクセサリーなんかもつけられます。

 

See the Pen
Emoji Factory by Olivia Ng (@oliviale)
on CodePen.

感情を表現

 

これから1000年も経てば、考古学者は絵文字をヒエログリフのようものだと思うのでしょうか。実際コミュニケーションに使われたという面はどちらも同じです。仮にそうだとしても、絵文字はきっともっとその時代を反映したものになっていくと思われます。

 

学術的なことはおいとておいて、絵文字は楽しいツールです。特に、CSSやJapaScriptを使うことで上の例のようなことができます。もっと絵文字が見たければ、私たちのCodePenコレクションもチェックしてみてください。