デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBサイトのアニメーションはとても重要で印象的なアニメーションをそのサイトの価値を大きく向上させてくれます。大きく派手な動きも大切ですが、細かなアニメーションもクオリティを向上させるためには大切な要素の一つです。今日紹介するのはマイクロインタラクションに使えそうなCSSアクセントアニメーション「WickedCSS animations」です。
floater（ふわふわ浮く）、barreRoll（クルっと一回転）、RollerRight（回転しながら出現）、heartbeat（鼓動のように膨らむ）、shake（細かく揺れる）など、かなりの数のアニメーションがCSSのみで再現されています。
詳しく以下
WEBを制作する際のフローとして、まずは手書きでワイヤーフレームを設計してそれらを固めてから、実制作に移るという方は多いのではないでしょうか？今日紹介するのは、手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」です。
こちらは、2018年8月に公開されたもので、現在はailab/Sketch2Code at master · Microsoft/ailab · GitHubにて公開されています。開発者インタビューや実際の利用シーンがまとめられた動画が公開されていましたので以下からご覧ください。
動画は以下から
WEB制作やシステム開発をしているとフローチャートを書くことも多く、専用のソフトウェアもリリースされていたりしますが、使い慣れたツールで創るのが一番早いという方も多いと思います。今日紹介するのはフローチャート作成のためのデザインキット「Flowchart kit for Sketch」です。
フローチャートに必要なデザイン素材をSketchで利用できるように、まとめて配布されています。
詳しくは以下
伝えたい情報を1Pにまとめた縦長の1ページレイアウト。メニューなどは存在しますが、基本的には上から読んでいくような構成でユーザービリティに優れた簡潔なWEB構成となっています。今回紹介するのはそんな1ページレイアウトの中でもクリエイティブなものを集めた「50 Beautiful One-Page Websites for Inspiration」です。
様々な業種業態の1ページで制作されたWEBページが全部で50集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
本制作をする前にワイヤーフレームで制作して、UIやUXなどをクライアントと確認するというのはWEB業界では慣習的になっていますが、今回紹介するのは、そんなワイヤーフレームづくりに便利なキットを集めたエントリー「40 Free Wireframe Templates for Mobile App, Web and UX Design」です。
Carbon Material Design eCommerce Wireframe Kit
(PSD & Sketch)
WEBからiOS、AppleWatchまで様々なタイプのワイヤーフレームが紹介されています。今日はその中から特に気になったワイヤーフレームをピックアップして紹介したいと思います。
詳しくは以下
どんな写真でも、優秀なフィルターを用いることで、それらしい写真が撮影できるInstagramは国内を始め世界中で利用されていますが、今日紹介するのはCSSでInstagramで使われているフィルタ効果を実現する「CSSgram」です。
CSSは非常に軽量で、1kb以下のコードで、様々な種類のフィルタ表現がブラウザ上で可能になります。その数は全21種類にも及びます。
詳しくは以下
豊富なテーマで国内外で人気のCMS、Wordpress。様々なテーマが日々発表されていますが、今回紹介するのはシンプルでユニークなWordpressテーマを集めたエントリー「25 Fresh, Clean and Unique WordPress Themes」です。
Get Some Aparatus – Free Theme for WordPress | Fearless Flyer Web Design
すっきりしていながらも、オーソドックスなテーマとは少し違う。そんなWordpressのテーマを集めています。今回はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
フリーのCSSデザインテンプレートを配布しているサイトは多々存在し、Designdevelopでも「フリーのテンプレート配布サイトをまとめた「40 Free Web Template Resources」」や「クールな無料CSSテンプレート集「CSS 4 Free」」などと取り上げてきましたが、玉石混合で数が膨大すぎて探すのはなかなか大変な作業です。
そこで今日紹介するのは、様々なCSSフリーデザインテンプレートサイトからクオリティの高いCSSデザインテンプレートをピックアップしたエントリー「Free CSS Templates」です。その中からさらに気になったCSSデザインテンプレートを紹介したいと思います。
詳しくは以下
Adobeが展開しているリッチインターネットアプリケーションAIR。様々なジャンルで、利用されていますが、今日紹介するのはWEBデザインに役に立つAIRアプリを集めたエントリー「45+ Useful Air Applications for Web Design and Development Freelancers」です。
サイズを測ったり、アイコンを制作したり、データベースをいじったりと、WEB制作や開発にちょっと便利な機能を持ったAIRアプリケーションが多々集められています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
Designdevelopでは、デザイン制作に使いやすいさまざまなフリーフォントを紹介していますが、今回はそんなフリーフォントの中でも、アナログ風のテイストも演出できるスティッチフォントをまとめた「A Collection Of Free Stitch Fonts」を紹介したいと思います。
Free Font Kingthings Xstitch by Kingsthings | Font Squirrel
個性的な雰囲気を持ったフリーフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
HTMLの新規格として話題を呼んでいるHTML5。2012年12月に仕様策定が完了し、ブラウザへの実装も着々と進んできていますが、日本ではブラウザの問題もありまだまだ一般とはいえない状態ですが、今日紹介するのはフリーで利用できるHTML5で作られたレスポンシブなWebサイトテンプレート集「15 Free Responsive HTML5 Website Templates」です。
さまざまに創意工夫の凝らされたクリエイティブなテンプレートがいくつも用意されています。今回はその中でも気になったものをピックアップして紹介したいと思います。
キャンプ・アウトドアなどは、国内でもグランピングという新しい概念もでてきて、さらに注目を浴びているレジャーの一つですが、今回紹介するのはキャンプ・アウトドアをイメージしたアイコンセット「Camping Free Line Icon Set」です。
方位磁石、リュック、オノやマッチなどなど、通常のWEB制作のアイコンセットには無いユニークなアイコンが集められています。
詳しくは以下
Webデザイン上においてユーザインターフェースというのは非常に重要なもの。操作性がわかりにくいストレスは、ユーザーが離れていく要因の一つです。それらを解消したいときに便利なアイコンのまとめ「1700+ Free Icons for Web, iOS and Android UI Design」を今回はご紹介していきたいと思います。
シンプルなミニマルアイコンからカラフルで存在感のあるデザインアイコンまで、幅広く紹介しているまとめになっています。
詳しくは以下
スマートフォンやタブレットにサイトを最適化させることは、もはや必須といっても過言ではない現在のweb業界。レスポンシブ設計のテーマも多数フリー配布されています。今回はそんなフリーレスポンシブpsdテンプレート集「12 New Free Responsive PSD Website Templates」を紹介したいと思います。
Freebie | Breviter – creative blog PSD template | DesignHooks
12種という厳選された数ではありますが、最新の主流デザインが反映された魅力的なものばかりがそろっています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
見出しに使うフォントは、デザインを決定づける非常に重要なもの。それだけに武器となるフォントはある程度それておきたいものです。今日紹介するのは比較的使いやすいクリエイティブなつかえる見出しフリーフォントをまとめたエントリー「25 Yet More Free Fonts for Headlines (from 2012)」です。
シンプルなものから、クリエイティブによったものまで、全部で25のフォントがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
どんどんと新しい種類が生み出され続けているフォント。フリーでダウンロードでき、さらにデザイン性も高いものも数多く配布されています。そんな中今回紹介するのは、種類の豊富さが魅力なデザインフリーフォントまとめ「101 best free fonts, fall 2015」です。
比較的新しいフリーフォントが多数まとめられています。どれも非常に魅力的なものばかり、以下に気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
