デザインを開発するという視点でお伝えするクリエイティブBLOG
スマートフォンサイトではすっかりお馴染みのメニューアイコン、ハンバーガーボタン。最近ではスマートフォンだけではなく、PCサイトもメニューとして利用されているのもよく見ますが、今回紹介するのは、ハンバーガーボタンにアニメーションを簡単に与えることができる、「Tasty CSS-animated hamburgers」です。
こちらはCSSのアニメーションを利用してスムーズにアニメーションするハンバーガーボタンを簡単に実装可能です。
詳しくは以下
HTMLやCSSの発展とともにWebサイトの表現の幅も広がってきていて、以前よりもクリエイティブなWebサイトが短時間で制作できるようになりました。今回はそんなHTML・CSSを用いたWebテンプレートを集めたエントリー「50 High Quality Free HTML5 And CSS3 Web Templates」を紹介したいと思います。
どれも高品質なWebテンプレート。WEBサイトが制作できる方であれば大幅に時間を短縮してWebサイトを制作することができます。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
最近のWEBデザインの主流の一つレスポンシブデザイン。端末の解像度に応じて、その端末に最適化したデザインを提供してくれるものですが、慣れていないとなかなか一から構築となると難しいものです。今日紹介するのはシンプルなベースフレームで明快にレスポンシブデザインが実装できるフレームワーク「BASE」です。
こちらは「Super Simple Responsive Framework」とある通り、至ってシンプルなもので、テキストリンク、リスト、テーブルなどなど、基本要素のみで構築されています。
詳しくは以下
アラートを出したり、案内をだしたり非常に多様な使い方で便利に使えるモーダル。それだけに多くのWEBサイトで利用されています。今日紹介するエントリーは、便利なjQueryモーダルプラグイン15選「15 Cool jQuery Modal Plugins」です。
SimpleModal / Eric Martin / ericmmartin.com
シンプルなものから、ギャラリー的なら利用ができるものまで幅広く収集されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
日本では互換性を重視する傾向がつよくまだあまり、特殊なフォントをjavascriptなどで作り出すような手法はスタンダードではありませんが、中には、挑戦的なサイトもあり、フォントをjsやCSSで見せるそんなサイトもあります。今日紹介するのはWEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」です。
FitText – A plugin for inflating web type
フォントを加工するもの、テキストの組を特殊にしてくれるものなど、様々なフォント関連のjQueryプラグインが紹介されていますが、今回はその中から気になったものをピックアップして紹介したいと思います。
詳しくは以下
Lettering.js – A jQuery plugin for radical web typography.
自動的にclassを割り当てて、傾けたり、色を変えたり色々な処理が可能です。
It's Bacon! A jQuery plugin that allows you to wrap text around a bezier curve or a line.
オブジェクトにそって文字組を行なう事ができます。WEB上で紙のようなデザインが可能になります。
Arctext.js – Curving text with CSS3 and jQuery
文字をパスで並べたような、処理をjavascriptで可能にする。
上記の他にもいくつかのタイポグラフィ関連のjQueryプラグインが公開されています。文字をJS側で制御したいと言う方は是非原文もご覧ください。
世界中で利用されている便利なjavascriptライブラリjQuery。多くのWEBデザイナー、デベロッパーの手によって日夜新しいプラグインが生み出されていますが、今日紹介するのは最近リリースされた、jQueryプラグイン10選「10 jQuery Plugins that Will Make your Life Easier」です。
背景との間にぼかし効果をあたえるものや定番のシンプルでミニマムなツールチップ、写真の上に自分で書き込むペイント機能まで、様々なjQueryプラグインがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
CSS+XHTMLでのコーディングスタイルが主流になってかなり建ちますが、さらに新しい、CSS3という言葉も最近は耳にするようになってきました。CSS3を使えば、今まで画像でしかどうしても表現できなかった部分等もコードで実装可能になりますが今日はそんなCSS3のテクニックをあつめたエントリー「CSS3 Techniques You Should Know」を紹介したいと思います。
グラデーション表現や、ドップシャドウなどなど、いままでどうしても画像に頼っていた部分がかなり解決されるみたいです。紹介されているものノン蚊からいくつかピックアップして紹介したいと思います。
詳しくは以下
プログラマーにはシンプルなフォームプログラム。ただ、デザイナーにとっては自ら組み上げるというのは少しハードルがあると思います。今日紹介するのはwordpressでフォームを簡単に実装できるフリーフォームプラグインを集めたエントリー「20 Free Contact Form Plugins for WordPress」です。
シンプルなプラグインから、非常に高機能なプラグインまで様々なプラグインが紹介されています。今日はその中から幾つか気になったプラグインをピックアップして紹介したいと思います。
詳しくは以下
フリーで配布されているアイコンには非常にさまざまな種類が存在しており、デザインやテーマもバリエーション豊富。いろいろな種類をストックされている方も多いかと思います。そんな中今回紹介するのは、カラフルなフリーフラットアイコンが300個揃った「300+ Free Flat Color Icons」です。
約300個という豊富な種類がセットになっているのが嬉しい、フラットテイストな賑やかなカラーのアイコンがダウンロードできるようになっています。
詳しくは以下
さまざまな種類のベクター素材がネット上で配布されており、常に新しいものを探している方も多いかと思います。そんな中今回は、デザインに手描きのテイストを加えたい時におすすめ、ヴィンテージ風の小さな手書きイラストレーションセット「Illusion Hand-Drawn Collection」をご紹介します。
アンティークでラフな雰囲気のイラストレーションがセットでダウンロードできるようになっています。
詳しくは以下
Twitterなどの有名なアイコンは、自分がよく使用するものはストックとして持っているかもしれませんが、必要時にない場合は探すことになり、非常に手間を感じるのではないでしょうか。そんな手間を省いてくれる「devicon」を今回はご紹介します。
デベロッパーが持っておくと便利なアイコンが多数まとめられており、ソースコードも記載してくれている優秀なアイコンセットになります。
詳しくは以下
デザイン上での配色と言うのはとても難しい物でセンスが問われる部分でもあります。デザイナーの中でも、配色や色の組み合わせがどうも苦手だという方もいるかと思います。今日紹介する「Got Color?」は配色や色に対してインスピレーションを得る為のカラージェネレーターです。
アクセスするとカラーブロックが表示され、アクセスするたびに出力される色が異なります。カラーブロックの中央にはコードが表示され簡単に利用できるようになっています。
詳しくは以下
国内でもユーザーが増え続け、プロモーションでも数多くの企業が活用しているInstagram。先日のアップデートやAPIの改訂など開発側にも大きな話題を振りまいていますが、今回紹介するのは企画書に使えるInstagramのUIを再現できる「Instagram UI Kit」です。
こちらはiOS9・アップデート後のユーザーインターフェイスを再現しており、最新の画面を利用することが可能です。
詳しくは以下
CG要素の強いデザインを制作するためには、Photoshopなどの画像処理ソフトを利用することが不可欠ですが、表現方法が多岐にわたる分、その技術を余す事なく利用できていないという方も多いのではないでしょうか？そんな中今回紹介するのは、フォントをクリエイティブに表現できる、Photoshopチュートリアルまとめ「40 Fresh And Creative Photoshop Text Effects Tutorials」です。
Create a Glowing Liquid Text with Water Splash Effect in Photoshop – PSD Vault
立体感のあるクオリティの高いフォントデザインを作成できるチュートリアルが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
世界の美しい風景や、新しい土地での出会いに憧れを抱き、旅行をする方はとても多いと思います。今回は、そんな旅行シーンに是非活用・閲覧したい、クリエイティブな旅行案内サイトをまとめた「25 Web Design Showcase of Travel Websites」を紹介したいと思います。
それぞれの国の雰囲気や、旅行全体のコンセプトが感じられるwebサイトばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
HTMLやCSSの発展とともにWebサイトの表現の幅も広がってきていて、以前よりもクリエイティブなWebサイトが短時間で制作できるようになりました。今回はそんなHTML・CSSを用いたWebテンプレートを集めたエントリー「50 High Quality Free HTML5 And CSS3 Web Templates」を紹介したいと思います。
どれも高品質なWebテンプレート。WEBサイトが制作できる方であれば大幅に時間を短縮してWebサイトを制作することができます。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
