週刊Webテク通信

2015年6月第1週号 1位は,ユーザーエクスペリエンスデザインの5つの原則,気になるネタは,Facebook、アニメーションGIFに対応

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

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

1. 5 Simple UX Principles to Guide your Product Designhttp://www.sitepoint.com/5-simple-ux-principles-guide-product-design/

ユーザーエクスペリエンスデザインの原則を5つに分けて紹介した記事です。⁠プロダクトデザインのための」というタイトルになっていますが,Webデザインにも通じるものがありますし,Webサイトに関連した内容も紹介されています。

以下の5点が原則とのことです。

  1. 要約力
  2. 明瞭さ
  3. 信頼性
  4. 親しみやすさ
  5. 楽しさ

デザインされていることを感じさせないユーザーエクスペリエンスデザインこそが理想といったことが書いてあり,非常に納得できます。

図1 ユーザーエクスペリエンスデザインの5つの原則

図1 ユーザーエクスペリエンスデザインの5つの原則

2. 7 Best Tools for Web Designers in 2015 - SpyreStudioshttp://spyrestudios.com/7-best-tools-for-web-designers-in-2015/

Webデザイナーのためのツールを7つ紹介した記事です。

WordPressのためのレイアウトツールやWebサイトビルダーなど,掲載されているのはWebデザイナーに頼まずに作るためのツールとも言えます。しかし,Webデザイナーがこういったツールを使うケースも今後増えていくようにも思えますね。

図2 Webデザイナーのためのツール7選

図2 Webデザイナーのためのツール7選

3. 50 CSS and JavaScript Tools, Frameworks and Librarieshttp://speckyboy.com/2015/05/18/css-javascript-tools-frameworks-libraries/

CSSとJavaScriptのツール,フレームワーク,ライブラリをまとめて紹介しています。

Flexboxのためのツール,レスポンシブWebデザインのフレームワーク,マテリアルデザインのフレームワーク,CSSのジェネレーターなどが掲載されていました。

図3 CSSとJavaScriptのツール類いろいろ

図3 CSSとJavaScriptのツール類いろいろ

4. Clever Use of Maps in Website Design - Designmodohttp://designmodo.com/maps-websites/

地図をうまく使ったWebデザインのギャラリーです。

地図上にどう情報をマッピングしていくかのヒントになりそうなサイトが多数掲載されています。

図4 地図を使ったWebデザインのギャラリー

図4 地図を使ったWebデザインのギャラリー

5. 8 Free Online Markdown Editors | SmashingApps.comhttp://www.smashingapps.com/2015/05/29/8-free-online-markdown-editors.html

オンラインのマークダウンエディターを8つ紹介しています。

個人的にマークダウン記法をもっと世の中に広めていきたいと思っているので,こういうオンラインで気軽に使えるマークダウンエディターは気になります。

Webページの制作時に,マークダウンで書いてHTMLとしてコピーして利用するということをわたしはよくやるのですが,ここに掲載しているエディターも多くのものがHTMLコードの表示やHTMLへの書き出し機能をサポートしていました。

図5 オンラインのマークダウンエディターいろいろ

図5 オンラインのマークダウンエディターいろいろ

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

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

Google フォト - 思い出を何枚でも保存,見たいときにはすぐに見つかるhttps://www.google.com/photos/about/

Google+の写真機能が本当に独立して「Google フォト」となりました。Web版とiOS/Androidアプリ版があります。iOSアプリは標準アプリの「写真」のような使い方ができるので,名前(英語版だとどっちもPhotos)だけでなく用途もかぶっています。

Google+で「フォト」を選ぶと一旦Google フォトに移動したのですが,Google+フォトにも戻れるようになっていました。Googleドライブ,Google フォト,Google+フォト,Picasa ウェブアルバム(実はまだアクセスできる)と,いろんなところに同じ写真が同期されていたりされていなかったりでややこしいです。

これまでと変わったのは無料で使える画像サイズなどの制限が緩和されたところです。従来は2048×2048ピクセルまでの写真と15分までの動画が無制限だったのが,16Mピクセル(1600万画素)までの写真とフルHD解像度までの動画が無制限となりました。

図6 Web版のGoogleフォト

図6 Web版のGoogleフォト

今週の気になるWebネタ

Facebook,アニメーションGIFに対応 - CNET Japanhttp://japan.cnet.com/news/service/35065243/

これまであえてGIFアニメに非対応だったFacebookですが,Google+やTwitterと同様にサポートされるようになりました。GIFアニメは自動的に再生されるのですが,クリックすると再生を止めることができます。停止すると「GIF」というボタン表示がオーバーレイされ,クリックするとまた再生します。

普通にGIFアニメを画像投稿してもダメなようで,画像のURLを投稿する必要があるようです。この機能はまだ順次適用中の段階で仕様がはっきりしていないようなのですが,GIFアニメでニュースフィードが埋まってしまわないように投稿のハードルを高くしているのかもしれません。

ところで,GIFアニメ,あるいはアニメーションGIFのことを単にGIFというのは,Webデザイナーにとっては違和感があると思います。英語ではAnimated GIFsを略してGIFsという呼び方がよく使われているようですが,単にGIFと書いてGIFアニメのことを指しているケースもやはりあるようでした。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入