ポリゴン風のデザインを作るコードスニペット8選【CSS/JavaScript】

ポリゴンデザイン

汎用性が非常に高く、Webデザインとの相性もよい、ポリゴン風デザイン。「ローポリデザイン」とも呼ばれ、2013年頃からじわじわと流行しているデザインです。

モザイク風の抽象的なものから、3D風のリアルなものまで、さまざまなモチーフに命を吹き込めます。

ボタンやシンプルな背景に使われることが多いポリゴン風デザイン。今回はシンプルなポリゴン風デザインから、繊細なアート作品のようなポリゴン風デザインまで8作品をご紹介します。

1. 泳ぎまわる魚

CSSで作られたこちらのスニペットは、スクリーン上に小さな海を再現しています。

三角形の集まりでできたポリゴン風の魚が、海のなかをいきいきと泳ぎまわっていますね。海底に配置されたシャドウが、動きをよりリアルなものにしています。

See the Pen Only CSS: Polygon Fish by Yusuke Nakaya (@YusukeNakaya) on CodePen.light

2. 折り紙の鳥

HTMLとCSSを使って、折り紙の鳥を見事に再現。

リアルな形や影と、ゆったりとしたアニメーションが絶妙です。

See the Pen Origami Bird by Simin (@SiminR) on CodePen.light

3. スクロールする滝

ポリゴン風デザインで奥行きをつけた、滝のある背景。スクロールすると文字があらわれるのも特徴です。

水にはゼリーのようなアニメーションがついていますが、コンテンツのオーバーレイとの衝突を避けるため、控えめな動きに調整されています。

See the Pen The Great Fall by CJ Gammon (@cjgammon) on CodePen.light

4. グラフィックデザインをCSSで再現

グラフィックデザイナーの田中一光氏は、幾何学的なデザインの作品を多数制作しました。このスニペットは、CSSで田中一光氏の作品を再現しています。

CSSのグリッドやクリッピングパスなどの高度なテクニックを使った、完成度の高い作品です。

See the Pen Ikko Tanaka (pure CSS) by yuanchuan (@yuanchuan) on CodePen.light

5. ポリゴン風のデビッド・ボウイ

偉大なミュージシャンであるデビッド・ボウイ氏を、jQueryを使ったローポリアニメーションで再現しています。

テクノロジーに興味をもっていたボウイ氏自身も気に入るデザインかもしれませんね。

See the Pen Long Live Ziggy Stardust by Joe Harry (@woodwoerk) on CodePen.light

6. グリッドレイアウトを用いたライブラリ

CSSグリッドレイアウトを使ったバーチャルライブラリは、eコマースへの応用におすすめです。

ひし形のグリッドや洗練されたホバー効果が、作品の魅力を高めています。

See the Pen Responsive CSS Grid – Books by Andy Barefoot (@andybarefoot) on CodePen.light

7. ポリゴンの神経衰弱

JavaScriptとCSSで作られた、ポリゴン風デザインの神経衰弱。

動物や植物などのかわいらしい、ユニークなポリゴンイラストが印象的です。

See the Pen Tangram Memory Game by Paulina Hetman (@pehaa) on CodePen.light

8. グラデーションつきの背景

ポリゴン風デザインがよく使われるのが、Webサイトの背景です。この魅力的な作品からは、その理由がわかりますね。

ドロネー図を使ったカラフルでありながら控えめなアニメーションは、ヒーローエリアなどの目立つ場所にぴったりです。

See the Pen Tesselation Transition by Chris Johnson (@jhnsnc) on CodePen.light

おわりに

ポリゴンは単純な多角形の組み合わせですが、その工夫次第でアート作品のように変身させられます。コーディングのスキルとクリエイティビティを発揮して、オリジナルの作品を作ってみてください。

(翻訳:Nakajima Asuka 編集:北村有)

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

30,000人以上が使う日本最大級のお仕事マッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 30,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ