ティザーサイトをはじめとして、公開前の期待感をどう作っていくかという部分も近年のWEB制作では求められる部分だと思いますが、今日紹介するのは設定した日時に向けてカウントダウンしてくれるカウントダウンティッカー「How to Code a jQuery Rolodex-Style Countdown Ticker」です。 非常にシンプルな構成と鳴っていて、日、時間、分、秒でカウントダウンを行ってくれます。 詳しくは以下 ティザーサイトにつけるだけで期待感をさらに演出してくれます。基本的にはHTMLで書かれていて、jQueryで動いていますし、ソースコードの解説も英語には鳴りますが、公式サイトに詳しく書かれており、WEB制作者であれば問題なく組み込む事ができると思います。 ソースコードも配布されておりますので、実装してみたかったという方は是非お試しください。 How to Code a jQu

TOP  >  Design , Photoshop  >  PhotoshopCS5を使いこなせるチュートリアルまとめ「30 Very Useful Photoshop CS5 Tutorials」 デザイン作業の必需品として多くの人に愛用されているPhotoshopは主に、画像処理などで利用されている場合が多いかと思いますが、膨大なPhotoshopの機能をフル活用できているか疑問を感じている方も多いのでは？そこで今回紹介するのが、PhotoshopCS5を使いこなせるチュートリアルまとめ「30 Very Useful Photoshop CS5 Tutorials」です。 Photoshop Quick Tip: Creating Depth of Field Using the Lens Blur Filter ロゴ制作やさまざまな効果をプラスできるチュートリアルが、豊富に紹介され

TOP  >  Design  >  立体感のあるUIが手軽に利用できるフリーUIキットまとめ「New Creative UI Kit Free Download」 webサイトやスマートフォン特有のUIデザインは、視認性とクリエイティブ性の両方が求められるクオリティのパーツ制作が必要不可欠となってきます。そこで今回は、立体感のあるUIを手軽に利用できるフリーUIキットをまとめた「New Creative UI Kit Free Download」を紹介したいと思います。 Simple UI Kit – Icon Deposit カラートーンの異なるUIキットが、いくつも紹介されています。中でも気になったものいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Vector UI Bundle – Icon Deposit シンプルなカラーリングのUIキットです。落ち着

TOP  >  Design , Photoshop  >  印象的な背景を作り上げるためのチュートリアル集「35 Awesome Photoshop Background Tutorials」 デザインをより印象的に、効果的に見せるためのグラフィック作りは、アイデア＋ハイレベルな制作技術が必要になってくる場合があります。そんな状況にきっと役立つチュートリアル集「35 Awesome Photoshop Background Tutorials」を今回は紹介したいと思います。 多彩な表現を可能にするphotoshopの機能を駆使し、さまざまな表現を可能にした実例が多数紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Photohop Tutorial Link: Create Special Color Effect in Photo

TOP  >  Design  >  使用頻度の高い 究極にシンプルなフリーテクスチャ集「30 Free Seampless Background Textures」 継ぎ目なく連続したパターンで使用できるテクスチャは、1枚の大きさを気にすることなく使用できるため、webの繰り返し処理を行う場面などで非常に重宝すると思います。そんな中今回は、シンプルかつシームレスなテクスチャ素材集「30 Free Seampless Background Textures」を紹介したいと思います。 いろいろなテイストにも柔軟に対応でき、おおいに活躍してくれそうな素材がまとめられており、日々のデザイン制作の定番アイテムとして是非覚えておきたい内容となっています。いくつか気になったものをピックアップしましたので、以下よりご覧ください。 詳しくは以下 ■等間隔にボコボコっとした、ダンボール紙を思わせるテクスチャ

ブラウザなどの制約によってまだまだ全ての現場で利用できるとは言いがたい状況ではありますが、国内でも徐々に利用されてきているHTML5。そろそろ手をつけようと思っているWEBクリエイターの皆様も多いと思います。そこで今回紹介するのはHTML5+CSS3を利用した汎用テンプレート「HTML5 Reset」。 こちらのテンプレートは基本的なCSS、リセットCSSなど非常に分かりやすい構成で組み込まれており、カスタマイズして利用したり、構造を学んだりすることができるようになっています。 詳しくは以下 こちらのテンプレートは2010年から公開がスタートし、バージョンアップが続けられれ、現在はV2としてリリースされています。 本を読み解いて覚えるのは確実ですが、時間がかかりますし、HTMLの基礎ができている方であれば、習うより慣れろで、こう行ったテンプレートを触っていったほうが、遥かに学習効率がよさそ

TOP  >  Design  >  フリーで利用できる種類の豊富な幾何学模様パターンまとめ「250+ Free Distinct Geometric Patterns」 デザインの質を高めてくれる背景パターンは、なるべく多くストックしておきたいもの。そんな中今回紹介するのが、フリーで利用できる種類の豊富な幾何学模様パターンをまとめた「250+ Free Distinct Geometric Patterns」です。 （Free seamless patterns Green, Pink 70s |） シンプルなパターンからギミックの繊細なパターンまで、さまざまな幾何学模様パターンが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Orange Discs | Pattern8 オレンジのグラデーションが美しいパターンデザイン

WordPressで構築されたシーンごとに利用しやすいマガジンテーマ集「20 WordPress Magazine Themes for Technology & Gadget Sites」 ブログやFecebook、SNSなど、インターネットを利用したさまざまな情報発信手段が展開されていますが、情報にぴったり合った体裁に整えることはなかなｋ難しく、オリジナリティのある情報発信の方法に悩んでいるという方も多いのではないでしょうか？そこで今回紹介するのが、WordPressで構築されたシーンごとに利用しやすいマガジンテーマをまとめた「20 WordPress Magazine Themes for Technology & Gadget Sites」です。 Aggregate WordPress Theme | Elegant Themes 配信する内容ごとに選びやすい、WordPressテ

TOP  >  Design , Photoshop  >  ドラゴンのイラストを手軽に描けるブラシコレクション「30 Collection of Dragon Photoshop Brushes」 今年の干支でもある龍(ドラゴン)は、世界中で神秘的な存在として人気があり、さまざまなデザイン制作に利用されています。しかし、躍動感のある動きの表現は難しく、デザイン制作には時間もかかるもの。そこで今回紹介するのが、さまざまなテイストのドラゴンを表現できるPhotoshopブラシをまとめた「30 Collection of Dragon Photoshop Brushes」です。 （draco brush by ~hanyasatu on deviantART） 手書きタッチの美しいドラゴンから、モチーフとしても使いやすいアイコン的なドラゴンまで、さまざまなドラゴンが表現できるブラシが紹介されて

TOP  >  WebService  >  webデザイン用のUIセットをまとめてダウンロードできる「Free download: Balio Web UI Kit」 webデザインでは、ユーザーがサイト内を遷移しやすいUI制作が重要。そんな中今回紹介するのが、デザイン感の統一されたUIセットをまとめてダウンロードできる「Free download: Balio Web UI Kit」です。 基本的なボタンデザインをはじめ、アプリストアリンクボタン・リボンデザイン・ログインフォーム・ページナビゲーション・グローバルナビゲーション・アンケート投票・ビデオやミュージックプレーヤーなど、webデザインに必要なさまざまなUIがセットになっています。 詳しくは以下 グレーとブルーを基調にしたシンプルなデザインで統一されたUIとなっており、それぞれのカテゴリーの中でもいくつかのデザインを選ぶことがで

TOP  >  Design  >  多彩な表現をイラストレーターで可能にするブラシセット「30 High Quality Adobe Illustrator Brush Sets」 イラスト表現に長けたソフト・イラストレーターは、デザイナーにとっては必須とされる技術でもあります。しかし、高度なイラストの作成は時に難しく、デザインの幅に行き詰まることもあるのではないでしょうか。そんな中今回紹介するのは、多彩な表現をイラストレーターで可能にするブラシセット「30 High Quality Adobe Illustrator Brush Sets」です。 （Free Illustrator Brushes and Vectors: Foliage | BittBox） さまざまなテイストやテーマのブラシが多数収録されています。中でも気になったものをいくつかピックアップしてみましたので、下記より

様々な解像度のデバイスが出まわっており、技術者側は日々その広がり続ける端末の解像度の多様化と向き合い、その端末に最適化したり、工夫したりして様々なプラグインや技術を編み出しリリースしていますが、今日紹介するのは、画面解像度を読取、それぞれの解像度に合わせたイベントを設定できるjQueryプラグイン「Breakpoints.js」 ブレイクポイントとなる解像度は数値で設定でき、それぞれ指定した解像度に合わせて、js側でイベントを分岐せることが可能です。 詳しくは以下 こちらのjsはjQuery用のプラグインとなっており、実装や記述もシンプルなものなので、気軽に利用でるものとなっています。 スマートフォン端末や、タブレット端末も同時に展開するコンテンツを考える際や、解像度を起点として、機能の振り分けなど、様々な可能性が広がる便利なjsだと思います。 Breakpoints.js – XOXCO

普段の生活の中でなかなか感じる機会の少なくなっている自然の雰囲気をデザインに取り入れることで、ユーザーにも自然の雰囲気を感じさせることができると思います。そんな中今回紹介するのが、さまざまな表情を持つ木のテクスチャを集めた「25 Handy Wood Textures」です。 （Wood Textures ver 1 by ~artbees on deviantART） 自然の雄大さを感じられるテクスチャから、CGで作られた人工的なテクスチャまで、さまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Old Wood Textures Pack 1 by *Pixeden on deviantART 年季の入った木のテクスチャセットです。そのまま素材として利用したり模様を抽出したりと、多用途に利用できるというのが嬉

TOP  >  Design  >  コンクリートのさまざまな表情を利用したテクスチャパック「70 Concrete Texture Packs」 コンクリートのテクスチャは、無機質な印象でありながらも、使い方次第でいろいろなデザインに幅広く活用できる素材として重宝されています。今回はそんなコンクリートのさまざまな表情を利用したテクスチャパック「70 Concrete Texture Packs」を紹介したいと思います。 （Freebie: Concrete and Pavement Texture Pack – DesignM.ag） シンプルな定番タイプから、使い込まれ味わいが感じられるタイプなど、ジャンルは一つでも、たくさんの種類のテクスチャが収録されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Free » Concrete Te

TOP  >  Design , Photoshop  >  日本のさまざまな模様を描けるPhotoshopブラシまとめ「20 Sets of Japanese-Themed Photoshop Brushes」 世界からも高い評価を受ける日本の古き良きデザインは、和を基調としたデザイン制作の必須アイテム。そこで今回紹介するのが、桜や紋など、日本を象徴する模様を描けるPhotoshopブラシをまとめた「20 Sets of Japanese-Themed Photoshop Brushes」です。 （Cherry blossoms PS brushes by =Lileya on deviantART） 日本らしさを感じるブラシが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Sakura Brushes by ~Er

TOP  >  Design  >  子ども向けのデザインにぴったりなフォント集「35 Free Kid Fonts Themed to Download」 独特な世界観のある子ども向けのデザインは、可愛らしく楽しめるような細部にわたる演出が重要です。そこで今回紹介するのが、子ども向けのデザインに使いやすいフォントばかりを集めた「35 Free Kid Fonts Themed to Download」です。 装飾がユニークなフォントから、手書き風の可愛らしいフォントまで、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■101! Alpha Pikture ‘Bet font それぞれのアルファベットを頭文字に使っているアイテムが、手書きのイラストで描かれたフォントです。 ■Gretoon Font |

アナログテイストなスタンプを表現できるPhotoshopブラシまとめ「High Quality Stamp & Post Mark Photoshop Brushes」 手軽にアンティークな雰囲気を演出できるスタンプ素材は、デザイン制作で利用することも多いはず。そこで今回は、アナログテイストなスタンプのPhotoshopブラシを集めた「High Quality Stamp & Post Mark Photoshop Brushes」を紹介したいと思います。 （PSD TO XHTML） スタンダードなスタンプ素材はもちろん、レトロテイストな素材など、さまざまなPhotoshopブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■PSD TO XHTML 時代を感じられるスタンプばかりを集めたブラシセットです。ブラシとして

TOP  >  WebDesign  >  季節を感じられる枯れ葉や落ち葉のフリーテクスチャまとめ「55 Free Design Gripping Dried Leaf Textures」 植物等の季節感があるテクスチャは、デザイン制作のマストアイテムとしてアーカイブしておきたいもの。そこで今回は、さまざまな種類の枯れ葉や落ち葉テクスチャを集めた「55 Free Design Gripping Dried Leaf Textures」を紹介したいと思います。 （Dry leaves Texture by ~KillerRu on deviantART） かさかさ良い音が聞こえてきそうなテクスチャから、イメージ性の強いテクスチャまで、さまざまなテクスチャが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Free High Resolu

制作には非常に便利なjQueryプラグイン、世界中で利用されているだけに、日々、様々なjQueryプラグインがリリースされています。今日紹介するのは2011年に公開されたjQueryプラグインを寄りすぐったまとめ「Best jQuery Plugins of 2011」です。 Isotope 様々なjQueryプラグインが公開されていますが、今日はその中から気になったプラグインを紹介したいと思います。 詳しくは以下 Sausage 長いページを分断して、メニュー化してくれるjQueryプラグイン arbor.js 相関的にオブジェクトを見せられるjQueryプラグイン。空間感がある動きも特徴的です。 Supersized フルスクリーンで展開するサイトを構築できるjQueryプラグイン 様々な表現を実現できるjQueryプラグイン。WEB制作の現場にいる方は是非どうぞ。WEB制作には欠かせ

様々なデバイスが出現してきており、WEBサイトもその環境を考慮した制作を求められており、制作側もどんな端末でも快適に閲覧できるレスポンシブなレイアウトが広まりつつありますが、今日紹介するのはレスポンシブなWEB制作のためのCSSフレームワークのまとめ「15 Responsive CSS Frameworks Worth Considering」です。 Less Framework 4 様々な端末に対応したフレームワークが多数まとめられていますが、今回はその中からいくつか気になったフレームワークをピックアップをして紹介したいと思います。 詳しくは以下 Foundation 12カラムで構成されたレスポンシブなフレームワーク。背景も端末に併せて縮小されます。 Skeleton 真っ更なレスポンシブなフレームワーク。 Amazium ブラウザサイズによってレイアウトが組み変わるレスポンシブフレー