デザインを開発するという視点でお伝えするクリエイティブBLOG
毎日コーディングでさまざまなコードを書くデベロッパーにとって非常に便利なスニペット。知っているだけで作業効率が格段にアップするもの。そんな方におすすめできる「30 Seconds of CSS」をご紹介していきたいと思います。
先進的な知識を多く取り込むためにも、基礎的な業務内容をいかに短縮して行っていけるかは非常に重要なポイント。デベロッパーの方はぜひ下記よりチェックしてみてください。
詳しくは以下
モダンな雰囲気からスタイリッシュな雰囲気まで、幅広い演出をしてくれるハーフトーン。今まで画像としてWebサイトに取り込むことが多かったのではないでしょうか。今回ご紹介する「Pure CSS Halftone Effect」ではWebならではの動きを楽しむことができるエフェクトを通したハーフトーンになります。
美しい動きで視線を惹き付ける、ぜひ取り入れてみたいエフェクトとなっています。
詳しくは以下
他の世界に入り込むような没頭感を味わうことができるVR。気軽にデモを作成ができたらと、デベロッパーであれば1度は感じたことがあるかもしれません。そんな中今回紹介するのは、CSSで作るVR「CSSVR: Progressive VR experiences」です。
VRの複雑な動きをどう再現していくのか、その再現率の高さはどうれくらいなのか。デベロッパーであれば気になるところ。下記にデモを載せているのでご覧ください。
詳しくは以下
Webデザインの中でもユーザーの目を簡単に引くことを可能にするエフェクト。動きがつくだけでサイト内がぱっと華やかになります。今や様々なエフェクトをつけることが可能ですが、ついついワンパターン化してしまいがち。そんな方におすすめできる、水のような動きに焦点をあてた「Liquid Distortion Effects」を今回はご紹介致します。
水のような動きは優雅さと洗練された雰囲気を与えてくれます。下記にデモをいくつかピックアップ致しましたので、ご覧ください。
詳しくは以下
アレンジが効き、拡大縮小などの可変にも劣化することなく対応できるフリーベクターデータ。非常に便利な素材で重宝すると思います。そんなチェックしておきたいフリーベクター素材集「30 Free Vectors All Designers Need」を今回は紹介したいと思います。
Web elements vector icons Vector | Free Download
アイコンやテンプレート、パーツなど、さまざまな種類のベクターが展開されています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
汎用性があるドット柄。ポップなイメージを演出してくれたり、モダンな印象を与えたりと、大きさや色等で様々な印象を与える事ができます。今日紹介するのはドット柄を簡単に作れるイラストレータースウオッチ集「53 Impressive Polka Dot Pattern Swatches」です。
全部で53個のドットパターンがスウオッチとして公開されていますが、今日は公開されているパターンの中からいくつか紹介したいと思います。
詳しくは以下
ファッションからインテリアまで、さまざまなシーンで利用されるチェックパターンは、ラインやカラーの微妙な違いで印象が大きく変わるもの。そんな中今回は、さまざまなチェック柄が楽しめるパターン集「Seamless Tartan & Plaid Patterns」を紹介したいと思います。
スコットランドの民族衣装で良く見られるようなタータンチェックを基本にデザインされた、25種類のチェックパターンセットとなっています。
詳しくは以下
写真加工は現在様々なアプリケーションに搭載されており、もはや写真とは切手は切れない関係にありますが、今回紹介するのはWEB上でも動作する写真加工フィルタを生成できるCSSで実現するフィルタジェネレーター「CSSFILTERS.co」です。
このサービスでは、予め登録されたフィルタもしくは、パラメーターを指定して任意の画像にフィルタをかけるとと共に、WEB上で実現するためのコードも出力してくれるというものです。
詳しくは以下
WEBでもグラフィックでも便利に使えるアイコン。様々なシーンで重宝します。今日紹介するのはそんな便利なアイコンをまとめたフリーアイコンセット70以上収録しまとめたエントリー「70+ Awesome Free Icon Sets and Icon Collections for Web Designers」です。
The Webdesigner Sketchup Icons
全部で70以上のフリーアイコンセットが集められていますが、今日はそのなかから気になったアイコンセットをいくつかピックアップして紹介したいと思います。
詳しくは以下
フリーで配布されているアイコンにはいろいろな種類があり、デザインテイストもさまざま。そんな中今回紹介するのは、シンプルさを可愛らしさを兼ね備えたフリーアイコン「Feather: 130 Free Icons by Cole Bemis」です。
130種の、定番として使用できるフリーアイコンがセットになってダウンロードできるようになっています。
詳しくは以下
フォントには非常にいろいろな種類が存在していますが、フォント単体で存在感が感じられる個性的なタイプもたくさんフリーで配布されています。今回はそんな、デザイン性の高いフリーフォントまとめ「Collection of New & Free Fonts for April 2015」を紹介したいと思います。
シンプルでベーシックに使用できるものから、形が非常に独創性のあるものまで、幅広いデザインのラインナップが魅力のまとめとなっています。
詳しくは以下
WEBデザインをつくり込む時に、非常に便利なテクスチャ。細かな作り込み感を演出し、クオリティを上げてくれますが、今日紹介するのはテクスチャを効果的に使った、素晴らしいWEBデザイン集「40 Excellent Examples of Texture in Web Design」
様々なジャンルで、テクスチャを効果的につかったWEBデザインがまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
■Big Related
シンプルで洗練されたWEBデザインにレトロな質感のテクスチャが見事にはまったWEBデザイン。
■Ryan Scherf
様々なテクスチャが複合的に組み合わさって作られた、非常に質感溢れるWEBデザイン。
■Pop the Box
POPなテクスチャを効果的に使ったWEBデザイン。難しそうなテクスチャですが、キレイにまとめてあります。
上記の他にも様々なWEBデザインが公開されています。WEBデザインをもう一つランクアップさせたいと思っているWEBデザイナーには良いインスピレーションではないでしょうか？
40 Excellent Examples of Texture in Web Design | Inspiration
グラフィックを作り込むのに非常に便利なphotoshop。そのなかでもブラシ機能は簡単に、様々な表現を実現してくれる便利なものです。今日紹介するのは制作に便利な新しいphotoshopブラシを集めたエントリー「50 New and Free Photoshop Brush Packs」。
Chaos(10 Brushes)
全部で50ものクリエイティブなブラシがまとめられていますが、今日はそのなかでも気になったものをピックアップして紹介したいと思います。
詳しくは以下
シンプルかつシックなデザイン性で根強い人気を誇るヒップスター。ファッションはもちろんのことトレンドのマテリアルデザインと相性がいいこともあり、Webにも取り入れられつつあります。そんなレトロさを演出してくれるフォント集「20 Hipster Fonts You Can Download For Free」をご紹介致します。
Rising Star Monoline Script — discover Pixelbuddha Plus design resources library
トレンド感を出すことができるフォントが20種類もまとめられています。
詳しくは以下
