デザイン

デザイン

HTMLとCSSのみでキャラクターをデザイン!CodePen付き10選!

2,107 views

読了時間 : 約3分54秒

最近では驚くほどいろいろなことがCSSで出来るようになりましたが、プログラマーであればかっこいいレイアウトやアニメーションが可能なことは知っていますよね。でもそれだけではなく、CSSはキャラクターデザインのような楽しいプロジェクトにも使えるんです。
そんなちょっと変わっているけどクールな、HTMLとCSSによるキャラクターデザインを今日はご紹介します。

(イメージをクリックすればCodePenが見られます。)

 

 

1.Angry Birds


みんな大好きなAngry Birds。ゲームとして人気を博しましたが、映画にもなりました。
そんなAngry BirdsがRachel Bull氏によってCSSでも再現されました。
トップの部分に画像がありますが、これはカスタムフォントのために使われています。それ以外のキャラクターやグラデーション等は全てCSSです。
あまり実用的ではないかもしれませんが、良いインスピレーションになりますね。

 

 

2.  フランケンシュタイン


Mary Shelley氏による緑のフランケンシュタインはよく知られているキャラクターですが、
とても素晴らしいキャラクターデザインの1つです。
40行のHTMLから成っており、Victoria Ninni Bergquist氏によるCSSで、なんとフランケンシュタインがまばたきまでしています。

 

 

3.  トイ・ストーリーのエイリアン


ピクサーの作品には忘れられないキャラクターが多くありますが、このエイリアンもその1つですよね。
Sunyoung Park氏は、フロントエンドコーディングの限界を試すためにこちらを作成しました。古いバージョンを含めたほとんどのブラウザで機能するはずですが、rotate()のプロパティに多く頼っている部分もあります。
IE9以降でサポートされているCSSのTransformsを使用しているのでインターネットさえあれば見ることができるキャラクターです。

 

 

4.  Aku Aku


プレイステーションを持っていた人の中にはクラッシュバンディクーを知っている人も多いはずです。Aku AkuというキャラクターをCSSで再現したのがこちら。
それぞれのエレメントがDivで作られており、目や鼻を作り出すためのclassがそれぞれに付けられています。
このデザインで難しい部分はおそらく羽の帽子と口の部分のアニメーションでしょう。

 

 

5.  ベイビィゼニガメ


こちらもクールなアニメーションが特徴のキャラクターデザイン。
Josh Bader氏はこのゼニガメをCSSとたった15行のHTMLで作成しました。すごいですよね!
疑似クラスの:afterをそれぞれのエレメントに加えることで、歩くアニメーション効果を表現しています。
構造を見るとそのシンプルさとコードの少なさにただ驚くばかりです。

 

 

6.  Rick and Morty


アメリカのアニメRick and MortyのRickをCSSで再現したのがこちら。
深みを出すためにドロップシャドウが使われており、キャラクターに躍動感が出ています。アニメーションのリピートも全体のデザインにうまくフィットしていますね。
Sassで動いているので、ちょっといじってみたい場合はコードの中にカスタム変数があります。とてもよくフォーマットされているので、Sassの勉強にはもってこいです。

 

 

7.  Brian Griffin


アメリカの大人気アニメFamily Guyから、犬のBrianが登場。Rachel Bull氏による作品です。
CSSだけでどれだけ詳細にデザインが可能かがよく分かりますね。全体のスタイルがアニメの雰囲気とマッチしており、ドロップシャドウがよりリアリティを出しています。
150ライン以上のCSSで出来た本格的なものですが、Compassライブラリを使用しています。

 

 

8.  エメット


こちらはレゴ・ムービーに登場するエメットです。こちらもRachel Bull氏作で、CSSおよび、HTMLコーディングを簡素化させるためのHamlを使用。
いくつかの要素はCSSだけで出来ているとは思えないほどです。髪の毛の部分などは本物のプラスティックに見えますね!
参考になるSassの論理が多く見られるため、コーディングマニアの方はコードを見るだけでも楽しいはずです。

 

 

9.  イーブイ


David Khourshid氏よるポケモンGOの人気キャラクター。
実際のアプリと似た背景とスタイルで、その上でCSSのみのキャラクターを再現しています。ちょっとした色付けとスマートなレイヤー使いで、3D感まで出ています、
アニメーションの作りも素晴らしく、とてもリアルに感じます。

 

 

10.  ミッキーマウス


動きも無くシンプルな作りに見えるこちらのミッキーですが、実はSassで450以上のラインで出来ています。
一番技術を要するのは、全ての形を正しく作り上げ、それぞれがうまく揃うように重なり合わせていく部分です。
非常によく出来ていて、初期のミッキーを彷彿とさせますね。

 

 

11.  ゼルダ姫


最後に紹介するとっておきは、ゼルダの冒険のゼルダ姫。足はありませんが、全体的にはとても正確です。
Charlie Marcotte氏のこの作品は、SassとカスタムCSS transformsを使用し、HTMLはPugによってだいぶ簡素化されています。

 

 

いかがでしたか?もし自分のCSSの知識の限界にチャレンジしてみたければ、似たようなプロジェクトに取り組んでみるといいかもしれません。きっとスキルを試すいい機会になるはずです。

 

 

※本記事は、10 Character Designs Created Entirely With HTML & CSSを翻訳・再構成したものです。

 

 

関連記事

 




【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ