週刊Webテク通信

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

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

おすすめ記事

記事・ニュース一覧