Lottieでアプリにアニメーションを組み込む話（デザイナー編） - くらげだらけ
最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。 アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。 とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ
ソシオメディア | デザインエントロピーの抑制
この記事は、2015年7月に開催した UX戦略フォーラム 2015 Summer における私の同タイトルの講演をもとにしています。またこの内容は ÉKRITS への寄稿記事「エントロピーとデザイン」の続編ともなっています。 デザイン・エントロピー デザインのプロセスにおいては、よくこんなことが起こります。サービスの企画段階ではとてもよいコンセプトだったのに、設計や製造の工程を経るうちに、技術的制約、コスト的制約、時間的制約、互換性や保守的な要求への対応、その他の様々な要因により、デザインが妥協案や折衷案にまみれていく。サービスの価値を決定づけている根幹がスポイルされて、気がつけば平凡でつまらないものができあがっている… このように、せっかくのアイデアが次第に骨抜きになってしまうのは、デザイナーにとってとても残念なことですが、これはある意味仕方のないことなのです。なぜなら、このような現象は宇
Hello new logo | メルカリデザイン
みなさまにご利用いただいて、メルカリは6年目を迎えました。 創業以来、世界的なマーケットプレイスの実現を掲げ、フリマアプリ「メルカリ」の地道なアップデートを続けています。 もっとシームレスに、便利に、快適に。今までよりもなめらかな生活の後押しをするプラットフォームを目指し、メルカリは、これまでのメルカリを超え続けていきます。 そんな未来への強い意志を込めて、ロゴの変更を行いました。よりシンプルで、フレンドリーな新しいロゴでお目にかかれることを楽しみにしています。新しいメルカリは、あなたの生活とともに。 これまでの、「箱から飛び出すワクワク」というアイデンティティを残しながら、要素を少なくしていくことで、より洗練されたロゴマークに仕上げ、メルカリの目指すオープンでフェアなマーケットを表現しています。実際に作ったプロトタイプは数百種類。試行錯誤を重ねて新しいロゴマークを決定しました。
heyインサイドストーリー 〜heyのCIデザインプロセス全記録〜｜Takamasa Matsumoto
先日発表された、CoineyとSTORES.jpの経営統合によって設立されたheyのCIデザイン制作をストアーズのデザイナーである中間（@chucaaan）さんとお手伝いさせていただきました。 CIデザインのプロセスは、ビジョンを見えるかたちにしていくことを通じて、その背景にある思想や想いを辿ることそのもの。 そのプロセスの共有を通じてheyがどんなことを目指しているのかをお伝えしていければと思います。 事のはじまり2017年某日。 Googleカレンダーにコイニー代表である佐俣から「1on1」というタイトルだけがセットされた、謎めいたミーティングの冒頭にて、それは始まりました。 佐俣「コイニーとストアーズが統合してヘイ！っていうホールディングスができる。なのでそのCIをつくってほしい。」私「...」佐俣「...」私「ヘイ。なるほど?!」と、まあこの様な感じで、突然のことだったので意図をき
TBS NEWS いらすとキャスター爆誕☆裏話｜深津 貴之 (fladdict)｜note
TBS NEWSさんのバーチャルキャスターを、SIXの大八木さんと一緒にプロデュースいたしました。まさかの「いらすとや」さん起用です。 そんなバーチャルキャスターが、生まれるまでの裏話。 ことの始まり去年の後半、SIXの大八木さんから誘われ、一緒にTBS NEWSさんのデジタル展開をサポートすることに。主にアドバイザリとしてお手伝い。抑えるべきテクノロジ、これからくるサービス、ソーシャル展開のコツなどを、入れ知恵するお仕事です。 そんな中、TBSさんから「若者向けの番組作りたいんだけど、一緒にやろーよ」というお話があり…そこで企画提出したのが、 バーチャル・ユーチューバーを作成し、そのままニュース報道をしちゃうまでを記録した、プロジェクトX的ドキュメンタリーこれが、いらすとキャスター計画の始まりです。 なぜ「いらすとや」なのか？世間的にVTuberといえば、バ美肉（バーチャル美少女受肉、バ
Sketch + InVision + Zeplin + Abstractで効率化するデザインフロー
デザイナーの西田です。 弊社では目的に応じて、複数のデザインツールを使い分けてUIデザインを作成しています。 昔は各々好きなデザインツールを使っていたのですが、事業がどんどん拡大し、メンバーが増えていくと、チームで統一されたワークフローがないと回らない状況になっていきました。各ツールの長所＆短所を何度も議論した結果、現在はSketch + InVision + Zeplin + Abstractの組み合わせで進めています（2018年9月時点） 今回の記事では、現状のデザインツール＆フローに至った経緯を紹介していきます。 目次 1. プロダクト＆チーム プロダクト チーム 2. ワイヤーフレーム：自由 3. モックアップ：Sketch vs AdobeXD vs Photoshop Zeplin連携 Sketch Librariesによるコンポーネント化 4. プロトタイプ：InVision
デザインプロセス | Amazon Alexa Voice Design Guide
ユーザーがやりたいことをより早く、簡単に、楽しく実現できるようにしましょう。Alexaとの会話を通じて、ユーザーが心地よくサービスを利用できるようにしてください。 スキルを設計する場合、ユーザーとAlexaの対話の台本を作成しましょう。まずは、すべての対話が順調に進み、ユーザーが必要なものを得られるやり取りにフォーカスし、そのあと、より複雑な部分や意外性のある部分に取り組みましょう。スキルを利用するユーザーにどのような体験をして欲しいか、どのように感じて欲しいかよく検討してください。 目的とユーザーストーリーの設定 最初に人々が何を実現したいかを検討し、その後、あなたのスキルで実現できることとスキルを利用することの利点を決めてください。それから、人々が何を必要としていて何ができるのかについてストーリーを作ってください。その後、台本と対話フローを使ってやり取りの詳細とバリエーションを定めてく
マイクロインタラクションとバレエ｜深津 貴之 (fladdict)
UIのモーションを考える時、よく脳内でバレリーナの動きを再生する。 妹がバレエをやっていたため実家の居間では、ローザンヌ国際バレエコンクールのビデオがよく流れていた。 ローザンヌは世界最強の若手バレリーナを決める大会だ。この番組はクロード・ベッシー女史というコメンテーターの、辛口実況がウリだった。彼女はパリオペラ座学校の校長先生でもあり、それゆえに評価のハードルが非常に高い。コンテストの登壇者は、ほぼ確実にベッシー先生に滅多斬りにされる。TVカメラのまえで泣きだすこともある。ある意味、登竜門であると同時に公開処刑の場でもあった。 そんなベッシー先生が珍しく大絶賛していたのが、2001年だか2002年に出場したミレナ・シドロヴァだった。（追記、ベッシーさん2002年引退してますね。ビデオで見てたから時系列がメタメタだった。2002年のコメンテーターは別っぽい）。 バレエに特に興味のなかった僕
「悪い方が良い」原則と僕の体験談｜Rui Ueyama
ソフトウェアの世界には「悪い方が良い」原則という有名なエッセイがある。キレイにレイヤ分けされた一貫性のある良いデザインよりも、一見手抜きの悪いデザインのほうが実は良いときもあるという話だ。この逆説的なデザイン原則を僕は身をもって体験したことがある。それについてちょっと書いてみようと思う。 僕はlldというリンカの現行バージョンのオリジナル作者だ。リンカというのはコンパイラと組み合わせて使うもので、実行ファイルやDLLを作るのに使用される。lldはプロダクトとしてはかなり成功していて、標準のシステムリンカとして採用しているOSがいくつかあったり、GoogleやFacebookなど皆が知っているような大規模サイトの中で広く使われていたりする。 現在のlldは2世代目で、第1世代のlldは僕がプロジェクトに参加する前から存在していたのだけど、数年前にそれを捨てて一から書き直すということになった。
FoursquareのUX・UI改善を書いたところ、創業者に届いて、人事からもメールが来た話 - 灰色ハイジのテキスト
通っていたサンフランシスコのデザイナー養成所Tradecraftの一番最初の課題で、アプリをピックアップして、見知らぬ人に声をかけてユーザビリティテストをして改善のプロトタイプを作って検証するーというものがあったのですが、そのプロセスをこの度記事にまとめてMediumに投稿しました。 するとGoogleのデザイナーが、なんとFoursquareの創業者のDennisにメンションしているではないですか。 Awesome, just shared with the team!— Dennis Crowley (@dens) 2018年3月9日 チームの人にシェアしてくれたみたいで、Foursquareのエンジニアの人からメッセージが届いたり、その日のうちに人事の人から「今ちょうどシニアプロダクトデザイナーのポジションを募集しているんだけど、興味があったら連絡待ってるよ」みたいなメールが届きまし
グリッチ表現で2Dシューティングの異次元を突破した怪作「Rym 9000」プレビュー
「枯れた技術の水平思考」と言えば、ゲーマーおなじみの横井軍平のデザイン哲学だが、同様のことはゲームジャンルにも言えるのではないだろうか。「枯れたジャンルの水平思考」とでも呼ぶべきだろうか、そのゲームデザイン哲学は既に確立したジャンルにおいて、その基本システムを維持しながらも、その概念を新しい角度から眺めて革新的なゲームを作り上げる。実際にジャンルのお約束を守りつつ、レベルデザインや細かい調整、もしくはサウンドやアートを刷新することで、そのジャンルに新たな風を送り込むゲームはこれまでも多数存在している。 最古のゲームジャンルであるシューティングゲーム（以下、STG）はその歴史の古さやゲームデザインとしての単純さから言って、自他共認める「枯れたジャンル」と言える。もちろん今後、何かの大きなイノベーションもありうるとは思うが、おそらくそこから生まれるものは我々の知るSTGとは別のものになるだろう
Emacs で時の流れを感じる - Qiita
なにをやったの ふらっと外に出てみたらちょうど空が夕焼けていて「ずいぶん日が短くなってきたなあ」とか、あるいは夜、なんとなく空を見上げてみたら綺麗な満月で「もうひと月たったか」とか、そんな、ふと時の流れを感じる瞬間が僕は好きです。 が、社会人になってから、退社したら外はもう夜、という日がほとんどになって、そんな瞬間を感じることが減ってしまったなあとふと思いました。 そんなわけで、その時刻の空の色（イメージ）、月齢、天気を反映した時計ウィジェットを作ってみました。モードラインなどに置いておくと、ふと目をやったときに、ちょっとほっこりできるかもしれません。 スクリーンショット モードラインに設置 色のサンプル インストール GitHub: https://github.com/zk-phi/sky-color-clock load-path の通ったディレクトリにダウンロード (clone)、
バッドデザイン賞を勝手にノミネートしてみた-2017年度版- - 酔いどれデザイン日誌 - Drunken Design Diary -
忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました。
「ユーザーが行動をおこす条件」の話｜深津 貴之 (fladdict)｜note
新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。 彼女のスケッチが溜まってきたので、復習とサポートを兼ねて、解説を書いていきたい。第二回はこの絵。 行動 = 動機 × 実行能力 × きっかけ今回のこばかなさんのイラストは、「フォッグの消費者行動モデル」という概念モデルだ。ざっくり言うと、ユーザーが行動を起こすために必要な3条件を示している。 このモデルでは、「ユーザーが何かアクションを起こす」条件を、 B = MATという、とてもシンプルな式で表現する。 その意味は、「行動(Behavior)」には、「動機(Motivation)」と「実行能力(Ability)」があるタイミングで、「きっかけ(Trigger)」が訪れなければならない…というものだ。 ・動機(Motiv
ゲーム系UIデザイナーの勉強を２年近くやって思った12のこと。 - meycoのUX&UIデザイン技術メモ
あけましておめでとうございます。 新年になり、すこしゆったりとした時間を過ごす事ができました。せっかくなので、去年からずっと思っていたUIデザイナーについて思った頭の中のことをまとめたいと思います。 WEBのUI設計よりも、明らかにゲームの方が難しい これは結構何度も言ってますが、ゲームの設計(ゲーミフィケーションのアプリ含む)の方が明らかに「やることが多い」です。 もっとプレイしてもらうには？ゲームが終わったときに、どのような設計になればもう一度やってくれる？ チュートリアルは必要？やりこみ要素はどうする？ソーシャルとどうやって連携する？ポイント加算の条件は？アクショナブルフィードバックは？日常で使ってくれるような設計には何が必要？盛り込みすぎではないか？ などなど、考えることが多いです。 このあたりは、ソーシャルゲームが本当に上手にできてるなーと思っているので、日々勉強しています。 ゲ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜ、日本企業では「デザイン思考」が浸透しない？東大×RCAの教授が語る | 記事 | HIP
Design notes
Prott - Prototyping tool for Web iOS Android apps
GitHub - cgoldsby/LoginCritter: An animated avatar that responds to text field interactions
Plug & Play on Steam
