量産型UIから脱却したくて。個人開発の賃貸検索「Comfy」が提言する“探しやすさ”の形【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカス量産型UIから脱却したくて。個人開発の賃貸検索「Comfy」が提言する“探しやすさ”の形【フォーカス】 ソフトウェアエンジニア・個人開発者 choo 大学では文学部だったが、卒業後、たまたま内定が出たため入った大手SIerでプログラミングの面白さに目覚める。2年半で退職した後、1年間アルバイトをしつつ情報科学を独学し、Webサービス開発会社にプログラマとして就職する。2019年から個人開発に取り組んでおり、手描き文字の美麗さをAIで判定する「Letters」というWebアプリも運営している。独学時代には生活費を切り詰めるため、格安の事故物件で生活していた。 X Comfy Letters 賃貸物件の検索条件を入力すると、地図上の地域がリアルタイムに色を変え、「この条件の物件は、この地域にこれくらいある」とひと目でわかるWebサービス「Comfy（コンフィ）」。条件にフィット
生成したキャラクターを再現できる「MasaCtrl」の使い方！AIが苦手な一貫性の問題を解決しよう【Stable Diffusion web UI】
をご紹介するという内容になっています。 これまでAIイラストというと一貫性の問題、つまり「同じキャラクターを生成するのが難しい」という課題がありました。例えばあるイラストを生成して好みのキャラクターが出たとしても、別の呪文を使うとそのキャラクターを正確に再現できなくなってしまう…ということですね。 ただ最近はこの問題に対する対処法がいくつか登場しており、一貫性が重要なアニメーションや漫画への応用がより実用的になりつつあります。そのような中でこの問題に対して有効な「MasaCtrl」という手法を使えるweb UI用の拡張機能が登場し、一貫性の問題を解決できそうだと先日各所で話題になっていたので私も試してみることにしました。 ここではこのMasaCtrlの概要や使い方について解説していきますね。
やめてほしいUIアニメーション
最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ！と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ？と思ってしまう、そんな「これはやめてほしい
アニメーションのスピードを同じにしてはいけないポイント
こちらの3つのアニメーションはボタン押下後に小中大のウインドウを表示させていますが、大きさによってアニメーションを変化させています。 小さいものほど動きは早く、大きいものほど動きは遅くすることでより自然なアニメーションに見せることができます。 この動きがもし逆だった場合はどう見えるのかが下の画像になります。 小さいウインドウの動きはゆっくりに見え、少し鈍い感じを覚えます。 大きいウインドウでは素早く動くため視覚への負荷が大きく、衝撃、緊急性があるように見えます。 より良いアニメーションは現実の動きに近いアニメーションが自然に感じられるため、現実世界と同じように大きいものはゆっくり動き、小さいものは素早く動くことで自然な体験を得ることができます。 それでもユーザーへの待機時間を減らすためになるべく早くアニメーションを終わらせたい場合は途中から再生させることをお勧めします。
動きが新感覚！Web制作で参考にしたいUIインタラクション、アニメーション36個まとめ
この記事では、ウェブデザイン制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。Webやモバイルアプリの参考アイデアとして取り入れたい、ユニークで素敵なアニメーションを中心に揃えています。 最新ウェブデザインも一緒に確認することで、デザイントレンドや動向をうまく掴むことができます。 Webアイデアの宝庫！注目したい最新ウェブデザイン35個まとめ Web制作の参考アイデアに！いま話題の最新ウェブデザイン50個まとめ いまWebがすごい！参考にしたい話題の最新ウェブデザイン37個まとめ 【総まとめ】2019年印象に残った世界のベストWebデザイン厳選50個 新感覚の動き！Web制作で参考にしたい最新UIインタラクション、アニメーションまとめ #blacklivesmatter 世界中でムーブメントを巻き起こしている、黒人に対する暴力や構造的な人種差別の撤廃を訴える
React Native をプロダクションで使ってわかった良かった点・悪かった点 - Qiita
こんにちは、株式会社ピケ CTO の中西（@nakanishy）です。 Dish というランチ検索アプリのフロントエンドとデザインを担当しています。 Dish では、React Native を採用して iOS アプリの開発をしています。iOS アプリを正式にリリースしたことがなく、また React Native も初めてだったので、苦戦する場面も多々ありましたが、良かった点もたくさんありました。 この記事では、Web 開発者の視点で React Native の良かった点と悪かった点を紹介したいと思います。 React Native の良かった点 高速に開発できる React Native は、ライブリロードとホットリロードをデフォルトでサポートしているので、Web 開発をしているかの如く高速に開発が進められました。保存すると即座に変更が反映されます。また、ホットリロードの場合、状態を維
任天堂『スプラトゥーン』UIデザインの舞台裏｜娯楽のUI 公式レポート #2 | キャリアハック（CAREER HACK）
「わかりやすさ」と「新鮮さ」の両立を目指して ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「スーパーマリオ」「ゼルダの伝説」「どうぶつの森」など、これまでに数々の大ヒットシリーズを世に送り出してきた任天堂。 そんな任天堂が、新規タイトルとして企画し、開発したのが「スプラトゥーン」だ。 スプラトゥーンはインクを撃ち合うアクションシューティングゲーム。2015年5月にWii U専用のゲームソフトとして発売された。 いわずもがなの大ヒットタイトルとなったが、その大きな特徴は作り込まれた世界観。UIデザインを担当した、橘 磨理子さんは「わかりやすさ」と「新鮮さ」の両立を意識したという。 「UIは“わかりやすさ”が何よりも大事で、目立ってはいけないものだと思っていたのですが、アートディレクターからは“新鮮
モバイルにおける入力フォーム最適化(EFO)の７つのルール
皆さんのアプリやサイトを利用するモバイルユーザーには、特定の目的があります。そして多くの場合、ユーザーとその目的の間に立ちはだかっているのはフォームです。 実際には、フォームは目的を果たすための道のりにおいて、最後のステップであると考えられることが多いです。だからこそ、ユーザーが戸惑うことなくできる限り早くフォーム入力を完了できるようにすることが重要なのです。 次の７つのルールに従って、素早く簡単に完了できるフォームを作りましょう。 ルール１：フォーム表示をふさがない キーボードなどのインターフェース要素により、フォーム表示がふさがれないようにしましょう。ユーザーがフォームへの入力を完了したら、入力フィールドを自動的に画面の上へ送るようにしましょう。
［CEDEC 2016］分かりやすいゲームのUIを作るには？ アニメーションを用いたプレイヤー誘導のテクニック
ゲームとプレイヤーをつなぐものとして重要なユーザーインタフェース（以下，UI）。そのUIに込められているゲーム制作者の意図を解説する「エフェクト/UIモーションの役割〜背後にある意図とその実現」と題する講演が，2016年8月24日のCEDEC 2016で行われた。 講演を担当したのは，オインクゲームズでUIデザインを担当している新藤 愛大氏だ。カードゲームの開発で知られるオインクゲームズだが，スマートフォン向けゲームでも質の高いタイトルをリリースしており，同社の知見がどのようなものかは興味をそそられる。 実際に同社のデザイナーが，どのような意図を込めてUIを作り上げていったのか，その過程を見ていくことにしよう。 アナログのカードゲームをメインとしているオインクゲームズだが，コンピュータゲームもこれまで4本リリースしており，そのうち2本が，Appleが選定する2014年と2015年の「今年の
dribbbleのぬるぬる動くメニューUIのアイデア10選
アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！ Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい
AutoLayoutでアニメーションを設定する方法(Swift版) - Qiita
以前書いたAutoLayoutでアニメーションを設定する方法のSwift版です。 アニメーションで動かしたいものの例 例として、mainViewの上に乗った、movableViewを下に動かすことを考えます。 movableViewの制約は、superViewであるmainViewに対して、以下のような制約を持っているとします。 Top Space, Trailing Space, Leading Spaceの各種の制約の値は0になっています。高さは適当です。 やってみる 基本的な考え方は、既に付いているautoLayoutの制約を外し、別の制約を付ける、ということです。今回の場合、"Top Space to SuperView = 0" の制約を外し、Top Space to mainView = 30 といった制約をつけます。 まず外す対象の制約をoutletでソースに結び付けておきま
Elastic Progress | Codrops
An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax. Today we’d like to share an interesting progress button effect with you. The effect is based on a very nice Dribbble shot called “Download” by xjw. The button starts as an icon with an arrow and once it’s clicked, it animates into a fun little wire and a label that indicates the downl
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
『After EffectsやPixateを使ったUIインタラクションデザインコンセプト』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/t_takasaka/status/1570716749565231104
スマホのUIに快適で、実用的な数多くのアニメーションを実装できるswiftのライブラリ -Hero
新着記事
ちょっとした動きを加えるとUIは魅力的になる！新感覚のアニメーションが気持ちいいUIデザインのまとめ
jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ