SVGとは画像形式の１つで、おなじみのJPG形式やPNG形式と違い、２次元ベクターなので拡大縮小しても画質が落ちないというメリットがあります。また、XMLというマークアップ言語で記述されるため、テキストとしてテキストエディタで編集できるのが特徴です。
このSVGをwebデザインに応用すると、かなりクレイジーなことができてしまいます。なんと、ページにコードを書くだけで、画像ファイルを用意することなくイラストやアニメーションを描くことができるのです。
今回ここでご紹介するのは、webページに貼り付けて使えるSVGを使ったクールな風景イラストです。アニメーションやパララックスなどのギミックは、いくつかの簡単なCSSとJavaScriptで作られています。そしてこれらはすべて、自由に編集して使用することが可能です。
それでは行ってみましょう！
１．タカのいる入江
See the Pen
SVG Landscape, Hawke’s Bay by Louis Coyle (@dropside)
on CodePen.
この美しい入江のイラストは、Louis Coyleが制作したものです。
作者は3Dレンダリングでよく見られる、ポリゴン表示を模したポリスタイルを取り入れています。SVGやJavaScriptでは一般的な効果ですが、この例ように上手く処理するのはなかなか難しいものです。
このスタイルとコード両方を使ったエレガントなアニメーションはTweenMaxライブラリを利用して作られています。SVGのコードについて学びたいのであれば、このスニペットから得られるものはたくさんあるでしょう。
２．低ポリゴンの風景イラスト
See the Pen
Low poly landscape by Luke Reid (@lukeandrewreid)
on CodePen.
先ほどと同様、低ポリゴンの外観をモデルにした風景イラストです。これはLuke Reidが作成したもので、3D効果に焦点を当てています。
全体のレイアウトは非常にリアルに感じられ、星が散りばめられた空のグラデーションがこのデザインに命を吹き込みます。
JavaScriptコードを見ると、星の位置がランダムに生成されているのがわかります。 webサイトにSVGの背景やヒーローヘッダースタイルを取り入れたい方にオススメの、素晴らしい効果です。
３．アニメーション付き風景イラスト
See the Pen
SVG Landscape Animation by Evan Winston (@IrrelevantEvan)
on CodePen.
Evan Winstonが作成したカスタムアニメーションです。これはかなりクールな効果であり、しかも誰にでも作成できるものです。
たしかに、アニメーションが完了するのに多少時間がかかるため、大きな背景画像ほど便利ではないことは否定できないでしょう。
しかし、あなたのWebサイトで使用しているカスタムSVGアイコンにも、似たような仕掛けを施すこともできます。基本的なSVGをデザインした後、上記のスニペットのコードを応用してアニメーションさせるチュートリアルがたくさんあります（TweenMaxでも実行できます）。
４．湖畔の風景
See the Pen
SVG marine landscape by Irina (@Irina-T)
on CodePen.
ベーシックな湖畔の風景を描くには、このSVGスニペットがイチオシです。
水の波と空の雲などを、簡単なページアニメーションを使って動かしています。これらは全て、短いJavaScriptのコードで簡単に実行できます。しかも、このスニペットはCSSだけで作られているというのが驚きです。
CSS3を使ったアニメーションが最も活躍するのはUI / UXを意識したWebサイトですが、このように風景やイラストにも使えるのです。 こうしたことができるのは、開発者ならではの楽しみの一つです。
５．冬景色のアニメーション
See the Pen
Winter Landscape. SVG Animation by Andrey Sorokin (@biokillos)
on CodePen.
この冬の風景は、毎年見られる清々しいホワイトスノーを思い出させます。Andrey Sorokinは、SVGコードとJavaScriptを使用してこのアニメーションを作成しました。
アニメーションがゆっくりなので、全ての効果を見終わるには少し時間がかかるかもしれません。この風景画のイージング処理（動きに強弱をつけるアニメーション効果）の質の高さと、それがブラウザ内で上手く動作していることには非常に感心させられます。
とても多くの要素がアニメーションするので、ロードに時間がかかりそうなものですが、この作品は信じられないほど速くロードが完了します。
木から出てくる太陽のアニメーションがとにかく楽しげなのは、言うまでもありません。
６．フラットデザインの風景イラスト
See the Pen
Animated SVG scene by agathaco (@agathaco)
on CodePen.
グラデーションは使わず、基本色だけで構成するセミフラットなデザインが現在のトレンドとなっています。
この美しいスニペットは影と角にハードなエッジを効かせたスタイルで、SVGだけで作れる中でも最も扱いやすい風景イラストの1つと言えるでしょう。
SVGコードを扱った経験がないなら、このスニペットから始めてみるのも良いでしょう。SVGやそのベースとなるXMLの特性に関してが一通り抑えられ、Google検索でより深く調べることもできます。
７．アニメーション付きのフラットデザイン
See the Pen
Natural Landscape by Amr Zakaria (@amrzakaria)
on CodePen.
Amr Zakariaによる、一つ前と同じようなフラットデザインのスニペット。ボートや飛行機のアニメーションが目を引きます。
全体がCSSのみで動作し、アニメーションはとても明確なCSSキーフレームによって動作します。
忍耐力さえあれば、このスニペットをWebページの背景としてwebサイトに取り入れられるでしょう。最も難しい部分は、モバイル画面にも完全対応させることです。
８．パララックス効果付きの風景
See the Pen
Parallax Landscape by OK (@oknoblich)
on CodePen.
Web上で見られるパララックス（視差）効果の中でも、これは特にベーシックなものです。全体がCSSのみで動作し、難しいスクリプト編集が不要な点が素晴らしいです。
街灯を含むすべての要素は、SVGとCSSの効果でデザインされています。よく見ると、街灯の光をリアルに見せるためにCSSエフェクトであるシャドウ（shadow）を利用していることが分かります。
９．ベーシックなアニメーション
See the Pen
[UPDATED] SVG Landscape animation by Stef van Dijk (@vandijkstef)
on CodePen.
Stef van Dijkの制作したこのスニペットには、数多くのカスタム要素が含まれています。
作者は、各要素に弾むような動きや重力のエフェクトを加えることで、それぞれのアニメーションを目を引くものにしています。 たとえば、後ろの山々を見ると、地面全体がバウンドしているように見えます。
細部をよく見るとこのような発見があるのが、現代のウェブアニメーションの大きな魅力だと言えるでしょう。
１０．SVG と CSSだけで描く風景
See the Pen
Svg and css landscape animation by Guillaume Lebelt (@guillaume_lt)
on CodePen.
JavaScriptは使わずSVGとCSSのみで作られた、画面いっぱいの背景アニメーションです。
風景を構成するレイヤーはそれぞれ個別にキーフレームアニメーションが付けられており、イラストをじっと見ていると、太陽や雲などいくつかの要素は動き続けていることが分かります。
このようなアニメーション付き風景イラストをデザインするには、多くの時間がかかります。これは大変な作業でもありますが、もしやり遂げることができたなら、SVG文法の扱い方とCSSを使ったアニメーションの基本をマスターできることでしょう。
１１．草原の風景イラスト
See the Pen
landscape by Felix De Montis (@dervondenbergen)
on CodePen.
この風景イラストは非常にシンプルですが、同時に新しいフロントエンドコーディングの素晴らしいお手本とも言えるでしょう。
作者であるFelix De Montisは草原と丘、そして木を描画する短いSVGコードでこのスニペットを一から作りました。あなたは簡単にこれを複製し、CSSを編集して位置を変えることができるはずです。
SVGを使ったデザインに興味がありやってみたいと考えているなら、この作品は学び始めるのにぴったりです。
１２．マウスに反応する風景イラスト
See the Pen
Parallax SVG Interactive Landscape by Chris Gruber (@cgruber)
on CodePen.
Chris Gruberが制作した、パララックスアニメーション付きの風景イラスト。
マウスの動きに合わせて全体が動くだけでなく、ヨットや背景の雲のような個別の要素もアニメーションします。
動作に必要な JavaScriptは非常に短く、20行以下のjQueryだけで動きます 。 ディティールの密度を考えると、いっそう驚きです。
おすすめ新着記事
おすすめタグ