デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBにとってUXはとても重要な要素の一つ。隅々までサイトを見ていただくためにはここがダメだと利便性が悪く、多くのユーザーに不快な思いを与えてしまいます。今日紹介するのはjQueryで質の高いUXを実現するためのjQueryプラグインを集めたエントリー「9 jQuery Plugins for Improving Website Navigation」です。
jQueryを利用した様々な仕組みが紹介されています。クリエイティブであれば良いというものではありませんが、斬新な動きだったり、仕組みだったり、工夫を凝らしたプラグインが集められています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
WEBではユーザーと運営者をつなぐもっとも一般的な手段であるコンタクトフォーム。何が目的でコンタクトを取っていただくかにもよりますが、その使い勝手やデザインは、途中で離脱させないためにも様々な工夫が必要であると言われていますが、今日紹介するのはクリエイティブでセンスのあるコンタクトフォーム集めたエントリー「Inspiring & Creative Contact Forms」です。
Contact • Café Evoke // Coffee, Wine, Beer, Eats, and Catering in Edmond & Oklahoma City
一般的に国内でよく見るコンタクトフォームでは無く、海外のものが中心で、どれもクリエイティブなものとなっています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
スマートフォンのシェアが高まるに連れてPCでもスマートフォンでも両方共通のコンテンツで、各端末ごとに最適化されたデザイン+機能。多くのWEBデザイナーが頭を迷わせるところですが、今回紹介するのはその中でもユーザーが操作するナビゲーションをレスポンシブにしてくれるjQueryを集めたエントリー「15 Responsive Navigation jQuery Plugins」です。
最近のスマートフォンアプリのナビのようにサイトのサイドからせり出てくるようなナビゲーションから、端末によって、それぞれの端末に最適化された形に変化するものまで多種多様なレスポンシブメニューがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
WEBの重要な要素の一つリンク。ユーザーが最も利用する機能であり、見せたいものを見せる、次のページに誘導したりそのクリエイティブには気を使わなければいけない部分でもあります。今日紹介するのはマウスオーバー時にクリエイティブなリンクエフェクトを可能にするjavascript「CREATIVE LINK EFFECTS」です。
いくつかのリンクエフェクトが準備されており、フォーカスがあたったり、下線がアニメーションとともについたり、反転したりなどなど面白い動きを簡単に実現してくれます。
詳しくは以下
WEBデザインは日々進化していて、最近では、フラットデザインも大きな一つのジャンルになりつつあり、シンプルなデザインだけに、ちょっとした動きやエフェクトが大事だったりします。今日紹介するのはそんなデザインの味付け的なWEBデザイナーのためのHTML/CSSの最新チュートリアルをまとめたエントリー「10 Useful HTML/CSS Tutorial for Web Designers」です。
How to Create a Trendy Flat Style Nav Menu in CSS
全部で10のチュートリアルが紹介されていますが、今日はその中から気になったものをピックアップして紹介したいと思います。
詳しくは以下
現在、主流となっているフラット系のwebデザイン。シンプルなだけに、色使いや全体のバランス、サイト全体の構成などが、とても重要な要素となってきます。今回はそんなフラット系デザインを制作する際の参考にしたいwebまとめサイト「Flat UI Design」を紹介したいと思います。
現在公開されている海外のwebサイトの中で、フラットデザインを取り入れたものが多数まとめられています。気になったサイトをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
フリーで使用できる素材にはいろんな種類が存在していますが、中でもベクター形式の素材は、色替えやレイアウト変更など、アレンジを効かせやすいのが特徴。今回はそんなベクター素材まとめ「Free Vector Download: 350+ Vector Art Freebies」を紹介したいと思います。
Hand-Drawn Rustic Elements – download free vectors by PixelBuddha
さまざまなテーマで展開されているベクター素材のセットの数々がピックアップされています。気になったものを以下にまとめましたので、ご覧ください。
詳しくは以下
世界中で利用されているwordpress。ポートフォリオ、コーポレートサイト、ECサイトなどなどテーマによって様々な使い方ができますが、今回紹介するのは、コーポレートやビジネス用途に特化したwordoressのテーマを集めたエントリー「10 Professional WordPress Themes for Business Websites」です。
シンプルなものからインパクトのあるものまで、全部で10のテーマが公開されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザインに厚みを出す際に欠かせない背景等のパターンですが、手の込んだデザインが必要となり、１から作り上げるのには時間と手間が掛かってしまいます、そこで今回紹介するのが、素材として利用しやすいPhotoshopパターン集「Ultimate Collection Of Free Photoshop Pattern」です。
（Paper Patterns for PS and Gimp by *starsunflowerstudio on deviantART）
シンプルなパターンから、華やかなパターンまで、さまざまなタイプの素材が紹介されています。中でも特に気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインを見せる際に、より魅力的に見せることができる手段の一つとして、モックアップを仕様する場面が多くあります。そんな中今回は、今回は書籍の装丁デザインを手がける方におすすめのモックアップ集「30+ Convenient Book Cover Mockups For Free」を紹介します。
Book Hard Cover Mockup Vol 4 – Graphicboat
本が置かれているビジュアルが、さまざまなシーンでまとめてられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
世界には様々な企業やサービスがあり、数々のロゴが日々生み出されていますが、今回紹介するのは見た目が似ているロゴマーク、ロゴタイプを集めたエントリー「When logos look alike」です。
Sumpter & Gonzalez LLP and Stylegala
そっくりというか色違いの様なモノから、一部アイデアが被ってしまったのだろうというモノから様々な事例が取り上げられていました。今日はその中から気になったモノをいくつかピックアップして紹介したいと思います。
詳しくは以下
つぎつぎと新しい素材が誕生するたびに注目を集めており、常にチェックされている方も多いのではないでしょうか？そんな中今回紹介するのは、最新の注目したい素材を多数まとめた「50+ fresh resources for designers, January 2016」です。
10 Free Photoshop Patterns | ZippyPixels
テンプレート、UI、フォント、アイコン、JSなど、非常に多彩なテーマかつ種類豊富に素材が揃っています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
前回「photoshopのテキストエフェクトチュ−トリアル50「50 Creative Photoshop Text Effects」」と言う記事でphotoshopの様々な文字のエフェクトをまとめたエントリーを紹介しましたが、今回もphotoshopのエフェクトをまとめたエントリー「50+ Great Photoshop Text Effect Tutorials」を紹介したいと思います。
前回紹介したエントリーと被るものもありますが、素晴らしいエフェクトが紹介されていましたので、その中から気になった物をピックアップして紹介したいと思います。
詳しくは以下
殆どのwebサイトで使用されるメニューは、サイト全体のレイアウトにばかりに手を回しがちで、どうしてもデザインがワンパターンになってしまうことも多いと思います。そんな時是非利用したい、CSS3・jQueryで表現するクリエイティブなメニュー「64 jQuery CSS3 Menu Plugins and Tutorials」を今回は紹介したいと思います。
（Responsive Multi-Level Menu – Demo 1）
シンプルで定番として利用できるもの、動きが凝ったもの、形状が個性的なものなど、いろいろなタイプのメニューがまとめられているので、サイトに動きを出したり、ちょっとした仕掛けを取り入れたい時に便利に利用できます。
詳しくは以下
編集もしやすく、人気の高いワードプレス。Web制作に欠かせないツールの一つになっています。そんな中今回ご紹介するのは、ワードプレスで利用できるフリーのテーマ素材をまとめた「10 Best Free WordPress Themes from TemplateMonster Marketplace」です。
Demo for Catwalk – Fashion Modeling Agency Responsive WordPress Theme WordPress Theme #61202
ECサイトやLPなど様々な場面で利用できるテーマ素材が全部で10種類紹介されています。更にその中から、気になったテーマを幾つかピックアップしましたので、ぜひご覧ください。
詳しくは以下
優しい雰囲気や温かみのある雰囲気を作るために、素材感のあるテクスチャを利用してデザイン制作をするということも多いと思います。そんな中今回紹介するのは、素材感が楽しめるしわのよった紙テクスチャをまとめた「A Collection Of Free Crumpled Paper Textures」です。
Texture – Crumpled Music Paper (Brown) by ~humphreyhippo on deviantART
クラフト紙からキャンパスノートまで、さまざまな紙のテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
