最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ
ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン
鯛茶漬け専門店「鯛茶STAND」のサイトを制作したので、フロントエンド的こだわりを解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
制作メンバーはディレクションに鯛茶部長、俺。デザイナーに藤田。そしてエンジニアに私、まろC。 こちらのメンバー3人で制作しました。各担当からこだわりポイントをもらいつつ、その制作過程、特にアニメーションの演出についてのこだわりを解説したいと思います。 事業部長 俺のこだわり はじめは飲食店なので「食べログ」や「ぐるなび」に掲載すれば、WEBサイトは必要ないんじゃないか？という意見が多かったんですが、WEBディレクターとしてWEBサイトは作りたいという想いから、りょうさんとまろさんにお願いして制作しました。 一般のお客様は、基本的に「食べログ」や「ぐるなび」から情報を取得してくるので、WEBサイトの目的は「ブランディング」に絞っています。 「鯛茶STANDがお客様に伝えたいコンセプトや空気感が伝わるサイト」 という想いを第一に、「商品へのこだわりや店舗の雰囲気が美しく流れていくイメージのサイ
サイトに彩りを添えて…テキストアニメーション5選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
キレイな文字は好きですか？フロントエンドエンジニアのザワです。 本来読むための要素であるテキストも、最近ではアニメーションさせる要素の１つになることが多くなってきました。 スクロールに合わせてテキストがふわっと表示されるのも一昔の話し、それだけでは物足りなく感じてきたデザイナーやエンジニアが多くなってきたのでしょう。様々な出現パターンが見られるようになってきました。 今回は、そんな変化してきているテキストアニメーションに注目し、素敵なサイトを紹介していきます。 レッツラゴー！ Contemple https://ccccontemple.com/agency/ ローディングページからいきなりテキストアニメーションで魅せてくれます。軽量なテキストはローディングの表示にはもってこいですね。肝心なテキストアニメーションはと言うと、一文字一文字が順に下から移動して表示されます。文字に角度がついた状
[CSS]コピペで簡単に利用できる、シンプルでセンスのあるアニメーションが気持ちいいプリローダー
円の軌跡に沿って、ドットだけをさまざまなアニメーションで動かしたシンプルでセンスのあるプリローダーを紹介します。 cubic-bezier()を使用した緩急のあるアニメーションは、タイミングをずらすことで、気持ちいい動きになっています。
![[CSS]コピペで簡単に利用できる、シンプルでセンスのあるアニメーションが気持ちいいプリローダー](https://cdn-ak-scissors.b.st-hatena.com/image/square/f7043feb66b1cbc53d6fa919069cb5c33cf6a394/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017122006.png)
実戦で使える本格的なSVGアニメーションを作る - The future starts today
SVGのアニメーションって綺麗だし、カッコいいですよね。 海外のサイトだったり、dribbbleではよく見るのですが、日本のサイトでは凝ったアニメーションはあまり見かけません。 解説記事も偏っていて、モーフィングだったり、ラインアートの記事はたくさんあるのですが、オブジェクトが重なっていくつもシャシャシャッと動くようなアニメーションを解説している記事となると極端に少なくなります。 というわけで、そんなアニメーションを勉強がてら作ってみました！ まずは全体のイメージを作る 今回は試しに、スマホ上にカード形式のタイトル・ディスクリプションが並ぶようなものを作ってみようと思います。 以下のような感じです。 Illustratorを使って作成しました。 Illustratorでなくても、パスが書けるようなツールで、なおかつsvg形式で書き出せるものであれば何でも良いと思います。（sketchとかで
voxel.css
var scene = new voxelcss.Scene(); scene.rotate(-Math.PI / 8, Math.PI / 4, 0); scene.attach(document.body); var world = new voxelcss.World(scene); var editor = new voxelcss.Editor(world); editor.enableAutoSave(); if (editor.isSaved()) { editor.load(); } else { editor.add(new voxelcss.Voxel(0, 0, 0, 100, { mesh: voxelcss.Meshes.grass })); } View in JSFiddle var voxel = new voxelcss.Voxel(0, 0, 0, 10
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの素晴らしいアイデアが満載！2017年スタイルシートを使ったテクニックのまとめ