SVGといえばシンプルな線画やアイコンを表示するもの、と思っていませんか? 木版画ふうのイラストをSVGで作成する方法を紹介します。 この絵は、「木版画界のアンディ・ウォーホール」とも言えるアルブレヒト・デューラーによる500年前の木版画の一部です。木版画は古い印刷技術で、専門の彫師がイメージを木版に手彫りで刻み、木版から画を写します。 デューラー(ニッケルバックのメンバーに見えるって? 違います…

Copyright © 2017, All Rights Reserved.

sitepoint.comのデザイン・フロントエンド開発者で、SitepointのデザインとUX編集も担当しています。

Loading...

CSSでは難しい背景が作れるSVGパターン。具体的な作成方法、おすすめの生成ツールを紹介します。 SVGによる背景パターンを解説します。まだ広まっていませんが、優れたデザインが多く、選択肢が増えます。SVGパターンの仕組みを解説し、活かすための6つのツールを紹介します。 ツールが持つ機能と、パターンを知識と組み合わせれば、新しいデザインの扉が開けるはずです。 SVGパターンの仕組みとは 時代を問わ…

Copyright © 2017, Alex Walker All Rights Reserved.

Alex Walker

Alex Walker

sitepoint.comのデザイン・フロントエンド開発者で、SitepointのデザインとUX編集も担当しています。

Loading...

SVGをWeb制作で使うために、ブラウザーに最適化されたSVGファイルの作成、書き出し、最適化の方法をマスターしましょう。 SVGの勉強を始める前に理解したいことがあります。SVGファイルの最適化は、作成から書き出しまで続く工程です。WebページのHTMLと同様、不出来なSVGファイルを完成後に修正するのは大変です。 書き出してから使える最適化ツールもありますが、想定外のことが起こってファイルが壊…

Copyright © 2017, Ivaylo Gerchev All Rights Reserved.

Ivaylo Gerchev

Ivaylo Gerchev

独学のWeb開発者兼デザイナーです。HTML、CSS、jQuery、PHP、WordPress、PhotoshopやIllustratorで遊ぶのが大好きで座右の銘は「最小限の努力で最大限の結果を得る」です。

Loading...

進化し続けるCSSの仕様の中でも使い勝手がいいのが、CSS変数。キーカラーやサイズなど、あとから修正するのが面倒な要素はCSS変数を使って工数を減らし、ストレスを軽減しましょう。 SassやLessなどのプリプロセッサーは、CSSのコードベースを、メンテナンスしやすい整った状態にするのに役立ちます。変数、mixin(ミックスイン)、loop(ループ)などCSSコーディングに動的な機能を追加すると、…

Maria Antonietta Perna

Maria Antonietta Perna

SitePointのHTML/CSSチャンネルの共同編集者・フロントエンドWeb開発者です。CSSでいろんな手法を試すことを楽しんでいます。フロントエンドのプログラミング指導方法にも興味を持ち、WebのコーディングやWeb関連の執筆をしていないときは、哲学書や散歩、おいしいものを楽しんでいます。

Loading...

「SVGならベクターだから軽くてキレイに表示できる」と思っていませんか? Webで使うことを前提に作られていない場合、逆にファイルサイズが大きくなったり、レンダリングに時間がかかったりすることもあります。 この記事では、SVGOでSVG画像をWeb向けに最適化する3つの方法を紹介します。 SVG画像を最適化すべき理由 SVG(Scalable Vector Graphics:スケーラブル・ベクター…

Copyright © 2017, Maria Antonietta Perna All Rights Reserved.

Maria Antonietta Perna

Maria Antonietta Perna

SitePointのHTML/CSSチャンネルの共同編集者・フロントエンドWeb開発者です。CSSでいろんな手法を試すことを楽しんでいます。フロントエンドのプログラミング指導方法にも興味を持ち、WebのコーディングやWeb関連の執筆をしていないときは、哲学書や散歩、おいしいものを楽しんでいます。

Loading...

SVGフィルターを活用すると、Photoshopで加工しなくてもWebサイトのトップページで使えるバナー画像が作れます。覚えておくと便利なテクニックです。 先日、WordPressのeコマーステーマをリリースしたところ、バナー画像に使っている「ぼかしで覆うエフェクト」に関する質問がたくさん寄せられました。ぼかしで覆うエフェクトはどんな画像にでも動的に適用できる注目のエフェクトで、優れた画像処理方法…

Copyright © 2017, Alex Walker All Rights Reserved.

Alex Walker

Alex Walker

sitepoint.comのデザイン・フロントエンド開発者をマネジメントしています。またSitePointの「デザイン&UX」カテゴリーの編集も担当しています。

Loading...

いまやモバイルアプリのデザインでもWebデザインでも、欠かせなくなったSVG画像。ブラウザー上でサクッと編集できる、SVGエディターを紹介します。 SVG画像の普及率は、PNGやJPGといった人気ビットマップフォーマットに比べれば低いかもしれません。しかし、そのメリットから、プロジェクトにSVGの導入を検討するデザイナーが増加してきています。 いままでは、IllustratorやInkscapeと…

Copyright © 2017, Ada Ivanoff All Rights Reserved.

Ada Ivanoff

Ada Ivanoff

フルタイムのフリーランサーで、10年以上の経験を持ったWebアントレプレナーでもあります。デザイン、ライティングなどを楽しみながら、テック関連の最新で最高の開発サービスにキャッチアップするのが大好きです。SitePoint以外では、Syntaxxxやほかのデザイン・開発・ビジネス系のサイトに寄稿しています。

Loading...

SVGを使った、軽量で強力なグラフィック描画ライブラリー「GraphicsJS」が登場。シンプルなゲームを例に、基本的な使い方を開発者自らが解説します。 HTML5は最近のWebにおける中心的な存在です。そして今日のインタラクティブな画像作成においては、SVGとCanvasが多くの人が好んで使う技術になっています。Flashは忘れ去られ、SilverlightはWebのどこかに生息する希少動物のユ…

Copyright © 2017, Roman Lubushkin All Rights Reserved.

Roman Lubushkin

Roman Lubushkin

Web開発で多くの経験がある、インタラクティブ・データビジュアライゼーション分野において世界を牽引するソリューションプロバイダー、AnyChartの研究開発リーダーを務めています。新たな技術の探求を楽しみ、AnyChartのすべての調査活動を計画するほか、JavaScript(HTML5)のグラフ作成用ライブラリーや関連コンポーネントの開発を取りまとめています。

Loading...

まるで「見えないペン」で描いているような手描き風のSVGアニメーション。CSSとJavaScriptの知識があれば実装できる、定番アニメーション表現ですが、Vivusならもっと手軽に実装できちゃいます。 90年代初期のBLINKタグから、最新のCSS3トランジションやアニメーションに至るまで、Webページやアプリケーションの要素を移動する機能は、いつも魅力的な目標であり続けています。 今日では、S…

Copyright © 2016, Ivaylo Gerchev All Rights Reserved.

Ivaylo Gerchev

Ivaylo Gerchev

独学でWeb開発者兼デザイナーになりました。HTML、CSS、jQuery、PHP、WordPress、そしてPhotoshopやIllustratorで遊ぶのが大好きです。座右の銘は「最小限の努力で最大限の結果を得る」。

Loading...

SVGの一部をCSSで操作してもっと効率よく使い回ししたい…そんなときは、ちょっとした発想の転換が必要です。ヒントはMediumのロゴにありました。 2016年、SVGは、ファイルサイズ、スケーラビリティ、CSSのおかげで、Webページで広く使われるようになりました。 場合によってはアイコンフォントのほうが好まれることもありますが(「Build Your Own SVG Icons」参照)、アイコ…

Copyright © 2016, Massimo Cassandro All Rights Reserved.

Massimo Cassandro

Massimo Cassandro

イタリアのローマを拠点とするWeb・グラフィックデザイナー兼フロントエンド開発者です。Behanceはこちら。

Loading...