デザインを開発するという視点でお伝えするクリエイティブBLOG
動画はトラフィックを取られすぎてなかなか展開はできないけどなんとかしたいという思いから、動画部分をGIFアニメーションで代替して利用するというサイトを最近では見かけます。今日紹介するのはFacebookライクなインターフェイスでGIFアニメーションプレビューを実装できる「Facebook Like GIF Preview Using jQuery」です。
こちらはjQueryベースで制作されており、jQueryとライブラリ、CSSを読みこせて、HTMLとjsを追記するという形で、比較的簡単に実装が可能です。
詳しくは以下
GIFのマークをクリックするとGIFアニメーションがスタートし、再度クリックすると元に戻ります。挙動については、デモサイトが準備されていましたので「Gif Preview with jquery」からご覧ください。
クリックでイベントが起きるため、スクロール位置などイベントを作っておけば、表示位置に来たら自動的に再生するなんてこともできそう。使い方次第ではグッとサイトが良くなるかもしれないjQueryプラグインだと思います。ソースコードはgithubにて公開されておりましたので、試してみたい方は「Fork it on Github」からどうぞ。
デザインをする上で、一つの重要な要素となるフォント。今日紹介するのは制作に使える実用的な商用利用できる利用できるフリーフォント集「10 Delicious Free Fonts with commercial-use license」です。シンプルで使いやすいフォントがいくつも紹介されています。
全部で10個のフォントが紹介されていますが、今日はその中から、いくつか気になったフォントを紹介したいと思います。
詳しくは以下
角丸、ドロップシャドウ、グラデーションなど今までは画像と組み合わせたり、様々な工夫を用いて表現してた手法が簡単に実装できるCSS3。対応ブラウザも増えてきて、すでに利用されていると言う方も多いと思いますが、今日紹介するのはCSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」です。
Turn Your Images Into Polaroids with CSS3
FLASHのような派手なアクションなどはありませんが、CSSだけでここまで表現できる、CSS3の良さを感じることができます。全部で１０個のCSS3ギャラリーが公開されていますが、今日はその中から幾つか気になったものを紹介したいと思います。
詳しくは以下
今までDesignDevelopでは女性の柔らかい手書き風の書体を「漢字も使える柔らかい手書きフォント「あんずもじ」」や「女性の手書き風ひらがなフォント「アイコ」と「はるか」」といくつか紹介してきましたが、今回紹介するのは、かわいらしくてチャーミング+遊び心がコンセプトの手書きフォント「YUKI（ゆき）フォント」です。
上記画像のような、世界観を作ることができます。収録されている文字はひらがな、カタカナ、アルファベット、記号のみの書体ですが、一般的な丸ゴシックの漢字と組み合わせて使用しても違和感がないレベルで使えるように工夫されているそうです。
詳しくは以下
ロゴや名刺だけでなく、他にもさまざまなツールが展開されることが多い「CI（＝コーポレートアイデンティティ）」、企業やブランドには欠かすことの出来ないものです。そこで今回紹介するのは、CIデザイン実例を紹介する「20 Fresh Corporate Identity Designs for Inspiration」です。
One Degree on the Behance Network
個性的なグラフィックから、カラーリングでデザインされたものまで、色々な表現のCIが公開されています。中でも気になったものをいくつか紹介したいと思います。
詳しくは以下
画像ビューワーのように画像を拡大して表示するという機能をjavascriptで実現しているのが今回紹介する「shiftzoom.js」です。下記のよう現在拡大されているのが全体の何処の部分なのか、表示することも可能です。
上記の拡大して見せると言う基本動作の他に様々なオプションが用意されていて、画像をフェードさせたり、ズームのタイミングを指定できたりと細かいところまで配慮されていますので、画像をメインに扱うサイトでは重宝しそうなスクリプトです。
詳しくは以下
デザインには欠かすことができないフォント。フォントの選び方でデザインはガラリと雰囲気を変えます。今日紹介するのは最近リリースされたクリエイティブなフリーフォントをまとめたエントリー「8 Fresh Free Fonts for Your Designs」です。
スタンダードなというよりも比較的個性的な、クリエイティブ性の高いフォントが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
フォントにもいろいろな種類がありますが、グラフィック要素として取り入れようと思うとフォント自体に個性が必要。今回はそんなシーンにおすすめ、幾何学的なテイストのフリーフォント選「10 Free Geometric Fonts To Download」を紹介したいと思います。
10種という厳選された種類ですが、どれも個性もありデザイン性のあるものばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
派手なアクションや演出はありませんが、WEBサイト構築において、ちょっとした気の利いた所を押さえているjavascriptが今回紹介するJavaScript「yuga.js」です。
簡単に導入できる上に「jQuery」を使って様々な事が簡単なコードで実現可能です。優雅なWeb制作のためのJS サンプルと銘打っているだけあって実相もシンプルでわかりやすいJavaScriptになっています。
詳しくは以下
自信のこれまでの作品やアートワークを、多くの人に見てもらう為に作成するポートフォリオサイト。作品はもちろん、サイト自体のデザイン性やクリエイティブ性も、センスを問われる重要な要素の一つです。そこで今回は、ポートフォリオサイト制作の参考となりそうなwebサイトまとめ「30 Portfolios to Inspire You」を紹介したいと思います。
素材や色使いへの配慮が行き届いたポートフォリオサイトが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
定期的に利用するサービスにおいて非常に便利なブックマークレット。様々なサービスで様々なブックマークレットが公開されていますが、今日紹介するのはWEBデザイナー、WEBデベロッパーには欠かせないブックマークをまとめたエントリー「15 Must-Have Bookmarklets For Web Designers And Developers」から必須の15のブックマークレットを紹介したいと思います。
WTFramework – Learn JavaScript Framework Used
構築から、調査、まで様々なWEBデザイン、開発に役立つブックマークレットが公開されていましたので、いくつか下記に紹介したいと思います。
詳しくは以下
