週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけた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 桜の開花情報サービス

今週の気になるWebネタ

Twitter公式をかたるスパムツイートに注意 8周年に便乗 公式が警鐘 - ねとらぼhttp://nlab.itmedia.co.jp/nl/articles/1403/21/news015.html

Twitterが8周年を記念して,自分あるいは他のユーザーの初めてのツイートを表示するツールを公開しています。公式ブログでは,有名アカウントの初めてのツイートが掲載されており,有吉弘行,ダルビッシュ有,糸井重里などの初ツイートが見られます。

この8周年のツールについて報告するTwitter公式の投稿を真似た,ニセモノのツイートが登場し話題となりました。ツイート内容は同じでリンク先が違っており,連携アプリの認証ページに飛ばされるようになっています。アカウント名が「@twittter_JP」「t」が1つ多いだけという,紛らわしいものでした。

このニセツイートは大量にリツイートされており,安易にリツイートする人を非難したくもなりますが,これはしょうがないでしょうね。最近こういったスパムツイートやフィッシング詐欺などの話題が多いように思えます。何かしら根本的な解決策を考える時期に来ているのかもしれません。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入