デザインを開発するという視点でお伝えするクリエイティブBLOG
今回紹介するjavascript「Fireworks.js」はブラウザ上に花火を打ち上げるというものです。使い道はアニバーサリーぐらいと、あまり思い浮かばなかったのですが、覚えておけば何かしらに使えそうです。
オーソドックスな花火から、少し変わった花火までパラメーターを操作することで、様々な花火を作り出すことができます。サンプルのデモは「Fireworks.js: A DHTML fireworks effect」のページの「Fire」と言うボタンを押せば花火を
詳しくは以下
特殊な場面で効力を発揮しそうなのが今回紹介する滑らかなに横にスクロールできるjavascriptが今回紹介する「bookreader.js」です。
基本的にはWEBはほとんどが縦スクロールの構成になっていて、長文を読むにはあまり適しているとは言えないので、長い文章を見せるときなんかは有効なスクリプトだと思います。
詳しくは以下
クレジットカードロゴアイコン、国旗アイコン、ファイルタイプアイコンなどちょっと珍しいアイこんんから、よく見かけるRSSフィードや一般的なミニアイコンまで幅広いアイコンを無料で配布しているのが今回紹介する「Fine icons.」です。
ライセンスは「Creative Commons Attribution-Share Alike 2.0 UK: England & Wales」でライセンスの範囲内なら配布されているアイコンはすべてフリーでダウンロードでき、WEB、ブログ、モバイルアプリケーションなど形式を問わず個人使用、商用利用問わず利用することが可能です。
詳しくは以下
何かを伝えるとき、にユーザーにも分かりやすくデザイン的にも重要なのがアイコン。様々なシーンで利用するかと思いますが、今日紹介するのはどんなデザインの時にも、すんなり馴染んでくれそうなシンプルで使い勝手が良いフリーアイコンセット「bwpx.icns」です。
アローやメール、エラーなど基本的な物はもちろんですが、全部で250個アイコンが収録されていますので、アイコン入れたいなぁなんて思うような項目はすべて網羅されている感じがします。WEB制作なんかにはかなり相性がよさそうです。
詳しくは以下
WEBサイトを制作するとき、一から制作するのはとても面倒で、少しでもベースがあれば随分と作業は短縮される事が多いです。今日紹介する「40 Free Web Template Resources」と言うエントリーは海外のフリーテンプレートを配布しているサイトをまとめたエントリーです。
全部で40ものサイトが紹介されていますが、今日はその中から気になるテンプレート配布サイトをピックアップして紹介したいと思います。
詳しくは以下
メニューはサイトないで最も多く使われ、見られている重要な要素の一つだと思います。今日紹介する「 Pastel color menu」はサブメニューが付いた、シンプルでデザイン性、汎用性の高いナビゲーションメニューです。
デザインはCSSで制御されているので、ベースとして利用してカスタマイズすることも容易にできるかと思います。サブメニューの表示にはjavascriptを使っているみたいです。
詳しくは以下
世界中で利用されているCMS WordPress。使い勝手が良く、様々なプラグインと豊富なテーマが魅力的なオープンソース。今日はそんなwordpressをクリエイティブに利用できるシンプルでミニマムなWordpressテーマを集めたエントリー「30 Fresh Minimal WordPress Themes (2011 Edition)」を紹介したいと思います。
そのままでも利用できますし、シンプルなので、カスタマイズのベースにも良さそうなテーマが多数集められています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
フォントを使用する場所やデザイン感によって、ウェイトやフォント自体の太さを使い分けることで強弱をつけることができます。そんな中今回紹介するのは、細身のラインが特徴のフォントまとめ「21 Light & Ultra-Thin Fonts for Your New Designs」です。
Party at Gatsby's font by tysmagic – FontSpace
繊細なラインで構成されたデザイン性の高いフォントが多数まとめられています。
詳しくは以下
軽量でなおかつ様々な動作が可能な人気のプラグイン「jQuery」。世界中で利用されており、そのテクニックも豊富ですが、今日紹介するのは比較的新しいチュートリアルやテクニックを集めたエントリー「25 Fresh and New jQuery Plugins and Tutorials」です。
Create Featured Content Slider
ツールチップからスライダー式のギャラリー、サウンドプレイヤーなどなどjQueryで実現できる様々なテクニックが紹介されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
ビデオカメラも写真用のカメラもデジタル製品が主流となっていますが、今でも映画や写真のプロの世界では、フィルムの美しさを追求されている方も多く、フィムルはその芸術性の高さの象徴的な存在になっているようにも感じます。そんな中今回紹介するのが、映画や写真などの芸術作品にぴったりなフィルムアイコンをまとめた「25 Useful and Free to Download Film Icon」です。
Film by ~RecluseKC on deviantART
映画や写真用のフィルムを始め、制作現場を連想できるようなクレジットアイコンまで、さまざまな種類が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
物事の流れを説明する際に非常に分かりやすいのが、時系列で整理された情報。タイムラインは時間の流れを感じることができ、どういった順番でなにがなされたのかはっきりとわかります。今日紹介するのはそんなタイムラインをjQueryで実現してくれるプラグイン「jQuery Timelinr」です。
プラグインは非常にシンプルで、簡単に実装することが可能です。
詳しくは以下
WEB上で利用するにはまずjQueryとjquery.timelinr-0.9.jsの2つのjsを読み込ませます。その後以下のjavascriptを記述すれば準備は完了です。
指定したdivタグないのリストがタイムラインとなります。こまかな調整は記述するjavascriptでオプションの値を指定することで調整が可能です。大きなところでは、縦に順に追っていくタイプのタイムラインと横に追っていくタイプのタイムラインをオプションで選択ができます。
簡単に実装できますし、限定的にはなりますが、便利に使えそうなjQueryプラグインだと思います。
デザイン制作に欠かすことができないフォント。クオリティの良し悪しが左右される程重要な役割を持つ要素の一つであり、なるべく多くのレパートリーをストックしておきたいもの。そんな中今回紹介するのが、印象的なデザインにぴったりな個性派フォントをまとめた「20 Creative Typography Free Fonts 2012」です。
（Pilaca Free Font on the Behance Network）
さまざまなシーンで使用できる個性的なフォントが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
植物などの自然素材を使用したデザイン制作を行うことも多いと思いますが、身の回りにある植物だけを使用しようとすると、素材の選択の幅が狭くなってしまいます。そんな中今回紹介するのが、さまざまな樹木の樹皮が揃ったテクスチャをまとめた「25 Free Bark Textures For Designers」です。
Old Yew Bark Stock Texture by *aegiandyad on deviantART
若々しい樹木のテクスチャや、朽ち果ててしまいそうな樹木のテクスチャまで、さまざまな樹皮のテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインに重要なフォント。フォントの選び方でデザインの印象はガラリと変わります。毎日数多くのフォントが公開され、世界中で多くのフリーフォントが制作され利用されていますが、今日紹介するのは比較的新しく作られたハイクオリティなフォントを集めたエントリー「9 New High-Quality Free Fonts」です。
少し変わったフォントから王道なものまで、様々なフォントがまとめられています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
動画はトラフィックを取られすぎてなかなか展開はできないけどなんとかしたいという思いから、動画部分を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」からどうぞ。
アナログテイストなデザイン制作にはもちろん、デザインのワンポイントとしても使いやすい手書きフォントですが、イメージにぴったりなフォントを見つけるというのは難しいもの。そんな中今回紹介するのが、アナログテイストなデザイン制作に欠かせない手書きフォントまとめ「30+ Essential Free Hand Drawn Fonts」です。
洗練された雰囲気のフォントから、個性的なフォントまで、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
