週刊Webテク通信

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

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

ネットで見かけた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選

今週の気になるWebネタ

全天球映像を24時間ライブストリーミング 「RICOH R」発売へ - ITmedia ニュース http://www.itmedia.co.jp/news/articles/1701/06/news084.html

リコーから,THETAシリーズとは別に,24時間ライブストリーミングが可能な360度全天球カメラ「RICOH R Development Kit」が登場しました。2K(1920×960ピクセル)⁠30fpsの全天球映像を撮影できるそうです。

映像はHDMIかUSBで出力,マイクロSDカードに記録もできるとのこと。⁠Development Kit」と名前に付いており,開発キットとしての提供となるようです。

スリットの入った筐体デザインがインパクトありますが,長時間のライブストリーミングに耐えられるための,熱を逃がすための形なのかもしれません。別の記事の写真で見たところ,かなり銀色っぽく金属性との記述がありました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入