週刊Webテク通信

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

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

ネットで見かけた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 簡単に動画を共有できるサービス

今週の気になるWebネタ

「OS X Yosemite 10.10.3」公開,新しい標準写真ソフト「写真」が登場! | マイナビニュースhttp://news.mynavi.jp/news/2015/04/09/020/

OS X Yosemiteがアップデートされて,写真管理・編集ソフトの「写真」が登場しました。iPhotoの後継ソフトであり,iOSの写真アプリと同様の機能,使い勝手でアイコンも同じものとなっています。

アップデートするとDockからiPhotoが消えて「写真」が登録されるのですが,iPhotoも残っているので使い続けることもできます。iPhotoのライブラリを「写真」用に変換すると,以降はiPhotoで開くことはできるものの閲覧専用となるようです。

なお,⁠写真」ではiCloud共有でiOS端末と写真を同期する使い方が推奨なのでしょうが,以前からiPhotoで可能だったフォトストリームを読み込む機能もありました。デフォルトではオフになっているのですが,⁠写真」の環境設定のiCloudタブから「マイフォトストリーム」にチェックを入れると,iOS端末のフォトストリームの写真が自動的に登録されます。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入