Googleマップ＋jQueryで作るAjaxなデザイン (1/5)
今やさまざまなWebサイトで使われ、すっかり地図の定番となったGoogleマップ。 コーポレートサイトや飲食店のサイトなどで、純粋に案内図としてページに埋め込むのが一般的ですが、中にはもっとおもしろい使い方で、ユーザーを楽しませているサイトもあります。 一例として、「hitotoki」というWebマガジンを紹介しましょう。hitotokiは、ある特定の場所に関するショートストーリーを地図と絡めて紹介するWebマガジンです。Googleマップをまるで独自に描いた絵地図のようにうまくサイトになじませ、「地理と文学を結びつけた町の文学地図」というコンセプトに合わせて効果的に活用しています。 今回は、このhitotokiのGoogleマップ活用法をお手本としましょう。 今回のお手本サイト： 『hitotoki―町の文学地図』 「場所」にまつわる読者の思い出を募り、地図と写真とともに紹介する投稿型の
jQueryでクールなくるくるウィジェットを作ろう (1/5)
数年前に登場した「Googleマップ」を皮切りに、ページを遷移せずに一部を書き換える“Ajax”が大流行しました。Ajax/JavaScriptによるユーザーインターフェイス（UI）はWebサイトの操作性を大きく向上できるので、地図サイトなど、いわゆる「Web 2.0的」サイトでは多用されていますが、（特に国内の）テキストと画像を組み合わせた昔ながらのWebサイトでは、まだまだ活用されていないようです。 今回は、AjaxでリッチなUIを実現している英国のWeb制作会社のWebサイト「Web Design by TVI」に注目します。単に見た目がかっこいいだけでなく、Ajaxを効果的に活用した使い勝手のいいUIをお手本にします。 今回のお手本サイト： 『Web Design by TVI』 Webデザイン、ECサイト構築、CMS開発などを手掛ける英国のWeb制作会社「TVI」の企業サイト。会
ステーキ丼をJavaScriptで美味しく拡大 (1/5)
海外のWebサイトを眺めていると、日本ではあまり見かけない変わった商品を紹介しているネットショップに行き当たることがあります。国内では、「楽天」や「Yahoo！ショッピング」などのモールに出店しているネットショップがほとんどですが、海外では趣向を凝らした独立系のショップも多く、Webデザインの参考になることも少なくありません。 変りダネのUSB機器や玩具などのガジェットを販売する「I Want One Of Those」もそうした個性的なネットショップの1つです。今回はI Want One Of Thoseが使っている“技”を参考にさせてもらいましょう。 今回のお手本サイト：『I Want One Of Those』 眺めているだけでも楽しい、おもしろガジェットを販売するイギリスのネットショップ。ロボットやラジコンなどの玩具からキッチン用品やアウトドアグッズまで、数百種類以上の商品を取り扱
チッちゃい画像にはデッカいツールチップを！ (1/5)
「プロが作ったWebサイトのあの“技”をウチのサイトでも（それもタダで）マネしたい！」――。そんな欲求に応えてくれるJavaScriptライブラリ／フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。 「フォト蔵」というWebサイトをご存知ですか？ ユーザーが自分で撮った写真や動画をWeb上にアップできる、いわゆる「写真共有サービス」です。同種のサービスは数多くありますが、フォト蔵は日記やコミュニティなど、他のユーザーとのつながりを意識したSNS的な機能が充実しているのが特徴で、現在18万人のユーザーが利用しています。 今回はこのフォト蔵のトップページをお手本にしたいと思います。写真共有サービスということで、フォト蔵のサイトはシンプ
意外性が心地よいJSメニューのWebデザイン (1/5)
JavaScriptライブラリでリッチなUIを手軽に作れるようになったのはいいけど、最近ではそれもすっかりマンネリ気味。そろそろ、ほかのWebデザイナーとは違うデザインを取り込んで何とか差をつけたい――。そんなときは、国内のデザイン誌やブログではなく、海外サイトに目を向けてみてはどうでしょうか。たとえば、優れたWebサイトを紹介している「dzineblog」というブログなら、海外のWebデザインのトレンドをいち早くチェックできます。 そのdzineblogの膨大なコンテンツの中から、今回注目するのが、「10 Websites That use JavaScript Animation Effectively!!」という少し前のエントリー。JavaScriptによるアニメーションエフェクトを上手に使っているサイトを取り上げており、その中から、「Playground Blues」をピックアップ
jQueryで作るAmazon流リキッドレイアウト (1/5)
国内外を問わず、多くのECサイトがお手本とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」（回転表示するスライドパネル）の作り方を紹介しましたが（関連記事）、Amazonは優れたユーザーインターフェイス（UI）の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模
Yahoo！の流れるパネルをJSライブラリで再現 (1/5)
日本最大のポータルサイト「Yahoo！ JAPAN」のトップページがリニューアルしたのは、2008年1月のこと。従来の2カラムから3カラムのレイアウトに変わり、世界各国のYahoo！に合わせる形でデザインも一新されました。同時に行なわれたのが、ユーザーインターフェイス（UI）のリッチ化です。新しいYahoo！ JAPANのページには、タブ／アコーディオンパネル／フローティングウィンドウなど、ここ数年のトレンドであるAjaxを使ったUIが随所に盛り込まれています。 こうした流れは、トップページだけではありません。リニューアルと前後して、Yahoo！ JAPANではさまざまなサービスのUIの改善が実施されています。今回はその中のひとつ、「Yahoo!知恵袋」に注目してみましょう。今年2月にリニューアルされたばかりのこのQ＆Aサービスの新しいトップページが、今回のお手本です。 今回のお手本サイト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
