「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
汎用性が非常に高く、Webデザインとの相性もよい、ポリゴン風デザイン。「ローポリデザイン」とも呼ばれ、2013年頃からじわじわと流行しているデザインです。
モザイク風の抽象的なものから、3D風のリアルなものまで、さまざまなモチーフに命を吹き込めます。
ボタンやシンプルな背景に使われることが多いポリゴン風デザイン。今回はシンプルなポリゴン風デザインから、繊細なアート作品のようなポリゴン風デザインまで8作品をご紹介します。
目次
CSSで作られたこちらのスニペットは、スクリーン上に小さな海を再現しています。
三角形の集まりでできたポリゴン風の魚が、海のなかをいきいきと泳ぎまわっていますね。海底に配置されたシャドウが、動きをよりリアルなものにしています。
See the Pen Only CSS: Polygon Fish by Yusuke Nakaya (@YusukeNakaya) on CodePen.
HTMLとCSSを使って、折り紙の鳥を見事に再現。
リアルな形や影と、ゆったりとしたアニメーションが絶妙です。
See the Pen Origami Bird by Simin (@SiminR) on CodePen.
ポリゴン風デザインで奥行きをつけた、滝のある背景。スクロールすると文字があらわれるのも特徴です。
水にはゼリーのようなアニメーションがついていますが、コンテンツのオーバーレイとの衝突を避けるため、控えめな動きに調整されています。
See the Pen The Great Fall by CJ Gammon (@cjgammon) on CodePen.
グラフィックデザイナーの田中一光氏は、幾何学的なデザインの作品を多数制作しました。このスニペットは、CSSで田中一光氏の作品を再現しています。
CSSのグリッドやクリッピングパスなどの高度なテクニックを使った、完成度の高い作品です。
See the Pen Ikko Tanaka (pure CSS) by yuanchuan (@yuanchuan) on CodePen.
偉大なミュージシャンであるデビッド・ボウイ氏を、jQueryを使ったローポリアニメーションで再現しています。
テクノロジーに興味をもっていたボウイ氏自身も気に入るデザインかもしれませんね。
See the Pen Long Live Ziggy Stardust by Joe Harry (@woodwoerk) on CodePen.
CSSグリッドレイアウトを使ったバーチャルライブラリは、eコマースへの応用におすすめです。
ひし形のグリッドや洗練されたホバー効果が、作品の魅力を高めています。
See the Pen Responsive CSS Grid – Books by Andy Barefoot (@andybarefoot) on CodePen.
JavaScriptとCSSで作られた、ポリゴン風デザインの神経衰弱。
動物や植物などのかわいらしい、ユニークなポリゴンイラストが印象的です。
See the Pen Tangram Memory Game by Paulina Hetman (@pehaa) on CodePen.
ポリゴン風デザインがよく使われるのが、Webサイトの背景です。この魅力的な作品からは、その理由がわかりますね。
ドロネー図を使ったカラフルでありながら控えめなアニメーションは、ヒーローエリアなどの目立つ場所にぴったりです。
See the Pen Tesselation Transition by Chris Johnson (@jhnsnc) on CodePen.
ポリゴンは単純な多角形の組み合わせですが、その工夫次第でアート作品のように変身させられます。コーディングのスキルとクリエイティビティを発揮して、オリジナルの作品を作ってみてください。
(翻訳:Nakajima Asuka 編集:北村有)
動的なグリッドレイアウトのWebページテンプレートのご紹介
Workship MAGAZINE
ヒーローエリアとは?第一印象で差がつくWebデザインの最新動向【実例付き解説】
Workship MAGAZINE