デザインを開発するという視点でお伝えするクリエイティブBLOG
スイッチのon/pffを表現したデザインはwebのさまざまなシーンで活用されており、フリー素材でハイクオリティなものも多数配布されています。今回紹介する「28 Free To Download PSD Toggle Switches」も、非常に魅力的なスイッチ素材が満載です。
Toggle On – Off Switch PSD | 24PSD
スイッチ自体の立体化を忠実に再現した、実際に制作するとどうしても時間がかかってしまうようなデザイン性の高いものがたくさんまとめられています。中でも気になったものを以下にピックアップしましたので、下記よりご覧ください。
詳しくは以下
■Switches with lights and shadows PSD | Freebiesbug
思わずさわってみたくなるようなリアルな質感が特徴。シンプルなので使いやすそうですね。
■Red on / off switch free PSD file
赤いボタンなので、特に目立たせたい部分に利用してみてはいかがでしょうか。
■Switch – 365psd
ダーク系トーンの中でも、立体感はしっかりと表現されています。クールなテイストのデザインに最適。
いろいろなデザインに対応できる、比較的シンプルなタイプが多いので、幅広いシーンで利用できると思います。商用利用などの規約はそれぞれのリンク先で必ずご確認ください。
ものすごくシンプルで無駄を削ぎ落としたCSSレイアウトテンプレートサイト「Nice and Free CSS Templates」を紹介したいと思います。ゴチャゴチャしたメニューは一切無く、サイトにアクセスすると12の代表的なCSSのレイアウトサムネイルが並んでいます。
テンプレートは1カラムから3カラム、4カラムと標準的なものはもちろん。中央表示なんかもありました。
詳しくは以下
webサイトなどで、天気の情報を表示するために使用されるウィジェット。いざデザインしようと思うとどうしてもワンパターンになってしまいがち、そんな方も多いのではないでしょうか？今回はそんなとき是非参考にしたい、フリーウェザーウィジェット「13 Free Weather Widget PSD Files」を紹介したいと思います。
（Dribbble – Weather Widget Fun by Christopher Swanger）
さまざまな天気の表現を可能にする、クリエイティブなpsdウィジェットがまとめられています。
詳しくは以下
ビットマップの制作ツールとして有名なPhotoshopですが、拡大縮小に向いたシェイプを扱うこともできます。今回はそんなPhotoshopのシェイプをまとめた「15 Useful Free Photoshop Custom Shapes Set」を紹介したいと思います。
nathan.blenke.com – Nate's Shapes – Photoshop Custom Shapes
使いやすいアイコンや装飾・模様など、バリエーション豊富にまとめられています。中でも気になったものをピックアップしたので下記よりご覧ください。
詳しくは以下
様々な解像度のデバイスが出まわっており、技術者側は日々その広がり続ける端末の解像度の多様化と向き合い、その端末に最適化したり、工夫したりして様々なプラグインや技術を編み出しリリースしていますが、今日紹介するのは、画面解像度を読取、それぞれの解像度に合わせたイベントを設定できるjQueryプラグイン「Breakpoints.js」
ブレイクポイントとなる解像度は数値で設定でき、それぞれ指定した解像度に合わせて、js側でイベントを分岐せることが可能です。
詳しくは以下
数多くのフォントがどんどんと新しく生み出されている中、膨大な中から選定するのはなかなか大変な作業にもなります。今回ご紹介する「9 Free Minimalistic Fonts To Use On Your Next Project」では、現代のフォントトレンドふまえた上で最小限の所持で済むように厳選に厳選を重ねて選定されたまとめになります。
Cormorant — an open-source display font family on Behance
シンプルなタイプから、個性を感じる特徴のあるタイプなどが紹介されています。いくつかピックアップしていますので、下記よりご覧ください。
詳しくは以下
もうすぐバレンタインデー。デザインでバレンタインテイストの制作を手がけているという方もいらっしゃるのではないでしょうか？今回はそんな方におすすめ、バレンタインデザインに利用したいフリーベクター素材まとめ「15 Free Valentine Vectors You’re Gonna Love」を紹介したいと思います。
Free Vectors: Happy Valentine's Day vector illustration
ハートや花柄といった可愛らしいモチーフのベクター素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ちょっとした所に気を使うか、使わないかで、全体のデザインのクオリティは大きく変わると思います。今日紹介するのはユーザーと管理者側を結ぶフォームをよりキレイに見せるためのCSSデザインのTips集「Enhance your input fields with simple CSS tricks 」です。
シンプルなフォームを作っていく過程を紹介しながら、デザインテクニックを段階的に紹介しています。実際のCSSのコードを交えながら解説していますので、わかりやすいかと思います。
詳しくは以下
すべてデザインを終えた後のサンプルデモが公開されていますので、「example page」をご覧ください。部分的に取り入れるも良し、丸ごと取り入れても良しなにかしら役に立ちそうです。
またシンプルなデザインだけに、カスタマイズなども簡単にでき、加えるアイデア次第で、クリエイティブなフォームを作れそうな気がします。基本的な勉強にも、もってこいなので初心者から上級者まで役に立つエントリーだと思います。
デザイン制作に便利なベクター素材。イラストレーターでの加工が可能だったりと、アレンジの幅が広いのも人気の要素の一つとなっています。今回はそんなベクター素材の中で、美しい花の姿を表現した「30 Free Colorful Vector Flowers」を紹介したいと思います。
（Melody Arriving :: Vector Open Stock | vector graphics and vector art to download for free!）
さまざまな表情の花、そして植物をプラスしたベクター素材が30種まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
webサイト制作に欠かせないボタンなどのUI素材。フリーで利用できるパーツ素材が多数発表されており、活用しているという方も多いと思います。そんな中今回紹介するのは、デザイン性が高く利用しやすいPhotoshop素材を集めた「55 Brilliant Free Pixel Perfect PSDs」です。
（tutegate™ | Motion graphics and design blog » Neat sliders）
ボタンセットからアイコンまで、さまざまな素材が紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
英語のサイトになリますが、WEBデザインに関して、ほとんどのジャンルを網羅しているリンク集「455 helpful links for webdesigners」を紹介したいと思います。こちらのリンク集はajax、blogs,colors,cssなどの役立つ情報を集めています。
タイトルの通り全部で455のリンクが収録されていて、かなり勉強になりそうなリンク集です。
詳しくは以下
