価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」
TOP > WebDesign > 価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」 WEBサービスでよく見かける、サービスの形態ごとの価格表、そのプランで何ができるのか？いくら位の差があるのかというのを一瞬で見分けられるように整理されており便利でスタンダードなデザインですが、これがいざ作るとなるとなかなか難しく苦労したというデザイナーの方も多いのではないでしょうか？今日紹介するのは価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」です。 Spotify 全部で21もの価格表がまとめられたています。今日はその中から気になったものをいくつかピックアップして紹介したいと思います。 詳しくは以下 Treehouse できることが明快で、比較
ユーザーインターフェースを作るのに便利なpsd素材まとめ「Best Free UI PSDs of 2011」
WEBを制作をする際にphotoshopを利用しているというクリエイターも多いと思います。今日紹介するのは、WEB生徒のインターフェースをつくるのに便利なpsd素材を集めたエントリー「Best Free UI PSDs of 2011」 を紹介したいと思います。 Classic Grey Psd Web UI Set グローバルナビからラベル、ボタンなどなど、様々なインターフェースのための素材がまとめられていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Retro Web Ribbons Vintage Pack ちょっとレトロのリボン素材の素材。 Moonify UI よく使うUIを詰め合わせたユーザーインターフェース素材パック。 Vertical Navigation Menu スマホやタブレットでも使いやすいリスト形式のユーザー
記事の閲覧数を表示してくれるプラグイン「WP-PostViews」
記事が増えてくると当然人気がある記事、無い記事とあるわけで、運営者サイドとしては非常に記事の人気が有る無しは気になる所です。そこで大体の人気の目安として活用できる、記事の閲覧数を表示してくれるプラグイン「wp-postviews」を今回紹介したいと思います。 投稿した時期や話題によっても異なるので完全にこれで人気を測る事はできないかもしれ舞えんが目安には指標には十分なってくれると思います。 インストール方法 1.「wp-postviews」よりプラグインをダウンロード 2.解凍してできたフォルダごと「wp-content/plugins/」へアップロード 3.[wp-postviews]を有効化 導入方法は以下から 導入方法 閲覧回数を表示させたい場所に下記のコードを挿入します。 < ?php if(function_exists('the_views')) { the_views();
HTML5で作られたビデオプレイヤー集「10 Best HTML5 Video Player」
次世代の言語として期待されているHTML5、すでにスマートフォン関係の標準ブラウザで対応し始めていることもあり、利用したことが有るという方もWEB制作者であれば多いのではないでしょうか？今日紹介するのはそんなHTML5で作られたビデオプレイヤーをまとめたエントリー「10 Best HTML5 Video Player」です。 FryPlayer – HTML5 Video Player 全部で10種類のHTML5で作られたビデオプレイヤーがまとめられていましたが、今日はその中から幾つか気になったものを紹介したいと思います。 詳しくは以下 ■LeanBack Player モバイルを始め、多くのブラウザで対応可能なビデオプレイヤー ■MediaElement.js- HTML5 Video Player オーディオのみの再生も可能なメディアプレイヤー。 ■Flare Vide0 – HTML
iphoneアプリを始めとした、モバイルのためのUIデザインパターン集「Mobile UI Patterns 」
TOP > WebDesign > iphoneアプリを始めとした、モバイルのためのUIデザインパターン集「Mobile UI Patterns 」 国内でも数多くの機種がリリースされ、普及の兆しを見せてきているスマートフォン。それに伴い多くのコンテンツが制作されてきています。今日紹介するのはそんなモバイルコンテンツの様々なパーツデザインを集めたUIデザインパターン集「Mobile UI Patterns 」。 スプラッシュ、フィード、ユーザープロフィールなどなどモバイルのアプリやWEBサイトに欠かせない、様々なデザインが収録されています。 詳しくは以下 ■Splash Screens 様々なアプリのスプラッシュがスクリーンショットで集められています。 ■Comment Detail ユーザーからのコメントも様々な見せ方があります。 ■Lists 多くのコンテンツを見せるときに利用
WEB制作で使えるJavascriptを使わない制作テクニック集「32 Javascript Alternatives with Pure CSS – Updated」
WEB制作で使えるJavascriptを使わない制作テクニック集「32 Javascript Alternatives with Pure CSS – Updated」 様々なWEBサイトで利用されているjavascript。様々なライブラリなども開発され幅広い表現が可能になっていますが、今日紹介するのはJavascriptを使わない制作テクニックを集めた「32 Javascript Alternatives with Pure CSS – Updated」です。 CSS Image Maps: A Beginner’s Guide | Noobcube マップ、グラフなどを始め、様々なテクニックがまとめられています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■NealGrosskopf.com l Create a JQuery Cont
WEBデザインとアプリデザインのためのフリーUIパッケージ「18 free UI elements packs for your web designs and apps」
WEBデザインとアプリデザインのためのフリーUIパッケージ「18 free UI elements packs for your web designs and apps」 インターフェイスを製作するときに時間を節約しながら、クオリティを保ちたいときに、ユーザーインターフェイスに必要なパーツをパッケージした素材が便利です。今日紹介するのはWEBデザインとアプリデザインのためのフリーUIパッケージを集めたエントリー「18 free UI elements packs for your web designs and apps」です。 Modern Web UI Set 様々なタイプのUIの素材が用意されていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Mobility: set of mobile UI elements アプリケーショ
ソース付き！HTML5を学ぶためのチュートリアル10選「10 Cool and Useful HTML 5 Tutorials」
TOP > WebDesign > ソース付き！HTML5を学ぶためのチュートリアル10選「10 Cool and Useful HTML 5 Tutorials」 開発者の間では次世代の規格として注目を集めているHTML5。まだまだブラウザも対応していない部分もあり商業デザインではなかなか使いづらいところもありますが、従来のHTMLと比べてかなり表現できる幅が広く、確実に今後WEBデザインの世界では必要となってくるものだと思います。今日紹介するのはそんなHTML5を学ぶためのチュートリアル10選「10 Cool and Useful HTML 5 Tutorials」です。 Design & Code a Cool iPhone App Website in HTML5 レイアウト的なものからJSと組合わえたものまで様々なHTML5のテクニックが学べるチュートリアルがまとめられて
目新しいハイクオリティなフリーフォント集「9 New High-Quality Free Fonts」
TOP > Design , Font > 目新しいハイクオリティなフリーフォント集「9 New High-Quality Free Fonts」 デザインに重要なフォント。フォントの選び方でデザインの印象はガラリと変わります。毎日数多くのフォントが公開され、世界中で多くのフリーフォントが制作され利用されていますが、今日紹介するのは比較的新しく作られたハイクオリティなフォントを集めたエントリー「9 New High-Quality Free Fonts」です。 Roke 1984 少し変わったフォントから王道なものまで、様々なフォントがまとめられています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Yellow Cream ラフな線と曲線が可愛らしいフォント。ポップなイメージでデザインしていきたい時に。 ■Skyhook Mono
CSS3で作るアナログ感たっぷりの立体ボタン「BonBon Buttons – Sweet CSS3 buttons」
WEB制作業界ではすっかりおなじみのキーワードとなってきたCSS3。ブラウザの対応も進んでいて、そろそろ手を付けていこうというかたも多いかと思います。今日紹介するのはCSS3を駆使して、立体的でアナログ感のあるボタンを作るプロジェクト「BonBon Buttons – Sweet CSS3 buttons」です。 シャドウと立体感と角丸などCSS3ならではの機能をふんだんに利用してボタンを作っています、見た目だけではなくて、クリックした時の動作感などもこだわっていて、表現だけではないリッチなボタンになっています。 詳しくは以下 ボタンの紹介だけではなくて、実際のソースファイルがダウンロードできるようになっていますので、コードをみながらどのように作られているのか、どんなパラメーターが見た目に寄与しているのかなどを確認しながら学ぶことができます。 開発者にとっては面白い教材なのではないでしょう
CSS3で実現する今までに無いWEBデザイン集「25 Amazing CSS3 Experimentations and Demos」
TOP > WebDesign > CSS3で実現する今までに無いWEBデザイン集「25 Amazing CSS3 Experimentations and Demos」 対応ブラウザも徐々に増えてきて、ますます注目を集めるCSS3。様々な可能性を持っています。CSS3独自の機能も多く、その分様々な利用方法が日々考えられ、デモが作成されていますが、今回はCSS3で実現する今までに無いWEBデザイン集「25 Amazing CSS3 Experimentations and Demos」というエントリーを紹介したいと思います。 Look Ma, No Flash! 上記の他にも様々なCSS3を利用したクリエイティブなWEBサイトが構築されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Pure CSS3 Page Flip E
商用可！5000を超えるシルエットベクターデータ配布サイト「All Silhouettes」
TOP > Design , vector > 商用可！5000を超えるシルエットベクターデータ配布サイト「All Silhouettes」 様々なデザインシーンに使えるシルエット素材。単純で、曖昧なので、どんなデザインにも合わせる事ができますし、背景だったりアクセントだったり使い勝手も非常に良い素材の一つですが、今回紹介するのはそんなシルエット素材を集めたWEBサイト「All Silhouettes」です。 全部で5000を超えるシルエットが88にも及ぶパックで公開されています。種類は様々で、動物から人間、機械、矢印と様々なシーンのシルエットが公開されています。 詳しくは以下 上記は今最も人気のシルエット素材。人物のシルエットがやはり人気が高いみたいですね。デザイナーだけでなく、企画書を書いている方にも良い素材なのでは無いでしょうか！？ ライセンスは「You are free t
WEBデザインに役立つ手書きで使えるワイヤーフレームテンプレート「10 Free Printable Web Design Wireframing Templates」
WEBデザインに役立つ手書きで使えるワイヤーフレームテンプレート「10 Free Printable Web Design Wireframing Templates」 WEBデザインをする際、どのような手法で行っているでしょうか？人それぞれだとは思いますが、多くの場合はいきなり作り始めるのではなく、構想をまとめてラフに落とし込む場合が多いとは思います。今回紹介するのはラフを制作するのに便利な手書きで使えるワイヤーフレームテンプレートをまとめたエントリー「10 Free Printable Web Design Wireframing Templates」です。 960 grid template プリントアウトしてそこに書き込んでいけるような様々なテンプレートが多数集められています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Paper
フォームをスライダーでわかりやすく「Fancy Sliding Form with jQuery」
WEBの欠かせない要素の一つフォーム。お問い合わせから、アンケートまで、様々な情報をユーザーから取得する際に利用されていますが、項目や、表示の仕方によっては、面倒な印象を与え、思ったように情報が得られなかったりしますが、今回紹介するのは質問項目のカテゴリーごとにスライド表示でフォームを表示できる「Fancy Sliding Form with jQuery」を紹介したいと思います。 実際に動作しているデモは「Fancy Sliding Form with jQuery」をご覧下さい。単純にスライダー表示させているだけでなく、スライダーを動かした段階で、入力項目がキチンと入力されているかどうかの判定も行えるみたいです。 詳しくは以下 実装は比較的簡単で、サンプルファイルが一式サイトからダウンロードできますので、WEB制作をされている方なら実装はそこまで難しくないと思います。デザインはCSSで
IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」
TOP > WebDesign > IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」 WEBサイト構築においてもはや常識となったCSS。新たな仕様のCSS3が整備されつつあり、表現の幅をさらに広げてくれるものになっていますが、最新のブラウザのみ対応しており、IE6のようなシェアがある旧世代のブラウザは対応していないというのが現状です。そこで今日紹介するのはIE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」です。 全てのCSS3のプロパティが適応されるのではなく、角を丸くしたり、ボックスに影を入れたりテキストに影を入れたりといったCSS3の機能をスクリプトにｙほって再現するというものです。 詳しくは以下 スクリプトを読み込ませると言
商用可！Twitterアイコンセット「50 Free and Exclusive Twitter Icons」
TOP > WebDesign > 商用可！Twitterアイコンセット「50 Free and Exclusive Twitter Icons」 最近は様々なメディアで再度注目を浴びているTwitter。話題になっているのでTwitterを始めたと言う方も多いかと思います。今日紹介するのは様々なTwitterアイコンを集めたフリーアイコンセット「50 Free and Exclusive Twitter Icons」です。 上記のようなアイコンが収録されていて、クオリティが高く、立体的なもの、モチーフを使ったもの、アップル製品を使ったものなどなどバライティーに富んだものになっています。 詳しくは以下 WEBやブログなどでTwitterをやっている事の告知のためだったり、Followを促すためになど用途はそれぞれだと思いますが、アイコンは個人用と、商用目的問わず利用可能ということで
ページナビゲーションを拡張してくれるWPプラグイン「WP-PageNavi」
通常のWordPressのページナビゲーションは「« Previous Page Next Page » 」として表示され、今何ページ目にいてどのくらい続きがあるかが直感的に分かりません。 そこでそんなインターフェイスの不便利を解決してくれるのが今回紹介するプラグイン「WP-PageNavi」です。 プラグインを導入すればページナビゲーションが上記のように表示され、今何ページ目にいるのかが瞬時に分かるようになります。ほんの少しの事ですが、閲覧する側を考えれば当然の配慮かと思います。 インストール方法 １．WP-PageNaviからプラグインをダウンロード 2.ローカルで展開後フォルダごと「wp-content/plugins」へアップロード 3.「WP-PageNavi」プラグインの有効化 以上です。 これだけではページナビゲーションは反映されませんので下記の手順を踏んでください。 導入方
フリーで使えるミニマムアイコンセット「14 Free Mobile Application Development Icon Sets」
TOP > Design , vector , WebDesign > フリーで使えるミニマムアイコンセット「14 Free Mobile Application Development Icon Sets」 様々な事柄をシンプルな絵で表してくれるアイコン。WEB制作やアプリケーションのインターフェイスにはとても便利に使えます。今日紹介するのはフリーで使えるシンプルなアイコンセットを集めた「14 Free Mobile Application Development Icon Sets」を紹介したいと思います。 Free iPhone Toolbar Icons (PixelPressIcons) 原文ではモバイルアプリケーション開発のためのとなっていますが、十分普段のWEB制作にも使えそうなフリーアイコン集だと思います。いくつかまとめられていますが、今日はその中からいくつか気にな
便利に使えるイラストレーターパターン集「30+ Free Adobe Illustrator Pattern Sets」
TOP > Design , vector > 便利に使えるイラストレーターパターン集「30+ Free Adobe Illustrator Pattern Sets」 グラフィックの制作で必須とも言えるデザインツールイラストレーター。多くの人が利用しているかと思いますが、今回紹介するのは便利に使えるイラストレーターパターン集「30+ Free Adobe Illustrator Pattern Sets」です。 幾何学的なパターンから、POPなもの、レトロなものなどなど様々なパターンが集められています。今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■Halftone Madness ハーフトーンなパターンをあつめたパターンセット。写真の上から、グラフィックの上から、または背景にと様々な使い道がありそうです。 ■25 Woven Plaid Swat
クリエイティブでユニークなフリーフォント「20 Creative and Unique Typefaces」
TOP > Design , Font > クリエイティブでユニークなフリーフォント「20 Creative and Unique Typefaces」 フリーで使えるクリエイティブなフォントについてはいままで多々Designdevelopで紹介してきましたが、今回紹介する「20 Creative and Unique Typefaces」はその中でもユニークな特徴のあるクリエイティブなフリーフォントを集めたまとめエントリーです。 上記はフォントは「Laurent HW」走り書きのような表現を実現する手書きフリーフォント。手書きの味がよく表現されたフォントです。上記の他にも全部で20個のフォントが公開されていますが、今日はその中からいくつか気になったフォントを紹介したいと思います。 詳しくは以下 ■Cube 3次元で表現されたフォント。通常のフォントにはない表現が可能です。 ■Ge
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
