週刊Webテク通信

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

ネットで見かけた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マップをサイトに埋め込むコードを生成するサービス

おすすめ記事

記事・ニュース一覧