なかなか凄いサイトです。なんとなく減って きている印象のFlashサイトではありますが、 部分的なコンテンツ、例えばスライドやギャ ラリー、バナーなどはまだまだ高い需要を 誇ります。このFlashXML.netでは、このよう なギャラリーやメニューをGPLで無料配布 するWebサービスです。カスタマイズも可。 ちょっと今まで見たことの無いタイプのWebサービスだったのでメモ。僕が見たこと無いだけかもしれませんけど。 FlashXML.netでは、大量のXMLイメージギャラリーやスライド、ミュージックプレイヤー、メニューなどをカスタマイズしてDLする事が出来ます。GPLで配布されているので商用でも使えますが、サイト名が埋め込まれていますので外したい場合は数ドル払うようです。 カスタマイズはデモ下部のSettingにて行います。項目はコンテンツによって変わりますが、基本的には設定し、GENER

急に流行ってきましたね、Facebook。 せっかくなのでFacebookを楽しむ時 に役に立つかも知れない記事とかTips などの記事をまとめますのでご覧にな ってはいかがでしょう。役に立つかは 分かりませんけど、僕には役に立ちま した。 という訳でFacebook関連の活用記事とかです。今のFacebookブームの火付けになった記事っぽいのは割愛してます。 順不同です。 Facebookの使い方 基本的な使い方。僕が使い始めた頃、同じ時期に始めた方の9割は「良く使い方が分からない」でした、そういえば。今は分かりやすくなったみたいですね。 Facebookの使い方 Facebook の使い方、マニュアル（日本語） FBの使い方サイトですね。 Facebook の使い方、マニュアル（日本語） Facebookを始めよう！Facebook初心者のための10ステップ+α ここ凄い分かりやすいで

An Illustrator Wireframing Toolkit | eleqtriq iPadやスマホのテンプレが詰まったイラレ用のワイヤーフレーム作成キット。 次のようなデザインのワイヤーフレーム作成キットが公開されています。 イラレなので拡大してもクオリティは損なわれないところがメリットですね。 iPad、スマホだけではなく通常のPC用も含まれているので幅広く使えそうです。 紙に印刷してハイクオリティな資料をサクッと作る場合に活用できるかも。 関連エントリ WEBサイトのクールなワイヤーフレームを作成する際に使えるPSD オンラインでワイヤーフレームが描画できる「HotGloo」がかなり便利

CSS3 Compatibility Tools, Resources and References for Internet Explorer :Speckyboy Design Magazine IEでもCSS3を使うためのツールやリソース集がまとまっているエントリのご紹介。 CSS3使いたいけどIEがネックという場合に使えるライブラリやリソースです。 「これ、CSS3でやったら数行なんだけど」という便利なCSS3なわけですが、各種ライブラリを導入することでIEでも使えます。 2010年9月時点でも色々な便利なものが出回っているようで覚えておいて損はなさそうです 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3ツール6つ＋α ピュアCSS3で3Dアニメーション IE6-8でもCSS3が使えるようになる「CSS3 PIE」

特定サイトのHTMLをWebKitベースのレンダリングでPDFに変換できるPHPエクステンション 2010年09月17日- Convert HTML to PDF in PHP (libwkhtmltox extension) | Perplexed Labs 特定サイトのHTMLをWebKitベースのレンダリングでPDFに変換できるPHPエクステンション。 wkhtmltopdfというコマンドラインのツールがありますが、これをPHPから使えるPHPエクステンションがGitHubにて公開されています。 このエクステンションをインストールした後、次のようなwkhtmltox_convertという関数が使えるようになっているのでそれで変換出来るみたい。 <?php wkhtmltox_convert('pdf', array('out' => 'test.pdf', 'imageQuality

27 Creative And Beautiful CSS Websites Designs For Inspiration クリエイティブなデザインのCSSサイト２７がまとまったエントリのご紹介。 綺麗なサイトが満載でインパクトの強いサイト作りの参考にできそうです。 関連エントリ CSSでデザインされたiPhoneサイトのまとめ「CSSiPhone」 一流のサイトデザインを一から作成する手順集 シンプルだけど、クールなデザインサイト集 白黒のクールなサイトをデザインする際に参考になる30選

「JEWEL BEAT」はロイヤリティーフリーでいろんな場面に使えそうなBGM素材サイトです。 製品や広告、教育、動画、写真などなど幅広く使える音源がたくさんあります。 YouTubeに音源と合う動画もアップされています。 ダウンロードできる音源は短いですが、繰り返し再生に対応していて、途切れなくBGMが続けられます。 無料で利用できますが、「http://www.jewelbeat.com/」の音源使いましたと明記しておきましょうね。 以下に使ってみた様子を載せておきます。 まず「JEWEL BEAT」にアクセスしましょう。 するとこのようにYouTube動画がたくさん並んでいます。 これらに使われている音源がダウンロードできます。 ダウンロードはリンクを右クリックして保存すればOK。 WAVE形式の音源がゲットできます。 けっこうたくさん音源は用意されていますので、素材探しにはもってこ

Thank you for being patient. We are doing some work on the site and will be back shortly.

How to: Automatically notify your members on new posts WordPressで記事投稿時にメンバーにメールで記事をお知らせするスニペットが公開されています。 頻繁に投稿されるようなブログでは迷惑な通知となってしまうかもしれませんので配慮が必要そうですが、更新を知らせる１つの方法として使えるかもしれません。 同じように、add_actionを使って投稿時のアクションを独自に書く事が出来ますね。 関連エントリ かなり美麗なフリーのWordPressテーマ60 jQueryベースの使えそうなWordPressプラグインいろいろ iPhone等のモバイルデバイス向けWordPressテーマ色々 黒ベースのハイクオリティなWordPressテーマ集２０

20 Excellent Free Corporate WordPress Themes | VisonwidGet 会社でも使えそうなWordPressテーマ２０。 企業ブログを構築する際の参考や、自分の会社のブログを立ち上げたいけど安価で品質の高いものを作りたいという場合に参考にできそう。 種類も色々あるので様々な業態の企業をカバーすることもできそう 関連エントリ かなり美麗なフリーのWordPressテーマ60 iPhone等のモバイルデバイス向けWordPressテーマ色々 黒ベースのハイクオリティなWordPressテーマ集２０

7 Wordpress Themes for Launching your Minimum Viable Product | Methodologist iPadやiPhoneアプリ等の開発ブログとして使えそうなクールなWordPressテーマ。 気合の入ったアプリをカッコよくPRしたいという場合に使えそうなテーマです。開発者ブログとしても動作するのでアプリ用のWEBサイトをWP＋これらテーマで実装しちゃうのも手間が少なくかつクールにPRできる１つの手段として使えるかも。 関連エントリ iPhone等のモバイルデバイス向けWordPressテーマ色々 iPhoneの標準アプリアイコンをピュアCSSで描画したサンプル

16 Top Social Bookmarking Plugins for Wordpress | BloggingPro ソーシャルブックマーク連携のためのWordPressプラグイン１６。 次のような、ソーシャルブックマーク連携を簡単に実現してしまうプラグイン集です。 英語圏での利用に特化されているようですが、カスタマイズすることで日本のはてなブックマークなんかにも簡単に対応できそうです。 こうした面倒なことはWordPressにやってもらい、肝心の記事作成にリソースを注ぎたいところですね。 関連エントリ WordPressプラグイン作成用コードテンプレート WordPressの便利プラグイン他、チートシートやテーマ作成リファレンス等フレッシュなエントリ色々 WordPressのプラグイン集 300＋

長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 2010年09月30日- jQuery One Page Navigation Plugin | Trevor Davis 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 このプラグインを使うと、次のように左カラムにページ番号のように表示して、今どこら辺か？というのを分かりやすく表示し、かつ1ページなのに複数ページに分割することが可能。 使いどころは様々ですが、使い方次第で簡単にページの使い勝手を高めることができそうです。 ナビゲーションをクリックすると、指定したページの位置にアニメーションしながらスクロールされます。 更に、単純にスクロールしているだけで、左カ

Nick Farina - iOS Icon Template for Perfectionists iPhone4用もあるiOSのアイコンテンプレートPhotoshopファイル。 iPhone4, iPhone, iPad用のテンプレートです。 iOS用のアイコンをサクッと作りたい場合に活用できそうですね。 関連エントリ iPhone用サイトを作成する際に便利なjQueryプラグイン「iPhone UI」 iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 iPhone等のモバイルデバイス向けWordPressテーマ色々

Liquidicity 2400 Flag Icon Set クールな国旗アイコンがサイズ別に2400個まとまったセット 16x16, 24x24, 32x32, 48x48, 64x64 サイズがそれぞれ含まれます。 微妙な立体感がクールです。 64x64という大きなサイズも含まれているので利用範囲は広そうです。 関連エントリ サイトで使える500近いフリーのPNGアイコンセット「spirit20」 iPhone4向けのアイコン作成用Photoshopテンプレートファイル 手書き感がなんとも素晴らしいアイコンセット集 アイコン検索エンジントップ１０

Lumzy ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」というのが公開されているみたい。 デザイナーさんであれば、Photoshopでまずデザインを作るより、顧客にどういうサイトを作るか、イメージしてもらうためにモックを作るわけですが、それがブラウザ上で高速にできちゃいます。 ネットブック片手にブラウザさえインストールしてネット環境さえあれば、顧客と相談しながらサイトのレイアウトを作っていっちゃえますね。 サインアップとか無しにすぐに使えるところもGoodで、Flashを使った直感的なUIでモックアップをサクサク作れちゃいます。 ツールを立ち上げると、まずプロジェクト作成画面がでるので適当にいれて「Create Project」します。 作成すると、ボタンとかメニューバー、リスト、データグリッド、コンボボックスなどのありとあらゆるUIパーツが最初からそろっていて

Free Sketching & Wireframing Kit WEBレイアウト作成用のモック作成ツールキット。 次のようなデザインで、UIパーツがつまったツールキットが各種ベクターフォーマット（.ai, .pdf, .svg, .eps) の形式でダウンロードすることが出来ます。 モック作成のテンプレ等は色々ありますが、デザインが本当にモックっぽいところが特徴 関連エントリ ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」 WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集 サイトのモック等に使えるダミーのイメージを簡単に作れる「Dynamic Dummy Image Generator」

Bugaboo App iPhone/iPad用のサイトを作る際のデバッグに便利な「Bugaboo」。 デスクトップに入れたSafariで動作確認をしても、実際には若干の違いがあってうまく動かない場合がありますね。 この仕組は、iPhoneにはアプリとしてBugaboo Appを入れておくと、iPhone上にデーモンが起動して、PC等のブラウザから直接iPhoneに繋いでJavaScriptデバッグできるというものです。 デスクトップにはiPhoneのデバッグコンソールが現れ、デスクトップから直接JavaScriptのコマンドを実行して動作確認することが可能です。 動きを見てみる場合は以下のムービーを参照して下さい。

10 Free CSS and HTML Admin and Backend Templates :Speckyboy Design Magazine CSSデザインの実用的な管理画面テンプレート１０個がまとまっています。 管理画面も使いやすくしたい場合や商用プロダクトなので管理画面もカッコよくしたいというような場合に参考にできるかもしれません。 普通のテンプレートは多いのですがこうしたテンプレートはそれほど多くはないので助かりますね。 Internet Dreams Admin Skin INADMIN – HTML,CSS & jQuery Admin Panel Adminizio Lite – Admin Template Admin Template For Web Applications Spring Time – Simple Admin Template 全部見る 関連エ

どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル。 ドロップダウンメニューというとテキストリンクだけの羅列をイメージしがちですが、次のようなリッチなドロップダウンを実装するデモです。 ソースのDLが可能なのでカスタマイズして使うことが出来ます。 画像なんかも入ってリッチなドロップダウン。 ５カラムから構成される複雑なレイアウトもタブの中に入っちゃいます。 ４カラム。シンプルだけどカテゴライズされていて押しやすい。 ドロップダウンメニューの大項目は必要最小限にして、下位でこういう感じに広げれば、基本のシンプルさは保ちつつ、沢山ページのあるサイトであっても比較的迷うことないナビゲーションを実現できるのかも。 関連エントリ ドロップダウン

Make a ‘View Source’ Button | CSS-Tricks 技術サイト等で使えそうなページ内に設置する「ソースを見る」ボタンの実装例。 なんらかのライブラリを配布する際やコードの動作を紹介するデモページなんかに導入しておくと利用者に親切かも。 ボタンクリックでLightBox風にソースを表示させることができ、きちんとハイライトもされた状態になっています。デザインもなかなかいい感じ。 ファイルのダウンロードも可能ですので比較的簡単に実装できますね。 firefoxやChromeでは、view-source:http://〜みたいにするとソースコードを見るページにリンクできますが、そうした方法での実装法も紹介されています。 関連エントリ ブラウザ上で動作するソースコードエディタ『Edit Area』 ブラウザ上でソースコード編集が可能な開発環境を提供「ecoder」

iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニック 2010年10月15日- Customizing web forms with CSS3 and WebKit - (37signals) iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニックが37signals.comにて紹介されています。 紹介されている１例として、SafariというとフォームおなじみのAquaっぽいスタイルになりますが、-webkit-appearance: none; のように設定するとプレーンなフォーム要素になるようです。 CSS3や画像を活用して、次のようなフォームをカッコよくデザインしたサンプルなんかも公開されています。 実際に見てみる 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CS

最近のウェブサイトでよく見かけるUIのデザインパターンをコレクションし、その特徴や使い方・注意点を解説したサイトを紹介します。

2, 3, 4, 6, 9, 12, 18の均等分割をはじめ、黄金比の分割にも対応したグリッドレイアウト用のCSSのフレームワークを紹介します。 The Square Grid [ad#ad-2] The Square Gridのグリッド設計 グリッドの全幅は994pxで、両端に余白7pxをとり、残りの980pxを均等に35分割したものをベースにしています。 均等分割のカラム

ウェブベースの会社・サービスで使用しているロゴデザインを11の特徴に分け、見習うべき素晴らしいもの、ちょっと残念なものなど11のトレンドを紹介します。 11 Trends in Web Logo Design: The Good, the Bad and the Overused 以下は各ポイントを意訳したものです。 はじめに 1. バッジとボタン 2. スピーチバブルとメガホン 3. 不透明 4. かわいいイラスト 5. スクリプトやスラブ系のクールなフォント 6. 葉などの植物 7. 歪な四角形 8. レトロゲーム 9. ワードの一部だけカラーを変更 10. ロゴタイプ 11. ノードやハブ はじめに ウェブベースの会社や新規事業のためにロゴをデザインすることは、果てしない魅力の追求です。私たちは、ロゴのトレンドについていくつかの知識をピックアップしました。トレンドのいくつかは素晴らし

かっこいいデザイン、面白い素材をつかった名刺・ビジネスカードをあつめているポータルサイトを紹介します。

Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに

ケータイGPSをつかった位置情報取得について解説された記事「位置情報サービスのはじめ方」 Tweet 2010/10/14 木曜日 matsui Posted in 記事紹介・リンク | No Comments » gihyo.jpにケータイGPSに関する記事が掲載されていましたのでご紹介します。 →　gihyo.jp　位置情報サービスのはじめ方　目次 [gihyo.jp] →　gihyo.jp　位置情報サービスのはじめ方　第1回　今，位置情報が熱い！ [gihyo.jp] →　gihyo.jp　位置情報サービスのはじめ方　第2回　位置情報を取得してみよう（前編） [gihyo.jp] 著者ははてなの栗栖氏で、現在のところ第2回までが掲載されています。 第1回目は、位置情報サービスとはというところからスタートして、その活用方法やトレンドなどを解説しています。 第2回では、docomo, a