gihyo.jpサイトのロゴ

週刊Webテク通信

2014年3月第4週号1位は、ブラウザの「戻るボタン」が効かない4つのデザインパターン、気になるネタは、Twitter公式をかたるスパムツイートに注意 8周年に便乗 公式が警鐘

2014-03-27

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2014年3月17日～3月23日の間に見つけた記事のベスト5です。

1. 4 Design Patterns That Violate Back-Button Expectations - Articles - Baymard Institutehttp://baymard.com/blog/back-button-expectations

ブラウザの「戻るボタン」が効かない4つのデザインパターンについての解説と、解決策についてまとめた記事です。

「戻るボタン」がユーザーの期待通りに動作しない、以下の例が紹介されていました。

  1. オーバーレイ表示とライトボックス
  2. 絞り込み、並び替え
  3. アコーディオンスタイルのチェックアウト
  4. Ajaxによるページ切り替え

スクリプトで表示が切り替わり、URLは変わらないケースですね。

3つ目のアコーディオンスタイルのチェックアウトとは、ECサイトでよく見かけるURLの遷移なしで展開する決済画面です。確かに、「⁠戻るボタン」を押してしまい、入力内容が消えてしまってがっかりした経験のある人も多いと思います。

HTML5のHistoryAPIを使うと、ページのリロード無しにURLを変えることができます。これで、スクリプトによるページ遷移時にも「戻るボタン」が使えるようになるのとのことでした。

図1　ブラウザの「戻るボタン」が効かない4つのデザインパターン
図1　ブラウザの「戻るボタン」が効かない4つのデザインパターン

2. UI Design Dos and Don'ts - Apple Developerhttps://developer.apple.com/design/tips/

Appleが提供する、iOS向けUIデザインの良い例／悪い例をまとめたものです。

  • インタラクティブ性
  • 読みやすさ
  • グラフィックス
  • 明快さ

といった項目に分けて、望ましい例とダメな例とを並べて紹介しています。

図2　iOSのUIデザインの良い例／悪い例
図2　iOSのUIデザインの良い例／悪い例

3. jQuery A+ pluginhttp://japlus.simplit.it/

リンクに対して便利な機能を付加する、jQueryのプラグインです。

別ウィンドウで開くリンクにしたり、ページ内リンクにスクロール効果を加えたりと、リンクに関するクライアントからの要求の多くに応えてくれそうなプラグインです。Ajaxでリンク先を読み込む機能もあります。

図3　リンクに便利な機能を付加するjQueryプラグイン
図3　リンクに便利な機能を付加するjQueryプラグイン

4. Useful PSD Mockup Templates To Showcase Your UI Designshttp://www.designyourway.net/blog/resources/useful-psd-mockup-templates-to-showcase-your-ui-designs/

Photoshop形式のモックアップ用テンプレートを多数紹介しています。

iPhone、iPad、MacBookの画面部分に別の画像をはめ込んで使える写真素材などです。

ちなみに、画像をはめ込むところまでブラウザ上でできるPlace itという便利なサービスもあります。以前からある有名なサービスですが、カスタマイズ性が高まり、いわゆるシネマグラフ形式のアニメーションGIFが作れたりと、かなり充実した内容にグレードアップしていました。そのかわり、基本的には有料サービスとなっています。

図4　Photoshop形式のモックアップ用テンプレートいろいろ
図4　Photoshop形式のモックアップ用テンプレートいろいろ

5. Best Places to Find Free Images Online - dustn.tvhttp://dustn.tv/find-free-images/

フリーの写真素材を探せるサイトをまとめています。

「Essential Guide to Sharing Images Online」（⁠オンラインでの画像共有の手引き）というシリーズの記事とのことで、他にも気になる記事がいろいろありました。

図5　フリーの写真素材を探せるサイトいろいろ
図5　フリーの写真素材を探せるサイトいろいろ

そのほか、最近の記事の中から、アプリ関連の記事を3つ紹介します。

先週の気になるWebサービス

さくら情報 - ウェザーニュースhttp://weathernews.jp/sakura/

「さくら情報」は、ウェザーニュースが提供する、桜の開花情報サービスです。

「SakuraSimulator」では、日本地図の上にマッピングされた開花情報が、日付によって変わっていく様子をシミュレートできます。自動再生させると、桜前線が移動していく様子が見られて、なかなか興味深いです。

そして、面白い試みなのはユーザー参加型の「さくらプロジェクト」です。自分の近所の桜を「マイ桜」として登録しておき、開花情報をスマホでリポートすることで、開花予測にも反映されるというものです。この「マイ桜」の情報もここで見ることができ、3月25日現在で10867本のマイ桜が登録されています。

このウェザーニュースによる「さくらプロジェクト」はかなり歴史があるようですが、スマホユーザーが増えたことで、いろいろと新たな展開ができそうですね。

図6　桜の開花情報サービス
図6　桜の開花情報サービス

おすすめ記事

記事・ニュース一覧