デザインを開発するという視点でお伝えするクリエイティブBLOG
WEB上で3Dアニメーションやオブジェクトを表示できる技術WebGL。今回ご紹介するのはそんなWebGLを使った、美しいマウススクロールアニメーションをまとめた「WebGL Scroll Spiral」です。
万華鏡のような美しいデザインから、抽象的なモーショングラフィックまで多様なデザイン、全8種類のデモを公開しています。
詳しくは以下
WEBサイトにおいて、探すインターフェイスは非常に重要で、初めて見るサイト・使い慣れたサイトでもともによく利用するものとなりますが、今回紹介するのはダイナミックで洗練された検索ユーザーインターフェイスキット「Inspiration for Search UI Effects」です。
WEBサイトで利用できる様々なユーザーインターフェイスが全部で11まとめられています。全画面でダイナミックにアニメーションするものから。検索コマンドのように事例を見せるユニークなタイプのものまでがまとめられています。
詳しくは以下
WEB制作やシステム開発をしているとフローチャートを書くことも多く、専用のソフトウェアもリリースされていたりしますが、使い慣れたツールで創るのが一番早いという方も多いと思います。今日紹介するのはフローチャート作成のためのデザインキット「Flowchart kit for Sketch」です。
フローチャートに必要なデザイン素材をSketchで利用できるように、まとめて配布されています。
詳しくは以下
1カラムのダイナミックなデザインが主流となって暫く経ちますが、WEBサイトの印象を決定づける要素の一つに背景があります。特にPCサイトでは大きな面積を占めることから非常に重要な要素ですが、今日はそんな背景デザインのアイデア集、2017年の主流となるWEBデザインの背景のアイデア集「5 Modern Website Background Ideas for 2017」を紹介したいと思います。
1. Geometry on Photos
幾何学的なデザインを写真に重ねる背景デザイン
2017年のトレンドとなりうる背景デザインが全部で5つ掲載されていましたので以下からご覧ください。
詳しくは以下
デザインの素材として世界観を創るのに便利なパターン素材。イラストレーターやフォトショップを利用している人であれば簡単に制作もできますが、それでも少しは時間がかかります。今日紹介するのはオンライン上で簡単にイラストレーションの組み合わせて独自のパターンが生成できる「patterninja」です。
基本的にベースのカラーを選び、そこにイラストレーションを重ねていくという方法でパターンを生成していきます。元々セットされているイラストレーションから生成もできますし、自分で用意した画像をアップロードして利用することも可能です。幾つかパターンを制作してみましたので以下からご覧ください。
詳しくは以下
スマートフォンのWEBサイトデザインをはじめ、マテリアルデザインを導入するWEBサイトが増えてきました。マテリアルデザインとはZ軸の概念を取り入れ、WEBページ上の要素の重なりを現実世界に近い形で表わすもので、要素同士が重なるため、それだけに配色も重要になってきます。今日紹介するのはマテリアルデザインのためのカラーツールまとめたエントリー「9 Useful Tools for Creating Material Design Color Palettes」です。
いくつかのカラーツールがまとめれられていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
POPで爽やかな印象から、グランジのようなハードな印象から様々な事を表現できるハーフトーン。デザイン制作では便利なものですが、今日紹介するのはそんなハーフトーンを集めたフリーベクターデータ集「28 Halftone Vectors 」です。
細かなものから、粗いものまで様々なハーフトーンパターンがベクターデータで紹介されています。収録されているハーフトーンのパターンは以下の通りです。
詳しくは以下
シルエットや線のみで描くシンプルなアイコンはWEBデザインでは汎用性が非常に高く、どんなデザインにも使いやすい、非常に使える素材だと思います。今回紹介するのはそんなシンプルなフリーアイコンセットを集めたエントリー「The Best Icon Sets for Minimal Style Web Design」です。
ある程度セットになっていて、一つのセットである程度WEBサイトに展開できるようなアイコンセットが多数紹介されています。今回はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザインをする際に使用する素材の中でも、特に活躍の場が多いアイコン。種類豊富に持っていると、非常に便利なもの。そんな中今回紹介するのは、多くのデザインシーンで活躍してくれるフリーフォントまとめ「20 Awesome Free Icon Fonts to Use in Your Designs」です。
Dribbble – Icons V.3 – Free Download by Hüseyin Yilmaz
いろいろなテーマのアイコンセットが20種紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザイナーにとってもはや必要不可欠といっても良い程便利な存在となっているフリー素材。非常にさまざまな種類がインターネット上でダウンロードできるようになっています。そんなフリー素材の比較的最新のものをまとめた「「Top 50 Free Resources for Designers from June 2014」」を今回は紹介します。
（Dribbble – Freebie! Starnight HTML5/CSS3 Website Template! by Peter Finlan）
テンプレートやUI、テクスチャやフォントなど、種類豊富に揃っているので、いざという時非常に役立ってくれそうです。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBサイトを制作する際とても便利なのがテンプレート。はじめからある程度組まれていますので、そのまま使う事もできますし、作りだけは引き継いでデザインのカスタマイズも可能です。様々なテンプレートが国内外展開していますが、今日紹介するのはクリエイティブで美しいフリーCSSWEBテンプレート9選「9 Beautiful Free CSS Web Templates」を紹介したいと思います。
Portfolio Template 1 download – demo
ポートフォリオから、ポータルサイト系、コーポレートサイトまで様々なジャンルのクリエイティブなCSSWEBテンプレートが公開されています。今日はその中から気になったものをいくつか紹介したいと思います。
詳しくは以下
WEBを制作するにあたって、非常に便利な素材、アイコン。もちろんアイコンもフルオリジナルで作る時間と予算があれば良いのですが、毎回そうも言っていられない現場では、非常に重宝する素材の一つです。今日紹介するのは無料でダウンロードできるフリーアイコンセットをまとめたエントリー「24 Free Mini Icon Sets To Download」です。
ある程度数があるアイコンセットが全部で24個まとめられていましたので、今日はその中から気になったアイコンセットをピックアップして紹介したいと思います。
詳しくは以下
継ぎ目なく連続したパターンで使用できるテクスチャは、1枚の大きさを気にすることなく使用できるため、webの繰り返し処理を行う場面などで非常に重宝すると思います。そんな中今回は、シンプルかつシームレスなテクスチャ素材集「30 Free Seampless Background Textures」を紹介したいと思います。
いろいろなテイストにも柔軟に対応でき、おおいに活躍してくれそうな素材がまとめられており、日々のデザイン制作の定番アイテムとして是非覚えておきたい内容となっています。いくつか気になったものをピックアップしましたので、以下よりご覧ください。
詳しくは以下
ロゴタイプやテキストなどをより魅力的に主張したい時に加工を施すこともあると思いますが、高い技術を持っていないとなかなか難しいもの。今回はそんな時に参考にしたい魅力的なテキストエフェクト集「25 Amazing Text Effect Photoshop & Illustrator Tutorials」を紹介したいと思います。
PhotoshopやIllustratorで制作できる製作工程がそれぞれ、分かりやすく紹介されています。
詳しくは以下
デザインの雰囲気をガラリと変えてくれるテクスチャ。今回紹介するのは、グランジ感のあるシンプルなカラービンテージテクスチャ「Colored Vintage Paper: Texture Pack」です。シンプルながらもカラーバリエーションが豊富なので、使いやすく、どんなデザインにでも活躍してくれそうです。
全部で20種類のカラーリング収録されています。いくつかのカラーをピックアップして紹介したいと思います。
詳しくは以下
Colored Vintage Paper Texture 01 (Aqua)
Colored Vintage Paper Texture 03 (Brown)
Colored Vintage Paper Texture 14 (Moss Green)
テクスチャは3600×3600pxと高画質なので、WEBから紙まで幅広いクリエイティブに利用できそうです。ライセンスも「Commercial and personal work under」となっており、商用デザインから、個人用途まで利用することが可能です。
柔らかな質感を表現できる羽素材は、パターンとして取り入れることで個性的なデザイン演出が可能になります。今回はそんな羽をテーマにしたフリーパターン素材集「A Collection Of Free To Download Feather Patterns」を紹介したいと思います。
Pattern / peacock 8 :: COLOURlovers
いろいろなテイストの羽を敷き詰めたパターン素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
