デザインを開発するという視点でお伝えするクリエイティブBLOG
アイコンは意味を伝えるために欠かせないアイテムです。説明文ではなくイラストを用いることで理解もしやすくなるので、Webサイトなどでは多く使われています。そんな中今回は、150種類以上の可愛らしいベクターアイコンがセットになった「150+ Free Vector Icons for Web, iOS and Android Apps UI Desgin」です。
150種類以上の豊富なアイコンが3パターンのカラー展開された、汎用性の高いアイテムです。
詳しくは以下
デザインのポイントやアクセントに使いやすい素材が一つ在ると、作業の効率もアップするもの。今回ご紹介するのは、そんなアクセントやポイントにと活躍してくれるスパイラルなベクター素材セット「12 Spiral free vector elements set edition 6」です。
12 Spiral free vector elements set edition 6 | Creative Nerds
印刷やWebなど多彩なシーンで利用できるスパイラル素材が12パターン収録されています。
詳しくは以下
Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。
Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE
オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご覧ください。
詳しくは以下
Clippy — CSS clip-path maker
Clippyは画像を切り抜くフレームの形を自由に調整することができるWebツールです。星や丸などベースとなる図形を27種類の中から選ぶことが出来、自由に編集できます。
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
トレンドのグラデーションをCSSで表現できるWebツールです。背景にグラデーションを使いたいときなど、大きい面積でグラデーションを取り入れたいときに。
Trianglify.io · Low Poly Pattern Generator
流行のポリゴングラフィックをCSSで表現するためのツールです。目の細かさや角度、色味などをカスタマイズでき自由度も高いです。
最適なツールを利用することで、クオリティの高いコーディングを短時間で完結することができます。サイトには他にも活用する機会の多いWebツールが多数紹介されていますので、興味をお持ちになられた方は是非下記リンク先よりご覧になってみてください。
デザインの様々なシーンで役立つフリーフォント。使用頻度が高いものだけに、常に最新のフォントをチェックしておきたいもの。今回ご紹介するのは、そんな最新のフリーフォントをまとめた「23 Fresh Free Fonts for Graphic Designers」です。
Free Fonts Typeface Fonts | Fonts | Graphic Design Junction
デザイナーのための使えるフリーフォントが23種類紹介されています。その中からおすすめのフォントを幾つかピックアップしましたのでご覧ください。
詳しくは以下
(さらに…)
暑い日が続きすっかりと夏の到来を感じさせる季節になってきました。デザインでも夏らしさを求められる時期になってきたのではないでしょうか？今回ご紹介するのはそんな夏のデザインにぴったりな、トロピカルなフリーアイコンセット「The Free Tropical Icon Set (50 Icons, SVG & PNG)」です。
The Free Tropical Icon Set (50 Icons, SVG & PNG)
夏らしいイラストがポップなタッチで書かれたキュートなアイコンセットです。
詳しくは以下
(さらに…)
Photoshopのレイヤースタイルは、簡単に特殊効果を適用できる便利な機能。しかし凝った効果を一から制作するのは中々手間が掛かってしまいます。今回ご紹介するのはそんなレイヤースタイルを手軽に使えるPhotoshopテキストエフェクト「20 Free Photoshop Layer Styles for Creating Beautiful Text Effects」です。
Sandwich 3D Text Effect – 3 Angles | GraphicBurger
アナログ風やCGのような立体的なエフェクトまで様々なテイストの素材が揃えられています。さらにその中からおすすめのものを、幾つかピックアップしましたのでご覧ください。
詳しくは以下
(さらに…)
日々進化していくWebデザインの表現方法。特にjQueryやHTML5・CSS3においては最新の動向と合わせていくため、たくさん勉強をされているデザイナーの方も多いのではないでしょうか。そんな中今回は、CSS3で実現できる最新のデザイン表現方法をまとめた「20 Useful Fresh CSS3 Tutorials for Web Designers」を紹介したいと思います。
20 Useful Fresh CSS3 Tutorials for Web Designers – DJDESIGNERLAB
奥行きを感じる3D表現、またプルダウンメニューなどに代表される基本機能も一味異なる、最新のWebサイトで見られるような斬新で面白いチュートリアルが揃っています。中でも気になったものをピックアップしましたので、以下よりご覧ください。
詳しくは以下
デザイン制作に非常に役立つphotoshopブラシは、いくつあっても嬉しいもの。今回紹介する「20 Free Useful Water and Cloud Brushes resource for Photoshop Users」も、非常に活用頻度の高いブラシセットまとめです。
（Water Brushes Sampler by ~FrozenStarRo on deviantART）
詳しくは以下
水が飛び散る様子、夏の日の空のような大きな雲など、さまざまな種類のブラシが紹介されています。いくつかピックアップしてみましたので、下記よりご覧ください。
インターフェイスを補助したり、デザインの質を上げてくれる、便利な素材アイコン。WEBデザインでは、メニューだったり、その他付随する機能を表すときには非常に重宝しますが、今日紹介するのはシンプルで上質な280個ものアイコンセット「Steadysets – 280 free icons」です。
こちらは普段利用しそうなインターフェイス系のアイコンから、宝石やハート、注射器といったグラフィック系のアイコンまで、全部で280個ものアイコンがセットになったアイコンセットとなっています。
詳しくは以下
デザインで使用する書体の種類の選定は可読性の向上、デザイン全体の景観を大きく左右する大切なもの。フォントは数多くありますが、今回はサンセリフ体に焦点をあててまとめられた「30 Free Sans Serif Fonts to Download」をご紹介していきたいと思います。
クールで洗練されたものを中心に多種多様なものがまとめられおり、気になったものをいくつかピックアップしているので下記よりご覧下さい。
詳しくは以下
皆さんはサイトを設計する際にどのようなフローを行っているでしょうか？今日紹介するのはサイト構築の初期の設計時に利用できる、シンプルなiphone,ipad,ブラウザのワイヤーフレーム用テンプレートセットを紹介したいと思います。
それぞれのテンプレートでプロジェクトネーム、スクリーンネーム、ノートなど実務で利用しやすいようなテンプレートになっていて。実機。ブラウザの部分にはドットなども入れられており、制作者サイドにたった校正となっています。その他のテンプレートは以下からご覧ください。
詳しくは以下
こちらはiphone,ipad,ブラウザの三種のテンプレートがセットになっていて、pdfで配布されておりますので、印刷して利用するのも便利です。ワイヤーのラフを書く際にもっとイメージを実機やブラウザに近づけた状態で行いたいという方は是非どうぞ。
WEB制作にとどまらず、様々な場所で利用されるアイコン。素材としては非常に優秀で、いろいろな趣旨のアイコンセットが世界中で公開されていますが、今日紹介するのは、施設からファイル形式まで、様々なアイコンを網羅したアイコンセット「Eldorado mini free」です。
こちらのアイコンセットは、単純にUI的なものではなく、マトリューシカやハンバーガーなどなど多種多様なアイコンがまとめられています。全部で1262種類ものアイコンがセットになっていますが、今日はその一部を紹介したいと思います。
詳しくは以下
デザインの仕上がりを左右する重要な要素はいくつか挙げられますが、中でもフォントは慎重に選び、デザインとマッチさせたいもの。今回はそんなときにぜひ参考にしたい、ハイクオリティなフリーフォントまとめ「30 New Truly High Quality Free Fonts for Designers」を紹介します。
30種のデザイン性のあるフォントがまとめられており、どれも非常に魅力的なものばかり。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
WEBをデザインしていく上で欠かせないCSS。厄介な部分もありますが、アイデアとテクニックしだいで様々な表現を可能にしてくれます。今日紹介するのはそんなCSSのテクニックをあつめた「35+ very Useful And Powerful CSS techniques」です。
様々なTipsが公開されていますが、今日はその中からいくつか気になったテクニックをピックアップして紹介したいと思います。
詳しくは以下
学校の授業で黒板に文字を書く際に使用するチョークは、味のある独自の書き上がりが特徴。今回は、そんなチョークを使って塗りこまれたテクスチャセット「7 Remixed Chalk Pastels」を紹介したいと思います。
チョークの質感を生かしながら、繊細で幻想的な雰囲気を感じられるテクスチャばかりがセットになっています。
詳しくは以下
質感をプラスしたり、デザインの厚みを持たせたりしたい時に便利なテクスチャ。素材自体で大きく印象が変わります。今日紹介するのは質感のあるビンテージ感のあるテクスチャパック11「11 High-Resolution Textures: Old Equipment」。
皮や布、ペンキで塗りこんだ壁などなど、様々な質感のテクスチャが収録されていました。その中から気になった物を紹介したいと思います。
詳しくは以下
