デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBサイトのユーザーインターフェイスの中で最も重要な要素の一つボタン。主にユーザーがページ遷移や情報を取得する時に利用するため利用されます。よく目にする部分だけに、ここの動きやクリエイティブはWEBサイトのクオリティを決定づける要素の一つだと思います。今日紹介するのはコピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」です。
このbttn.cssでは様々な大きさ・色・動きがセットされており、どのボタンも簡単に実装することが可能です。
詳しくは以下
登録さているボタンは全部で15種類。どれもシンプルでマウスオーバーでそれぞれのボタンにあったアクションが展開されるようになっています。色ベタのものと罫線で表現されたものと絞り込んで探すことも可能です。
カスタマイズできる項目としてはカラー６種類、サイズが4種類となっています。シンプルでしかもCSSだけで制作されているので非常に使い勝手が良いと思います。ボタンデザイン・アクションで迷っている方は是非どうぞ。
WEBの演出の一つで、UXのストレスを軽減してくれるローディングアニメーション。WEBサイトがだんだんリッチになる中、当たり前の存在になってきていますが、今回紹介するのはCSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」です。
通常ローディングアニメーションはいくつかの画像を利用して生成されますが、このアニメーションはCSSとテキストのみで制作されるため非常に軽量です。
詳しくは以下
WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。
「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。
詳しくは以下
WEBサイトに欠かせないUI/UXの一つローディング。この小さなアニメーションで多くのストレスが軽減でき、かつ世界観を表現できます。ローディングアニメーションには様々な作り方がありますが、今回紹介するのはCSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」です。
全部で10個のローディングアニメーションが公開されており、どれもクリエイティブでポップな印象を受けます。
詳しくは以下
街はハロウィンからクリスマスへ変わり、クリスマスの話題も少しづつ出始めていますが、今回紹介するのはクリスマスに最適な3Dキューブアドベントカレンダー「Cubes Advent Calendar」です。
アドベントカレンダー（Advent calendar）は、クリスマスまでの期間に日数を数えるために使用されるカレンダーで、毎日一つづつ空けていくカレンダーとなります。今回の1つ1つがキューブとなっておりクリックすることで開封することが可能です。
詳しくは以下
CSSのみで制作されるアニメーションは軽量でシンプルで非常に使い勝手も良く、国内でもブラウザの制限が商業レベルでも外れてきた今、数多く活用されはじめてきていますが、今日紹介するのはCSSのみで制作されたローディングアニメーションセット「CSS Loader」です。
ローディングアニメーションはWEB制作の現場でも比較的利用頻度が高く、最近の画像中心のWEBサイトでは必ずと言っていいほど実装するためCSSのみで利用できるのは非常に魅力的です。
詳しくは以下
街の壁面や建物の壁材などに利用されているレンガ。年月が経ったことによる味のある色合いは、アンティークでヴィンテージな雰囲気を感じさせてくれます。今回はそんなレンガ壁のテクスチャセット「8 Brick Wall Textures」を紹介したいと思います。
シンプルかつ、さまざまな色合いのミックスされたレンガテクスチャが8種セットになっています。
詳しくは以下
いろいろな種類が公開されているテクスチャ。デザインのクオリティを高めたい時にも役に立つ、デザイン制作に欠かせない素材ですが、今回はさまざまなジャンルのフリーテクスチャ素材を集めた「100 Useful Free Textures」を紹介したいと思います。
Free High Resolution Textures – Lost and Taken – 8 Colorful Grunge Textures + L&T News!
グランジやメタル、ウッド、布、レンガ、ペーパーなど、使い勝手の良い素材がジャンル別に分類され公開されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
デザインを制作する際、すべて自作できれば良いのですが、手の混んだ表現を作るのにはそれなりに時間がかかります。そんな時は、グラフィック素材をうまく利用して、時間を短縮しながらデザインのクオリティを上げるのも、一つの方法です。今回は、スプレーで描いたようなグラフィティアート風の素材「Spray Art Graphics Toolkit」をご紹介します。
シンプルな形ですが、スプレー独特の質感があり、密度を出したい時にうまく利用できそうです。
詳しくは以下
質感を出すのにとても便利なテクスチャ。素材感を出すだけで、上手く使えばグッとデザインの質を上げてくれる便利な素材です。今日紹介するのはテクスチャの中でも使いやすいシンプルな紙のテクスチャを集めたエントリー「40+ Various High Quality Free Paper Patterns and Textures」。
しわくちゃの紙から、方眼、ダンボール、楽譜などスタンダードなものから少し変わったものまで様々なテクスチャが公開されています、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
一般の方の中にもアプリ制作を行う方がいる程、身近な存在となったスマートフォンアプリ。飽和状態とも言える今、デザインのクオリティの高さと使いやすさを差別化するには、アプリのデザインも非常に重要な要素ではないでしょうか？そこで今回紹介するのが、iOS用のクリエイティブなアプリデザインを集めたエントリー「33 iOS Mobile App Screen Views for Design Inspiration」です。
Epicurious « TapFancy – An iPhone app design showcase and gallery
WEB制作の現場で幅広く利用されている軽量で高機能なjavasciptライブラリjQuery。様々なプラグインが開発され世界中でリリースされていますが、今日紹介するのは、最近リリースされた、ナビゲーション系のjQueryプラグイン集「15 Fresh jQuery Menu Plugins and Tutorials」です。
全部で15のナビゲーション系のjQueryプラグインがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
スマートフォンでの操作には、さまざまな手の動きが必要になってきます。そんなときに便利なのがアイコン。完結な表現で動きを伝えることができる重要なツールとして重宝します。今回はそんなスマートフォンでの手の動きを表現したフリーアイコンセットまとめ「11 Free Mobile Gesture Icons Packs」を紹介したいと思います。
Dribbble – Free Gesture Icons Vol 2 by Abdus
いろいろなテイストのジェスチャーアイコンセットがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
無料版として利用することができるフリーフォントは非常に便利な存在であり、デザイン性が高いものも数多く展開されています。そんな中今回紹介するのは、スタイリッシュなデザインのフリーフォント17種「17 New Stylish Free Fonts For Designers」です。
Harlott (Free Font) | artimasa
洗練された印象のデザインフリーフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ベクターデータとは線の起終点の座標（位置）、曲線であればその曲がり方、太さ、色、それら線に囲まれた面の色、それらの変化のしかたなどを、数値で表すことにより、コンピュータで扱うデータとしたもので、数値なので、引き延ばしたり、変化を加えてもそれに合わせて劣化無く変形できるのが特徴です。
デザインする上で自由が効くため基本ベクターデータでデザインするのは当たり前ですが、仕事によっては素材のベクターデータが無く、JPGやGIF等できたりします。画像で来るととても不便で、ペンツールで下記起こしたりしていましたが、IllustratorCS2以降ライブトレースと言う画像をベクターデータ化してくれる機能が付きました。今回はそのライブトレースをオンラインで可能にしてくれるサービス「VectorMagic」を紹介したいと思います。
こちらのサービスを使えばオンラインで画像から簡単にベクターデータを作成する事が可能です。
詳しくは以下
iOS7がリリースされてから、変化したデザインに対応したデザインが続々と登場してきており、それに合わせたフリー素材も多くみかけるようになりました。そんな中今回紹介するのは、iOS7のデザインに対応した53種のスポーツアイコンセット「53 sports icons for iPS7」です。
スポーツをテーマとしたフラットデザインのアイコンがまとめられています。
詳しくは以下
