デザインを開発するという視点でお伝えするクリエイティブBLOG
webサイト上の仕様を自身ですべて開発するには時間やコストが必要であり、どうしても限界があることが多いと思います。今回はそんな時に参考にしたい、webサイトの動きや表現などのクオリティ向上を図るためのツールまとめ「50 CSS and JavaScript Tools, Frameworks and Libraries」を紹介したいと思います。
SassyFlags – Simple Sass Library for flags
CSSやJavaScriptなどのツール、非常に多彩な種類が紹介されており、サイトを今よりもっと魅力的に演出することができます。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
さまざまなデザインアイコンが配布されており、制作している環境に合わせて使い分けるために、aiやpsd、png、svgなどダウンロードできる形式もさまざま。そんな中今回は、webサイト構築時にそのまま利用できる「icono」を紹介したいと思います。
CSSのみでアイコンを表現できる、クラスを指定するだけで表示が可能な、非常に便利なアイコンセットとなっています。
詳しくは以下
複数のテーマ選択を1デザインで行うのに便利なツール・タブ。シンプルな切り替えが定番ですが、今回はさまざまな動きのタブデザイン表現を可能にする「11 Free CSS & jQuery Tabs Plugin And Tutorials」を紹介したいと思います。
タブに独自の動きを再現することができるプラグイン、そして構築のためのチュートリアルが公開されています。
詳しくは以下
webサイトをより魅力的に見せるためには、デザイン性はもちろんですが、意外性のある動きなどを取り入れることで実現することも。今回はそんなサイトの動きに魅力を与える、フリーjQuery&CSS3ホバーエフェクトまとめ「A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects」を紹介したいと思います。
Direction-Aware Hover with CSS3 and jQuery
さまざまな種類のエフェクトが豊富に紹介されており、サイト自体にどこか物足りなさを感じていた方におすすめのまとめとなっています。
詳しくは以下
近年Web業界で話題を呼んでいるHTML5とCSS3。今まで画像やFlash、JavaScriptに頼っていた表現方法を、かなりカバーできるようになりました。そんな中、今回はCSS3だけで実現可能な219種類のアイコンデザイン集「CSS3 Icons」を紹介したいと思います。
よく見る虫眼鏡のアイコンや、扱いやすいグラフ関連のアイコンなど、どれも実用に耐えられるだけの種類とクオリティで219種類ものアイコンが取り揃えられています。
ナビゲーションメニューを作る時、いつも似たようなデザインになってしまってはいないでしょうか？そんな時に是非利用したい、CSSのみで実現できるナビゲーションメニューをまとめた「15 Beautiful and Creative CSS Navigation Menus」を今回は紹介したいと思います。
UAE, Dubai- Sharjah based web & designer, Front-end developer S.M.Riyaz
プルダウンのついた便利なメニューや、デザイン性を重視したハイクオリティなメニューまで、さまざまなCSSナビゲーションメニューが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
いよいよ12月の後半にも入り、もう今週はクリスマスとなり、パーティーの準備などを行っているという方も中には見えると思いますが、今日紹介するのは細部まで表現されたフリークリスマスアイコンパック「Free Christmas Icon Pack」です。
シルエットなどでは無く、一点一点ベクターアートで作り込まれており、アイコンとしてだけでは無く、イラストとしても利用できそうなアイコンセットです。
詳しくは以下
webコンテンツを手軽にスクラップできるTumblr。気になる情報をまとめ、簡単に発信する事ができる存在として人気が高く、たくさんの人に利用されています。そんな中今回は、Tumblrの見た目をより自分らしくカスタマイズできるテンプレートをまとめた「A Showcase of Great Looking Tumblr Themes」を紹介したいと思います。
シンプルなデザインはもちろん、可愛らしい雰囲気のデザインやスタイリッシュなものまで、さまざまなテンプレートが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
国内外で多く利用されているCMSの一つwordpress。バリエーション豊かなテーマが数多く配布されていると言うのもその魅力の一つです。今日紹介するのは最新の最新のwordpressのフリーテーマを集めたエントリー「10 Wonderful WordPress Templates That are Setting Trends」です。
全部で10個のテーマが紹介されていますが、今日はその中からいくつか気になったテーマをピックアップして紹介したいと思います。
詳しくは以下
Illustratorの初期設定で組み込まれているスウォッチ、さらにデザインの幅を増やすために新しいパターンを探している方もいるのでは？今回紹介するのは、Illustratorのスウォッチを充実させられるヘリンボンスウォッチセット「50 Free Herringbone Illustrator Pattern Swatches」です。
カラーや雰囲気の異なるヘリンボン模様が50種類もセットになっています。
詳しくは以下
企業にとって広報は非常に重要な役割を持っており、できれば提案者に向けて響くクオリティの高いものを作成したい。そんなときに活用したい、デザイン性の高い企業向けフライヤーテンプレートまとめ「10 Professional Free Corporate Flyer Templates」を今回は紹介します。
Free Flyer PSD Template (Free Download) by designphantom on DeviantArt
まとめられているのはどれもハイクオリティなテンプレートばかり。その中からいくつかピックアップしましたので、以下よりご覧ください。
詳しくは以下
雰囲気を手軽に変えることができるパターン素材は、効率的なデザイン制作のための重要なアイテム。そんなパターン素材の中から今回は、ダマスク織の雰囲気を演出できるパターンをまとめた「A Collection of 150+ Artistic Damask Pattern Designs」を紹介したいと思います。
Pattern / Candy Damask :: COLOURlovers
イスラムの織物の特徴的なダマスク織の雰囲気が表現されたパターン素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
画像ビューワーのように画像を拡大して表示するという機能をjavascriptで実現しているのが今回紹介する「shiftzoom.js」です。下記のよう現在拡大されているのが全体の何処の部分なのか、表示することも可能です。
上記の拡大して見せると言う基本動作の他に様々なオプションが用意されていて、画像をフェードさせたり、ズームのタイミングを指定できたりと細かいところまで配慮されていますので、画像をメインに扱うサイトでは重宝しそうなスクリプトです。
詳しくは以下
ホラーテイストのデザインは、普段あまり登場する機会がない特殊なテーマ。実制作の際に、関連するフリー素材を持っているだけで、非常に作業が楽になると思います。そんなシーンに活用できるかもしれない、血を表現できるブラシ集「Blood Splatter Brushes for Gruesome and Dark Designs」を今回は紹介したいと思います。
（Dried Blood Splatters Photoshop Brushes | Photoshop Brushes）
飛び散る血の様子を表現できるさまざまな種類のブラシが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
DesignDevelopの姉妹サイト・Designworksは、皆様のアクセスに支えられ、トータルで10,000件ものエントリーを書く事ができました。こちらも一重に沢山の方に見ていただけているということが大きな原動力になったと思います。今回は皆様に少しでも還元できればということで、現在お手伝いしているメディア・サービス様と共同で、Designworks10,000エントリー突破記念として、キャンペーンを開催する事になりました。
DesignworksからはAmazon Kindle Fire HD 16GBをプレゼントすることになりました。
詳しくは以下
デザインをクライアントに提出する際には、資料として企画書を作成することも多いと思います。そんな時に活用することで、デザインをより魅力的かつ、実際に使うイメージを相手にしっかりと伝えられる、PSDモックアップテンプレートまとめ「Free PSD Mockup Templates」を今回は紹介します。
Free Stationery Elements Mockup PSD Template on Behance
さまざまなテイスト、種類のPSD形式モックアップがまとめられています。気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
