TOP  >  Design  >  さまざまなシーンに利用可能な無料UIキット集「20 Free Top Shelf UI Kits for Web Designers」 クオリティの高いwebデザインを完成させるためには、細部にまでこだわったパーツづくりがキーポイントになってきます。しかし、全てを0から作り出すのは大変。そこで今回紹介するのが、無料で利用可能な、さまざまなテイストのUIキットをまとめた「20 Free Top Shelf UI Kits for Web Designers」です。 Freebie: Modern Web UI Set テクスチャを活用したデザインから、ポップなデザインまで、さまざまなデザインのUIキットが集められています。中でも特に気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Black UI Kit | Design

webサイトを制作する際に頻繁に使用するアイコンですが、一からデザインするには大変な手間と時間がかかってしまうと思います。そこで今回紹介するのは、手書き感とユーモアで親しみやすさを感じるアイコンセット「Steedicons」です。 手書きの素朴な雰囲気の中に、細部へのこだわりを感じるアイコンが数多く展開。300以上のアイコンセット［29ドル］の他に、フリーで利用できるアイコンも一部公開されています。 詳しくは以下 webサイト全体で、手書きアイコンのデザインテイストを表現している点もポイント。アイコンそれぞれのアイテム表現は簡素化されていますが、用途別によく特徴をつかんでおり、細かいディティールにこだわりを感じる、クオリティの高いアイコンばかりが並びます。 手書きならではの質感で、見る人に安心感を与えてくれる、柔らかいテイストのサイトを中心にさまざまなシチュエーションで活用できるのではない

WEBで写真をみせるというのは個人的なWEBから商業用のWEBまで幅広く目的としてありますが、今回紹介するのは様々なユーザーインターフェースのギャラリーが簡単に設置できるフレームワーク「jbgallery 2.0 BETA」です。 こちらは jQueryを利用して制作されており、単純な静的なものではなく、フェードインアウト、ローディングバーなどなど様々処理が制御できるようになっています。いくつかユーザーインターフェイスがオプションとして予め設定されていますのでいくつか紹介したいと思います。 詳しくは以下 ■numbers 横にサムネイルをずらりと並べるインターフェイスのギャラリー。 ■Callback for developers 進む戻るボタンなど様々な操作系をインターフェイスに表示させたインターフェイス。 上記のほかにも様々なオプションが設定されています。対応しているブラウザは以下のと

TOP  >  WebDesign  >  実用的なjQueryで作るスライダーをまとめた「28 Useful JQuery Sliders You Need To Download」 高機能で軽量なjavascriptライブラリjQuery。様々なプラグインがリリースされていて、現在では多くのWEBサイトで導入されています。そのなかでもよく見かけるのがスライダーを使った仕組み。限られたスペースで効果的に銃砲を見せることができます。今日はそんなスライダーをまとめたエントリー「28 Useful JQuery Sliders You Need To Download」を紹介したいと思います。 Animate Panning Slideshow with jQuery 単純に写真をスライドするものから、エフェクトを活かして作られたプラグインまで様々なjQueryスライダーが集められています。今

TOP  >  WebDesign  >  新しくリリースされたjQueryプラグインを集めた「10 New jQuery Plugins You Have to Know」 軽量で高機能なjavascriptライブラリjQueryその手軽さから、多くのWEBデザイナーに利用されており、世界中でそのライブラリを使い、様々なプラグインが開発されリリースされていますが、今回紹介するのは最近リリースされたjQueryプラグインを集めた「10 New jQuery Plugins You Have to Know」です。 Ajax Scroll スライダーから、ボタンエフェクトなどなど様々なプラグインが公開されていました。今日はそのなかから幾つか気になったものをピックアップしてご紹介したいと思います。 詳しくは以下 ■Animated Share Button 特定の要素を空間的に配置してグルグル

軽量で高機能なjavascriptライブラリjQueryその手軽さから、多くのWEBデザイナーに利用されており、様々な機能が開発され公開されていますが、今回紹介するのはドラッグして画像を回転できるjQueryプラグイン「jQuery Reel Plugin」です。 実際言葉だけではなかなか伝えづらいのでデモが配布元に公開されていましたので、デモをご覧になりたい方は「jQuery Reel Plugin」からどうぞ。こちらはクイックタイムのVRのように画像を回転させる事ができます。これによりプロダクトを様々な側面で見たり、パノラマビューを違う角度でみせたりなど、いままでFLASHなどを使わなければ実現できなかった表現が可能になっています。 詳しくは以下 あらかじめ割り振られたオプションの値などを変えれば様々な見せ方ができます。実際には大きな画像を読み込んで分割して見せているという形になります

多くのコンテンツを少ない面積で見せることができるアコーディオンによる見せ方は様々なWEBのシーンで使われていますが、今回紹介するのは、通常一方向だけではなく、縦と横、両方向に展開ができるjQueryを使ったアコーディオン「Grid Accordion with jQuery」です。 InfoGrid – DEMO 上記のように、多数のカテゴリーでコンテンツが多岐に渡る場合や表組みで、比較したいときなどは非常に便利な機能だと思います。 詳しくは以下 HTML側はdl、dt、ddで構成された非常にシンプルなものになっており、それおをCSSでデザインをし、jQueryで動きを動作するというものになっています。 ソースコード自体は非常にシンプルなものになっていますので、この手のライブラリをつかって何かを組み込んだことがある方なら問題なく実装できるかと思います。ソースファイルをまるごと収録したサンプ

グラフィックにしてしまえば簡単なグラデーション処理ですが、WEBのテキストデータのままグラデーションを実現しようとするとかなり大変です。そこでそんなグラデーション処理を可能にしてくれるのが、今回紹介するjQueryプラグイン「Fade colors using jQuery 」です。 指定した、idの内容のテキストデータの色の透明度を変更し、擬似的に徐々に消えていくような文字のグラデーション処理を実現しています。 詳しくは以下 上記のように更新情報のリストなどに使えば、どの情報が新しくて、どの情報が古いか分かりやすいく視覚的に判断することができます。派手な動きなどを実装するというわけではありませんが、ちょっとした部分で差を付けることができますね。 実装は比較的簡単で、基本的にはHTML側の記述は無く、ファンクションでパラメーターを表記する形になっています。配布元ではソースファイルのダウンロ

TOP  >  Design  >  商用可！3000枚以上の写真素材をダウンロードできる国内フリー写真素材配布サイト「Futta.NET」 WEBだけに留まらず、イメージを伝える為に必要不可欠な写真。的確に利用すれば伝えたい事はより伝わり、全体のイメージも形作れたりします。今日紹介するのは3000枚以上の写真素材をダウンロードできる国内フリー写真素材配布サイト「Futta.NET」です。 風景写真がメインで、外国と日本、観光名所と街中の風景、自然風景、洋風・和風等の高解像度画像が公開されていて、その他にも世界遺産都市、スイス・ドイツ、東京・沖縄、犬・猫・鳥・猿、ビーチ・バー、桜・梅、虹のある景色など特徴的な素材もあり、様々なフリー写真素材がカテゴリに分けられて収録されています。 詳しくは以下 カテゴリー海の場合。 サイズは大きいもので3264×2448pxで公開されており、様々な用途に耐

TOP  >  WebDesign  >  商用可も有り！アイコンセットをひたすらまとめた「More than 100,000 icons in one place」 クオリティの高いアイコンはデザイン度の完成度やユーザービリティを高めてくれます。今日紹介するのはフリーでダウンロードできるアイコンセットをまとめた「More than 100,000 icons in one place」です。 デスクプトップで利用するアイコンから、WEB制作の素材として使えるアイコンまで幅広いアイコンセットがまとめられています。数多くのアイコンが公開されていますが、今日はその中からいくつか気になったものをいくつか紹介致します。 詳しくは以下 ■Licence: 丸の中に描かれたミニアイコン。 Licence:Creative Commons (Attribution 2.5 Generic) ■Disco