週刊Webテク通信

2015年8月第3週号 1位は，Webデザインの新しいプロセスについて，気になるネタは，Dropboxが物理セキュリティキーに対応。USB接続のU2Fキーで二段階認証

Webテク, Webデザイン, Web広告, モバイル, 検索Dropbox, セキュリティ,

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

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

1. Reimagining the web design process - InVision Blog Thoughts on users, experience, and design from the folks at InVision.http://blog.invisionapp.com/reimagine-web-design-process/

モバイルデバイスへの対応などの状況の変化から，Webデザインの手順を刷新すべきという提案です。

以下の項目に分けて説明しています。

  • モバイルファースト
  • 一度に一つのブロックを積み上げていく
  • ブレークポイントを超えた時のことを考える
  • 実機でテストする
  • まったく新しいやり方に適応する

見出しの文字数が多くてモバイル端末で見たときに複数行になってしまうケースを確認するためにも，できる限りダミーではなく本物のコンテンツを使ってデザインすべきというところが印象に残りました。

図1　Webデザインの新しいプロセスについて

図1　Webデザインの新しいプロセスについて

2. Color vs Contrast: Which One Brings More Conversionshttp://www.onextrapixel.com/2015/08/15/color-vs-contrast-which-one-brings-more-conversions/

ボタン類の色とコントラストについての記事です。背景とのコントラストが効いてボタンが目立っている例と，そうでない例とが紹介されています。

Webデザインにおいて色の選択は大きな役割を持っているのですが，ボタンなどのアクションを促す要素と背景とのコントラストをはっきりさせることが，非常に重要との結論でした。

図2　ボタン類の色とコントラストについて

図2　ボタン類の色とコントラストについて

3. Refreshing Search: Testing Search Box Variations | Vigethttps://viget.com/inspire/refreshing-search-testing-search-box-variations

検索窓のデザインをリニューアルするにあたり，4つのバリエーションを試してみた結果のレポートです。

成功率と作業時間とを比較しているのですが，最終的に数字が一番いいものを選んだわけではないところも興味深いです。

図3　検索窓のデザインのユーザーテスト

図3　検索窓のデザインのユーザーテスト

4. 40 Freebies & Goodies For Web Designers – August 2015 - Hongkiathttp://www.hongkiat.com/blog/freebies-web-designer-aug-2015/

Webデザインに役立つデザイン素材や便利なファイルを多数まとめています。

UI素材，モックアップの素材，Photoshopテンプレート，アイコン，フォントなどが紹介されていました。

図4　Webデザインに役立つデザイン素材やファイル類

図4　Webデザインに役立つデザイン素材やファイル類

5. 20 Gorgeous Black and White Sites for Inspirationhttps://webdesignledger.com/gorgeous-black-white-sites

白と黒を色のベースとしたWebデザインのギャラリーです。

白黒写真が印象的なサイトが多く，ロールオーバーで色がつくことで，より写真が目立つ効果を狙っているものもありました。

図5　白黒ベースのWebデザインのギャラリー

図5　白黒ベースのWebデザインのギャラリー

そのほか，最近の記事の中から，気になるニュース記事を紹介します。

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

8 Free Tools To Monitor Any Website Content Changes | SmashingApps.comhttp://www.smashingapps.com/2015/08/14/8-free-tools-to-monitor-any-website-content-changes.html

今回は，Webサイトの更新をモニターするWebサービスをまとめた記事を紹介します。

チェックしたいWebページを登録しておくと，そのページに更新があった場合にメールなどで知らせてくれるサービスが8種類掲載されています。テキストの差異をチェックするものと，ビジュアルとして違いを見るものとがありました。

1つ目に紹介しているVisualPingは，ビジュアルでチェックするツールで，ページ内の特定の箇所だけをチェックできます。レポートをメールだけでなくSlackに投稿できるところも便利そうです。

図6　Webサイトの更新をモニターするWebサービス

図6　Webサイトの更新をモニターするWebサービス

今週の気になるWebネタ

Dropboxが物理セキュリティキーに対応。USB接続のU2Fキーで二段階認証 - Engadget Japanesehttp://japanese.engadget.com/2015/08/13/dropbox-usb-u2f/

DropboxがUSBセキュリティキーを利用した二段階認証に対応しました。これは， U2Fという規格に対応したUSBセキュリティキーをAmazonなどで購入し，設定すれば二段階認証時のキーとして使えるということです。

Dropbox社によるブログでの説明によると，携帯メールを使った二段階認証の場合，ニセのEvernoteサイトに誘導してパスワードと認証コードを入れさせるといった攻撃を防げないとのことでした。

自宅のパソコンなど認証済みのマシンの場合には毎回USBキーを挿す必要はないようなので，共用のマシンや人のマシンをちょっと借りて作業する場合などに使うと便利ということなのでしょう。

Webテク, Webデザイン, Web広告, モバイル, 検索Dropbox, セキュリティ,

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote