スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ。 「スマートフォン向けサイトの作り方エントリのまとめ」にてスマフォ用サイト作りの基本はまとめましたが、実際にデザインする際の参考になりそうなギャラリーサイトやブログエントリをまとめてみました。 インタフェースの研究ということで、サイトデザインのみではなくアプリのデザインギャラリーも紹介。 ギャラリーサイト CSS iPhone 様々な海外ポータルやデザインサイトのiPhone向けサイトをサムネイル付きで紹介。 どのサイトもよくデザインされており、非常に参考にできる部分が多そうです。 iOSpiration iPhone Web Design Inspirations - iPhone and iPad Design Inspiration iPhone/iPadサイトやiPhone/iPadアプリ・ゲームのデザインギ

Choco-Slider | A very tasty jQuery Plugin 軽量(7KB)でいい感じの画像スライダー実装jQueryプラグイン「Choco-Slider」のご紹介です。 実際のスライダーは次のような感じ。 画像切替の際のアニメーションはチョコをかけるような効果でいい感じに動きます。 画像の説明を画像下にテキストで入れることも可能です。予めULリストで定義しておきます。 １つの選択肢として覚えておいてもいいですね。 関連エントリ 軽量のイメージスライダー実装jQueryプラグイン「Orbit」 jQueryとCSS3で作るカラフルなスライダーウィジェット jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル JavaScript製の画像スライダー・ギャラリーいろいろ

WanderWall ? A jQuery, CSS3 & HTML5 Hover-Based Interface | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3、HTML5でここまで出来るホバーインタフェース。 jQueryで様々なことが出来るようになっているのはご存知だと思うのですが、更にCSS3とHTML5も組み合わせるともっとすごいよ、という１つのデモです。 まだまだインタフェースは進化するのだな、という可能性を感じるものになっているので一回見ておいたらよいかも。 WanderWallのデモ とにかく実際にHTML5対応のブラウザで見てみもらうのが一番分かりやすいです 上のメニューにカーソルを合わせると画面がアニメーションしながらクールに切り替わります。 HTML5ブラウザがデフォルトになり、こうした技

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B

Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling | DevSnippets CSSオンリーでJSを使った風のよく使われるテクニック集１０。 よく使われているかどうかは実際はよくわかりませんが、ピュアCSSということでなかなか凄いテクニック集がまとまっています。 我こそはCSSマスターという方は覚えておいてもよさそうです。 写真ギャラリー カーソルを合わせると拡大するアイコン アニメーションするコンテンツスライダー アニメーションするプログレスバー ピュアCSSなLightBox かなり色々なテクニックがなされているようですが、実用的なものが多いですね。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 ピュアCSSで実装された吹き出しのデザイン例色々 クリーンなデザイ

30 Clever, Creative Logos ? DesignM.ag シンプルだけどアイデアあふれるクリエイティブなロゴ集がまとまって公開されています。 えー、こんなアイデアが、というようなシンプルだけど、なるほどなと思ってしまうロゴが沢山です。 ecoboxということで箱とエコをかけあわせて、葉っぱをベースに箱を形作っている例 Moviemagazineということで、映画のフィルムと本をかけあわせた例 モバイルと携帯の画像をあわせてMETROMOBILE。どっちにも見えるところがナイス ハート型のクリップ。なんともスマート backspaceのaが消えていてbckspace。なんともいえないセンスを感じます。 といった感じで見ているだけで感心する物ばかりです。 ロゴ作成時のヒントとして覚えておいてもよさそうです。 関連エントリ ロゴデザインやタイポグラフィの見本や資料まとめ集 ロ

テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」 2010年03月25日- jQuery Plugin: Give Your Characters a NobleCount The Product Guy テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」。 今、テキストエリア内に何文字はいっているのか？というのは、文字数制限をしているフォームにとっては重要なユーザビリティになりますね。 送信ボタンを押した後に、文字数オーバーです、というのは不親切ですしサーバに無駄なリクエストが増えることになります。 Twitter では残り文字数を表示していますが、これをjQueryで１行で実装してしまえるのがこのプラグイン。 $(element).NobleCount('#ta

Best jQuery plugins for Twitter integration | AjaxLine サイトにTwitterの機能を組み込むためのjQueryプラグイン集。 Twitterの勢いがまだまだ衰えませんが、それにともなってサイトにTwitterの機能を実装したいというニーズも高まってきているのではないでしょうか？ そんな際に便利に使えるプラグイン集です。 Twitterのサイトが落ちた時にサイトが重くなってしまうという点に注意して使いたいですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 ajaxファイルアップロードに使えるjQueryプラグインいろいろ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」

Chat2: Group Chat Room with PHP, jQuery, and a Text File | CSS-Tricks PHPとjQueryで作るAjaxなグループチャットスクリプト作成のチュートリアルとデモプログラムがそのままダウンロード出来るエントリのご紹介。 クールなajaxチャットルームを設置したい、という方は参考にできそうです（ちゃんと使いたい方は中身のコードを一応チェックした方がよいと思います） チャットはAjax形式でなかなか軽快に動作します。UIもいい感じです。 関連エントリ PHP+Ajaxなチャットスクリプト：YShout Ajax+PHPなチャット: Shoutbox

CSS3を使った凄いアニメーション集４７ CSS3を使った凄いアニメーション集がまとまったエントリが公開されています。 注意点としてCSSだけで実現しているわけでなく、jQueryなども使っている部分があります。 ただ、こういうことも出来るのか、という物が沢山で見ていて楽しく学習できます。 CSS3/jQuery Clock 一見Flashかと思えるような綺麗な時計のサンプル Multiple 3D Cubes with animation using CSS 3Dのキューブがなめらかにアニメーションします。 CSS3 Matrix Animation マトリックスアニメーション OS X Dock Mac OS X風になめらかに動作するドック 今の時期だと、CSS3で出来ることはまだ出尽くしていないと思うので、驚きのエフェクトを作れば世界をワッと驚かせることが出来るかもしれませんね。

How To Create Depth And Nice 3D Ribbons Only Using CSS3 | PV.M Garage CSS3で立体的な3Dリボンを作成するチュートリアルです。次のような立体的な帯を実装することができます 各ブラウザによるレンダリング結果も掲載されていて、CSS3対応ブラウザによって若干レンダリング結果が違うようですが崩れず表示されるみたいです。 次世代のために覚えておくと良いテクニックかもしれませんね。 関連エントリ 便利なＣＳＳテクニック３０選 CSSリストに関する5つのテクニック集 これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック

最近見つけたWEBデザイン作成チュートリアル集のご紹介です。 ユニークなデザインから、クールなデザインまで、色々とあってデザインの際の参考にどうぞ。 Create a Clean and Colorful Web Layout in Photoshop | Grafpedia Design a colorful theme for wordpress | Grafpedia Photoshop Tutorials - HV-Designs.co.uk Create a nature inspired layout in photoshop | Grafpedia Photoshop tutorial to create an website layout inspired by apple.com | Grafpedia Learn how to design a car dealer w

そのまま使えるウェブサイトテンプレートのPhotoshopファイルが４０種類まとまっているエントリのご紹介。 ハイクオリティなウェブサイト用のテンプレートがPhotoshopのレイヤー付きでＤＬ可能です。 ダウンロードしたPhotoshopファイルは以下のようにちゃんとレイヤーに分かれてるので、変更して独自に修正することも可能です。 実際のデザインは以下。どれもかなり力の入っているもので素晴らしい限りです。 リンク先は以下のエントリを参照してください。 40 Free PSD Website Templates - slodive 関連： フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集

Photoshoptimizeというサイトにパフォーマンス改善のためのTIPSが載っていました。 古いPhotoshopだと場所がちょっと違いますが、簡単にメモしてみました。 パフォーマンスは上がるかもしれませんが、利便性は下がってしまう可能性があるので注意してください。 「編集」→「環境設定」→「パフォーマンス」で「キャッシュレベル」を 1 にする 「編集」→「環境設定」→「パフォーマンス」で「ヒストリー数」を少なめにする レイヤーパネルの、「パレットオプション」で、サムネイルサイズを小さくor無しにする 「編集」→「環境設定」→「ファイル管理」で「プレビュー画像」の部分を「保存しない」に設定 「編集」→「環境設定」→「テキスト」で「フォントプレビューのサイズ」のチェックを外す 「編集」→「環境設定」→「一般」で「クリップボードへ転送」のチェックを外す 普段何気に使っているPhotosh

CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与