週刊Webテク通信

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

ネットで見かけた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 犬種を調べたり写真と似た犬を探せるサービス

おすすめ記事

記事・ニュース一覧