Advertisement

pokemon-go

 

すでにアメリカなどを中心に、世界的大ブームとなっているポケモンGO が、ついに日本でも配信が開始されました。この人気はウェブデザインのアイデアとして、じわじわ影響を与えはじめているようです。

 

 

今回はコード共有サイト CodePen より、ポケモンGO をモチーフにしたHTMLスニペットをいくつかご紹介します。モンスターの捕獲シーンを再現したり、コミカルな動きをCSSアニメーションで表現したり、面白い作品が公開されていました。

 

 

 

詳細は以下から。

 

 

 

ポケモンGOをモチーフにした面白HTMLスニペットまとめ

 

Pokemon Go – ZingTouch x Anime.js

軽量なアニメーションJSライブラリ Anime.js を利用し、モンスターの捕獲シーンを再現しています。サークルの大きさに合わせて、スワイプしてボールをタイミングよく投げることで、実際にキャッチすることもできます。

See the Pen Pokemon Go – ZingTouch x Anime.js by ZingChart (@zingchart) on CodePen.

 

 

 

Pikachu Loading Page

ピカチュウがてくてくと歩くローディング用アニメーション。

See the Pen Pikachu Loading Page by Tetsu (@Tetsu) on CodePen.

 

 

 

CSS Isometric Pokemon

ピクセルアートを立体的に描いた作品で、CSSのみで描かれています。再生ボタンでテーマソングが流れます、ボリュームにご注意ください。

See the Pen CSS Isometric Pokemon by Ash (@littleginger) on CodePen.

 

 

 

Pokemon Icon

こちらもCSSのみでスタイリングされた、その名もポケモン・アイコン。

See the Pen Pokemon Icon by Rıza Selçuk Saydam (@rss) on CodePen.

 

 

 

Choose Your Starter

モンスターボールを選択すると、CSSのみで作成されたピクセルアート風モンスターが出現します。

See the Pen Choose your Starter by Kyle Shanks (@mavrK) on CodePen.

 

 

 

100% Functioning Pokemon Go Clone

背景にグラデーションのアニメーションを@keyframeで表現した、アプリのオープニング画面。

See the Pen 100% Functioning Pokemon Go Clone by Tim Holman (@tholman) on CodePen.

 

 

 

Pokeballs with wiggle-animation | CSS

CSSアニメーションを利用して、グラグラと揺れる動きを表現したスニペット。

See the Pen Pokeballs with wiggle-animation | CSS by Håvard Brynjulfsen (@havardob) on CodePen.

 

 

 

Pokémon!

CSSのみで表現されたザ・クラシック。ピクセルアートとアニメーションが見事です。

See the Pen Pokémon! by Kevin Jannis (@kevinjannis) on CodePen.

 

 

 

Pokemon GO UI Kit

モンスターの捕獲シーンやプロフィール画面などの、インターフェースを完全再現したUIコンポーネントも公開されていました。Photoshop で編集可能なPSDファイルで収録されています。

pokemon-go-UI-kit-v2

 

 

 

ポケモンGOで自分の近くにポケモンが出現したらSlackに通知する

アプリを起動しっぱなしにするのを防ぐことができ、ポケモンが出現したらSlackに通知してくれます。

pokemon

 

 

 

Pokevision

リアルタイムであなたの近くにいるポケモンを検索できるツールで、ポケモンの下に出ている数字は制限時間で、この時間内に近くまで行けば、捕まえることができるようです。

pokevision

 

 

 

公式ページでは、アプリが正式に公開されたことが動画で発表されています。では、安全には十分気をつけて、探検を楽しんでください。