デザインを開発するという視点でお伝えするクリエイティブBLOG
デザインの主役となるコンテンツを考えるとき、簡単に取り入れることができるコードスニペットがあると便利ですよね。今回は、デザインをカスタマイズするときに役立つコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」を紹介します。
自然の風景をテーマにHTMLやCSS、JavaScriptで作られたコードスニペットがまとめられています。気になったものをいくつかピックアップしましたので、下記からご覧ください。
詳しくは以下
(さらに…)
Webサイトにはアラートメッセージが必要な場面がいくつかあります。多くはJavaScriptのアラートを使用して行われていますが、カスタムCSSとJSコードを使って簡単に表現することができます。今回は、フリーで使える10種のアラートメッセージスニペット「10 Free CSS & JS Notification Alert Code Snippets」の紹介です。
ベーシックな表現からPOPなものまで10種類が紹介されています。
詳しくは以下
だんだんと対応するブラウザも増えてきて業界の中では利用され、案件も増えてきたHTML5。もうすでにいくつか仕事として利用している方もいれば、これからという方もいると思いますが、今日紹介するのはHTM5スニペットの共有サイト「HTML5 Snippets」です。
スニペットとは、よく利用する短いコードの断片に分かりやすい名前を付け、ソースに利用しやすくするためのもの。「HTML5 Snippets」では、基本的なフレームから、細かなパーツまで、様々なスニペットが共有されています。いくつか気になったスニペットをピックアップしてご紹介致します。
詳しくは以下
セキュリティのかかったwebサイトや管理ページ、またユーザーがサイト登録する際に入力するフォームにデザイン性を求めることで、サイトのクオリティはより高まるのではないでしょうか？今回はそんなシーンにおすすめ、デザイン性のあるログイン・登録フォームpsd「20 Login & Registration Form Free PSDs」を紹介したいと思います。
どうしてもシンプルになりがちなフォームにデザインを加えたpsd形式の素材がまとめられています。
詳しくは以下
WEBデザインというのはかなり複合的なデザインで様々な要素の組み立ててででき上がっています。クオリティの高い、低いはいったいどんな要素で決定しているのか！？そんなWEBデザインの確信にも迫る部分を取り上げているのが今回紹介するWEBデザインの品質をあげるテクニック集「How to Spot Quality within Web Design: Examples & Tips」です。
クオリティを上げるためのテクニックやヒントがいくつか紹介されていますが、そのなかでも特に気になったものをいくつか紹介したいと思います。
詳しくは以下
スマートフォンの普及で、HTML5での開発も多くなっており、オブジェクトの制御はjavascriptやCSS3で行なうシーンも増えてきました。今日紹介するのは、CSS3で実現できる空間的な動きをサンプルソースとともにまとめた「Intro to CSS 3D transforms」です。
様々なサンプルソースが公開されており、オブジェクトを変形させるトランスフォームの基礎からそちらを利用したカードがめくれるようなアクションや3Dの立体オブジェクトを空間的に動かすものなど、様々なサンプルが公開されています。今回はその中からいくつか気になったもの紹介したいと思います。
詳しくは以下
ビジネスの際に欠かすことの出来ないアイテム”名刺”、シンプルなものから、インパクトを重視した変わったデザインのものまでさまざまな名刺が使われていますが、今回紹介するのは、個性的な名刺デザインを集めた「35 cool and unique business card designs」です。
Bottle Opener Business Card | Business Cards Observer
名刺の形はしているけども、かなりデザインに個性が見られるもの、また一見名刺とは思えないようなデザインまでさまざまな種類が紹介されています。
詳しくは以下
非常に高機能で軽量なjavascriptライブラリとして様々な機能を提供してくれるjQuery。様々なシーンで利用されていますが、今回紹介するのはデザインの邪魔をしないシンプルで小粋なjQueryエフェクト集「21 Simple and Useful jQuery Tutorials You Might Have Missed」です。
ナビゲーションメニューからギャラリーなどジャンル別に全部で21個のエフェクトが紹介されていますが、今回は其の中からいくつかピックアップして紹介したいと思います。
詳しくは以下
ステッカーやタグなどを利用して動きのあるデザインを表現することも多いと思いますが、そんなステッカーやタグを一つ一つ制作していくには時間もかかります。そんな中今回紹介するのが、コラージュやワンポイントデザインに使いやすい、ステッカーやタグをモチーフにしたPSD素材「40 Beautifully Designed Stickers, Tags And Badges In PSD Files」です。
可愛らしい素材からシーンを問わず使いやすい素材まで、さまざまなPSD素材が紹介されています。中でも気になったのをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
現代のWebデザインに置いて欠かせない基礎設計となっている、レスポンシブレイアウト。PCとスマートフォンでの見え方の違いを手軽にチェックしたい、そんな時の手助けとなる便利なテストツールをまとめた「7 Free Tools For Testing Responsive Layouts」を今回は紹介したいと思います。
7 Free Tools For Testing Responsive Layouts | Webdesigner Depot
使いやすい全てフリーで利用できるツールが7種ご紹介されています。その中から幾つかおすすめのツールをピックアップしてまとめましたので、是非ご覧ください。
詳しくは以下
(さらに…)
数多くのフリーフォントが発表されていますが、分かりやすく見やすいフォントはデザインにも利用しやすく、クリエイティブを行う上で、重要な武器となります。今回紹介するのは見やすく見出しに最適なフリーフォントを集めたエントリー「20 More Fresh & Free Fonts for Beautiful Headlines」です。
Font FoglihtenFr02 – made by gluk
見やすさを追求しながらもデザイン性の高いフォントが多くまとめられていました。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザインに雰囲気や味のある質感を出すことができるグランジ素材は、自分で素材として作成しようと思うとなかなか大変な作業になってしまうかと思います。そこで今回は、手軽にアナログ感を演出できるグランジphotohopブラシ「1000 Grunge Photoshop Brushes (40 Sets)」を紹介したいと思います。
（Floral Photoshop Brushes – Free Photoshop Brushes | Brush King）
デザインがどこか寂しい、もっとデザインに厚みを出したい時などに活躍してくれるデザインブラシが多数収録されています。中でも特に気になったものをピックアップしました。下記よりご覧ください。
詳しくは以下
ハードなイメージを表現する時に効果的な金属テクスチャ。独特の錆具合や汚れ具合などイメージ通りのテクスチャを探し出すことができれば、世界観をより一層つくりあげることができます。そこで今回紹介するのが、さまざまな金属テクスチャ素材を集めた「High Quality Metal Textures You Would Download」です。
Grunge Textures – Manhole Cover #1134 – Free Stock Photo
金属の輝きが美しいテクスチャから、使い込まれた独特の風合いを持つテクスチャまで、さまざまなテクスチャが紹介されています。今回はその中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
