「売れるサイト」を作るためのあれこれをご案内してきましたが、今回は「サイトデザイン」という視点から、ユーザーへのアピール方法を考えてみたいと思います。いかに中身が素晴らしいサイトでも、ユーザーにその素晴らしさが伝わらなくては、リピーターにはなってもらえません。 サイトデザインの観点で一般的に「良いサイト」とは、ユーザーに余計なことを考えさせ...
『 デザインも秀逸なナビゲーションを実装するスタイルシートとスクリプトのチュートリアルの紹介です。シンプルできれい! 』
ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる！とか、売上が上がる！といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんあり...
A List Apartのエントリーから、CSS Spriteを使用したナビゲーションに、マウスオーバー時にアニメーションのエフェクトをつける「CSS Sprite2」を紹介します。 CSS Sprites2 - It [...]
『 alert（）やconfirm（）の代替として使えるLightbox系の擬似ダイアログ・ライブラリ。スライドしながら表示される。要mootools。MITライセンス。 』
これはデザイナーのみならず導入必須のソフトウェアと言えそうだ。 Webサイトを作る際には、モックアップが必要になる。それをベースにして「ここをこうしよう」「次はどこに遷移させよう」といった議論が可能になる。頭の中だけではイメージがはっきりせず、意見も出しづらい。 ドラッグアンドドロップでモックアップを作成できる そんなモックアップを作成しようと...
Ruby on Railsなどにも含まれている、話題のJavascript...
Movieclip tweening prototypesは、トゥイーンを使用したユーザーインターフェイスを実装できるフラッシュのライブラリです。 Movieclip tweening prototypes ライブラリには下記のようなサンプルがあり、それぞれflaファイルもダウンロードできます。 relevare.com navigation resize like Kurtnoble.com
黒い背景で新しいドキュメントを始めてください。楕円ツールを使って、キャンバスの中心に円を描いてください、サイズはあなた自身で決めてください。真円を描くときは、シフトを押しながら、楕円ツールを使って描きます。 下のような、レイヤースタイルを図形に設定してください。 色に関しては一致させる必要はありませ... ブックカバー このチュートリアルはシンプル...
『 font-family:Arial,Helvetica,Verdana,“ヒラギノ角ゴProW3″,“HiraginoKakuGothicPro”,Osaka,“メイリオ”,Meiryo,“ＭＳＰゴシック”,sans-serif; 』
『 外見をパラメータやCSSで変更できるツールチップ・ライブラリ。title属性の値を表示。要script.aculo.us。MITライセンス。（→プロジェクト：http://code.google.com/p/tooltips/） 』
フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが） <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href=...
CDやDVDのジャケットを検索できるAllCDCoversには、随所におっとするようなインターフェースの工夫が見られます。100SHIKI PR Board参加ブログであるsta la staでも紹介されていましたが、その検索結果が複数ページにわたっている場合の表示が印象的だったので、エントリー。 » AllCDCovers 検索結果が複数ページにわたっている場合、自分が見たい結果があるページを探すためには、一...
JavaScriptでツールチップを表示するライブラリは比較的多く存在する。ライブラリ選択の基準にデザインが重要になってくる。シンプルなデザインの角まるツールチップで使いやすいのがCoolTips。ライブラリも軽量になっている点もうれしい。
『 「CSSとJavaScriptで影付きの角丸ボックス要素を作る。」IEでは表示なし。 』
PR Boardメンバー限定でしたが、先日7日、「ユーザビリティ会議」を行いました。 場所は虎ノ門のbeBit社。百式やチェックパッドも検証してもらっているユーザビリティ専門のコンサルティング会社です。 » ビービット ユーザビリティに特化したウェブコンサルティング 今回ご参加いただいたのは総勢25名。場所の都合により少人数となりましたがおかげさまで盛り上がりまし...
記事本文（いわゆるpermanent link / permalink）に関して、「サイドバー」は100%要らない。要ると思っているのは100%勘違いである。エゴで固執するなら「さいどばー」に相当するリソースへのハイパーリンクを提供すればいい。Web2.0なんだろ? だったらそのリンク先を得意のAjaxとやらで上手に扱えばいいじゃないの。もっともその程度にAjaxなんて全然必要ないけれども、かっこよさげだ...
『 nitoyon:フォトログサービス。プロ・セミプロの会員制からスタートして、いまは誰でも登録できるようになってる。Flashのインターフェースが小気味よい。LocationHashでPermalinkにも対応。これいいやん。 』
まだ日本語が使えないが、期待のサービスなのでご紹介。 Get BuzzwordはGoogle Docsのような、いわゆるオンラインでワープロを実現しているサービスである。 ただ、このサービス、すべてFLASHで作られており、レスポンスやインターフェースが実に心地よい。 カーソルがふわ～んと点滅していたり、アイコンが綺麗だったりと、「上等なものに触っている感」たっぷりのサービスであ...
Apple.comのようにパンくずも少し手を加えるだけで、使いやすいものになります、Appleのパンくずの区切りには半透明の透過PNGが使われている為、InternetExplorerへの対応はAlphaImageLoaderをCSSで指定しています。
![デザイン・アート情報のまとめ [ DESIGN ARCHIVE ]](http://img.awasete.com/image.phtml?u=http%3A%2F%2Fart.designlinkdatabase.net%2F)