デザインを開発するという視点でお伝えするクリエイティブBLOG
完全に覚えていないとなかなかCSSのコードからその処理を頭に思い描くのは難しいかと思います。今日紹介するのはCSSの動きを簡単に確認できるサービス「CSS Sandbox」を紹介したいと思います。こちらを使えば瞬時に動作確認が行なえます。
使い方は非常に簡単で画面の下のコードをクリックするだけで上のプレビュー欄に反映され、確認する事が出来ます。
選択されたCSSは上記のように赤く反転しますので今どんなCSSが使われているのかが直感的に分かるようになっています。かなりの数のCSSが登録されていますのでCSSを覚えたての方は色々な発見が出来きるかと思います。
CSSの処理を学ぶだけではなく、ブラウザ上で動作しますのでCSSでのブラウザごとの表示など様々な用途で使えそうです。動的に動いているのでサクサクチェックできるのもポイントです。
jQueryによって誰でも簡単にwebサイトに動きをつけることができるようになりました。ですがなかなか意図通りの動きをするプラグインは少ないもの。そんな中今回紹介するのは、高機能で扱いやすいjQueryスライダーを集めた「Top 30 Fabulous jQuery Sliders for Free」です。
Top 30 Fabulous jQuery Sliders for Free | InstantShift
変わった動きをするスライダー、シンプルなものまで、たくさんのスライダーが紹介されています。その中でも気になるものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
特に女性らしいデザインに合わせやすい花柄。いろいろな形で素材配布されていますが、今回は、シームレスなフラワーパターン「Flower seamless free Photoshop and Vector pattern」をご紹介します。
おしゃれでどこかレトロテイストなフラワーパターンがダウンロードできるようになっています。
詳しくは以下より
先日「役割別にUIデザインを集めたFlickrコレクション「Design Solutions」」と言う記事でユーザ−インターフィスに特化したFlickrコレクションを紹介しましたが、今回紹介する「 Design Patterns」も同じくユーザ−インターフェイスに特化したコレクションになっています。
基本的には「Design Solutions」と同じく404、Navigationなど役割毎にセットが構築されています。
詳しくは以下
古い切手やスタンプなどは手軽に手に入れることのできない素材ですが、デザインのクオリティを一気に高められる重要なアイテム。そこで今回紹介するのが、フリーで利用できるレトロスタンプPhotoshopブラシをまとめた「30 Free Stamp Photoshop Brushes」です。
（Tickets and Labels Brush Set by ~FidgetResources on deviantART）
普段なかなか目にすることのできない貴重な切手や、質感を感じられるスタンプが、多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
フォントにはさまざまなデザインが存在しており、デザインが出来上がった状態は一つのグラフィックとして完成されていますが、今回はタイピング＝打ち込みをする際の表情に注目しデザインされたフリーフォント「Typing Art」を紹介したいと思います。
（Typing Art｜オドリコ 文字がクルクルと踊ります。）
タイピングした瞬間に、それぞれのデザインをイメージさせる動きを見せるというとてもユニークなフォント。もちろん、デザインフォントとしても魅力溢れるシリーズとなっています。
詳しくは以下
日常には色々な種類の紙製品が溢れていますが、その表情は紙によってさまざま。例えば光沢感のあるコーティングが施されていたり、素朴で落ち着いた印象を受けるマット紙など、用途によって色々な紙が存在しています。今回紹介するのはそんな日常に溢れる紙のテクスチャを集めたテクスチャパック「Free Paper Texture Pack: 64 Card Stock Photos」です。
段階的に明るさが揃えられた白紙や、リサイクルされたクラフト紙、繊維感のある紙など、さまざまな紙が64種まとめられています。
テクスチャの中で、比較的定番としてベーシックに利用されている木のテクスチャ。単体で使ったり、他の素材と組み合わせたりと、いろいろな使い方ができます。そんな中今回は木のテクスチャの中でも、リアルな断面をとらえた「20 Free And High Resolution Log Textures」を紹介したいと思います。
（Log texture by drumcrazy779 on deviantART）
カットされた木の年輪などがならぶテクスチャ素材がまとめられています。
詳しくは以下
デザインを彩るフォント。特に見出しやメインビジュアルなど、人目をひく部分に使うフォントにはこだわりたいもの。今回ご紹介するのはそんな見出しやメインビジュアルなどに最適なフォントをまとめた「33 Bold Fonts for Your Flyers, Posters, and Brochures」です。
33 Bold Fonts for Your Flyers, Posters, and Brochures | NOUPE
デザイン性の高い、ハイクオリティなフリーフォントが33種類まとめられています。その中から特に気に入ったフォントを幾つかピックアップしましたのでご覧ください。
詳しくは以下
(さらに…)
パソコン上でデザインをするのが当たり前な現代では、ソフトにデフォルトで組み込まれているパターンやテクスチャも豊富。しかしどうしても似たようなデザインになってしまいがち、ということもあるのではないでしょうか？そんな中今回紹介するのは、リアルなグランジ感が演出できるテクスチャセット「Seven Simple Grunge Textures」です。
インクの擦れたような雰囲気のテクスチャから、風化した塗装のようなテクスチャまで、7種類のテクスチャがセットになっています。
詳しくは以下
デザインを表現する上で、重要なフォント。多くのデザイナーが良いフォントを常に求めていると思います。今日紹介するのは、商用可能で最新かつ使える！フリーフォントをまとめたエントリー「A Collection Of Useful & New Fonts」です。
シンプルなものからシンボリックなフォントまで、全部で10種類のフォントがまとめられていましたが、今回はその中空特に気になったフォントをピックアップして紹介したいと思います。
詳しくは以下
