デザインを開発するという視点でお伝えするクリエイティブBLOG
少ないスペースで様々な情報を格納できるタブ式のインターフェイス。現在では情報サイトをはじめとして様々なサイトで導入されていますが、今回紹介するのはシンプルかつ機能的なタブインターフェイス「Organic Tabs」です。
非常に使い勝手が良くリストタグとjQueryのみで実現できるので、実装もシンプルで簡単になっています。挙動のスクリーンキャストを収めた動画が公開されていましたので下記に貼り付けておきます。
動画は以下から
グラフィックにしてしまえば簡単なグラデーション処理ですが、WEBのテキストデータのままグラデーションを実現しようとするとかなり大変です。そこでそんなグラデーション処理を可能にしてくれるのが、今回紹介するjQueryプラグイン「Fade colors using jQuery 」です。
指定した、idの内容のテキストデータの色の透明度を変更し、擬似的に徐々に消えていくような文字のグラデーション処理を実現しています。
詳しくは以下
ユーザーとのコミュニケーションに一般的に使われているフォーム。メールフォーム、アンケートフォーム、会員登録と幅広い使われ方をしていますが、今回紹介するのはそんなフォームを快適にしてくれるフォームのためのjQuery集「10+ jQuery Form Enhancement Plugins」を紹介したいと思います。
フォームをちょっと便利にしてくれるそんなテクニックが詰まっています。エントリーに収録されているモノのから気になったものをいくつかピックアップして紹介したいと思います。
詳しくは以下
軽量で高機能なjavascriptライブラリの一つjQuery。様々な所で利用されていますが、今日紹介するのはフォームで使えるjQueryテクニックをまとめた「10+ JQuery tutorials for working with HTML forms」と言うエントリーです。
Submit A Form Without Page Refresh using jQuery
ツールチップから、オートコンプリート機能まで、様々な機能をjQueryを用いてフォームに実装できるようになっています。いくつか公開されていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
WEBサイトの大きなカテゴリの一つEコマース。国内でも多くのECサイトが立ち上がり、販売していますが、そこで必要なユーザーインターフェイスはまた情報を伝えるだけのWEBサイトとは異なります。今日紹介するのはECサイトのユーザーインターフェイスを豊かにしてくれるECサイトのためのフラット&ストロークアイコンセット「The Flat & Stroke eCommerce Icon Set」です。
全部で50種類ものアイコンがセットとなっており、2色で表現されたものと、線のみで描かれた2種類のアイコンが収録されています。
詳しくは以下
サイトを立ち上げるときに非常に役に立ってくれるのがテンプレート。ベースがあるのとないのでは手間は大幅に違ってきます。今日紹介するのはクールなCSSテンプレートが無料でダウンロードできる「Css 4 Free」です。
良くあるデザインといえばそうなのですが、テンプレートのサムネイルとユーザーのレーティングが表示されていますので、テンプレートを選ぶ側には非常に優しいインターフェイスとなっています。またテンプレートはタグ付けされており、タグから探すことも可能です。
詳しくは以下
デザインのトレンドの一つであるポリゴングラフィックですが、一から作り上げるのは少々手間がかかるもの。今回ご紹介するのは、そんなポリゴングラフィックをもっと手軽に使いたい…！と言う方におすすめなポリゴングラフィックで動物たちを描いた素材集「Polygonal Animals Set」です。
Polygonal Animals Set — download free vectors by PixelBuddha
美しく丁寧に仕上げられたポリゴングラフィックが全部で20種類揃ったダウンロードフリーの素材集です。
詳しくは以下
(さらに…)
メニューはサイトないで最も多く使われ、見られている重要な要素の一つだと思います。今日紹介する「 Pastel color menu」はサブメニューが付いた、シンプルでデザイン性、汎用性の高いナビゲーションメニューです。
デザインはCSSで制御されているので、ベースとして利用してカスタマイズすることも容易にできるかと思います。サブメニューの表示にはjavascriptを使っているみたいです。
詳しくは以下
デザイナーなら常にチェックしておきたい最新の素材。でも、膨大な量の素材の中からお気に入りを探すのはなかなか大変なものです。そんなときに役立つリソース集「50 Free Resources for Web Designers from April 2016」を今日は紹介したいと思います。
Chalkboard Sign PSD Mockup – GraphicsFuel
UIやワイヤーフレーム、アイコン、フォントなど、さまざまな種類の素材が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ロゴデザインは企業や団体を表す非常に重要なもので、そのデザインもクライアントの数や業種によっても異なり、多様性を極めています。今日はそんなロゴデザインのインスピレーションを得られるロゴデザインコレクションをさらに集めたエントリー「25 Amazing Logo Collections」を紹介したいと思います。
Logos 08 on the Behance Network
様々な業種、テイストのロゴがまとめられています。今日は公開されているものの中から気になったものをいくつかピックアップして紹介したいと思います。
詳しくは以下
デザインに勢いを付けたいときや、スタイリッシュに魅せたいときなどに非常に役立ってくれる、スプレーや水を吹き付けたようなスプラッシュ表現。自分で1から制作するのは大変ですが、今回ご紹介するのはそんな時に利用したいテクスチャ素材「16 Sprayed Vector Textures」です。
スプレーを吹きかけたようなベクターアートが収録された、ハイクオリティな素材です。
詳しくは以下
(さらに…)
今までDesignDevelopでは写真素材サイトをいくつか紹介してきましたが、今回紹介する「写真素材 足成」は日本では珍しく、商用OKしかもクレジット・リンク不要ストックフォトサービスです。
現在5161枚の写真が登録されていて、すべての写真素材が無料で、制限なく自由に使用することができます。
詳しくは以下
非常に便利に活用できるwordpress。いろいろなデザインのテーマが配布されており、フリーで使用できるものもたくさん存在しています。そんな中今回紹介するのは、最新トレンドを反映したフリーwordpressテーマ集「23 Free WordPress Themes Following the Latest Trends」です。
Business One – Free Business WordPress Theme
主流の構成が反映されたwordpressテーマが紹介されています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
