そのアニメーションに意味はありますか？モバイルアプリケーションのための動きのあるUXコンセプト

2015年2月18日
Webデザイン

モバイルアプリケーションのための動きのあるUXコンセプト

Animated UX Concepts for Mobile Applications

UI animation has become just as essential as static design. Animations are a fantastic way to provide a user feedback when they use an app or website – whether it be huge heart appearing on the screen when they like picture, or when a screen slides across to show progress through an app.
Here are 20 awesome examples of UI animation that can enhance an app.

UIアニメーションはスタティックなデザインと同じぐらい必須になりました。それらをアプリケーション、あるいはウェブサイトで使うとき、アニメーションはユーザーにフィードバックを提供する素晴らしい方法です－好きな写真があった時に、スクリーンに現われる大きなハート、あるいは経過を見せるためにスクリーンが横切って滑る。
ここにアプリケーションの質を高めることができるUIアニメーションの20の素晴しい例があります。

マテリアルデザインに対する人による温度差はなかなかのものだと感じますが、単に「ボタンの大きさの目安ができて便利だよね」くらいの感想を持ってる人も少なくありません。ですがマテリアルデザインによって「ユーザーの為の、UXの向上につながるアニメーション」という考え方が改めてガイドライン化され、アニメーションをただの「お化粧」だと認識するデザイナーはぐっと減ったはずです。アニメーションの話題でUIではなくUXというワードが出ることが多くなったのも、デザイナーのアニメーションに対する意識が変わったと感じる部分です。
考えられたアニメーションはエレメントに優先順位を与えたり、視線を誘導する、そして、操作したユーザーに対して少しの満足感を与えるのに効果的です。MARQUEEの罪はもう忘れましょう。

Animated UX Concepts for Mobile Applications

ゴーストボタン－ミニマリストのWEBデザイントレンド

Ghost Buttons – THE Minimalist Web Design Trend

The times of gloss and 3D effects are over – at least for now. The trend in web design goes towards minimalism which is also reflected in the style of buttons. The hot so-called ghost buttons fit perfectly with the reserved look of modern websites based on flat design or even more trendy material design. Ghost buttons basically consist only of a very thin outline with some text in it.

グロス（光沢）と3D効果の時代は終わっています－少なくとも今のところ。 WEBデザインのトレンドはボタンのスタイルに反映されているようにミニマリスムに向かって行きます。ホットないわゆるゴーストボタンは、フラットなデザイン、あるいはさらにいっそうトレンディなマテリアルデザインに基づいて、完全にモダンなウェブサイトの控え目な外見にフィットします。基本的にゴーストボタンは、その中の若干のテキストと非常に細いアウトラインでだけで構成されます。

ゴーストボタンを使用するには前提として、サイトがミニマルである必要があります。完全にシンプルなサイトではコンセプトがぶれるのでおそらく使われません。マテリアルデザインにゴーストボタンを取り入れる場合はフラットボタンとして使うのでしょうけど、見た目が少しだけライズボタンに寄ってしまうので扱いに少し悩むかもしれません。

Ghost Buttons – THE Minimalist Web Design Trend

過去のヒット作#4：　100の2014年の最も良いフリーのHTML/CSSのテーマ（テンプレート）

Blast from the Past #4: 100 Best Free HTML/CSS Themes of 2014

If your deadline is approaching too fast, just like it always does, pull the following article from your toolbox and get up to speed.

もしあなたの期限があまりにも速く迫っているなら、あなたのツールボックスから次の記事を引き出して、そしてスピードを上げてください。

100個もあると眺めているだけで楽しいですね。いいなーと思う配色やレイアウトがあったらスクショだけでも撮っておきましょう。
数年前であれば、日本のサイトとデザイン傾向が違うので海外製のテンプレートを使うと海外感が出ちゃう、ということがありましたが、以前ほど気にする必要もなくなりました。

Blast from the Past #4: 100 Best Free HTML/CSS Themes of 2014

jQueryを使ったドラッグアンドドロップ・ニュースレタービルダー（チュートリアル＆無料のテンプレートが含まれます）

Drag and Drop Newsletter Builder using jQuery (tutorial & free template included)

This builder will have both Download and Export options. When exporting or downloading with the intend of importing it into a newsletter service you should change the setting of your service provider to convert the CSS styles into inline styles.

これはあなたにjQueryを使ったニュースレタービルダーのためにドラッグ・アンド・ドロップインタフェースを作成する方法を教えるチュートリアルです。あなた自身のテンプレートを作成して、そしてビルダーでそれを読み込むことが可能でしょう。どのようにあなた自身のテンプレートを読み込むのか、このチュートリアルで学ぶ事ができます。

一瞬で数時間持ってかれたくらい、楽しくて実用性の高いチュートリアルです。カスタマイズが好きな人はきっとはまります。jQueryなど現状作らない予定のカテゴリの記事を紹介したい場合は、今回のように近そうなカテゴリに入れます。

Drag and Drop Newsletter Builder using jQuery (tutorial & free template included)

46の最もクリエイティブな404エラーページ（2015年版）

46 of the Web’s Most Creative 404 Error Pages (2015 Edition)

Entering a mistyped URL into your browser or clicking a link to a destination that no longer exists usually leads to a 404 error page. This 404 is generated by your server and if you do nothing about will look like a default server message looks – ugly and boring and unhelpful to the technically non-savvy. This needs not be that way, however.

あなたがミスタイプされたURLをブラウザに入力したり、あるいはもう存在しない目的地へのリンクをクリックすると404エラーページに導きかれます。この404はあなたのサーバーによって生成されて、もしあなたが何もしないならデフォルトのサーバーメッセージが表示されるでしょう－専門的なことがわからない人たちにとっては、それは醜く、退屈で、そして何の役にも立たなくものと感じます。そのようなニーズはないでしょう。

404ページには動物が多い気がします。特にライトユーザー向けのサイトの場合は、404ページで目的のページが表示されなかったストレスを緩和することと、そして今どういう状況なのか落ち着いて理解してもらうこと、離脱しないようにナビゲーションしてあげることが重要です。ギーク・ナード向けのサイトなどでは、ただひたすら煽るような404ページがたまにあったりしますが、それはそれで好きです。

46 of the Web’s Most Creative 404 Error Pages (2015 Edition)