週刊Webテク通信

2017年1月第2週号1位は、翻訳されることを考慮したデザインのヒント、気になるネタは、全天球映像を24時間ライブストリーミング「RICOH R」発売へ

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2017年1月2日~1月8日の間に見つけた記事のベスト5です。

1. Design for internationalization – Dropbox Design – Mediumhttps://medium.com/dropbox-design/design-for-internationalization-24c12ea6b38f#.61vm2viqr

翻訳されることを考慮したデザインのヒントをまとめた記事です。

  1. 翻訳されて文字数が増えるための余地を残す
  2. 狭いコラムにテキストを配置しない
  3. テキストを画像にしない
  4. UI要素を使って文章を作らない
  5. メタファーは国によって違う意味に取られることに気をつける
  6. 機能名には翻訳しやすいように説明的な言葉を使用する
  7. 翻訳の代替案を提供する(翻訳者のための補足を入れるなど)
図1 国際化のためのデザインのヒント
図1 国際化のためのデザインのヒント

2. How Micro-Interactions Drive User Engagementhttps://speckyboy.com/micro-interactions-drive-user-engagement/

マイクロインタラクションがユーザーエンゲージメントを深める理由を解説しています。

マイクロインタラクションは、意図した動作を正しく実行していることを伝えるガイドとなっており、モバイルアプリに対しユーザーを魅了したり信頼性を高めるのに重要とのことでした。

図2 マイクロインタラクションがユーザーエンゲージメントを深める理由
図2 マイクロインタラクションがユーザーエンゲージメントを深める理由

3. Bttn.css - Demohttps://bttn.surge.sh/

ボタンデザインのCSSを提供しています。このサイトで色やサイズなどを変更してプレビューできるようになっており、生成されたコードを利用して簡単に適応できます。

シンプルなデザインの13パターンのボタンデザインで、ロールオーバーの効果は結構凝ったものもありました。

図3 ボタンデザインのCSS
図3 ボタンデザインのCSS

4. Tiny Trends #1: Non-Rectangular Headers – UX Power Tools – Mediumhttps://medium.com/ux-power-tools/tiny-trends-1-non-rectangular-headers-e8d2d4ee578f#.89brtnslk

Webデザインのちょっとしたトレンドとして、ヘッダの区切りが水平ではなく斜めになっていたり、曲線になっていたりするサイトを多数紹介しています。

ヘッダの区切りを斜めにする方法について、以下のサイトが参考になります。

図4 長方形ではないヘッダのWebデザインいろいろ
図4 長方形ではないヘッダのWebデザインいろいろ

5. 30 Truly Interactive Websites Built With CSS & JavaScript - Web Designer Wall - Design Trends and Tutorialshttp://webdesignerwall.com/trends/30-truly-interactive-websites-built-css-javascript

インタラクティブ性の高いWebサイトのギャラリーです。ユーザー主体のナビゲーション、サウンド、アニメーションによってインタラクティブな体験を与えるサイトが紹介されています。

タイトルに「Built With CSS & JavaScript」とあるのは、FlashではなくCSSとJavaScriptでこれだけのことができるようになったという意味ですね。

図5 インタラクティブ性の高いWebサイトのギャラリー
図5 インタラクティブ性の高いWebサイトのギャラリー

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

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

20 Valuable Tools For UX Designershttp://1stwebdesigner.com/tools-for-ux-designers/

今回は、UXデザイナーのための便利なツールを20個まとめた記事を紹介します。リサーチ、テスト、ユーザーフィードバックのためのツール、プロトタイプ/ワイヤーフレーム作成のツール、共同作業のツールが掲載されています。

UsabilityTools、MouseStatsは、マウスの動きやスクロールなどサイト訪問者の閲覧の様子を見ることができるツールです。MouseStatsはユーザーに対しサイトについてのアンケートを取ることもできるそうです。

プロトタイプ/ワイヤーフレーム作成のツールや、デザインの確認のためのやりとりなどを行う共同作業用ツールは、本当にいろいろなものが揃っていますが、目的に合ったものを選んでうまく使い分けるのが難しいですね。

図6 UXデザイナーのための便利なツール20選
図6 UXデザイナーのための便利なツール20選

おすすめ記事

記事・ニュース一覧