デザインを開発するという視点でお伝えするクリエイティブBLOG
解像度が多様化してきてWEB制作の一つの主流となっているレスポンシブデザイン。多くの場合解像度によって画像を出し分けたり、フォントサイズを可変したりと解像度ごとの処理をしていると思います。今日紹介するのはそんなレスポンシブデザインの精度をより高める、レスポンシブに利用できるフリーアイコンセット「Responsive Office Icons」です。
こちらのアイコンは16px、30px、40px、80pxと4段階で制作されており、さらに素晴らしいのが、単純に大きさを変えているだけでは無くて、大きさによって作りこみ度合いを変え視認性を確保しています。
詳しくは以下
webサイトを制作する際には、デザインだけでなく全体の構成などの設計が必要となってきます。しかしコストや時間の関係でなかなか思ったようにデザインできないこともあるのではないでしょうか？そんな時に参考にしたい、HTML5のフリーレスポンシブテンプレート「50 Free Responsive HTML5 Web Templates」を紹介したいと思います。
Cafe & Restaurant Free Website Templates
レスポンシブで、スマートフォンやタブレットに自動対応した、ハイクオリティなテンプレートが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
写真が若干小さめに配置されていても、クリックなどのアクションを起こすことで大きく表示させることができるライトボックスは、webの世界では非常に重宝されている存在。今回はそんなプラグインの中でも、モバイルでも使いやすさを実現できる、10種のレスポンシブライトボックス「10 Must have Lightbox Libraries For Mobile Responsiveness」を紹介したいと思います。
Featherlight – The ultra slim jQuery lightbox.
シンプルな動きで使いやすさがありながらも、それぞれに個性をもったプラグインが紹介されています。
詳しくは以下
iPhoneに代表されるスマートフォンやタブレットなど、さまざまな画面サイズを持ったデバイスが登場してきています。今回紹介するのはそんなデバイス達に一括で対応したWebサイトを構築できる、15のレスポンシブフレームワーク「15 New Responsive Frameworks」です。
Gridism • a simple responsive CSS grid by @cobyism
各種、さまざまな工夫や仕掛けによって各デバイスへの対応を実現しています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
スマートフォンのシェアが高まるに連れてPCでもスマートフォンでも両方共通のコンテンツで、各端末ごとに最適化されたデザイン+機能。多くのWEBデザイナーが頭を迷わせるところですが、今回紹介するのはその中でもユーザーが操作するナビゲーションをレスポンシブにしてくれるjQueryを集めたエントリー「15 Responsive Navigation jQuery Plugins」です。
最近のスマートフォンアプリのナビのようにサイトのサイドからせり出てくるようなナビゲーションから、端末によって、それぞれの端末に最適化された形に変化するものまで多種多様なレスポンシブメニューがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
マルチデバイス対応がWEBサイトについては大きな課題の一つ。最近ではレスポンシブでレイアウトが組み変わる、WEBサイトが主流になりつつありますが、今日紹介するのはレスポンシブなデザインやサイトに便利なWordpressプラグインをまとめたエントリー「40+ Responsive WordPress Plugins」です。
Ether Content Builder WordPress Plugin
一部有料のものもありますが、全部で40種類ものプラグインがまとめられていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザイン制作やCG制作などの加工に利用することが多いPhotoshopですが、ツールの利用方法は無限大にあり、ソフトを存分に使いこなせていないとお思い方もいらっしゃるかもしれません。そんな中今回紹介するのが、Photoshopに強くなる!ポスター制作のチュートリアルをまとめた「40+ Awesome Photoshop Poster Tutorials For Your Inspiration」です。
Inception Poster with Repousse in Photoshop CS5 | Abduzeedo Design Inspiration & Tutorials
素材の重ね方やタイトル処理の作り方など、Photoshopの使い方を多方面からチェックできるチュートリアルばかりが紹介されています。中でも気になったものをいくつかピックアップしまいしたので、下記よりご覧ください。
詳しくは以下
WEBに掲載している写真をより大きく見せたいということは、商品などを扱うWEBでは特に多いことだと思います。今日紹介するのはイメージを拡大表示してくれるプラグインを集めたエントリー「25+ jQuery Image Zoom Effect Plugins」です。
全部で25ものjQueryで簡単に実装できるズーム系のプラグインが掲載されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
拡大縮小やサーチ機能を表現できる虫めがねアイコン。形にバリエーションがなかなか出しづらいため、いつもワンパターンになりがちではないでしょうか？今回はそんな虫めがねのさまざまなデザインアイコンをまとめた「Top 15 Magnifying Glass Search Icons – Free to Download」を紹介したいと思います。
（Free PSD: Saearch Icon – Magnifying Glass (Free PSD Icon) | Pixel Monarchy）
同じ形の中でも、デザイン表現にいろんなバリエーションを持たせた虫めがねアイコンが紹介されています。
詳しくは以下
華やかさとデザイン性を与えてくれる幾何学模様は、特にフラットデザインが主流の最近のデザインシーンで多く見かけることが多くなってきています。そんな中今回は、幾何学模様のテクスチャとパターンのセットを紹介した「20 Geometric Texures and Pattern Sets Free to Download」を紹介したいと思います。
Vector colorful background triangle Vector | Free Download
いろいろな表情の幾何学模様パターンとテクスチャがセットになってまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインは一人で黙々と創り上げる作業も必要ですが、商業デザインの場合、様々な人とコミュニケーションをとり、情報を共有しながら、創り上げていくことも必要になります。そんな時に便利なのが、メールやスカイプなどのWEBを利用したサービス。すでに様々なWEBサービスを駆使して仕事をしているという方も多いと思います。
普段は私も、スカイプやEvernote、Gmailなど複数のサービスを利用して社内外のコミュニケーションを取りながらデザイン業務を行っていますが、今回は「メールの時代は終わった」と銘打ったWEBサービス「チャットワーク（ChatWork）」を紹介したいと思います。
詳しくは以下
一日の始まりとなる朝。自分にぴったりの目覚まし時計で目覚めることができれば、一日を気分よく過ごせると思います。そこで今回は、市販の目覚まし時計では満足できないとお悩みの方にぴったりの、自分にあった目覚ましを見つけられるオンライン目覚まし時計をまとめた10 Best Online Alarm Clock Websites」を紹介したいと思います。
Sleep.FM – The Social Alarm Clock
音で知らせるシンプルな時計から、好きな動画で起こしてくれる時計まで、さまざまな目覚まし時計が紹介されています。中でも気になったものを幾つかピックアップしましたので、下記よりご覧ください。
詳しく以下
デザインの印象に大きく影響を与えるフォント。世界では様々な有料なフリーフォントが制作され、公開されていますが、今日紹介するのはアナログ感を演出できるフリーフォントを集めたエントリー「40+ Awesome Free Comic Fonts」です。
大きく崩したもの、ある程度規則性を持たせながら、適度に柔らかくしたものなど、様々なコミックフォントが全部で40紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
誰しもが毎日必ず口にする”飲み物”、お店などで購入する場合、容器のパッケージに惹かれてつい・・という方、とても多いかと思います。そこで今回紹介するのは、クリエイティブなパッケージデザインのまとめ「20 Creative and Inspiring Package Designs for Drink」です。
（Bottlegreen Limited Edition : Lovely Package® . Curating the very best packaging design.）
美しいデザインのものから、中身をリアルに想像させてくれるもの、個性的な形をしたものなどさまざま。気になったものをピックアップしていますので、以下よりご覧ください。
最近様々な技術系のブログで取り上げられているHTML5。かなり複雑な動きやインタラクティブな処理ができるようで、実験的な試みも多数行われていますが、今回紹介するのはHTML5で動画を細かく分散させたり、3D空間にマッピングするという「Blowing up HTML5 video and mapping it into 3D space」を紹介したいと思います。
まずは動画を分散させる加工をHTML5で施したもの、上記の写真のように、動画をクリックすると、細かな長方形上に動画が砕け散ります。マッピングされていますので、細切れになったエレメント上で再生は続いています。実際制作したデモが公開されていましたので「HTML5 Video Destruction」からご覧ください。
詳しくは以下
webサイトを制作する際、全体的なデザインの決定も重要ですが、サイト内を自由に動くための動線をしっかりと設計することが、ユーザーを引きつける為にも必要ではないでしょうか？そこで今回は、それぞれのページのドアとなるボタンのデザインに重要な7つの要素を解説した「Common elements used in interface button design」を紹介したいと思います。
（Dribbble – Upload button by kailoon）
的確な解説、さらに実制作に役立つチュートリアも紹介されているので、すぐにボタン作りに活かすことができそうです。
詳しくは以下
