デザインを開発するという視点でお伝えするクリエイティブ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種類にも及びます。
詳しくは以下
つぎつぎと新しいものが公開されるフリーフォント。デザイン性の高いものが多く、デザイナーとして活躍されている方にとっては非常に便利な存在になっていると思います。そんな中今回は、18種のデザイン性のあるフレッシュなフリーフォント「18 Fresh Free Fonts for Designers」を紹介したいと思います。
ATHENA – Post-modern Typeface on Behance
個性的なものから、シンプルなテイストのものまで、厳選された18種類の中に魅力的なフォントがラインナップされています。
詳しくは以下
デザインに優しい質感を持たせたい時に利用することが多い、水彩などのアナログなテイストですが、実際に絵の具で描いていると制作時間がかかりすぎてしまうことも。そんな中今回紹介するのが、アナログテキストな雰囲気を演出できる水彩ブラシまとめ「500 + High Quality Ink and Watercolor Brushes For Photoshop」です。
Mateu7’s Ink Brushes by ~mateuseven on deviantART
Photoshop用のブラシとなっており、さまざまな水彩画の雰囲気を再現できるブラシが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインを手軽かつ、効率的にクオリティアップにつなげることができるUIやテンプレートなどは、フリーで配布されているものも多く重宝しているという方も多いのではないでしょうか？そんな中今回紹介するのは、フリーで使用できるキットが豊富に揃ったまとめ「Best Free User Interface Kits」です。
Freebie | PerfectKit – modern UI kit (desktop & mobile ready) | DesignHooks
非常にたくさんの種類のインターフェイスキットがまとめられているので、きっと欲しい・希望のものを見つけることができるはず。きになったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
CSSのみで制作されるアニメーションは軽量でシンプルで非常に使い勝手も良く、国内でもブラウザの制限が商業レベルでも外れてきた今、数多く活用されはじめてきていますが、今日紹介するのはCSSのみで制作されたローディングアニメーションセット「CSS Loader」です。
ローディングアニメーションはWEB制作の現場でも比較的利用頻度が高く、最近の画像中心のWEBサイトでは必ずと言っていいほど実装するためCSSのみで利用できるのは非常に魅力的です。
詳しくは以下
Webサイトやモバイルサービスの開発において、UIは品質と統一感を求められる重要なもの。0から作ることもできるけれど高品質なデザインセットがあれば、迅速かつ効率的に開発を進めることができるのではないでしょうか。今回はそんなシーンに是非オススメのUIデザインセットのまとめ「45 Fresh Web And Mobile UI Kits With PSD Files For Designer」を紹介したいと思います。
iPhoneやメトロデザインなものまで、さまざまなテーマにそって作られたUIデザインが多数まとめられています。中でも気になったものをピックアップしましたので、以下よりご覧ください。
詳しくは以下
webサイトを立ち上げる際に必要な素材の一つ、ファビコン。時には設置を忘れてしまいがちですが、サイト自体の完成度を高めるためにはとても重要な要素だと思います。今回はそんなファビコン用データを簡単に作成できる「Favicon Maker」を紹介します。
サイト内にドラック&ドロップするだけで、さまざまなサイズのファビコン用データを一気に生成してくれるとても便利なwebツールとなっています。
詳しくは以下
ノートをモチーフにしたアナログ感のあるデザインはいつでも人気で、制作する機会も多いかと思います。今回はデザインの幅をもっと広げられる、デザイン制作に役立つノートテクスチャをまとめた「20 Free Lined Paper Textures for Designers」を紹介したいと思います。
Notebook by ~origin-missing on deviantART
キレイな見開きノートから、グランジ感のあるノートまで、さまざまなノートのテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
制作時に使用する素材の中で利用頻度の高いテクスチャ。いろいろな種類を探しまわっていると、どうしても時間がかかってしまいます。今回はそんな時に参考にしたい、フリーのPhotoshopテクスチャを豊富に揃えたwebサイト5選「5 Best Websites Offering Thousands of Free Photoshop Textures」を紹介したいと思います。
非常にいろんな種類のテクスチャ素材がまとめられたサイトが紹介されており、ぜひブックマークしておきたくなるサイトばかり。
詳しくは以下
ブログの使い方にもよると思いますが、記事を頻繁に書く人はブラウザで管理画面にログインして投稿という手順が面倒だなと思うことがあるかと思います。今回紹介するWidget「WordPressDash」はそんな面倒な一連の動きを省いてくれるMac OSX Widgetです。
インストール後画面右上の「i」マークを押して設定します。XML-RPC：URLとユーザー名とパスワードを入力し「Done」のボタンを押せば設定完了上記のように「WordPressDash」の下にブログ名表示されれば成功です。
詳しくは以下
ブラシには非常にさまざまな種類があり、簡単に複雑な描写を描き出せるということもあり、頻繁に利用しているという方も多いのではないでしょうか？そんな中今回紹介するのは、スクリーントーンをブラシで手軽に表現できる「44 Pixel Screentone Brushes」です。
網目状のスクリーントーン描写を、ブラシで手軽に作り出すことができるセットです。
詳しくは以下
