デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBサイトならではのアクション要素の一つ、アニメーション。取り入れることができれば個性的でインパクトのあるサイトを制作できますが、アニメーションの作成はハードルが高いと感じる方も多いのではないでしょうか。そんな方におすすめできるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」を今回はご紹介します。
使い方が難しそうと思われる方も多いかもしれませんが、汎用性の高い便利なツールとなっています。使用方法をわかりやすく説明してくれている動画が紹介されていますので、まずは下記よりご覧ください。
詳しくは以下
レスポンシブが盛んな昨今。PCとスマートフォン両方で使用することができ、かつ綺麗に表示させることが可能なSVGファイルは、非常に便利。今回ご紹介する「40 Excellent SVG Tools and Dozens of Icon Sets」ではSVGに焦点をあてた便利なツールがまとめられています。
SVGファイルを編集してアニメーションを制作できるツールなどこれから必要になるコンテンツが多数収録されており、その中から気になったものをいくつかピックアップしていますので下記よりご覧下さい。
詳しくは以下
デザインの仕事に携わっていると、ロゴなどのブランドイメージから名刺や販促ツールまで、クライアントに提案する機会は多いはず。そんな時にデザインをより魅力的に見せるためにも、モックアップが重要な役割となります。そんな中今回は、様々な場面で活用出来る便利なPSDモックアップ「35 Best Mockups: Download Realistic PSD Mock-ups」を紹介したいと思います。
Art & Craft / Stationery Mock-Up ~ Product Mockups on Creative Market
紙のツールからパッケージのモックアップまで、様々なバリエーションが揃っています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
Webサイトは、掲載内容や用途によって様々な表現をする必要があります。デザイン制作の効率化にも繋がるテンプレートはそんな時にとても役に立つ素材の一つ。そんな中今回は、テイストの異なるWebサイト用PSDテンプレート「12 Free High Quality Website Template PSDs To Download」を紹介します。
Freebie PSD: Perth – A Free Flat Web Design.
多種多様なPSD形式のテンプレートがまとめられてます。その中から幾つか気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインをする上で欠かすことのできないワイヤー制作。設計の基礎となるものであり、制作の方針をディレクターに伝えるためのものでもあります。デザイン業務に必ず組み込まれているものだからこそ、便利なツールを使用すれば業務がスムーズになるはず。そんな中今回は、知っていれば業務が楽になるまとめ「10 Free & Latest Wireframe Tools and Templates」をご紹介していきます。
Prototyping tool for web and mobile apps – Justinmind
ワイヤー制作を楽に行えるようになるツールがまとめられています。下記にいくつかピックアップしているのでご覧ください。
詳しくは以下
ビジネス、ライフスタイル、ソーシャルなど、アイコンにはいろいろな種類があり、常にチェックしストックしておくことでさまざまなシーンで役立ってくれます。そんな中今回紹介するのは、人物のラインアイコン「Freebie: Line-Style User Avatar Icon Set」です。
人物をテーマとしたラインアイコンで、シンプルなテイストでありながらもどこか個性を感じるデザインが特徴となっています。
詳しくは以下
製作中のデザインが実際にリアルに展開された時、どんなイメージになるのか確認する時に使用されるモックアップはとても便利な存在。そんな中今回は、最新のフリーモックアップを26種集めた「New Free PSD Mockup Templates (26 New Mock-Ups)」を紹介したいと思います。
ShowItBetter – photo mockups | Free MacBook Pro photo mockup
さまざまな使用シーンを想定した、いろんな種類のモックアップが厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
アナログ感を与えたり、荒荒しさを表現したり、デザインの定番とも言えるグランジ。それだけに国内外で多くのグランジを取り入れた、または表現するための素材が公開されていますが、今日紹介するのはフォント・パターン・テクスチャあらゆるグランジ素材を集めたエントリー「Ultimate Grunge Toolbox for Web Designers」を紹介したいと思います。
10 Seamless Grunge Patterns .png
非常に多くのグランジ素材が集められていますが、今日はその中から特に気になったソイ剤をいくつか紹介したいと思います。
詳しくは以下
デザインの印象を決定付ける、重要な要素の一つに配色があります。色の組み合わせは思っている以上に難しく、いつも同じような配色になってしまう、または配色自体が思いつかないと色で悩んでいる方も多いと思います。今回紹介するのはトレンドの配色をカラーコード付きで参照できるWEBサイト「Trendy Palettes」です。
基本的には三色の組み合わせパターンが登録されており、色の組み合わせとそれぞれのカラーのカラーコードを参照することが可能です。
詳しくは以下
1から作り出すことの難しい水を用いた表現を利用したい時におすすめの、多彩な水の表現を可能にしてくれるPhotoshopブラシ集「100+ Absolutely Free Refreshing Photoshop Water Brushes」です。
（Water Brushes by ~seiyastock on deviantART）
水滴などの細かい表現から、水しぶきのようなダイナミックな表現まで、さまざまなブラシが紹介されています。中でも特に気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインは一人で黙々と創り上げる作業も必要ですが、商業デザインの場合、様々な人とコミュニケーションをとり、情報を共有しながら、創り上げていくことも必要になります。そんな時に便利なのが、メールやスカイプなどのWEBを利用したサービス。すでに様々なWEBサービスを駆使して仕事をしているという方も多いと思います。
普段は私も、スカイプやEvernote、Gmailなど複数のサービスを利用して社内外のコミュニケーションを取りながらデザイン業務を行っていますが、今回は「メールの時代は終わった」と銘打ったWEBサービス「チャットワーク（ChatWork）」を紹介したいと思います。
詳しくは以下
テンプレートを使用することで、作業効率を上げながらデザインクオリティを高めることができたり、コスト削減をすることが可能となります。そんな中今回紹介するのは、HTML&PSD形式のフリーテンプレートをまとめた「20 Fresh and Free HTML and PSD Templates plus GUI Packs」です。
zGoodFood – Free Responsive Html5 Css3 Templates | Themes
PC・スマートフォン等のいろいろなタイプのテンプレートがまとめられており、どれも使ってみたくなるものばかり。気になったものをピックアップしましたので、下記より御覧ください。
詳しくは以下
たくさんあるアイコンの種類の中で、日付表記などと一緒に使用されることの多い天気アイコン。今回は非常に細かな変化まで再現した「Tempus, 180 Free Weather Icons」を紹介したいと思います。
通常、晴れ、雨、曇りといった定番の天気の移り変わりを収録しているアイコンセットが多い中、かなり詳細な天気までもがアイコンになってまとめられています。
詳しくは以下
ユーザーとのコミュニケーションに一般的に使われているフォーム。メールフォーム、アンケートフォーム、会員登録と幅広い使われ方をしていますが、今回紹介するのはそんなフォームを快適にしてくれるフォームのためのjQuery集「10+ jQuery Form Enhancement Plugins」を紹介したいと思います。
フォームをちょっと便利にしてくれるそんなテクニックが詰まっています。エントリーに収録されているモノのから気になったものをいくつかピックアップして紹介したいと思います。
詳しくは以下
フリーフォントばかりではありませんが、deviantARTで公開されているFONTの中からピックアップした美しいフォント集をまとめたエントリーが今回紹介する「 40+ Extremely Beautiful FONT」です。
クリエイティブが溢れるフォントを40紹介しています。今日はまとめられているフォント中からいくつかdesigndevelopが気になったものを紹介したいと思います。
詳しくは以下
