週刊Webテク通信

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

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

ネットで見かけた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 複数のソーシャルメディアを横断してハッシュタグ検索できるサービス

今週の気になるWebネタ

「関心空間」10月末に終了 15年の歴史に幕 「情報つながる『場』役目を終えた」 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1607/26/news097.html

コミュニティサイト「関心空間」がサービスを終了すると発表しました。まだ続いていたんだと懐かしく思った人も多いでしょう。サービス開始は2001年なので,FacebookやTwitterはもちろんミクシィすら生まれる前です。

久しぶりにログインしてみると,わたしは2002年2月に使い始め,最後の投稿をしたのが同年11月でした。その存在を忘れていたものの,Twitter,instagram,Pinterestなどインタレストベースのソーシャルメディアの先がけ的存在だったんだなと改めて気付き感心しました。

なお,プロフィールサイトとしてガラケー時代の中高生に人気だった「前略プロフィール」と,ミクシィで大人気となったソーシャルゲームの先がけ「サンシャイン牧場」も終了とのことです。これらのサービスがまだ存在していたことに驚きつつ,ひとつの時代が終わったことを寂しく思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入