週刊Webテク通信

2016年8月第1週号1位は、プロトタイプを作るための3種類の方法、気になるネタは、「関心空間」10月末に終了 15年の歴史に

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

1. 3 great ways to build a website prototypehttp://thenextweb.com/dd/2016/07/28/3-badass-ways-build-website-prototype/

プロトタイプを作るための3種類の方法と、それぞれの特徴などを解説した記事です。

  1. Keynoteなどのプレゼンテーションソフトを使う
  2. コーディングしてプロトタイプを作る
  3. UXPinなどのプロトタイプ用のソフトウェアやアプリを使う

3つの方法ごとに、良い点/悪い点やツールなどを紹介しています。

図1 プロトタイプを作るための3つの方法
図1 プロトタイプを作るための3つの方法

2. 16 Prototyping Tools & How Each Can Be Used (Updated — 2 more tools added) — Prototyping: From UX to Front Endhttps://blog.prototypr.io/14-prototyping-tools-how-each-can-be-used-1c804fab33a6#.q52lv1ds8

プロトタイプを作るためのツールを分類分けして紹介した記事です。

「モバイル向け/デスクトップ向け/両方」というプラットフォームによる分類と、⁠精度は低いけど速い/精度が高い分時間がかかる」といった分類とを組み合わせて、あてまはるツールをまとめています。

図2 プロトタイプを作るためのツール
図2 プロトタイプを作るためのツール

3. Web Design in 4 minuteshttp://jgthms.com/web-design-in-4-minutes/

「4分間でのWebデザイン」と題し、Webデザインの初級テクニックを紹介しています。

最初は何もデザインされていないテキストだけの状態から、リンクを押していくごとに段々とCSSによるデザインが適用されていくアイデアが面白いです。

図3 Webデザインの初級テクニックを学べるページ
図3 Webデザインの初級テクニックを学べるページ

4. How Progress Bar Indicators Help In Mobile UX Design?https://think360studio.com/how-progress-bar-indicators-help-in-mobile-ux-design/

プログレスバーによるインジケーターについてまとめた記事です。

進行状況をユーザーに伝えるインジケーターについて、以下の項目に分けて解説しています。

  1. フィードバックへの鍵
  2. 種類
  3. ループアニメーション
  4. 整列したループアニメーション
  5. システム標準の/カスタマイズしたループアニメーション
  6. 直線のアニメーション
  7. 革新的なアニメーション
  8. ステップの表示
  9. 骨組みの表示
  10. 静的なインジケーターを避ける
  11. 2度クリックすることへの警告を残す
  12. 退屈さをなくす
図4 プログレスバーによるインジケーターについてまとめ
図4 プログレスバーによるインジケーターについてまとめ

5. 50 Beautiful Websites with Blurred Backgrounds for Your Inspiration - Hongkiathttp://www.hongkiat.com/blog/blurred-backgrounds-web-design/

ぼやけた画像が背景のWebサイトのギャラリーです。

ぼやけた画像はグラフィックデザインのトレンドで、文字やボタンを目立たせ、浮き上がって見える効果もあるとのことでした。

図5 ぼやけた画像が背景のWebサイトのギャラリー
図5 ぼやけた画像が背景のWebサイトのギャラリー

そのほか、最近の記事の中から、Web用グラフィックツールの話題を2つ紹介します。

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

Tagboardhttps://tagboard.com/

Tagboardは、複数のソーシャルメディアを横断してハッシュタグ検索できるサービスです。Twitter、Facebook、Instagram、Google+、Vine、Flickrに対応しています。

1つ、あるいは複数のソーシャルメディアを選んで検索結果を絞り込むことも可能です。ソーシャルメディ

アのアカウントで認証するとTagboard上で投稿への「いいね」やリツイートなどもできますが、Instagramの投稿にリアクションはできませんでした。

検索結果を「Tagboard」として保存することができます。⁠Tagboard」は独自のURLを持ち、ヘッダ画像などをカスタマイズできます。

「Tagboard」を他ページに埋め込んだり、イベント会場のモニタやテレビなどで利用するための機能もあります。

図6 複数のソーシャルメディアを横断してハッシュタグ検索できるサービス
図6 複数のソーシャルメディアを横断してハッシュタグ検索できるサービス

おすすめ記事

記事・ニュース一覧