この記事では、人気のグラフィックのひとつ「グラデーション」をつかった無料テクスチャ、デザイン素材をまとめてご紹介します。 美しい配色の組み合わせを楽しむことができる素材を中心に、PhotoshopやIllustratorといったデザインツールで利用できるテクスチャ素材はもちろん、プリント印刷もできる高品質な素材から、FigmaやAdobe XDといったプロトタイプツール向けグラデーションまで幅広いアイテムが揃います。 テクスチャ素材を中心に、デザインスタイルごとに「使える」無料デザイン素材をまとめた記事はこちらからどうぞ。 全て無料！キラキラの黄金フリーテクスチャ素材まとめ＋Photoshopでフォントにテクスチャを適用する方法 リアルな紙の質感！持っておきたいフリーテクスチャ素材まとめ【完全版】 写真が劇的に変わる！重ねるだけの無料オーバーレイテクスチャ素材750枚まとめ 無料で高品質！

この記事では、商用利用かつ無料ダウンロードできるイラスト素材、サイトをまとめてご紹介します。 資料作成やサイト作成などあらゆる場面に重宝するフリー素材を揃えています。 国内と海外サイトに分けてまとめています、用途やデザインに応じて、お好みのイラスト素材を見つけてみてはいかがでしょう。 このリストは随時アップデート予定です、ブックマークしておくと便利です。 コンテンツ目次 1. 国内の無料イラスト素材サイトまとめ（56個） 2. 海外の無料イラスト素材サイトまとめ（50個） 3. 当サイト紹介の人気イラスト素材まとめ 4. イラストを活用したデザイン参考例 5. イラスト素材編集のおすすめツール 国内の無料イラスト素材サイトまとめ ここでは、日本生まれのイラスト素材サイトをまとめています。 無料なのはもちろん、商用利用OKで高品質なイラスト素材が揃います。 商用利用可能な素材を中心に紹介して

この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ローディングアニメーション系 7. SVGアニメーション系 8. 便利、面白系スニペ

オシャレなカフェの黒板にチョークで書かれたような、ナチュラルな手書きフォントを検討中のひとにおすすめしたいコンテンツ。 ラフで少し崩したような絶妙なバランスは、利用する素材で仕上がりが大きく変わってきます。 今回は、商用利用できる手書き風フリーフォント素材をまとめてご紹介します。 日本語、英語フォントごとに分けています。 かわいいフォントや、レトロなフォント、おしゃれな筆記体フォントやブラシフォントなどと一緒に活用してみましょう。 コンテンツ目次 Adobe Fontsの手書きフォント（8個） 和文、日本語の手書きナチュラル・フリーフォント（73個） 英語の手書きプレミアムフォント（16個） 英語の手書きナチュラル・フリーフォント（72個） 現在、169個の手書きフリーフォントを集めており、アップデート継続中。 Adobe Fontsで使える手書きフォント 「日本語フォントをまとめてダウン

筆記体フォントは、当サイトでも人気の高い素材のひとつです。特に新しく公開されている新作素材を中心に集めてみました。 海外デザインブログTextuts.comで、デザイン性に優れた筆記体フリーフォント素材45個をまとめたエントリー「45 Best Free Script Fonts 2013」が公開されていたので、今回はご紹介します。アルファベット順で羅列していますので、お気に入りの筆記体デザインを探してみてはいかがでしょう。 今回のフリーフォント最大の魅力は、個人利用に限らず、商用利用にも対応しているという点です。デザイン制作に活用したくなる、高品質フォント素材を中心に、これまでにまとめた筆記体エントリーと、あまりかぶらないようにチョイスしています。 詳細は以下から。 デザイン力をアップする、人気筆記体フリーフォント素材まとめ 2013年版 Alako-Bold ※　個人、商用利用可能 A

ロサンジェルスやサンディエゴなどの西海岸スタイルから、ニューヨークのカフェにある黒板ボードのグラフィティまで、大人ナチュラルな無料のデザイン素材集です。 かっこいいからかわいい系まで、なかなか描けないヘタウマ、「絶妙な手書き感」を文字フォントからイラストまでまとめているので、実際にデザインをするときにも便利です。 デザイン案件でのフォントやイラストはもちろん、お店のインテリアやご家庭のインテリア、結婚式や誕生日おめでとうデザインまで、DIY要素満点な素材を楽しむことができます。インクの溜まりやチョークのかすれ具合など、手描きならではの持ち味をデザインアイデアに役立ててみましょう。 ナチュラル手書き系フォントまとめ 今回は、手描きタイポを手軽に楽しめるプレミアム素材 The Handlettered Fontbox に収録されている書体を参考に、商用利用＆無料ダウンロードできるフォントをまと

2017年は、特にたくさんのフリーフォントが公開され、当サイトで紹介した素材も637個にのぼります。 今回は2017年に公開された素材の中から、商用利用可能で無料ダウンロードできるフリーフォントのみを、カテゴリ毎に分けてまとめています。 コンテンツ目次 1. 日本語フォント 2. 万能フォント 3. 筆記体フォント 4. サンセリフ書体 5. セリフ書体 6. 手書きナチュラル系フォント 7. 筆ブラシ・フォント 8. ビンテージ・フォント 9. デコレーション・フォント 01. 日本語フォント 無料で商用利用できる日本語フリーフォント、18書体をまとめています。 【2017年保存版】デザインが良くなる！最新の日本語、和文フリーフォント35個まとめ 日本語フリーフォント、これだけは持っておきたい厳選22個まとめ しっぽり明朝 流 源流明朝の漢字としっぽり明朝の仮名を合成したコラボレーション

当サイトでも毎月まとめているフリーフォントですが、その中でも筆記体は特に人気の高いスタイルです。デザインに用いるだけで、オシャレでスタイリッシュな見た目を実現できるのも、人気の理由と言えます。 今回は、2018年に公開されたフリーフォントのなかから、デザインで使いやすい筆記体フォントを89個まとめてご紹介します。どれも無料ダウンロードできるのはもちろん、商用利用可能な素材も豊富に揃います。 利用ライセンスも一緒に記載しています、ご確認の上利用するようにしましょう。このリストは、2018年末まで随時アップデートの予定となっています。 2018年11月3日更新: 新しく8個の筆記体フォントを追加し、合計97個となりました。 これは使える！実用性の高い筆記体フリーフォント97選 2018年版 Barista Script Free Font ロープ一本を使って描いたようなモノラインの筆記体ステン

世界中で公開されているたくさんのフリーフォントですが、「数が多すぎてどれを使えばいいのか迷ってしまう。」と思ったことがあるひとも多いのではないでしょうか。当サイトでは、無料ダウンロードできる高品質フリーフォントを厳選ピックアップし、定期的にご紹介しています。 どんなデザイン案件にも使いやすい万能フォントから、デザイントレンドの手書きブラシフォントや、人気の高い筆記体など幅広いセレクションから揃えています。商用利用も可能な素材も数多く揃い、利用ライセンスも一緒にまとめていますが、参照元ページを一度確認してご利用ください。 2週間限定！日本語プレミアムフォント、かわいいデザインを楽しむ便利コレクション これが欲しかった！無料のすごいフリーフォント55選 女子文字POP体フォント「モッチーポップ」 女子が書いたモチモチしてコロコロ丸っこい字でポップなフォントを目指して作りました。職場の新卒3年目

ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・

テクスチャ素材はWebデザインはもちろん、グラフィックやさまざまなデザインプロジェクトに役立つアイテムのひとつです。 今回は無料ダウンロードできるテクスチャ素材のみをまとめてご紹介します。重ねるだけで質感をアップできる素材から、トレンドの水彩ペイントを手軽に実現できるアイテムや金箔、紙、ウッドテクスチャなど人気素材が揃います。これを機会にデザインツールをアップグレードしてみてはいかがでしょう。 計400枚超え！雰囲気を手軽にアップできる無料テクスチャ素材まとめ デザインの雰囲気をガラリと変える、すごい無料テクスチャ素材まとめ 自由に使える、無料デザインテクスチャとパターン素材まとめ 2015年7月度 人気デザインを網羅！持っておきたい無料テクスチャ素材40枚セット Gold Foil Textures 金色のアルミフォイルのような光沢感が魅力のテクスチャ素材4枚セット。 Free Gold

2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン

昨年の終わりごろに「商用可で色、サイズ変更も自由自在な無料ピクトグラムアイコン517個セット「Noun Project」」というエントリーをご紹介したのですが、ますます種類が増え711個となっていたのでご紹介。 使用ライセンスに関しても個人、商用利用可能となっているのはうれしいですね。 詳細は以下から。 豊富でクールなピクトグラムアイコン公開、The Noun Project The Noun Projectで公開されているアイコン素材は、2011年8月現在711個となっており、まだまだ増えていく模様です。 すべてのファイルはSVGファイルとなっており、Illustrator を使うことでサイズ、色などお好みで変更することが可能となります。 アイコンをクリックするとダウンロードリンクと詳細情報がポップアップで表示されます。 日本語にも対応しており、あらかじめカテゴリー分けされているのはうれ

ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク

デザインのキャリアをはじめるとき、良いアプローチのひとつとして基本デザイン原則を学び、そしてそれらをうまく使い、きちんとした土台を今後のプロジェクトのために作ってみましょう。 Image Source: Jared Granger 制作を通じてノウハウを知ることで、より多くのテクニックを学び、自分の予想を超えた良いアイデアを作成できるようになるでしょう。プロのデザイナーから学ぶことは、ウェブデザインのスキルを改善するのにもっとも最適な方法といえます。今回は、ウェブデザインを改善する15個のテクニックを見ていきましょう。 詳細は以下から。 01. 憧れのデザイナーを追いかけよう。 デザイナーによって好みのデザインレイアウトやエフェクト、コンポーネントは違うもので、それらを真似してみましょう。すごいと言われるアーティストでさえも、最初はここからはじめています。まずは通らないわけにはいかないでし

当サイトでは毎月新しく公開されたフリーフォントを、定期的にまとめて紹介しています。毎回50個ちかくが揃うアイテム数は、2016年に入ってまとめただけでも300個オーバー。すべてのフォントをインストールするのも大変です。 今回は、無料ダウンロード可能で、商用ライセンスにも対応した2016年公開のフリーフォントという条件にあった素材をまとめてご紹介します。一度にまとめて確認することで、どのようなデザインスタイルがトレンドとなっているのか見えてきます。見逃しているアイテムがないかチェックしてみましょう。 詳細は以下から。 2016年上半期、商用OKで使い放題のフリーフォントまとめ Qanelas Soft 親近感のあるフレンドリーな雰囲気のシンプル書体で、太さに応じて3ウエイトを無料ダウンロードできます。組み合わせて利用すれば、デザイン性もグッとアップ。 Anurati – Free Font

CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe

毎月新しく公開された無料ダウンロードできるフリーフォント素材をまとめています。今回は、あっという間に一年の半分が過ぎた6月分まとめをご紹介します。 豊富なウエイト数を用意し、どんなデザインにも活用できる持っておくと便利なアイテムから、デザイントレンドのブラシフォントや人気の筆記体、スクリプト書体、ハンドメイド感たっぷりな手書きスタイルなど、幅広いセレクションから選んでいます。デザインに応じて使いたいフリーフォントを探してみてはいかがでしょう。 詳細は以下から。 こんなフォントが欲しかった、デザイナーにオススメの良質フリーフォントまとめ 2016年6月度 Andis くっきりとした読みやすさを重視した、シンプルでミニマルなサンセリフ書体。Light バージョンを無料ダウンロードできます。 ※　個人、商用利用可能 Tofino スクリーン表示にこだわり、太さの異なる8ウエイトを用意した万能フリ

日本中の書体デザイナーさんの努力によって、素敵な日本語フリーフォントが数多く公開されるようになったいま、複数の書体をインストールしているひとも多いでしょう。しかしデザインのとき、いつも同じ書体ばかり使ってしまう、という人もいませんか？ 公開されているフォントの数が増えたことで、どれも利用してよいか悩んでしまうこともしばしば。特に、デザインコンセプトにあった、商用利用にも対応できる素材を探すのは、時間のかかる作業のひとつかもしれません。 今回は、無料ダウンロード可能で、商用ライセンスにも対応した日本語フリーフォントという条件で、幅広いデザインに利用できる、万能アイテムのみをまとめてご紹介します。

デザインの雰囲気をグッと良くしたい。そんなときはテクスチャ素材をつかって、手軽に質感をアップしてみましょう。重ねるだけでデザインの印象をガラリと変えることができるなど、新しいテクスチャの種類そして使い方も増えてきています。 今回は、さまざまなデザインシーンで活躍する、無料ダウンロードできる新作テクスチャ素材を中心にまとめてご紹介します。使い勝手の良い紙やウッドテクスチャから、トレンドの水彩ペイント系アイテムまでは幅広いアイテムが揃います。 詳細は以下から。 デザインの雰囲気をガラリと変える、すごい無料テクスチャ素材まとめ 12 Presentation Background Curved Wood 背景をカーブさせ立体的に魅せる、高画質なウッドテクスチャ12枚を収録しています。プレゼンテーションや商品の背景デザインにどうぞ。 10 Grunge Stained Paper Textures