週刊Webテク通信

2014年11月第1週号 1位は,WebデザイナーがGoogleのマテリアルデザインから学ぶべきこと,気になるネタは,リコー、全天球カメラ RICOH THETA の新モデル発表。動画撮影、WiFi転送高速化

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

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

1. What web designers can learn from Google’s Material Design | Webdesigner Depothttp://www.webdesignerdepot.com/2014/10/what-web-designers-can-learn-from-googles-material-design/

WebデザイナーがGoogleのマテリアルデザインから学ぶべきことをまとめた記事です。

マテリアルデザインは現在のデザインのトレンドを進化させたもので,その中心となる考え方として以下の3つが挙げられています。

  • マテリアルはメタファー(比喩)である
  • くっきりして,視覚的,意図的に
  • 動きに意味を持たせる

そして,異なる画面サイズやデバイスにおいてもデザインを統一させること,柔軟であること,単なるフラットデザインではないこと,アフォーダンスが鍵になることなど,マテリアルデザインの考え方が解説されていました。

図1 Googleのマテリアルデザインから学ぶべきこと

図1 Googleのマテリアルデザインから学ぶべきこと

2. Tips, Tricks, and Considerations for Designing an E-Commerce Website | SpyreStudioshttp://spyrestudios.com/tips-tricks-considerations-designing-e-commerce-website/

ECサイトをデザインするためのヒントや考えるべき事が解説されています。

以下の6つの項目が,考慮すべき点として紹介されていました。

  1. レスポンシブWebデザイン
  2. 実用的な検索機能
  3. ゲストとして決済することが選べる
  4. 上手な商品説明
  5. 信頼性の高いクレジットカードの処理
  6. セキュリティ的に安全な運用

図2 ECサイトをデザインするためのヒントや考慮すべき点

図2 ECサイトをデザインするためのヒントや考慮すべき点

3. 「Font Awesome」を使ったメニューの作り方 / ウェブデザインライブラリーhttp://www.webdesignlibrary.jp/2014/10/font-awesome.php

アイコンフォントを提供しているFont Awesomeを利用して,簡単にアイコンを使ったメニューを作るチュートリアル記事です。

スタイルシートもアイコンフォントも,Font Awesomeのホスティングを利用することで,非常に簡単にアイコンフォントが利用できるということが分かると思います。

図3 Font Awesomeを利用したアイコン付きメニューの作り方

図3 Font Awesomeを利用したアイコン付きメニューの作り方

4. 100 Awesome Freebies for Designers ? October 2014http://designdrizzle.com/100-awesome-freebies-for-designers-october-2014/

Webデザインに役立つフリー素材をまとめた記事です。

2014年10月分のまとめ100個ということで,ボタン,アイコン,モックアップ,フォントなどが大量に紹介されていました。

図4 Webデザインに役立つフリー素材いろいろ

図4 Webデザインに役立つフリー素材いろいろ

5 ☆ sweep.js ☆http://rileyjshaw.com/sweep/

スムーズに色が変化していく効果を与えるJavaScriptライブラリです。

細かくパラメーターを設定できますし,クリックやホバー時に色が変化するような設定も可能です。

図5 スムーズに色を変化させるJavaScriptライブラリ

図5 スムーズに色を変化させるJavaScriptライブラリ

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

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

Muzlihttp://muz.li/

MuzliはChromeの拡張機能なのですが,デザイナーのインスピレーションのヒントとなりそうな,いろいろな作品を簡単に閲覧できるサービスです。

DribbbleやBehanceなどに掲載された作品を閲覧できます。Muzliがこれらのサイトからセレクトした作品が見られるのが特徴なのでしょう。他に,Webデザイナーに役立ちそうなサイトへのリンクが並んでいます。

なお,この拡張機能を入れると,新しいタブを開いたときに自動でこのMuzliが開くようになってしまいます。これをオフにする方法を探したのですが見当たりませんでした。

図6 デザイナーの作品ギャラリーが見られるサービス

図6 デザイナーの作品ギャラリーが見られるサービス

今週の気になるWebネタ

速報:リコー,全天球カメラ RICOH THETA の新モデル発表。動画撮影,WiFi転送高速化,3万5000円 - Engadget Japanesehttp://japanese.engadget.com/2014/10/28/ricoh-theta-wifi/

全天球カメラとして新たな分野を切り開いたRICOH THETAの新モデルが発表されました。外観は全く同じでカラーバリエーションが追加され,動画撮影に対応してWiFi転送が高速化した以外には,基本性能もそれほど変わりません。

ユーザーとしては,次のモデルでは画質が向上するだろうと思っていたので,ちょっと意外でした。このカメラの性質上,撮られている側が気付かないことも多いので,あまり画像の解像度が上がってしまうと,盗撮の問題も出てきてしまうのかもしれません。しかし,解像度がもっと高ければ,印刷物に使うなど静止画像として利用できる幅が広がると思います。

ユーザーの間では,写真にTHETA本体が写ってしまうのを目立たなくするため,本体に鏡面のシールを貼るという裏技が開発されたりしています。しかし,リコーはその辺の写り込み対策も特に意識していないようですね。今回多色展開ですが,写真に本体がちょっとだけ写ってしまうことを考えると,目立たない色,結局のところ白が無難だと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入