ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン

制作メンバーはディレクションに鯛茶部長、俺。デザイナーに藤田。そしてエンジニアに私、まろC。 こちらのメンバー3人で制作しました。各担当からこだわりポイントをもらいつつ、その制作過程、特にアニメーションの演出についてのこだわりを解説したいと思います。 事業部長 俺のこだわり はじめは飲食店なので「食べログ」や「ぐるなび」に掲載すれば、WEBサイトは必要ないんじゃないか？という意見が多かったんですが、WEBディレクターとしてWEBサイトは作りたいという想いから、りょうさんとまろさんにお願いして制作しました。 一般のお客様は、基本的に「食べログ」や「ぐるなび」から情報を取得してくるので、WEBサイトの目的は「ブランディング」に絞っています。 「鯛茶STANDがお客様に伝えたいコンセプトや空気感が伝わるサイト」 という想いを第一に、「商品へのこだわりや店舗の雰囲気が美しく流れていくイメージのサイ

キレイな文字は好きですか？フロントエンドエンジニアのザワです。 本来読むための要素であるテキストも、最近ではアニメーションさせる要素の１つになることが多くなってきました。 スクロールに合わせてテキストがふわっと表示されるのも一昔の話し、それだけでは物足りなく感じてきたデザイナーやエンジニアが多くなってきたのでしょう。様々な出現パターンが見られるようになってきました。 今回は、そんな変化してきているテキストアニメーションに注目し、素敵なサイトを紹介していきます。 レッツラゴー！ Contemple https://ccccontemple.com/agency/ ローディングページからいきなりテキストアニメーションで魅せてくれます。軽量なテキストはローディングの表示にはもってこいですね。肝心なテキストアニメーションはと言うと、一文字一文字が順に下から移動して表示されます。文字に角度がついた状

2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 イラスト: Girls Design Materials 2017年によく目にしたもの一つが、グラデーションです。一昔前は同一色相のグラデーションが多かったですが、最近では複数の色相をし、グラデーション自体も大胆に使用するのが増えています。

円の軌跡に沿って、ドットだけをさまざまなアニメーションで動かしたシンプルでセンスのあるプリローダーを紹介します。 cubic-bezier()を使用した緩急のあるアニメーションは、タイミングをずらすことで、気持ちいい動きになっています。

SVGのアニメーションって綺麗だし、カッコいいですよね。 海外のサイトだったり、dribbbleではよく見るのですが、日本のサイトでは凝ったアニメーションはあまり見かけません。 解説記事も偏っていて、モーフィングだったり、ラインアートの記事はたくさんあるのですが、オブジェクトが重なっていくつもシャシャシャッと動くようなアニメーションを解説している記事となると極端に少なくなります。 というわけで、そんなアニメーションを勉強がてら作ってみました！ まずは全体のイメージを作る 今回は試しに、スマホ上にカード形式のタイトル・ディスクリプションが並ぶようなものを作ってみようと思います。 以下のような感じです。 Illustratorを使って作成しました。 Illustratorでなくても、パスが書けるようなツールで、なおかつsvg形式で書き出せるものであれば何でも良いと思います。（sketchとかで