Googleの”eBook”サイトが細部まで良く出来ていて楽しい

Advertisement


GoogleのChrome Teamが作った「20 Things I Learned About Browser and the Web」というサイトが、細かいところまですごく良く出来ているのでご紹介。これからのウェブ制作の見本に出来る点がたくさんあるなぁと思いました。

インターフェイス

まず、本の基本的なインターフェイスがしっかりしていて、フェイドイン、フェイドアウト、本の見開きなどのアニメーションもとても良く出来ています。当然のことがしっかりできているという印象ですが、それがなかなかできていないのがウェブの現状だと思います。


複数のナビゲーション方法がついていて、それぞれの人にあった使い方ができる。たとえば、次のページに行くにも、1のボタンを押してもいいし、ページの右側をクリックしてもいい。

  1. 次のページ、前のページへのボタン
  2. マウスオーバーすると、スムーズで気持ちのよいアニメーションでページが持ち上がる
  3. 各ページへのショートカット。マウスオーバーするとそれぞれの要素が大きくなる。MacのDockを思い出す
  4. 全ページを俯瞰して見られる目次がついている
  5. 目立つように大きく設置された検索ボックス
  6. 背景を暗くできるボタン。トランジションのアニメーションも良く出来ています
  7. そして「共有」ボタン。これは、どんなウェブサイトでもあって当然の要素になってますね

ちょっとした工夫が楽しい、心地いい

目次ページは↓のような感じ。しっかり「Back」ボタンもついてます。

ページを暗くするとこんな感じ↓


必須というわけではないですが、ちょっとした楽しい機能。

各ページにはブックマークがついていて、クリックするとシェアボタンがやプリントボタンが出てきます:

開くとこんな感じ↓

HTMLソースも奇麗だし。なんかいままでのGoogleとはひと味違った感じです。さすがChrome Teamというべきでしょうか?これからのChromeにもすごく期待しちゃいます。

「20 Things I Learned About Browser and the Web」はこちらから。

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です