週刊Webテク通信

2016年3月第2週号 1位は,良いWebサイトを作るための感情に訴えるデザイン,気になるネタは,アマゾンに交換フィルタを自動注文--BRITA,浄水ポット「Infinity」を発売

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

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

1. Creating Great Websites By Designing For Emotionhttp://www.onextrapixel.com/2016/03/03/creating-great-websites-by-designing-for-emotion/

良いWebサイトを作るための,感情に訴えるデザインを推奨する記事です。

感情が企業とお客をつなぐとのことで,以下の項目で感情を刺激するデザインについて解説しています。

  • 感情に訴えるデザイン
  • 感情を刺激するには
  • Webデザインに感情をもたらす
  • 感情を作り出すための手順
  • 感情は常に快いものではない
  • 感情に訴えるデザインで最も重要な要素

図1 良いWebサイトを作るための感情に訴えるデザイン

図1 良いWebサイトを作るための感情に訴えるデザイン

2. The Seven Best Strategies For Using Photos in Web Interfaceshttp://speckyboy.com/2016/03/07/strategies-using-photos-web-inerfaces/

Webのインターフェイスに写真を使うための戦略を解説しています。

以下の7つの項目で,事例を元に写真を活用するテクニックが紹介されていました。

  1. メインビジュアル
  2. 現実感のある物体
  3. 白黒写真
  4. 色をかぶせた写真
  5. 小さな写真の組み合わせ
  6. 特別なフォントや言葉
  7. 写真の加工

図2 Webインターフェイスに写真を使うための戦略

図2 Webインターフェイスに写真を使うための戦略

3. Free Bootstrap PSD Grids for Crafting Excellent Website Designs - Designmodohttp://designmodo.com/bootstrap-grid/

BootstrapベースのWebデザインに便利な,PSD形式のグリッドのテンプレートを各種紹介しています。

まずはPhotoshopでデザインをするという人に役立ちそうですし,プリントアウトして手書きのプロトタイプ作りに使えるものもありました。

図3 Bootstrap用グリッドのPSD素材いろいろ

図3 Bootstrap用グリッドのPSD素材いろいろ

4. 9 Free Cross Browser Testing Tools | SmashingApps.comhttp://www.smashingapps.com/2016/03/03/9-free-cross-browser-testing-tools.html

各種ブラウザでの表示チェックを無料で行えるWebサービスとツールを,多数まとめた記事です。

無料のサービスの場合,選べるブラウザの種類が限られていたり,スクリーンショットを撮るのに時間がかかるなど,何かしら制限があることが多いのでご注意ください。

図4 無料のブラウザ表示チェックサービスとツール

図4 無料のブラウザ表示チェックサービスとツール

5. Hamburgers by Jonathan Suhhttps://jonsuh.com/hamburgers/

アニメーションするハンバーガーメニューのCSSを提供しています。

クリックすると閉じるボタンや戻るボタンにアニメーションして変化するハンバーガーメニューが多数用意してあり,簡単に実装できます。

図5 CSSでアニメーションするハンバーガーメニュー

図5 CSSでアニメーションするハンバーガーメニュー

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

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

What is your dog?https://www.what-dog.net/

マイクロソフトが提供する,犬の写真から犬種を調べたり,人の写真がどの犬に似ているかを判定できるWebサービスです。マイクロソフトの画像認識技術をプレゼンする意味合いもあるサービスなのでしょう。

犬の写真をアップすると,犬の種類を教えてくれます(英語です)。また,犬の名前で検索すると,その犬の写真が表示されます。犬の名前は,日本語でもちゃんと検索できました。

そして面白いのが,人の写真をアップして,顔認識で似た犬を探す機能です。人間に限らず,猫などのほかの動物の写真や,仏像などの顔でも認識するようで,いろいろと楽しめます。

図6 犬種を調べたり写真と似た犬を探せるサービス

図6 犬種を調べたり写真と似た犬を探せるサービス

今週の気になるWebネタ

アマゾンに交換フィルタを自動注文--BRITA,浄水ポット「Infinity」を発売 - CNET Japanhttp://japan.cnet.com/news/service/35078795/

Wi-Fiでネットに繋がり,水をろ過した量から交換時期を計算して,自動でフィルターを注文する浄水器が登場するそうです。ほかにも,アマゾンに自動でインクやトナーを注文するプリンターなどもあるようです。

必要になるちょっと前に確実に送られてくるのなら,買い置きする必要がなくなりそうです。買い置きが好きな人は,安いときにまとめて買うと思うので,そういう人には向かないシステムかもしれません。

わたしは妻からブルーレイディスク(BD-R)をアマゾンに発注するよう頼まれるのですが,ついつい忘れてしまいがちです。妻がわたしにLINEで「ブルーレイ注文して」と送ったら,自動でいつも買ってるディスクを注文する仕組みができたらいいなと思いました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入