ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめウェブデザインのセンスを磨く方法の一つに、他人の作ったものを数多く見ることがあります。 2011年が終わる前に、チェックしておきたいUIデザインをdribbleから紹介します。
Flashでグニグニ曲がるUIを作る方法 - しっぽのブログ
前にtwitterアイコンやpixivの画像をプヨプヨすることのできるpuyopixというコンテンツを作りました。 Puyopix -プヨプヨにするよ- このページの右上にあるブログパーツもこれです。 解説をやると言っておいて、ずっと書いていなかったので書きます。 あんまりコードだらけにしても面白くないし、方法の概念的なものを図を交えながら説明していきます。 画像をプヨプヨする方法の概要と、それをUIに応用する方法です。 プヨプヨの実装 骨組みを作る 格子状バネという、わりと普通の実装をしています。 格子状に並んだ各点をばねのように接続します。 バネはお互いの点の距離が一定になるように、２つの点に逆方向の力をかけます。 フックの法則というのがあって、「F = -kx」とかいう式もありますが、プログラムとしての感覚は「本来あるべき距離の方向へ、ズレた分の○%だけ加速度をつける」って感じになり
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
<script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&pid=877160106″></script><noscript><a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&pid=877160106″ target=”_blank” ><img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&pid
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 前回のコラムでは、ウェブサイトを使っているお客様がなぜ途中であきらめるのかというテーマで話しました。「ウェブサイトの欠陥」を大きくくくると、次の4つのどれかに当てはまります。 サイトのコンテンツ自体が足りない（価値の欠陥）価値のあるコンテンツが探しにくい（ナビゲーションが悪い）価値のあるコンテンツは見つかったがよくわからなかった（プレゼンテーションが悪い）サイトに信頼がなかったために使うのをやめ
軽くてシンプルに使えるWYSIWYGエディタ「NicEdit」:phpspot開発日誌
NicEdit.com - Micro Inline WYSIWYG NicEdit is a Javascript/AJAX inline content editor to allow easy editing of web site content on the fly in the browser. 軽くてシンプルに使えるWYSIWYGエディタ「NicEdit」。 TinyMCEやFCKEditorは凄く重い(200KBオーバー)です。 でもNicEditなら30KB程度で上図のような必要最低限のWYSIWYGが実装できます。 これは覚えておきたいですね。 関連エントリ ６つの新コンポーネントを搭載したYUI 2.3.0がリリース！リッチテキストエディタ等 XHTMLを編集できるWYSIWYMエディタ「WYMeditor」 JavaScriptを使った各種WYSIWYGライブラリま
Crayon Physics Deluxe
is a 2D physics puzzle / sandbox game, in which you get to experience what it would be like if your drawings would be magically transformed into real physical objects. Solve puzzles with your artistic vision and creative use of physics. Looking for your old secret key or download link? Try our keysender below: Bought the game from Humble Widget? Try the Humble Order Resender. Please provide the em
軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」:phpspot開発日誌
MooTools Mocha UI Mocha is a MooTools user interface class made with canvas tag graphics. This is an on going exercise to help me become more familiar with both MooTools and the canvas tag. 軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」。 次のような移動＆リサイズ＆クローズ＆最大化可能なウィンドウを簡単に作成できます。 サイト内のデモでは、タイトルと内容を入力することで、動的にウィンドウを作成できることが紹介されています。 フレームワークには、mootools 使用。 かなり軽快に動いてくれ、ページ内で別窓を作るＵＩを作る際にはかなり使えそう。 関連エントリ Prototype.jsベ
成功するショッピングサイトに必要な17の新常識 | POP*POP
SEO関連の話題を扱っているseomoz.orgにて興味深い記事がありました。「17 New Rules for Successful E-Commerce Websites」です。 ショッピングサイトを作るときにはどういった点に気をつければいいか、かなり参考になるのではないでしょうか。 以下に詳しくご紹介（あまり好きではないですが、説明の都合上、元記事からそのまま画像を拝借しています）。 ユーザーがどこにいるのか教えてあげよう ユーザーがトップページ以外にいる場合、どのセクションにいるのかわかるようにしましょう。パンくず型のナビゲーションも有効です。 選択条件を解除できるようにしよう ユーザーは一般的に選択条件を追加しながらサイトを見ていきます。そうした選択条件はすぐにはずして元に戻れるようにしておきましょう。 一般的な並び替え方法はきちんと用意しよう ユーザーが選択しやすいように「価格
マルチタッチスクリーンLemuｒが凄すぎる件 | fladdict
jazzmutant社が開発したLemurというマルチタッチスクリーンが凄すぎる件について。 とりあえず、梅酒吹いたのでなにはともあれビデオ見れ。（注、ウチのFFでは落ちたのでIE推奨）。 ビデオを見る限り、YouTubeで一斉を風靡したCrazy Multi-Input Touch Screenと同じように見えるけど、大きな違いが２点。それは、こいつが市販されてるってことと、付属ソフトウェアでUIをカスタマイズできるってこと。 ついでにデータの出力プロトコルがOSC(次世代MIDIみたいの)なので、Java・・・というかprocessingやmax mspで簡単に読みとれるんですぜ！？ FlashOSCとか使えばおそらくFlashでも使えます。ヤバイって絶対ヤバイよコレ。 ちなみにお値段はおよそ３２２８万円。 もうちょっと安ければ個人輸入するんだけど・・・ via v3ga
ブログユーザビリティ：間違いトップ10
ヤコブ・ニールセン博士のAlertboxより。ブログユーザビリティの間違いトップ１０について書かれている。 Weblog Usability: The Top Ten Design Mistakes ヤコブ・ニールセン氏について Jakob Nielsen博士のAlertbox(Alertbox日本語訳サイト) ウェブのユーザビリティに関しては、アメリカで並ぶもののない第一人者Jakob Nielsen博士。博士自ら運営するサイトuseit.comで連載中のコラム『Alertbox』は、ウェブ制作者のバイブルとして長年にわたり読みつがれています。 Webユーザビリティとは、かなり簡単に説明すると、そのサイトが訪問者にとって閲覧しやすいか、という事です。 彼の発言する事には、いろんな方が影響を受けています。私もAlertboxのコラムはほぼ読み終えました。このブログでも、多大な影響を受けてい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プラナフ・ミストリー ：次なる可能性を秘めたSixthSenseテクノロジー | Video on TED.com