デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBデザインでは非常に重要となり、利用頻度も高いアイコン。様々なアイコンセットが世に中には出回っていますが、今回紹介するのはJPGやPNGといった画像データでは無くて、SVGでダウンロードしたり、SVGコードで出力できる、ICONサービス「ICONSVG」です。
シンプルでスタンダーどなアイコンが並んで降り、「Arrow」「InterFace」「Media」「Files&folders」「Editor」「Symbols and shapes」「User」「Graphs&charts」「Devices」「Layout」といったカテゴリに分けられて収録されています。
詳しくは以下
WEBサイトのアニメーションはとても重要で印象的なアニメーションをそのサイトの価値を大きく向上させてくれます。大きく派手な動きも大切ですが、細かなアニメーションもクオリティを向上させるためには大切な要素の一つです。今日紹介するのはマイクロインタラクションに使えそうなCSSアクセントアニメーション「WickedCSS animations」です。
floater（ふわふわ浮く）、barreRoll（クルっと一回転）、RollerRight（回転しながら出現）、heartbeat（鼓動のように膨らむ）、shake（細かく揺れる）など、かなりの数のアニメーションがCSSのみで再現されています。
詳しく以下
2018年も今日で最後となりました。沢山のWEBサイトが今年もリリースされ様々な印象的なデザインや表現手法が生まれました。今回紹介するのは来年2019年の主流になりそうな、WEBデザイントレンドを紹介したエントリー「20 web design trends for 2019」。
2019年以降に来ると言われているデザイントレンドの中から、国内でも同じようにトレンドになりそうなものを、いくつかピックアップして紹介したいと思います。
デザインの主役となるコンテンツを考えるとき、簡単に取り入れることができるコードスニペットがあると便利ですよね。今回は、デザインをカスタマイズするときに役立つコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」を紹介します。
自然の風景をテーマにHTMLやCSS、JavaScriptで作られたコードスニペットがまとめられています。気になったものをいくつかピックアップしましたので、下記からご覧ください。
詳しくは以下
(続きを読む…)
デザインテーマにはさまざまな種類があり、テーマに合った素材を上手に選定することはとても重要な要素の一つ。そんな中今回紹介するのは、ボヘミアンスタイルのデザイン素材をまとめた「Incorporate Bohemian Style Into Your Designs FEATURED」です。
Yulia.Podlinnova/1341159-Boho-Bordo-Watercolor-Flowers
ボヘミアンスタイルを象徴する様々なモチーフが、水彩画や手書風のタッチでデザインされています。気になるものをいくつかピックアップしましたので、下記からご覧ください。
詳しくは以下
デザインの印象を決定付ける、重要な要素の一つに配色があります。色の組み合わせは思っている以上に難しく、いつも同じような配色になってしまう、または配色自体が思いつかないと色で悩んでいる方も多いと思います。今回紹介するのはトレンドの配色をカラーコード付きで参照できるWEBサイト「Trendy Palettes」です。
基本的には三色の組み合わせパターンが登録されており、色の組み合わせとそれぞれのカラーのカラーコードを参照することが可能です。
詳しくは以下
特殊な場面で効力を発揮しそうなのが今回紹介する滑らかなに横にスクロールできるjavascriptが今回紹介する「bookreader.js」です。
基本的にはWEBはほとんどが縦スクロールの構成になっていて、長文を読むにはあまり適しているとは言えないので、長い文章を見せるときなんかは有効なスクリプトだと思います。
詳しくは以下
前回「デザイン素材専用サーチエンジン「Design Resources Search Engine」」と言う記事で写真やシェイプなどのデザイン素材専門の検索エンジンを紹介しましたが、今回紹介する「Find Free Clipart」はフリーのクリップアート専門の検索サービスです。
非常にシンプルなインターフェイスなので普段検索エンジンを使っている方でしたらまず迷うことはないかと思います。試しに例に挙がっていた「Vector Flowers」を検索してみました。
詳しくは以下
以前に比べWebサイトはよりクリエティブな仕掛けや見せ方が求められるようになってきていますが、実際に一からJSを組んでいくとなると時間が掛かってしまうものです。今回はそんな時に役立つ、すぐに使える実用的なjQueryテクニックとチュートリアルをまとめたエントリー「15 Useful jQuery Techniques and Tutorials for Developers」を紹介したいと思います。
Flyout Image Slider Using jQuery & CSS3 – Webstuffshare – Learn and share. The simplest harmony.
どれもすぐに取り入れることができる実用的なものばかりですが、その中でも特に気になったものをピックアップして紹介したいと思います。
いろいろな種類のアイコンが配布されていますが、やはり1つのセットで種類が豊富なものは、1つのデザイン制作の中での使い道のバリエーションが増えることもあり、何かと便利なもの。そんな中今回紹介するのは、多彩な種類のアイコンが揃う「City Icons」です。
カナダ・トロントをインスピレーションにデザインされたアイコンがセットでダウンロードできるようになっています。
詳しくは以下
サイトをデザインする上で書かせないのがユーザーインターフェイス。しかしユーザーインターフェイスをデザインするとなるとなかなか難しかったりします。そこで今日は様々なUIを集めたUIデザインのパターンライブラリ「UI-patterns」を紹介したいと思います。
タグクラウドからページ分割、WYSIWYG、Wikiなど他にも様々なユーザーインターフェイスのサンプルが収録されています。
詳しくは以下
企業のシンボルや、ブランディング、プロモーションなどに使用されるロゴには、個性が求められるシーンもしばしばあるかと思います。今回はそんな時に是非参考にしたい、Illustratorで作るロゴデザインチュートリアル「40 Tutorials for Outstanding Text Effects in Illustrator」を紹介したいと思います。
（Create a Mummy Text Effect In Illustrator | Vectips）
Illustratorの機能を駆使し制作されたハイクオリティなロゴデザインが、チュートリアルと共に多数紹介されています。中でも特に注目したロゴをピックアップしましたので、下記よりご覧ください。
詳しくは以下
世界には様々な企業やサービスがあり、数々のロゴが日々生み出されていますが、今回紹介するのは見た目が似ているロゴマーク、ロゴタイプを集めたエントリー「When logos look alike」です。
Sumpter & Gonzalez LLP and Stylegala
そっくりというか色違いの様なモノから、一部アイデアが被ってしまったのだろうというモノから様々な事例が取り上げられていました。今日はその中から気になったモノをいくつかピックアップして紹介したいと思います。
詳しくは以下
海外でカスタムシェイプやブラシをフリーで公開しているサイトはDesignDevelopでもいくつか紹介してきましたが、今回紹介する「星宿海 渡時船」さんはphotoshopカスタムブラシと和風なパターン集を公開しています。
公開されている和風パターンの一部
ブラシは主に葉っぱや雪の結晶など自然系の物が中心に公開されていて、パターンは唐草や亀甲など着物の柄などに使えそうな和風のパターンが公開されています。
詳しくは以下
今年一年で多くの話題を振りまいたHTML5。今年から覚えてみよう、活用してみようという方も多いと思います。今日紹介するのは、HTML5を使うためのチートシート「HTML5 Cheat Sheets」です。
HTML5 Tags Cheat Sheet
HTML5のタグ、イベントの定義にあわせて、それを処理するイベントハンドラ属性の一覧、HTML5がサポートされているブラウザが一目で分かるシートと3枚セットになったチートシートです。
詳しくは以下
気になったweb上の記事や写真を簡単にストック・クリップしておくことができるTumblrは、気軽に閲覧できる分、特に見やすさにはこだわっておきたいものです。そんな中今回は、バリエーションに富んだフリーTumblrテーマ集「65+ Best Free and Premium Tumblr Themes」を紹介したいと思います。
シンプルなタイプから、記事見やすさは意識しながらも個性を持ったたくさんのテーマが収録されています。中でも気になったタイプをピックアップしてみましたので、下記よりご覧下さい。
