デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBデザインならではのエフェクトは、私たちの目を楽しませてくれたり、あっと驚かせてくれたりします。今回ご紹介する「WebGL Distortion Hover Effects | Codrops」は、WEBの中でもよく目にするホバーアクションのエフェクト集になります。
歪みの効果を与え、滑らかに動くスタイリッシュなホバーアクションです。
詳しくは以下
PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。
一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。
詳しくは以下
デザインのクオリティや良し悪しを決めるのに非常に重要な存在であるフォント。フリーで使用できるものも豊富に配布されていますが、数が多いだけにその中から最適なものを探そうと思うととても大変なもの。そんな時に参考にしたい、デザイン性の高い100種のフリーフォントまとめ「The 100 best free fonts」を紹介したいと思います。
100種という豊富な種類のフォントがまとめられており、どれもデザイン性の高いものばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
アイコン素材は簡単に伝えたい内容を伝えられる非常に便利なデザイン素材です。今日紹介するのは商用利用で使えるフリーアイコンセットのみを集めたエントリー「99 Icon Sets To Use In Commercial Design Projects」です。
50 Free and Exclusive Twitter Icons
ソーシャルメディアのアイコンからピクトまで様々なアイコンセットがまとめられています。今日は今までDesigndevelopで紹介したことが無いアイコンセットを中心にそのなかからいくつか紹介したいと思います。
詳しくは以下
デザインをする上で欠かすことのできないワイヤー制作。設計の基礎となるものであり、制作の方針をディレクターに伝えるためのものでもあります。デザイン業務に必ず組み込まれているものだからこそ、便利なツールを使用すれば業務がスムーズになるはず。そんな中今回は、知っていれば業務が楽になるまとめ「10 Free & Latest Wireframe Tools and Templates」をご紹介していきます。
Prototyping tool for web and mobile apps – Justinmind
ワイヤー制作を楽に行えるようになるツールがまとめられています。下記にいくつかピックアップしているのでご覧ください。
詳しくは以下
シンプルで機能的なフラットデザインは、場面を選ばずどんなシーンにも合わせやすい優れもの。今やWeb制作には欠かせない、デザイン手法の一つではないでしょうか。今回ご紹介するのは、そんなフラットデザインを手軽に取り入れる事ができる、商用フリーのフラットデザイン素材をまとめた「35 Free Flat Graphics and Web Elements for Designers」です。
Weather – Daily UI #037 – Freebie by Roman Bova – Dribbble
情報をすっきりと分かりやすく見せてくれる、魅力的なフラットデザインが35点もまとめられています。今回はその中から、おすすめしたい素材を幾つかピックアップしましたので、以下よりご覧ください。
詳しくは以下
(続きを読む…)
フォントは世界中で様々なものがリリースされていますが、モチーフを定めてデザインされたフォントもあります。今回はそんなフォントを集めたリボンがテーマにしたフリーフォントのまとめ「25+ High Quality Ribbon Fonts」を紹介したいと思います。
Ribbon effect of letters – Vector Gallery
ポップで可愛らしいものや、シックなリボンなど、様々なリボンフォントが紹介されています。その中でも気になったものをピックアップしましたので、下記よりご覧ください。
自分の作品や経歴などをまとめたポートフォリオ。デザイナーなら一度は作った事があるかとは思いますが、今回紹介するのはすばらしいWEBポートフォリオをまとめた、ポートフォリオ集「50 Beautiful and Creative Portfolios」です。
タイトルの通り全部で50ものポートフォリオサイトが集められていて、様々なタイプのデザイナーのポートフォリオが公開されていますが、今回はその中から気になったWEBポートフォリオを紹介したいと思います。
詳しくは以下
Photoshopで簡単に多彩な図形や形状を描き出すことができるブラシは、とても便利な存在。いろいろとストックされている方も多いのではないでしょうか？今回はそんなブラシの中で、矢印を描き出すことができるブラシを集めた「A Collection Of Free Arrow Brushes For Photoshop」を紹介したいと思います。
Arrows Brushes by XMarwanX on deviantART
矢印といっても、多彩な種類のデザインブラシがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ブランドイメージとして様々なシーンに展開されるロゴ。クライアントにデザインを見せる際には、ロゴがどういう風に展開されていくのかを伝えるための手段の一つとしてモックアップに反映されてプレゼンテーションする場合があります。今回はそんな場面で役に立つロゴデザインのモックアップまとめ「20 Free PSD Templates To Mockup Your Logo Designs」をご紹介したいと思います。
Embroidered Logo MockUp | GraphicBurger
全部で20ものバリエーション豊かなモックアップがまとめられておりますが、その中から気になるものをいくつかピックアップ致しましたので下記よりご覧ください。
詳しくは以下
デザインでイメージしている色を配置したいと頭で想像していても、実際にその色を数値などで出そうと思うとなかなか難しいもの。今回はそんな時に活用できそうなサイト「ColorFavs」を紹介したいと思います。
好きな写真のカラーを簡単にカラーパレット変換することができる、好みのビジュアルからのカラー抽出を可能にした便利なwebサービスとなっています。
詳しくは以下
スマートフォンのWEBサイトデザインをはじめ、マテリアルデザインを導入するWEBサイトが増えてきました。マテリアルデザインとはZ軸の概念を取り入れ、WEBページ上の要素の重なりを現実世界に近い形で表わすもので、要素同士が重なるため、それだけに配色も重要になってきます。今日紹介するのはマテリアルデザインのためのカラーツールまとめたエントリー「9 Useful Tools for Creating Material Design Color Palettes」です。
いくつかのカラーツールがまとめれられていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
