デザインを開発するという視点でお伝えするクリエイティブBLOG
CSS3やHTML5で表現できる動きや変化は確実に広がってきており、重宝されるシーンも非常に多く見られます。そんな中今回はCSS3・HTML5を利用したナビ・タブメニューチュートリアル「15 Fresh Navigation Menu Tutorial using CSS3 and HTML5」を紹介したいと思います。
CSS3 Menu – Impressionist UI – by Valeriu Timbuc for Design Modo
デザインにエフェクトを加えたい時には是非参考にしたい、独特な動きのあるナビゲーションやタブメニューがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。
様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
かなり様々な動きができるようになったCSS3。まだ対応していないブラウザは依然として市場に多いのですが、クリエイティブに特化したWEBなどでは非常に使い勝手が良いです。今日紹介するのは、CSS3で実現するクリエイティブなローディングセット「CREATIVE CSS LOADING ANIMATIONS」です。
いままでのCSSではgifアニメに頼らなくてはいけなかった部分が全てCSSのみで制作されています。
詳しくは以下
公開されているローディングは全部で4つ、どれもアニメーションが効いていて気持ちのいい動きをしてくれます。基本的には画像ファイルなどは一切利用しておらず。純粋にHTMLとCSSで書かれています。原文では、HTML側と、CSS側のソースが合わせて開示されており、コピーして利用することができます。
HTMLとCSSなのでノンプログラマーでも比較的カスタマイズしやすいのではないでしょうか？ローディング処理を探していた方は是非どうぞ。
「神は細部に宿る」といわれるように。デザインの業界に置いて、デザインについてはのクオリティは細部をどれだけ作り込めたかで決まってきます。今日紹介するのは、細部までこだわるためのCSS3フォームデザインパーツチートシート「CSS3 Form Styling Cheat Sheet」です。
フォームのインプットのスタイルだったり、ボタンのスタイルを、サンプルと再現できるソースコードともに紹介してくれるというものです。どれもものすごくシンプルなものなのですが、paddingの取り方だったり、ちょっとした角アールだったり、中と外に綺麗にかけられたドロップシャドウなどなど、細かな部分を詰めた洗練されたフォームの材料を取得する事ができます。いくつか下記に紹介致します。
詳しくは以下
スマートフォンの普及で、HTML5での開発も多くなっており、オブジェクトの制御はjavascriptやCSS3で行なうシーンも増えてきました。今日紹介するのは、CSS3で実現できる空間的な動きをサンプルソースとともにまとめた「Intro to CSS 3D transforms」です。
様々なサンプルソースが公開されており、オブジェクトを変形させるトランスフォームの基礎からそちらを利用したカードがめくれるようなアクションや3Dの立体オブジェクトを空間的に動かすものなど、様々なサンプルが公開されています。今回はその中からいくつか気になったもの紹介したいと思います。
詳しくは以下
国内ではiOS，AndroidがスマートフォンのOSとしては一般的で、普通に利用している分には好き嫌い、個人の趣向などによってどちらを選択するかということになりますが、スマートフォンを対象にしている開発者はそういうわけには行かず、やはり両方のプラットフォームに対応した開発が求められることが多いと思います。今日紹介するのは各OSのSDKではなく、クロスプラットフォームのアプリを作るための10のソリューション「10 Solutions for Creating Cross-Platform Mobile Apps」です。
開発者ならよく知るものから、少しマイナーなものまでまとめられています。その中でもスタンダードなもの特に気になったものをピックアップして紹介したいと思います。
詳しくは以下
iOSの大型アップデートがあり、フラットデザインへの大幅なUI変更が話題を呼びました。そしてその波はiPhoneアプリにも及んできています。今回紹介するのはインスピレーションを得ることができる美しいフラットデザインiPhoneアプリ集「23 Flat Design iPhone Apps」です。
Dribbble – Musix App – Albums by Scardi Shek
どれもシンプルで美しい、バランスのとれたUIたち。全部で23ものアプリがまとめられていましたが、その中でも気になったものをピックアップしましたので、下記よりご覧ください。
今年はフラットデザインがWEBのトレンドとして、多くのクリエイティブブログで伝えられています。windows8を始めとして、OS側のユーザーインターフェイス側にも取り入れられ、今後ますます、目にする機会も多くなってくると思います。今日紹介するのはフラットデザインをオーダーされたデザイナーのためのフラットデザインをオーダーされたデザイナーのためのデザインインスピレーション「Flat Design Inspiration」です。
今回はWEB側とスマートフォンUIをそれぞれ取り上げているエントリーから気になったものをまとめて紹介したいと思います。
詳しくは以下
常に新しいデザインが発信されるインターネット上では、デザインを作り上げる過程で必要になる素材も多数ダウンロードできるようになっています。そんな中今回紹介するのは、最新のクリエイティブなフリーフォント「13 Fresh and Free Fonts for March 2014」です。
（Garado Blnco font by swistblnk – FontSpace）
新鮮で、デザインに彩りを与えてくれるフォントが厳選されまとめられています。
詳しくは以下
アイコンを利用することで、デザインを分かりやすくできたり、デザインの質が向上したりする利点が。今回はそんなシーンに最適な、個性的なデザインのアイコンもピックアップした「35 Free Ingenious Icons To Compliment All Designs」を紹介したいと思います。
40 free stroke icons from Sympletts pack – Freebiesbug
さまざまテーマのアイコンセットが紹介されており、どれもストックしておきたくなるものばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ノートをモチーフにしたアナログ感のあるデザインはいつでも人気で、制作する機会も多いかと思います。今回はデザインの幅をもっと広げられる、デザイン制作に役立つノートテクスチャをまとめた「20 Free Lined Paper Textures for Designers」を紹介したいと思います。
Notebook by ~origin-missing on deviantART
キレイな見開きノートから、グランジ感のあるノートまで、さまざまなノートのテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
最小限のデザインでユーザーに理解してもらうためのミニマムアイコンは必要性の高いものです。いくつあってもいいくらい汎用性の高いミニマムアイコンを自分の手で変更できたら、その使い勝手はもっとあがるでしょう。今回ご紹介するのは2000個以上のフリーアウトラインアイコンがまとめられた「2000+ Beautiful Free Outline Icons For Graphic And Web Designers」になります。
Buddha Line Icons Set Vol.1 — download free icons by PixelBuddha
2000以上の豊富なデザインならお探しのイメージに近いミニマムアイコンもきっと見つかるはず。ミニマムアイコンをお探しの方は以下からご覧ください。
詳しくは以下
国内外ともに人気のブログツールWordPress。人気の秘密には配布されているテーマの豊富さがありますが、今日紹介するWordPressテーマ「Leopress」は一風変わっていて、タイトルにもあるようにMacOSX Leopardを再現したWordPressテーマになっています。
スクリーンショットを見てもおわかりになるとおり、本当にOSの画面のようです。背景や、アイコン、メニューの処理など細かいところに凝っていてここまでかというくらいMacOSX Leopardに近づけてあります。
詳しくは以下
デザインの世界では、レンガを積み重ねて作られた壁面をテクスチャ素材として利用することも。しかし、いつも似たようなものだと、デザイン自体がワンパターンになってしまうのではないでしょうか？今回はそんな時、新しいバリエーションとして是非追加したい、「A Compilation of Brick Brushes You Should Bookmark」を紹介したいと思います。
（Brick Wall Free Brushes | Webdesigner Lab）
さまざまなテイストのブロックレンガ壁のテクスチャがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
背景素材などに利用されるテクスチャはとても便利ですが、広範囲で使用する場合継ぎ目があると加工に手間がかかってしまうため、シームレスに使えるとありがたいものです。そんな中今回紹介するのは、継ぎ目のない使い勝手のよい砂テクスチャまとめ「20 Free Seamless Sand Textures」です。
（Seamless desert sand texture by hhh316 on deviantART）
さまざまな表情の砂面をテクスチャにし、さらにシームレス化した便利な素材となっています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
文字は基本、中まで塗りが入っているものがほとんどですが、中にはデザイン的にラインだけで構成されたインラインフォントというジャンルも。今回はそんなフリーインラインフォントまとめ「Fresh And Free Inline Fonts To Try Right Now」を紹介したいと思います。
ライン使いと、個性的な形状が特徴のフォントが多数紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
