デザインを開発するという視点でお伝えするクリエイティブBLOG
付箋を貼って情報共有したり、アイデアを書き出したりアイデアマップをつくったりと、クリエイティブの場では度々使われている付箋。今日紹介するのはAjaxとphp,JQueryを利用して制作された、付箋メモシステム「Sticky Notes With AJAX, PHP & jQuery」を紹介したいと思います。
付箋は自由に追加したり、削除する事ができ、もちろん位置も自由自在に動かす事ができるようになっています。インターフェイスもかなりシンプルで、だれでも簡単に直感的に操作する事ができます。
詳しくは以下
javascriptのライブラリとして人気が高い、jQueryとMootool。両方ともかなり高機能で様々な事を実現する事ができますが、今回紹介するのはjQueryのMooToolで実現するカレンダープラグイン集「10 Beautiful jQuery and MooTool Calendar Plugins」です。
jQueryのMooToolを用いて制作された様々なカレンダーが集められています。今日はそのなかからいくつかきになったものをピックアップして紹介したいと思います。
詳しくは以下
WEBページでもよく利用するボタンやバッジ。細かな所ですが、そういった所のレベルを上げる事でサイト全体のクオリティも上げる事ができます。今日紹介するのはクオリティの高いボタンやバッジを作る為のphotoshopチュートリアル「30 Useful Photoshop Buttons and Badges Tutorials 」です。
Slick and Clean Button in Photoshop
立体的なものから、クリアなものグラデーションで質感を表現したものまで様々なボタンが用意されています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
全画面の写真のスライドショーは迫力があり、写真や作品の魅力を十分に伝えてくれます。皆さんは全画面の写真スライドをWEB上で制作するときどういった物をつかっていますでしょうか？今日紹介するのはJQueryで実現するフルスクリーンスライドショー「supersized」です。
実装もものすごく簡単で、ソースファイルを丸ごとダウンロードできますので、収録されているphpを改変していけば簡単にカスタマイズもできるようになっています。
詳しくは以下
最近ではライブラリも多数リリースされ、様々な所で使われている「Ajax」簡単に高度なエフェクトや動作が導入可能ですが、今日紹介する「20 More Excellent AJAX Effects You Should Know」はAjaxで実現するエフェクトをまとめたエントリーです。
様々なAjaxのサンプルが紹介されていますが、今日はその中からいくつか気になった物を紹介したいと思います。
詳しくは以下
コンパクトで高機能なAjaxライブラリjQuery。国内でも多くのサイトで使われているライブラリの一つですが、今回紹介するのはjQueryを使ったシンプルで実用的なメニューを集めたエントリー「10 Best jQuery Menu Plugins」を紹介したいと思います。
jdMenu Hierarchical Menu Plugin for jQuery
全部で10のJQueryで利用して作られたメニューが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
使用する種類によってデザインのイメージが変わってしまう程、フォントはとても重要な役割を果たしてくれる存在。選定する際は慎重にデザインにぴったりなものを選びたいものです。そんな中今回紹介するのは、16種のデザイン性の高いフォントまとめ「16 Free Fonts and Typefaces for January 2014」です。
（Marshall Font + Free Download on Behance）
どれもデザインクオリティが高いので、選定の際にどれを選んでも制作物の質をアップさせることができそうです。
詳しくは以下
フォントにもいろいろな種類がありますが、グラフィック要素として取り入れようと思うとフォント自体に個性が必要。今回はそんなシーンにおすすめ、幾何学的なテイストのフリーフォント選「10 Free Geometric Fonts To Download」を紹介したいと思います。
10種という厳選された種類ですが、どれも個性もありデザイン性のあるものばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。
一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。
詳しくは以下
サイトに設置するボタンの中でも最もユーザーに的確にそして分かりやすく制作しなければいけないボタンの一つカートに入れるボタン。今日紹介するのはそんなカートに入れるボタンを集めたエントリー「80 Examples of Add to Cart Buttons for Design Inspiration」です。
全部で80ものカートに入れるボタンが紹介されています。今日はその中からいくつかきになったものを紹介したいと思います。
詳しくは以下
うまく取り入れることで、デザインの幅を広げたり、より良いデザインを制作する為に役立てることができる、テンプレートや、モックアップ。使える素材は積極的に取り入れて制作に役立てたいですよね。今回ご紹介するのはそんなデザイナーの方におすすめしたい、PSDテンプレート・モックアップまとめ「Freebies: 32 Fresh Photoshop PSD Files」です。
Freebies: 32 Fresh Photoshop PSD Files | Freebies | Graphic Design Junction
WebサイトのテンプレートやUIデザイン、名刺のモックアップなどが32種類紹介されています。更にその中から幾つかこれはと思ったものを選んでみましたのでご覧ください。
詳しくは以下
(続きを読む…)
制作したデザインをよりよく見せ、クライアントにイメージを沸き立たせるモックアップ。そんなモックアップに使えるフリーの写真素材をあつめた「100 Free High Resolution Photorealistic Mockup Templates」をご紹介します。
5 high-quality photographic mockups – Freebiesbug
PSD形式で高解像度な写真モックアップ素材を100種類まとめているので、きっとイメージに合う素材が見つかるはず。おすすめのモックアップ素材を下記にてまとめていますので、ご覧下さい。
詳しくは以下
CSS3は現在広く利用されているCSS 2を拡張したもので、従来のCSSでは表現が難しかったドロップ車道や、角丸など、画像に頼らずに、表現ができ、新しい表現の可能です。今日紹介するのはCSS3で作られたユーザーインターフェイスキット「CSS3 UI Kit」です。
サーチボタン、角丸ボタン、完全な円形のボタン、プルダウン、ページングなどなどユーザーインターフェイスの基本となるパーツがセットになっています。
詳しくは以下
Illustratorが使えるようになっても、いろいろなグラフィック表現を実際に制作するのは難しいもの。そこで今回は、Illustratorのスキルを磨くのに役立つ「25 Cool Adobe Illustrator Tutorials」を紹介したいと思います。
25種類のベクターデータのイラストの作り方が、親切にわかりやすく紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
SEO的にも問題の無い縦書きのコンテンツを作りたい。そんな時に便利なのが、今回紹介するjavascriptライブラリ「竹取JS」です。javascriptで指定されたブロックを縦書きに変換してくれます。
HTMLのみで縦書きというのは非常に面倒でしたが、これなら気軽に縦書きコンテンツを作れそうです。
詳しくは以下
Webデザインの中でもユーザーの目を簡単に引くことを可能にするエフェクト。動きがつくだけでサイト内がぱっと華やかになります。今や様々なエフェクトをつけることが可能ですが、ついついワンパターン化してしまいがち。そんな方におすすめできる、水のような動きに焦点をあてた「Liquid Distortion Effects」を今回はご紹介致します。
水のような動きは優雅さと洗練された雰囲気を与えてくれます。下記にデモをいくつかピックアップ致しましたので、ご覧ください。
詳しくは以下
