デザインを開発するという視点でお伝えするクリエイティブBLOG
UI/UXを豊かにそして直感的にしてくれるアニメーション。上手く利用すればWEBサイトやアプリケーションを劇的にブラッシュアップしてくれますが、取り入れるのはなかなか難しいものです。今日紹介するのはWEBやアプリの最新のアニメーション事例をまとめたエントリー「20 Animated Interfaces: New Ways to Present a Concept」です。
City intro animation by Vasjen Katro – Dribbble
アプリケーションからスマートウォッチまで全部で20ものアニメーションが纏められていますが、今日はその中から特に気になったものを幾つかピックアップして紹介したいと思います。
詳しくは以下
WEBでエラーを始め、様々な注意を促すアラート。標準でも用意されており、簡単に実装は可能ですが、今回紹介するのは、様々なリッチアニメーションアラートを簡単に実装できる「SweetAlert2」です。
「SweetAlert2」はほぼ標準のアラートと同じような書き方でアニメーション付きのアラートを実装可能です。
詳しくは以下
スマートフォンサイトではすっかりお馴染みのメニューアイコン、ハンバーガーボタン。最近ではスマートフォンだけではなく、PCサイトもメニューとして利用されているのもよく見ますが、今回紹介するのは、ハンバーガーボタンにアニメーションを簡単に与えることができる、「Tasty CSS-animated hamburgers」です。
こちらはCSSのアニメーションを利用してスムーズにアニメーションするハンバーガーボタンを簡単に実装可能です。
詳しくは以下
webサイトをより魅力的に見せるには、デザイン性ももちろんですが、ユーザーを惹きつける動きにもこだわることが重要。しかしただ考えているだけでは、なかなかアイデアとしてひらめくことは難しいのではないでしょうか？今回はそんなときに参考にしたい、フリーアニメーションチュートリアル「26 Free Animation Tutorials for Web Developers」を紹介したいと思います。
A Collection of Page Transitions
26種類の、いろいろな動きを表現できるアニメーション作成のためのチュートリアルがまとめられています。
詳しくは以下
デザインに多彩な表現を加えることが可能となるCSS3。もはや欠かすことのできない存在として確立していますが、今回紹介するのはオブジェクトにさまざまな動きを実現できるCSS3アニメーション「Create Special Effects with Magic CSS3 Animations」です。
CSS3を利用し1つのオブジェクトに与えられる、いろいろな動きのバリエーションがまとめられています。
詳しくは以下
標準でphotoshopには音符だったり、吹き出しだったりと、いくつかのカスタムシェイプが登録されていますが、正直ありきたりな物が多く、実用性がありそうで以外と使えなかったりします。そこで今回紹介するのが完全にフリーで使えるフリーカスタムシェイプ集「Foliage Shapes (Huge master set)」です。
毎月一回の更新で、100ロイヤリティーフリーの物だけを集めて公開されていますので。かなり有用なカスタムシェイプ集です。
詳しくは以下
デザインの質感を作って上で欠かせないテクスチャ画像。DesignDevelopでも今まで「2〜5Mの高画質・高解像度のフリーテクスチャ配布サイト「texturez.com」」や「最大2560×1920の高解像度テクスチャを無料配布する「Mayang’s Free Textures」」といくつか紹介してきましたが、今回紹介するのは高解像度+商用利用可というかなり好条件のテクスチャ用画像配布サイト「freetextures.org」です。
配布されているテクスチャ画像の一例
木の年輪、緑、石、空、汚れた壁といった定番のテクスチャ素材がカテゴリーに分かれ数多く配布されています。
詳しくは以下
webサイトやアプリのデザインをクライアントにプレゼンテーションをする時、画面をそのまま見せるだけでは魅力が伝わり辛いもの。そんな時、より完成に近いビジュアルでにするために、モックアップにはめこんでプレゼンすることで、効果をより高めることができるのではないでしょうか。そんな中今回紹介するのは、appleの最新機種iPhoneXの質感をリアルに表現したモックアップ「iPhone X MockUps – 9 Angles」です。
9つの異なるアングルでデザインの魅力を伝えてくれるモックアップセットです。
詳しくは以下
WEB制作のデザインにおいて非常に便利なFireworks。最小単位が1pxのため、スライス時にもぶれなく正確に素材が制作できたり、その他様々な面でWEB制作が便利になるように作られているソフトウェアのため、多くのWEBクリエイターが手にしていますが、今回紹介するのはそんなFireworksのテクニックやチュートリアルを集めたエントリー「50+ Excellent Adobe Fireworks Tutorials」です。
画像系から、パーツ作りまで様々なチュートリアルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
バレンタインデーまで後1週間となり、大切な方へのプレゼントの準備に追われているという方も多いのではないでしょうか？今回は、そんなシーンで自身の想いをデザインで表現できる、バレンタインデザインに使いやすいPhotoshopブラシまとめ「30 Sets Of Free Photoshop Brushes For Valentine’s Day」を紹介したいと思います。
Hearts brushes II by ~stardixa-resources on deviantART
手書きやベクターイラストのハートマーク素材をはじめとした、さまざまな素材が紹介されています。中でも気になったものをいくつかピクアップしましたので、下記よりご覧ください。
詳しくは以下
会員登録などをすると送られてくることの多いニュースレターですが、文字ばかりのものより、デザインされたニュースレターの方に目に留まることも多いのではないでしょうか？そこで今回紹介するのが、手軽にデザイン性の高いニュースレターを作成できるフォーマットを集めた「Simple Steps in Designing an Email Newsletter」です。
Marketing – Artistic Store HTML Email Template (4 Themes) – ThemeForest
商品販売向けのデザインから、コラムを読みやすくレイアウトしたデザインまで、さまざまなニュースレターフォーマットが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
現在WEBデザインは基本的にはCSSとXHTMLで構築されている場合が多いと思います。今日紹介するのは主流であるクオリティの高いフリーCSS、XHTMLテンプレートを集めたエントリー「40+ Elegant Free CSS/(X)HTML Templates from 2010」を紹介したいと思います。
テクスチャが効いたアナログ感があるものもから、洗練されたシンプルなものまで様々なテンプレートがまとめられています。今日はそのなかから気になったテンプレートを紹介したいと思います。
詳しくは以下
与える印象は紙の具合によって様々ですが、温かみがあって、質感を演出する事ができる紙のテクスチャ素材。デザインする上でお世話になった事がある方も多いかとお思います。今日紹介する「Free High Resolution Plain and Grunge Paper Textures 」は質感のある紙からプレーンな紙まで高解像度のテクスチャをあつめたエントリーです。
Grunge Paper Textures
全部で10種類のテクスチャが公開されていて、1つを除いて3000pxを超える解像度で提供されています。
詳しくは以下
デザインの素材として欠かせないものの一つとして取り上げられる写真。しかし時には撮影の予算がなく、ストックフォトから写真を選ばなくてはならないことも。今回はそんなシーンにおすすめな、ハイクオリティなフリーストックフォトサイトまとめ「10 More Websites for Free Stock Photos」を紹介したいと思います。
Skitterphoto | Free to use public domain (CC0) photographs
デザイン性の高い写真を多数収録したストックフォトサイトが10種、紹介されています。気になったサイトをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインのモチーフとして様々なシーンで活躍してくれる地図、地域を表す実質的な使い方以外にもイメージ的に用いることもできる便利なモチーフ。今日紹介するの実用的で、使えそうな地図のベクターデータを集めたエントリー「Extremely Useful Geography Vectors: Maps and Globes」です。
全部で9つのタイプの地図のベクターデータが集められていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
