Webデザイン劇的ビフォーアフター09年春版 (1/4)
この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。ここでは、3月下旬～4月にかけて大規模なリニューアルを実施したWebサイトを編集部でピックアップし、リニューアル前後の画面写真付きで紹介する。最新の企業サイトのトレンドをつかみ、自社サイトのリニューアルの参考にしよう。 マイクロソフトが運営するポータルサイト「MSN」は、2008年4月以来ほぼ1年ぶりにトップページをリニューアル。「毎日使いたくなるMSN」（マイクロソフト）を目指し、使い勝手を高めた。 3カラムのレイアウトは従来のままだが、それぞれのカラムの役割を明確にし、各カラムに入る要素を分類、整理している。具体的には、左カラムにHotmailの受信状況や天気などを確認できる個人ツール類を、中央カラムにニュースなどの最新情報を配置。ディスプレイ広告や企画広告への誘導はすべて右カラムに集約した。 ま
ドラッグで並べ替え可能なグリッドを実現する「draggable_grid.js」を作りました - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 本日は、久しぶりに JavaScript のライブラリを公開します。よく、画像ギャラリー等でマウスのドラッグ＆ドロップで画像の並べ替えができるものがありますが、そんな UI を簡単に実現できるものを作ってみました。以前に公開してご好評をいただいた DragResize.js のノウハウを引き継いでおり、以下の特徴があります。 JavaScript の呼び出しひとつ
PCではTwitterはTumblrから見るのが最高のインターフェイス
トップ > tumblrtwitter,ツイッター > PCではTwitterはTumblrから見るのが最高のインターフェイス いしたにまさきの新刊：HONDA、もうひとつのテクノロジー ～インターナビ×ビッグデータ×IoT×震災～ 01 それはメッカコンパスから始まった｜Ｈｏｎｄａ、もうひとつのテクノロジー 02 ～インターナビ×GPS×ラウンドアバウト～ 運転する人をサポートすること｜Ｈｏｎｄａ、もうひとつのテクノロジー 03 ～インターナビ×災害情報×グッドデザイン大賞～ 通行実績情報マップがライフラインになった日 2009.02.26 私的にはもうすっかり安定運用に入っているtumblrのtwitter連携。日々楽しく使っています。 tumblrユーザーでtwitterカウントを設定している人は以下のページで確認できますね。 リンク: Twitter | Tumblr. 通常のda
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
[JS]アイコンをドラッグして認証する、かわいらしいCAPTCHA
認証の流れ 音声ブラウザへの対応やマウス操作などアクセシビリティ的な弱点もありますが、アイデアやデザインはすばらしいと思います。 AJAX FANCY CAPTCHAはjQueryのため、動作にはjquery.jsが必要です。
[JS]複数のレイヤーをずらして動かし立体感を与えるスクリプト -mParallax
ユーザーのマウス操作にあわせて、複数のレイヤーをずらして動かし、パララックス（視差）効果を与えるスクリプト「mParallax」を紹介します。
アイコンデザインにおける10の間違い | CREAMU
アイコンデザインで注意するポイントが知りたい。 そんなときにおすすめなのが、『10 Mistakes in Icon Design』。アイコンデザインにおける10の間違いだ。 以下にご紹介。 アイコンのデザインの差があまりない アイコンをセットで作る場合、見分けられないデザインはよくない。↓はMac OS Xのユーティティーアイコン。見分けがつきづらく、間違って起動してしまう。 一つのアイコンに要素が多すぎる アイコンの中の要素は少なければ少ないほどよい。要素が多いと、小さくしたときに判別しにくい。 不要な要素を含んでいる 要素を少なくし、メッセージがストレートに伝わる要素だけを置きたい。↓はDBアイコンの例。DBであることがわかっているなら、後者の例にした方がわかりやすい。 アイコンセットに統一性がない アイコンセットは、カラースキーム、遠近感、サイズ、描画技術を統一すべき。 小さいアイ
マークアップエンジニアじゃなくても覚えておきたいHTMLとCSSの話(〜HTML5・CSS3、IE8 それぞれの準備に向けて) - livedoor ディレクター Blog(ブログ)
こんにちは。 livedoor Blogを担当しています石野と申します。 前職はマークアップエンジニア(HTMLコーダー)をしていました。 今回はその経験を踏まえ、ディレクターとして把握しておいた方が良いHTML/CSS関連のお話をご紹介しようと思います。 昨年からHTML5、CSS3、そしてInternet Explorer(以下IE)8のベータ2版発表と、バージョンアップに関するニュースが相次ぎました。 その違いを認識する上でも、また制作サイドのディレクションに活かす上でも本エントリーを参考にしてください。 ▼ 構成 (1) HTML - 文書型について (2) HTML+CSS - クロスブラウザについて (1) 文書型について - ファイルの先頭に陣取っている「DOCTYPE」とは何か？ HTMLソースを開くと、こういった記述を目にしませんか？ !DOCTYPE html PUBL
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
Eコマースサイトを成功に導く「新17ヶ条」 | Moz - SEOとインバウンドマーケティングの実践情報
Eコマースの大半は、1990年代の終わりごろ、まだそれが陳腐きわまりない代物で、デザイナーたちが、ウェブにおけるショッピングとはどうあるべきかという問題と格闘していた時代から、大きく進化を遂げた。やがて標準が確立し、ユーザビリティが勝利を収め、現在は好きなだけ買い物ができるようになった。ちなみに、米国勢調査局のEコマース統計によると、今や年間のEコマース売上規模は、1070億ドルにものぼるそうだ。 とはいえ、まだ良くなる可能性がある。オンラインショッピングは、赤ん坊ほどじゃないにせよ、まだ少なくともよちよち歩きの幼子ぐらいの段階にある。僕らがここに至るまでの進歩によって、購入手続きは以前よりずっと単純になり、使いやすくなったけど、まだそのやり方を理解していないサイトもある。 実は僕、ここのところかなりオンラインショッピングにハマッてて、（先週末の盗難事件と、中国への長期旅行が控えているおか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]リンクの情報をサポートするスタイルシートのテクニック集
[CSS]軽快に動作するタブコンテンツを実装するスタイルシート
