デザインを開発するという視点でお伝えするクリエイティブBLOG
常に新しい種類のフォントが登場し続けており、どのフォントを使ったら良いのか迷ってしまうこともあるかと思います。そんな時に参考にしたい、最新のクリエイティブなフリーフォントをまとめた「New Fonts 2018 Free Download」を今回は紹介します。
57-FUTURA – FREE VINTAGE FONT — Pixel Surplus | Resources For Designers
さまざまなテイストや形のフリーフォントがまとめられており、どれもデザイン性の高いものばかり。気になったものをいくつかピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
近年Webデザインに導入する機会が増えてきた「SVG」。拡大や縮小が容易にできる為、レスポンシブ性が求められるWebデザインに適応するフォーマットとして注目を集めています。今回ご紹介するのはそんなSVGを利用した背景を容易に生成できる「SVG Backgrounds」です。
シームレスで拡大と縮小に適応したSVGバックグランドをCSSコードで入手することができます。
詳しくは以下
(さらに…)
デザインの印象を決める配色は、組み合わせ次第で全く異なる印象へと変化する、重要な工程です。そんな配色だからこそ、しっかりと吟味して最適な組み合わせを選びたいもの。今回ご紹介するのはその配色を行う際に役立つwebツール「.colors{}」です。
好きなカラーコードを入力して、その色同士の相性を確認することが出来るWebデザインに最適なツールです。
詳しくは以下
(さらに…)
日々進化するデザイン。常に最新のものを情報としても、そして素材でも取得しておきたいもの。そんな中今回紹介するのは、最新のトレンドが随所に反映されたフリーUIキット「H1 / Free Mobile UI Kit for Sketch & Photoshop」です。
デュオトーンやフレッシュなカラーリングが特徴の、非常にクリエイティブ性のあるスマートフォン向けのUIキットとなっています。
詳しくは以下
制作したいイメージやテイストによって、使用するフォントも使い分けをすることで、デザインをより高い精度で仕上げることができます。それにはより多くのフォントをストックしておくことも大切。そんな中今回は、ラフな雰囲気を演出したい時に便利なスクリプトフォント「Highlander Marker Script」を紹介します。
マーカーで描いたようなラフテイストにデザイン性を感じる、セットで使用できるパーツもセットになったフォントです。
詳しくは以下
WEBサイトでも頻繁に利用されるモーダルウィンドウ。詳しく情報を表示したり、アラート的に利用したり、コンタクトフォームなどで利用したりなど様々な使い方が可能ですが、今回紹介するのはレスポンシブで小気味の良いアニメーションが特徴的なモーダル「IZIMODAL」です。
モーダルウィンドウとしての機能は一般的なものですが、モーダル内のオブジェクトが細かく動作しクオリティが高い印象を与えてくれるモーダルウィンドウです。
詳しくは以下
究極なシンプルをテーマにデザインされるミニマルデザインサイト。要素が限られるだけに、バランスやどんな要素やグラフィックを取り入れるのかがとても重要になってくる、ある意味難しい種類のデザインでもあります。今回はそんなミニマルサイトをデザインする際に是非参考にしたいインスピレーション30「30 Beautiful Minimalist Web Designs」を紹介したいと思います。
シンプルかつクオリティの高さを感じさせるデザイン事例30種がまとめられています。
詳しくは以下
写真を手軽に加工できるPhotoshop。中でも、ワンクリックで複雑な工程を一瞬で反映できるアクションツールはとても便利な存在です。今回はそんなPhotoshopアクションをまとめた「19 Time Saving And Free Photoshop Actions For Designers」を紹介したいと思います。
（najib17Stunning ColorFx by najib dod by najib17 on deviantART）
いろんなニュアンスを手軽に表現することを可能にしたクリエイティブなアクションが19種類紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
幅広いグラフィック表現を可能にするソフト・イラストレーター。豊富な機能ゆえ、なかなか使いこなせていないという方も多いのではないでしょうか？そんな中今回は、イラストレーターを使い慣れていない人でもわかりやすいチュートリアルまとめ「50 Fresh Adobe Illustrator Tutorials for Beginners」を紹介したいと思います。
Create a Tasty Pretzel Text Effect in Adobe Illustrator – Tuts+ Design & Illustration Tutorial
さまざまな種類のグラフィックを描き出せる、イラストレーターでの制作方法が分かりやすく紹介された記事がまとめられています。
詳しくは以下
女性に人気の高いSNSであるInstagram。企業やショップでも広報アカウントとして起用するケースも年々増加しつつあります。そんなInsragramでユーザーに訴求する為に欠かせない、おしゃれな雰囲気を手軽に演出できる魅力的なInstagramテンプレート集「Brand Social Media Kit」を今回は紹介します。
ユーザーにしっかりと自身の投稿の魅力を訴求できる、シンプルでおしゃれな投稿用画像のテンプレート素材です。
詳しくは以下
(さらに…)
定番として使用できるテクスチャは、デザインの幅が広がる要素だけにできるだけ多くストックしておきたいもの。今回はそんな定番として取り入れたい、シームレスに使えるフリーコンクリートテクスチャ「Free Seamless Concrete Textures For Your Design Project」を紹介します。
seamless concrete texture by oonerspism on deviantART
シンプルな表情で、いろいろなデザインに応用できるタイプのテクスチャとなっています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBやアプリ上でのボタンはユーザーにとって大きな意味を持ち、非常に重要な要素。一目でボタンだとわかるようなつくりであることはもちろんのこと、遊び心あるエフェクトはユーザーの目を楽しませます。今回はそういったボタンを探している方におすすめ、最新CSS3ボタンのまとめ「50 CSS3 Button Tutorials For Designers [2017]」をご紹介します。
すべてにデモがついているので、その場でどんな動きをするのかを確認することが可能。50種類もあるボタンの中でも気になったものをいくつかピックアップしていますので、下記よりご覧下さい。
詳しくは以下
光沢感のある質感をphotoshopなどのデザインツールで作り出すのは、高い技術と描写センスが必要になってきますが、今回紹介する「30 Sets of Elegant Foil Texture」を利用すれば、手軽にその質感を再現することができます。
..Foil Three.. by ~Bloody-Kisses-STOCK on deviantART
アルミホイルのような箔紙にくしゃくしゃとしたシワを加え、光の絶妙な反射具合を表現したテクスチャが多數収録されています。気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
自然の織り成す風景の中でも特に撮影や表現が難しい稲妻は、画像ソフトでの合成が必須な素材。そんな中今回紹介するのが、手軽に稲妻を合成できるPhotoshopブラシをまとめた「A Collection of Free Photoshop Lightning Brushes」です。
Lightning Pack by ~Kida-Ookami on deviantART
光り方やラインの走り方など、テイストの異なるPhotoshopブラシが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
webサイトをデザインするときにはいろいろなパーツ素材が必要になってきますが、同じデザインテイストですべてを揃えるのはなかなか大変なもの。今回はそんなときに参考にしたい、webサイト設計で使用する基本的UIが揃ったフリーキット「Spot UI Kit PSD」を紹介したいと思います。
ポップでカラフルなテイストのUIが揃っており、シリーズで使用すればデザイン感を合わせながらクオリティを高めることができます。
詳しくは以下
