TOP  >  Design , Tool  >  様々な場面で活用出来る便利なPSDモックアップ「35 Best Mockups: Download Realistic PSD Mock-ups」 デザインの仕事に携わっていると、ロゴなどのブランドイメージから名刺や販促ツールまで、クライアントに提案する機会は多いはず。そんな時にデザインをより魅力的に見せるためにも、モックアップが重要な役割となります。そんな中今回は、様々な場面で活用出来る便利なPSDモックアップ「35 Best Mockups: Download Realistic PSD Mock-ups」を紹介したいと思います。 Art & Craft / Stationery Mock-Up ~ Product Mockups on Creative Market 紙のツールからパッケージのモックアップまで、様々なバリエーションが

Webデザインに欠かせない様々なエフェクトやアニメーション。使い方次第でWebサイトを魅力的なものに仕上げてくれますが、今回紹介するのは、クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」です。 全部で30種類の立体的なマウスオーバーアニメーションがサンプルとして上がっており、サイトの雰囲気や印象に併せて選択することが可能です。 詳しくは以下 定番のマウスに対して吸い付くように動く派手過ぎず比較的取り入れやすいアニメーションから、アイコンが回転したり跳ねたりするような立体的なアニメーションまで様々な種類のエフェクトが実現可能です。マウスオーバーアニメーションは、分かりやすく影響度合いも大きいため、Webデザインにアクセントを与えたいという方にはおすすめの表現だと思います。 アニメーションの反映は比較的シンプルでClassを利用して簡単に実装

TOP  >  WebService  >  サイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」 WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。 「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。 詳しくは以下 大きな動きと、何かが出てくる期待感は通常のlazyloadとはまた違ったクリエイティブ感を与えてくれます。様々なサンプルが公式サイトには準備されており、メニュー・モーダル・フォーム

TOP  >  javascript , WebDesign  >  クリエイティブなホバーアクションを簡単に実装する「Tilt Hover Effects」 PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。 一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。 詳しくは以下 全部で8種類のデモが公開されており、実際のWEBサイト上で動作するデモは「Ti

デザインに質感や温かみを与えてくれる木目素材。様々なデザインで重宝する素材の一つで、それだけにテクスチャとしてもかなりの数が配布されていますが、今日紹介するのはベクター素材で利用できるリアルな木目テクスチャ「20 Free Vector Pallet Wood Textures」です。 節があるものから、フローリングのようなものまで全部で20のベクターテクスチャが公開されていました。収録されている木目は以下からご覧ください。 詳しくは以下 特に変わった模様というよりはスタンダードなものがスタンダードな素材だけに、利用できる範囲は非常に広そうです。 配布されているフォーマットはAI、EPS、PNGとなっており、制作素材としては申し分ない形式で配布されています。素材は「20 Free Vector Pallet Wood Textures in AI, EPS & PNG Format 」の下

TOP  >  javascript , WebDesign  >  フリックやグリッド生成など様々なUIが簡単に実現できるjsライブラリ「egjs」 数多くの情報を整理し分かりやすく表現するために様々なユーザーインターフェイスが開発されてきましたが、今回紹介するのはフリックやグリッド生成など様々なUIが簡単に実現できるjsライブラリ「egjs」です。 実現できるユーザーインターフェイスは全部で4つ。タッチアクションから座標位置を取得するeg.MovableCoord、シンプルなフリックeg.Flicking、要素がビューポート内に存在するかを確認できるeg.Visible、グリッドスタイルをループで生成するeg.infiniteGridとなっています。 詳しくは以下 インストール方法は非常に簡単で、スクリプトタグを読みこませるだけで完了します。それぞれの機能の実装については、公式サイトの

ブラウザの発展によりjavascriptによるアニメーション表現はより高度なものとなってきていますが、今日紹介するのはCSSやSVGとも連携し、様々なアニメーションを描画できる軽量なライブラリ「Anime.js」です。 回転や移動といったシンプルなものから、ランダムな動きなどなど、作りこめばかなり高度な動きも可能な用で、CODEPENでは様々なアニメーションサンプルが上がっていました。 詳しくは以下 アニメーションサンプルは「anime.js – a Collection by Julian Garnier on CodePen」に、全部で10個設置されており、コードとプレビューを見ながら触れることができます。また、ライセンス形式はMIT Licenseとなっており、「GitHub – juliangarnier/anime: Javascript Animation Engine」にはフ

TOP  >  Photoshop  >  写真をより魅力的に表現できるPhotoshopアクションまとめ「Best Premium Photoshop Actions」 さまざまな写真加工技術が凝縮されたソフト・Photoshop。しかしいろいろな機能がありすぎるがゆえ、難しい機能を使いこなせていないという方も多いのではないでしょうか？そんな中今回は、取り入れるだけで高度な写真加工を簡単に行うことができるPhotoshopアクションまとめ「Best Premium Photoshop Actions」を紹介したいと思います。 Photography Actions Bundle #1 | GraphicRiver 写真をより魅力的に表現できる、グラフィカルなものに変換できるアクションから、写真の色や雰囲気を変える加工まで、いろんな種類が紹介されています。 詳しくは以下 ModernArt

フォントは世界中で様々なものがリリースされていますが、モチーフを定めてデザインされたフォントもあります。今回はそんなフォントを集めたリボンがテーマにしたフリーフォントのまとめ「25+ High Quality Ribbon Fonts」を紹介したいと思います。 Ribbon effect of letters – Vector Gallery ポップで可愛らしいものや、シックなリボンなど、様々なリボンフォントが紹介されています。その中でも気になったものをピックアップしましたので、下記よりご覧ください。 Ribbon 131 Bold BT – Font Download – The World's Biggest Font Site 柔らかな曲線が美しいリボンフォント。アパレルブランドや洋菓子店など、利用出来る幅は広そうです。 Custom Lettering on Behance 手作り

TOP  >  plugin  >  クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」 魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。 （Drop） そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。 詳しくは以下 scrollReveal.js スクロールするとバーの動きを楽しむことができるプラグイン。個性的なデザインのサイトに仕上げたい時におすすめ。 leas

さまざまなデザインに活用できる背景素材。配布されている種類も非常に豊富なので、デザイン制作の為にいろいろ集めてストックされている方もいらっしゃるかと思います。今回はそんなストックに是非プラスしたい、グラデーションの効いた30種のフリーバックグラウンド素材「30 Free Backgrounds」を紹介したいと思います。 色合いのバリエーションが豊かなバックグラウンド素材30枚が、サイズ800x600pxの大きさでまとめられています。 詳しくは以下 グラデーションといっても単に濃い色から薄い色でという単調なものではなく、絶妙なカラー配分や陰影が全体に施されており、使用するだけで雰囲気のあるデザインを作り出すことができそうです。単体での使用はもちろん、他の素材や制作しているデザインと上手く組み合わせることで、いろいろな表現が可能になるのではないでしょうか？ニュアンス重視の背景を探していた方はお

TOP  >  Design  >  スタイリッシュなカウントダウンパーツを作成するjQueryまとめ「9 Cool jQuery Countdown Scripts」 カウントダウンを用いた表現は、企業の期間限定でキャンペーンを行う際など、効果的にユーザーに残り時間を提示してくれる重要なパーツではないでしょうか。そこで今回紹介するのは、様々なデザインや機能の展開を見せる、カウントダウン形式のjQueryプラグインまとめ「9 Cool jQuery Countdown Scripts」です。 （jQuery Countdown plugin that doesn’t sucks!） 細かく自分で設定できるものから、今すぐにでも使えるパッケージまで、さまざまなプラグインが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■jQue

普段の生活の中でなかなか感じる機会の少なくなっている自然の雰囲気をデザインに取り入れることで、ユーザーにも自然の雰囲気を感じさせることができると思います。そんな中今回紹介するのが、さまざまな表情を持つ木のテクスチャを集めた「25 Handy Wood Textures」です。 （Wood Textures ver 1 by ~artbees on deviantART） 自然の雄大さを感じられるテクスチャから、CGで作られた人工的なテクスチャまで、さまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Old Wood Textures Pack 1 by *Pixeden on deviantART 年季の入った木のテクスチャセットです。そのまま素材として利用したり模様を抽出したりと、多用途に利用できるというのが嬉

TOP  >  WebDesign , WordPress  >  グリッドをベースにしたWordPressテーマ集「30 Grid-Based WordPress Themes」 国内でも、便利なフレームワークとして一時期から、一気に広まり、様々なWEBサイトで活用されているグリッドレイアウト。今回紹介するのはグリッドをベースにしたWordpressテーマを集めたエントリー。「30 Grid-Based WordPress Themes」です。 Grid-A-Licious スタンダードなものから、組み換えが可能なマルチカラムのものまで、様々なテーマが公開されています。今回はその中から幾つか気になったテーマを紹介したいと思います。 詳しくは以下 ■GRID WordPress Theme 組み換え可能なマルチカラムなテーマ。軽量ながらも細かなところに配慮されたテーマ。国内産です。 960

TOP  >  WebDesign  >  jQueryで実現するクリエイティブなイメージギャラリー集「20+ jQuery Image Gallery for your next project」 軽量で非常に高機能なjavascriptライブラリ「jQuery」。様々なプロジェクトで利用されていますが、今回紹介するのはjQueryをつかったイメージギャラリーを集めたエントリー「20+ jQuery Image Gallery for your next project」です。 AviaSlider – a unique jQuery Image slideshow plugin 画像と画像の間のエフェクトに凝ったものから、フューチャーリストのようにサムネイルと連動しているものまで様々なイメージギャラリーが紹介されています。今日はその中から幾つか気になったものを紹介したいと思います。 詳

WEBデザイナー、開発者のためのフリーアイコンセット「20 New Free Icon Sets for Web Designers and Developers」 ユーザーインターフェイスの向上だったり、ページ自体の賑やかしなど、様々な用途で使えるアイコン。WEBデザインにおいて非常に便利な素材の一つです。今日紹介するのはWEBデザイナー、開発者のためのフリーアイコンセットをまとめたエントリー「20 New Free Icon Sets for Web Designers and Developers」です。 Stock Icon Set シンプルなものから、カワイイものまで、様々なデザイン感のアイコンセットが公開されています。 詳しくは以下 ■Open Source Multitouch Gesture Library スマートフォンをはじめとして、動きを伝えるのに便利なジェスチャーア

webデザインでも紙媒体のデザインでも、背景素材として活用できるテクスチャは活用頻度も実用性も高い、とても便利な存在です。そこで今回紹介するのは、デザイン制作に欠かせないフリーテクスチャまとめ「350+ Free Textures」です。 （+ Textures – Wood. by ~YouAreLikeADoll on deviantART） デザインを引き立ててくれる素材感溢れるテクスチャから、ポイント使いとして大いに活躍を果たしてくれそうなタイプまで種類がかなり豊富です。その中から今回いくつが気になったものを選出しましたので、以下よりご覧ください。 詳しくは以下 ■Colorburned | 6 High Resolution Sand and Seashell Textures 貝のかけらが敷き詰められたテクスチャ。どこか花びらのようにも見えます。 ■27 Free High R

一枚のページにたくさんの情報をまとめたい時に便利なのがスライド表現。今日紹介する「10 Best jQuery Sliders」はコンパクトで高機能なAjaxライブラリjQueryを使って実装するスライド機能を紹介するエントリーです。 loopedSlider いくつかのスライド表現のサンプルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Easy Slider 様々なタイプのスライドを制御できるスライド表現。用途に応じて使い分けができそうです。 ■ Introducing Coda-Slider スタンダードなタイプのスライダー。応用が利きそうなつくりになっています。サンプルをダウンロード可能。 ■CrossSlide – A jQuery plugin to create pan and cross-fade ani

TOP  >  Design , Photoshop  >  キレイ目なグランジテクスチャ「30 Awesome Textures for Creating Subtle Grunge Designs」 質感を演出するのに非常に便利なグランジのテクスチャ。グランジと一言に行ってもその質感は激しいものからキレイ目なものまで様々ですが、今日紹介するのはキレイ目なグランジテクスチャを集めた「30 Awesome Textures for Creating Subtle Grunge Designs」です。 psychosomatic texture 背景に敷いても、質感は与えながらも上に文字やイラストレーションを載せても邪魔しないそんなテクスチャが中心にまとめられています。いくつかのテクスチャが公開されていますが、今日はその中からいくつか気になったテクスチャをピックアップして紹介したいと思います