デザインを開発するという視点でお伝えするクリエイティブBLOG
IEのサポートも縮小され、少しづつではありますが、制作の現場もアニメーションやエフェクトに対して積極的になってきました。本日紹介するのはdivもタブもチェックボックスも回転のエフェクトを与えることができる「TURNBOX.js」です。
こちらは様々な要素に対して、回転のエフェクトを与えることが可能となっております。例えばON/OFFのトグルだったり、アップロードだったりダイアログだったり、div自身にも与えることができるため、ページ全体を切り替えるようにした使い方も可能です。
詳しくは以下
さまざまなデザインを手掛けるデザイナーにとって、参考となるイメージや素材、テーマをまとめたサイトはとてもこころ強いもの。そんな中今回は、たくさんのUIデザインをまとめたサイト「Sketch App Sources」を紹介したいと思います。
UIデザインを中心に、いろんなテーマでクオリティの高い参考デザインがまとめられています。
詳しくは以下
グラデーションを作り出すのは、簡単なように見えて意外に難しいもの。絶妙な色合いをイメージ通りに表現したい、今回はそんな時に便利なwebジェネレーター「Blend」を紹介したいと思います。
2色のベースカラーを使ってグラデーションを生成できる、シンプルでありながらも使い勝手の良さが魅力のwebサービスとなっています。
詳しくは以下
webサイトの背景やメインビジュアルなどに、グラデーションの美しい色を使用することもあると思いますが、美しい色合いを作り出すのは意外に難しいもの。今回はそんな時に便利に活用できる、徐々に色が変化する背景作成が簡単にできるジェネレーター「CSS Gradient Animator」を紹介したいと思います。
2色の好きな色を設定するだけで、非常に簡単にグラデーションカラーを作り出すことができるようになっています。
詳しくは以下
デザイン制作の際に、色合いにニュアンスを出すために使用されるグラデーション。きれいな色の組み合わせが成功するとデザインが一気に魅力的なものに変化することも。今回はそんなシーンで役立てたい、グラデーションを楽しみながらコード取得もできるサイト「uiGradients」を紹介したいと思います。
ひたすらグラデーションを閲覧するといった非常にシンプルなサイトですが、色の濃淡のコード取得ができるなど実用的にも活用できるサイトとなっています。
詳しくは以下
webサイト制作には、全体の設計からデザイン感の決定、どんな色や書体を使うのかなど、いろいろな企画工程が必要になってきます。今回はそんな工程をできるだけ短縮しながら、精度の高いデザインに仕上げたい時におすすめなwebテンプレート集「20 Free Web Templates for Web Designers」を紹介したいと思います。
Mentum – PSD Single Page Template – graphberry.com
ハイクオリティな、現在の主流のデザイン感をしっかりと抑えたテンプレートがまとめられています。
詳しくは以下
冬はクリスマスやお正月、バレンタインデーといったイベントの多くなる季節です。イベントに合わせてWebサイトやポスター、グリーティングカードなどを作る機会も増えると思います。そんな時に活躍してくれる、100種類の豊富なフリーフォントまとめ「100 Greatest Free Fonts for 2018」を今回は紹介します。
Lemon Tuesday Font | dafont.com
それぞれ違ったテイストのフォントが集約された便利なサイトです。中でも気になったものをいくつかピックアップしてみました。
詳しくは以下
デザインのイメージが変わってしまう程、デザイン制作の中でフォントはとても重要な存在。しかし、なかなかデザイン性の高いフォントが見つからない時もあるのではないでしょうか。今回はそんな時に是非おすすめの6つのフリーフォント「6 Brand New Fonts For Designers」を紹介したいと思います。
（Typography: Font "Aurora" on Behance）
ハイクオリティなデザインフォントが揃っており、使用するだけでおしゃれな雰囲気を演出できそうです。
詳しくは以下
フリーで利用できる素材は非常に重宝するため、気になったものはまめにダウンロードされている方も多いのではないでしょうか？そんな中今回紹介するのは、種類豊富に揃った50種のフリー素材まとめ「50 Free Resources for Web Designers from June 2015」です。
Free Psd web mockup on Behance
デザイン性の高いフリー素材が、いろいろな種類ピックアップされまとめられています。いくつか気になったものを以下よりご覧ください。
詳しくは以下
webデザインで頻繁に使用するアイコン。デザイン性のあるものも数多く配布されており、いろいろなストックされている方も多いのではないでしょうか？そんな中今回紹介するのは、モダンテイストなデザイン性のあるアイコンまとめ「50 Modern Examples of Thin Line Icons」です。
Dribbble – Caviar – Fastbite by Tamer Koseli
いろいろな種類のアイコンがまとめられており、ぜひ使ってみたくなるものばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
高解像度のテクスチャやチュートリアルなどデザイン制作のためのまとめエントリーが今回紹介する「 50+ High Resolution Textures, Tutorials and Resources」です。
全部で50以上のリソースが紹介されています。今回はその中から一部気になったリソースをいくつか紹介したいと思います。
詳しくは以下
デザインのオーダーは様々で先端のクリエティブがいつも求められるとは限りません。オーダーはクライアントや目的次第で大きくかわります。そんなデザインワークに便利なのが、特徴的な雰囲気を持ったフォント。フォントの与える影響は大きく扱うフォントで雰囲気は一変します。今回紹介するのはピクセルで構成されたフォント集「30+ New Pixel Fonts To Complete Your Collection」です。
Back to 1982 font | UrbanFonts.com
ピクセルで描かれたフォントはレトロ感やポップで楽しげな印象など様々な印象を与えてくれます。全部で30ものフォントがまとめられていますが、今回はまとめられているものなかから、いくつか気になったフォントをピックアップして紹介したいと思います。
Mischstab Umbrella font | UrbanFonts.com
絶妙なバランスがアーティスティックなフォント。少しずつ変化をつけたアルファベットが印象的です。
Dot Digital-7 Font | dafont.com
パックマンを彷彿とさせるポップなフォント。電光掲示板などを表現したい時に使えそうですね。
Mikrokomputer font | UrbanFonts.com
昔のWindowsに入っていそうなフォント。いくつかの記号がインベーダーのキャラクターがになっていて、遊び心を感じます。
ピクセルフォントと言ってもクリエイティブに幅があり、ピクセルフォントであればどれでも良いという分けではないと思いますが、相当の種類がまとめられていましたので、きっとピッタリのフォントを見つけられると思います。気になる方は是非、原文もご覧ください。
どんどんと新しい種類が登場するアイコン。その時々のトレンドにあったものから定番まで、常にチェックされている方も多いのではないでしょうか？そんな中今回は、2014年に紹介された人気フリーアイコンをまとめた「Top 50 Free Icon Sets from 2014」を紹介したいと思います。
150 outlined icons – PSD AI SVG Webfont – Freebiesbug
定番として活用できるシンプルなタイプのアイコンを中心に紹介した、アイコンを探している方は是非一度チェックしておきたい内容のまとめ記事です。
フリーでも非常にクオリティの高いデザインフォントは多数web上で配布されており、日々のデザインに活用されている方も多いのではないでしょうか？今回はそんなフォントコレクションに是非加えたい、ハンドメイドのラフな雰囲気を演出できるステッチフォントまとめ「20+ Fun and Cool Stitch Fonts For Your Next Enjoyable Designs」を紹介したいと思います。
ミシンや手縫いでの縫い目をフォントのデザインに反映した、アナログタッチなフォントが多数まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
すこし前になりますが、WordPress 2.6が正式リリースされました。designdevelopはWordPressで動かしているため、今日はWordPress2.6の新機能や改善点を勉強がてら、エントリーしたいと思います。
WordPress 2.6では、Wikipedia式に、誰がいつ、どの書き込みにどんな変更を加えたかが分かり、間違った場合にもとのバージョンへと簡単に戻ることができる「Post Revisions」機能や、別のサイトやページを閲覧している最中にブックマークレットを押すと、見つけたビデオや写真などを、簡単に自分のブログに引用できる「Press This」などという大きな新機能も加わっています。改善点や新機能をまとめたプロモーションビデオが公開されていましたので、下記に貼り付けておきます。
動画は以下から
写真の加工などグラフィックデザインに欠かせないPhotoshop。様々な機能を卒なく使いこなせたら、更にデザインの幅も広がるのではないでしょうか。そんな中今回は、Photoshopの技術を高めてくれるハイクオリティなチュートリアル「30 Fresh New Photoshop Tutorials – Enhance Your Manipulation Skills」の紹介です。
Create a Pop Art Inspired by Roy Lichtenstein – PSD Stack
Photoshopの様々な機能を使って写真に処理を加える方法をチュートリアルしてくれる便利なサイトです。その中からいくつか気になったものを紹介したいと思います。
詳しくは以下
