週刊Webテク通信

2015年4月第3週号1位は、フラットデザインとマテリアルデザインの違いと良い点・悪い点、気になるネタは、「OS X Yosemite 10.10.3」公開、新しい標準写真ソフト「写真」登場!

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

1. Flat Design vs. Material Design: How Are They Different? - Designmodohttp://designmodo.com/flat-vs-material/

フラットデザインとマテリアルデザインの違いと、それぞれの良い点・悪い点とをまとめた記事です。

フラットデザインはデザインのトレンドで、マテリアルデザインは特定の目的のために作られたガイドラインのセットと解説してありました。

マテリアルデザインの良い点と悪い点としては、以下のようなことが挙げられています。

良い点
  • ドロップシャドウを使うなど3次元的なレイヤーを持つことで操作がわかりやすい
  • ガイドラインがきっちり決まっている
  • 複数のプラットフォームで同じユーザー体験を提供できる
  • アニメーションが用意されている
悪い点
  • Googleのガイドラインに縛られている
  • 全てのシステムで意図したフレームレートを実現できるわけではない
  • アニメーションはモバイルユーザーのバッテリーを消費する
  • アニメーションや装飾などで独自の創造性を活かしにくい
図1 フラットデザインとマテリアルデザインの違いと良い点・悪い点
図1 フラットデザインとマテリアルデザインの違いと良い点・悪い点

2. 9 Material Design Frameworks for Cutting-Edge Websites | NOUPEhttp://www.noupe.com/design/in-vogue-9-material-design-frameworks-for-cutting-edge-websites-90808.html

マテリアルデザインのフレームワークを紹介しています。

CSSフレームワークや、Bootstrapをマテリアルデザインにするテーマなど9種類が掲載されていました。

図2 マテリアルデザインのフレームワークまとめ
図2 マテリアルデザインのフレームワークまとめ

3. Responsive Logos, Part 1: Tips for Adapting Logos for Small Screens | Vigethttp://viget.com/inspire/responsive-logos-part-1-tips-for-adapting-logos-for-small-screens

レスポンシブなロゴについての記事で、小さな画面向けにロゴを最適化するヒントを解説しています。

スマートフォンなど小さな画面向けにロゴを簡略化したり、配置を換えたりといった実例が紹介されていて参考になります。

図3 小さな画面向けにロゴを最適化するヒント
図3 小さな画面向けにロゴを最適化するヒント

4. Why Designers Should Never Use Fake Text In Web Designhttp://thenextweb.com/dd/2015/04/09/why-designers-should-never-use-fake-text/

Webデザインをするときに、意味のないダミーのテキストを使わない方がいいという記事です。

コンテンツファーストのアプローチで、存在しているコンテンツを元にデザインするべきとのことです。

無意味なテキストを使うくらいなら、競合他社のページからコピーしてきたテキストを使う方がましという解説もありました。

図4 Webデザインにダミーテキストは使うなという記事
図4 Webデザインにダミーテキストは使うなという記事

5. Our Favorite jQuery Plugins and Libraries For Spring 2015 | Tutorialzinehttp://tutorialzine.com/2015/04/our-favorite-jquery-plugins-and-libraries-for-spring-2015/

jQueryのプラグインやライブラリを大量に紹介しています。

Githubに掲載されているものから、最近公開されたものやアップデートされたものを中心にまとめたようです。

図5 jQueryのプラグイン&ライブラリいろいろ
図5 jQueryのプラグイン&ライブラリいろいろ

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

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

Streamable - simple video sharinghttp://streamable.com/

Streamableは、簡単に動画を共有できるサービスです。動画をアップロードして、始点と終点とを決めてトリミング(以下、トリミングは画像サイズではなく再生時間のトリミングのことです)したものを、独自のURLで公開できます。

また、YouTubeなどのオンライン動画をトリミングして公開することも可能で、その場合はオリジナルへのリンクも張られます。

動画をブログやホームページに埋め込むためのコードも生成するので、シンプルなインターフェイスで動画を埋め込みたいときに便利です。iPhoneからも動画をアップロードできたのですが、動画の始点・終点の設定はできませんでした。まあ、iPhoneでは標準機能で動画を簡単にトリミングできるので問題ないでしょう。

インターフェイスがとにかくシンプルで、ログインなしで手軽に使うことができるのが特徴です。YouTubeを使わずに動画を共有する場合の選択肢として面白い存在になるかもしれません。

図6 簡単に動画を共有できるサービス
図6 簡単に動画を共有できるサービス

おすすめ記事

記事・ニュース一覧