近年Webデザインに導入する機会が増えてきた「SVG」。拡大や縮小が容易にできる為、レスポンシブ性が求められるWebデザインに適応するフォーマットとして注目を集めています。今回ご紹介するのはそんなSVGを利用した背景を容易に生成できる「SVG Backgrounds」です。 シームレスで拡大と縮小に適応したSVGバックグランドをCSSコードで入手することができます。 詳しくは以下 ベーシックな縞模様から、グラデーションやポリゴングラフィック、3Dチックな立体的な背景まで全部で30種類ものSVGバックグランドが用意されております。すべての背景でパターンのカスタマイズが可能で、指定色を変更したり、模様の濃度やグラデーションの割合を調節したり、テンプレートをそのまま利用するだけでなく、デザインに合わせて調整することができます。これだけ多彩な背景をSVGで利用できるのは嬉しいですね。背景によっては

80年代を思わせる、どこかレトロな幾何学的デザイン。今期も引き続き人気で、多くのデザインシーンで使用されています。そんな中今回紹介するのは、幾何学的なデザインを簡単に生成できる素材セット「Neo Memphis Megaset」です。 92種のベクターパーツとオリジナルの34種のポスターがセットになった、ネオンなビビットカラーもとても印象的な素材となっています。 詳しくは以下 図形やドット、ラインなど、さまざまな形をしたモノクロの図形を組み合わせてオリジナルの幾何学デザインが作成できます。またポスターはどれも完成された独特のバランス感が個性的で、このままグラフィックとして使用すれば、見ている人を惹きつける、非常に印象的なビジュアルになりそうです。 こういった非常に個性あふれるアート要素の強いグラフィックを、一から起こすのはなかなか困難なもの。素材を使うことでより簡単に、かつ、今まで自分の中

デザインは使うフォントでイメージがガラリと変わります。メインとなるタイトルには印象的なフォントを使ったり、読ませる部分には可読性の高いものを使うなどシーンで使い分ける必要があるので、フォントの選定はとても重要となります。そんな中今回紹介するのは、近未来を表現したデジタライズフォント「Kid A – Free Font」です。 処理を加えることで多彩な表現が可能なデジタライズフォントです。 詳しくは以下 ドットを組み合わせたようなデジタライズフォントは一見、可読性に欠けるように見えるかもしれませんが使い方一つでちょっと昔のゲームやパソコンの表示画面のような表現をすることもできます。色を重ねたり、処理を加えることでより近未来的な雰囲気にすることも可能なフォントですので、自由度の高いアイテムです。様々な背景色や写真、イラストと合わせて使用してみてはいかがでしょうか。 Kid A – Free F

グラデーションカラーを取り入れたデザインは、現在の主流トレンドの一つとなっていますが、思うような色合いを作りだすのはなかなか難しいもの。そんな時に参考にしたい「ColorSpace」を今回は紹介したいと思います。 美しいグラデーションを簡単に生成することができるwebジェネレーターです。 詳しくは以下 基準にしたい1色を選択すると、その色を基準としたさまざまなグラデーションパターンのパレットが自動生成されます。生成パターンが非常に豊富で、それぞれのカラーコードもきちんと表示されており、非常に便利。また「gradient」メニューを選択すると、8種方向からのグラデーションパターンを確認することができます。思わずいろんな色で試してみたくなる、グラデーションの美しい色合いに魅了されそうです。 webデザインはもちろん、グラフィックデザインでグラデーションを取り入れたい、単色でどこか物足りなさを感

TOP  >  Design , Tool  >  ラフでおしゃれな雰囲気が印象的なシームレスパターンセット「Monochrome Seamless Patterns」 パターン素材にはいろいろなデザインがありますが、中でも継ぎ目なく使えるシームレスなタイプは非常に重宝する存在。今回は、そんなシームレスパターンの中でも、ラフでおしゃれな雰囲気が印象的な「Monochrome Seamless Patterns」を紹介します。 繋ぎ目のないシームレスなパターン12種類とテクスチャ3つがセットになった魅力的なアイテムです。 詳しくは以下 手書き風の柄パターンは、シンプルなイラストが繰り返されていますが、色合いに水彩テイストを取り入れていたりと、さりげなく凝ったデザインが特徴。また、紙をクシャッとしたような風合いのテクスチャセットは、ゴールドのリッチなカラーが目を引きます。どれもシンプルなパター

TOP  >  Tool , WebDesign  >  教育系フリーアイコンセット「30 Free Education Icons Sets」 Webサイトで情報を公開する学校はとても増えていますが、教育機関のWebサイトは比較的情報量が多く複雑になってしまいがち。そんな時におすすめなアイテムが、今回紹介する教育系フリーアイコンセット「30 Free Education Icons Sets」です。 School Icon Collection Vector | Free Download ポップなテイストからフラットなデザインまで、様々なアイコンがセットでダウンロードできるようになっています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 6 Modern Education Icons – graphberry.com ラインで構成されたアイコンは、細

TOP  >  Design , WebDesign  >  食べ物を中心にまとめられた可愛らしいデザインアイコンまとめ「100 Free Food and Party Icons」 UI面の向上に一役買ってくれるアイコン。視覚的サポートとして非常に役立つ存在であり、特に食べ物だったりアクションを表現する際には効果的で直感的な理解につながります。今回ご紹介する「100 Free Food and Party Icons」は食べ物やパーティーシーンなどを表現したアイコンがを中心にまとめられたアイコンセットです。 カラフルでポップなアイコンが全部で100個種類まとめられています。収録されているアイコンは下記よりご覧下さい。 詳しくは以下 はっきりとした線に、少し色を混ぜた色味のデザインはPOPという印象にとどまらず、スタイリッシュな印象を与えてくれます。食材からキッチン用品など、食に関するアイ

TOP  >  Design  >  ロゴデザインを魅力的に伝えるためのモックアップのまとめ「20 Free PSD Templates To Mockup Your Logo Designs」 ブランドイメージとして様々なシーンに展開されるロゴ。クライアントにデザインを見せる際には、ロゴがどういう風に展開されていくのかを伝えるための手段の一つとしてモックアップに反映されてプレゼンテーションする場合があります。今回はそんな場面で役に立つロゴデザインのモックアップまとめ「20 Free PSD Templates To Mockup Your Logo Designs」をご紹介したいと思います。 Embroidered Logo MockUp | GraphicBurger 全部で20ものバリエーション豊かなモックアップがまとめられておりますが、その中から気になるものをいくつかピックアップ致

TOP  >  Font  >  中世をイメージさせるフリーフォントを集めた「20 Free Medieval Fonts for Unique Designs」 デザインにおいてフォントの選定はとても重要なこと。数え切れないほど多く存在するフォントの中から、それぞれのテーマや雰囲気にあったものをセレクトするのは案外大変なことだったりします。そんな中今回は、ユニークな中世のフリーフォントを集めた「20 Free Medieval Fonts for Unique Designs」を紹介したいと思います。 手書き風のカリグラフィや細かく装飾されたフォントまで集約されています。数ある中から、いくつか気になるものをピックアップしてみました。 詳しくは以下 Walk Da Walk Two font by Måns Grebäck – FontSpace フォント全体が尖がっていてシャープな印象の

TOP  >  Font  >  デザインをする上で厳選された9つのフォントデザイン「9 Free Minimalistic Fonts To Use On Your Next Project」 数多くのフォントがどんどんと新しく生み出されている中、膨大な中から選定するのはなかなか大変な作業にもなります。今回ご紹介する「9 Free Minimalistic Fonts To Use On Your Next Project」では、現代のフォントトレンドふまえた上で最小限の所持で済むように厳選に厳選を重ねて選定されたまとめになります。 Cormorant — an open-source display font family on Behance シンプルなタイプから、個性を感じる特徴のあるタイプなどが紹介されています。いくつかピックアップしていますので、下記よりご覧ください。 詳しくは

TOP  >  Font  >  グランジで雰囲気のあるデザイン演出を Cymbriaの多種多様なフォントファミリーがまとめられた「Cymbria Free Font Family」 デザインを支える要素の一つであるフォントデザイン。多種多様な欧文書体を持つことも大切ですが、一つのフォントで色々なタイプを持つこともデザインの微妙な調整時には必要なのではないでしょうか。今回は様々なフォントをご紹介するのではなく、焦点をCymbriaにあてたまとめ「Cymbria Free Font Family」をご紹介していきたいと思います。 癖がなく使用しやすいCymbriaはデザインする人なら持っておくと便利なフォントの一つ。太さなどのバランスが取られたセットがダウンロードできるようになっています。 詳しくは以下 フォントスタイルは6種類。丸みを帯びているかいないかだけでも印象は変わり、全体的にシンプ

TOP  >  Design , vector , WebDesign  >  シンプルでハイクオリティなミニマルデザインのフリーアイコンまとめ「11 Free High-Quality Line Icon Sets」 最低限の情報を、シンプルなまとめた構成が魅力的なミニマルデザインに欠かせない素材として、情報要素をすっきりとまとめてくれるアイコンは非常に役立つ存在。そんな中今回ご紹介するのは、ミニマルデザインに合わせて使いたい、シンプルでハイクオリティなアイコンまとめ「11 Free High-Quality Line Icon Sets」です。 Goodies Icon Set | Best PSD Freebies 細ラインで描かれたシンプルなフリーアイコンが11種類紹介されています。その中からおすすめのアイコンを幾つかピックアップしてご紹介していきます。 詳しくは以下 54 Fre

TOP  >  Design  >  シームレスな手書き風幾何学模様パターンセット18種「Rosalie Watercolor Patterns」 デザインに彩りを添えてくれるパターンはとても便利。その中でも特に模様が綺麗に繋がるように作られた、シームレスなパターンは非常に役立つアイテムです。今回ご紹介するのはそんなシームレスパターンから、手書き風に描かれた素材「Rosalie Watercolor Patterns」です。 水彩筆で書かれたようなラフで柔らかいタッチが特徴の、色合いの美しい全部で18種類のパターンがセットでダウンロードできるようになっています。 詳しくは以下 6種類の基本パターン×3種類のカラーバリーションの構成。基本パターンにはキューブ柄、ラフなボーダーなどトレンドを押さえた図柄が揃い、カラーは水彩風のカラフルなグラデーション、モノクロ、金箔のような質感のあるゴールドが

TOP  >  WebDesign  >  ウェブデザインにおけるハンバーガーボタンについて考える「Analyzing the Hamburger Menu in Web Design」 スマートフォンのメニューデザインの定番と言っても過言ではないハンバーガーボタン。当たり前のように利用されていますが、今回はそんなハンバーガーボタンに関して分析をした考察「Analyzing the Hamburger Menu in Web Design」をご紹介したいと思います。 メニューアイコンとしてなくてはならない存在になっていますが、その反面でハンバーガーボタンのデメリットを考え提唱している、奥深い考察です。 詳しくは以下 一目でここにメニューがあるとわかる便利なミニマムデザインであるハンバーガーボタンですが、実は幾つかのデメリットを併せ持っています。まず1つ目が、サイトの機能を全てハンバーガーボ

最新のフォントトレンドをおさえた優秀なフリーフォントまとめ 「20 Free Dramatic Fonts That Follow The Latest Typography Trends」 デザイン・クリエイティブ業界のトレンドに合わせて、デザインフォントも日々進化しています。そんな中今回紹介するのは、最新のフォントトレンドをおさえた優秀なフリーフォントまとめ 「20 Free Dramatic Fonts That Follow The Latest Typography Trends」です。 Octanis デザイン性の高い、非常に魅力的なフォントがピックアップされ紹介されています。気になったものをまずは以下よりご覧ください。 詳しくは以下 Gorgeous 小文字、大文字、数字にまで広く対応してくれているサンセリフ書体をもとにしたフリーフォントです。ファッション誌の一面を飾ってくれ

TOP  >  Font  >  アンティークな世界観を作り上げてくれる フリーゴシック調フォント20選「20 Best Gothic Fonts | Free Download」 アンティークな世界観や格調高いヨーロッパ風の雰囲気を出すことができる、今回はそんなフリーのゴシック調フォントをまとめた「20 Best Gothic Fonts | Free Download」を紹介したいと思います。 A Gothique Time Font | dafont.com いろんなデザインシーンで使えそうな凡用的フォントから、デザインの世界観をつくる個性的なフォントまで20種類が揃っています。下記ではまとめからおすすめのフォントを3つピックアップしていますのでご覧ください。 詳しくは以下 Waters Gothic font by Mouser Fonts – FontSpace カリグラフィーの

デザイン業務で欠かせないアイコン。いろいろなサイトで配布されており、多種多様に星の数ほどありますが、今回は9,900個ものアイコンをダウンロードできる「IconPharm」を紹介したいと思います。 オープンソースのシンプルで使いやすいテイストのアイコンが揃っており、とにかく収録数が多いのが嬉しいところ。 詳しくは以下 アイコンサイトで多いのが、アイコンビジュアルがずらっと並んでいるもの。「IconPharm」ではアイコン一つ一つに名前が付けられており、検索時にアイコンと一緒に表示されるため、ひと目でどんなアイコンかが判別できるのも、さりげない機能ではありますが、検索する側にとっては嬉しい機能。検索はフリーワード検索の他、ジャンル別に探したい人のために、サイドナビでカテゴライズもされています。モノクロベースでミニマルなデザインなので、さまざまなデザインに合わせやすいのも特徴です。 アイコンは

WEBの演出の一つで、UXのストレスを軽減してくれるローディングアニメーション。WEBサイトがだんだんリッチになる中、当たり前の存在になってきていますが、今回紹介するのはCSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」です。 通常ローディングアニメーションはいくつかの画像を利用して生成されますが、このアニメーションはCSSとテキストのみで制作されるため非常に軽量です。 詳しくは以下 実装方法はとてもシンプルで、CSSを読み込んで、あとはアニメーションを読み込む場所にclassを指定すれば実装できます。用意されているアニメーションは様々で、ドットアニメーションからバーアニメーションなどといった一般的なものから、ちょっと変わった絵文字を利用したものなども用意されています。 テキストを利用するため、CSSで指定するフォントで印象が多少変わるため、ある程

TOP  >  WebDesign  >  2017年のWEBデザインのトレンドをまとめた「The Future of Webdesign: Trends 2017」 WEBデザインの世界は非常にトレンドの流行り廃りが早く、昨年のものは今年、今年のものを来年使えないぐらいのスピードでトレンドが移り変わっていきます。今日紹介するのは来年の2017年のWEBデザインのトレンドをまとめた「The Future of Webdesign: Trends 2017」です。 来年の注目すべき、WEBデザインのトレンドが全部で6つまとめられていましたので、順に紹介したいと思います。 詳しくは以下 1.モバイルファーストデザイン これは国内でも、数年前から現場では言われきましたが、いよいよ来年様々な検索エンジンのモバイルファーストインデックスが取り入れられる事により必須事項になりそうです。 2.WEBサイ

TOP  >  Design  >  ブランディングツールのモックアップ制作におすすめのフリー素材「20 Professional Free Branding Mockups」 企業などのブランディングツールを制作する時に、途中経過でイメージを確認したい・どんな風にツールに展開されるのか知りたい、そんなシーンもあるのではないでしょうか？今回はそんなシーンで活用したい、ブランディングツールのモックアップ制作におすすめのフリー素材「20 Professional Free Branding Mockups」を紹介します。 Branding / Identity MockUp Vol.7 | GraphicBurger さまざまな種類のツールをリアルに配置したモックアップ素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Branding /