週刊Webテク通信

2016年8月第3週号 1位は,レスポンシブWebデザインのテストで気をつけること,気になるネタは,パンに絵が焼けるスマホ連携トースター「Toasteroid」--焦げ目で天気予報も

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

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

1. Best of Summer: Tips for Responsive Web Design Testing - DZone Web Devhttps://dzone.com/articles/best-of-summer-tips-for-responsive-web-design-test

レスポンシブWebデザインのテストをするときに,気をつけるべきことをまとめています。

テストの際にやりがちな間違いとして以下の3つの項目が紹介されていました。

  1. すべてのモバイルデバイスが同じサイズではないことを忘れている
  2. 実機でテストしていない
  3. 機能のテストしかしない

ユーザーが実際に閲覧する環境でテストするため,回線状況や位置情報,広告ブロックなどにも気を配る必要があるとのことでした。

図1 レスポンシブWebデザインのテストで気をつけること

図1 レスポンシブWebデザインのテストで気をつけること

2. UX Trends For Small Business Websites - Speckyboy Design Magazinehttps://speckyboy.com/2016/08/08/ux-trends-small-business/

スモールビジネスのWebサイトでの,UXデザインのトレンドについてまとめた記事です。

  1. 無限スクロールレイアウト
  2. カルーセル/スライダーをメインビジュアルに使う
  3. 実際に利用しているユーザー向けにデザインを最適化する
  4. マイクロコミットメントに注力する
  5. 人工知能を実装する
  6. コピーライターとコンテンツマーケッターをデザイナーと一緒に仕事させる

図2 スモールビジネスのWebサイトでのUXデザインのトレンド

図2 スモールビジネスのWebサイトでのUXデザインのトレンド

3. Product Pageshttp://productpages.xyz/

アプリやWebサービスなどのプロダクト紹介サイトに限定した,Webデザインのギャラリーサイトです。

以下の5項目に分類して紹介しています。

  1. スマホ用アプリ
  2. デスクトップアプリ
  3. Webサービス
  4. 実体のある商品
  5. ボット

図3 プロダクト限定のWebデザインのギャラリー

図3 プロダクト限定のWebデザインのギャラリー

4. Zooming Background Images | CSS-Trickshttps://css-tricks.com/zooming-background-images/

背景画像をマウスオーバーで拡大する効果を,CSSだけで実装する方法をレクチャーしています。

実際に動かして確認できるデモが,コード共有サイトのCodePenで共有されています。マウスオーバーが効かないモバイルデバイス向けの対策も紹介されていました。

図4 背景画像をマウスオーバーで拡大する効果の実装方法

図4 背景画像をマウスオーバーで拡大する効果の実装方法

5. How to Use Gradients in Web Design | 20 Beautiful Exampleshttp://line25.com/articles/gradients-in-web-design

グラデーションをうまく使ったWebデザインを紹介した記事です。

Web2.0の時代のような派手なものではなく,最近ではごくわずかなグラデーションが一般的で,フラットな要素,美しいベクターイラストと一緒に使われたり,写真の上に重ねて使われるとのことでした。

図5 グラデーションをうまく使ったWebデザインの紹介

図5 グラデーションをうまく使ったWebデザインの紹介

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

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

EZ Map - Google Maps Made Easyhttps://ezmap.co/

EZ Mapは,Googleマップをサイトに埋め込むためのコードを生成するサービスです。マーカーの追加や,地図のデザインのカスタマイズが簡単です。

あらかじめ用意された100種類以上のテーマから,地図のデザインを変えることができるのも面白いです。コントローラー類の表示/非表示も簡単にコントロールできます。

マーカーは豊富に用意されたアイコンから選べます。マーカーを押した後のフキダシに表示する文字を設定でき,リンクも入れられます。ログインしなくても使えますが,ログインするとマップを保存したり,自分で用意した画像をマーカーに使えるようになります。

図6 Googleマップをサイトに埋め込むコードを生成するサービス

図6 Googleマップをサイトに埋め込むコードを生成するサービス

今週の気になるWebネタ

パンに絵が焼けるスマホ連携トースター「Toasteroid」--焦げ目で天気予報も - CNET Japanhttp://japan.cnet.com/news/service/35087233/

焦げ目でパンに自由に絵を描けるトースターが,クラウドファンディングサービス「Kickstarter」で支援募集中です。キティちゃんなどキャラクターの焦げ目をつけられるトースターはありましたが,スマホアプリを利用して自由な絵をかけるところが画期的です。

こういった,スマホアプリと連動させることで実現した機器類が最近増えています。トースター自体にお絵かき機能を持たせるのは現実的ではありませんよね。今後もユーザーインターフェイス部分をスマホアプリに頼った機器がどんどん出てくることでしょう。

トースターは朝使うものなので,その日の天気予報がパンに焼き付けられたら便利だろうという発想も面白いです。毎朝,家族それぞれのその日の運勢の占いが焼き付けられたパンが食卓に並んだら,朝食タイムが盛り上がりそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入