この記事はGoodpatch Advent Calendar 2018 1日目の記事です。 フロントエンド開発をしているとアニメーションを実装する機会が度々あります。たとえば、私が担当しているモチベーションクラウドでは、以下のように円グラフにアニメーションを加えています。 アニメーションを用いる上で意識したいポイントとして「パフォーマンス」があります。アニメーションのパフォーマンスについて、この記事では主に“滑らかさ”を指すことにします。 昨今ではハードウェアの進歩もあり、あまり意識しなくてもアニメーションのパフォーマンスが問題になることは少ないかもしれませんが、少し複雑なアニメーションやアニメーション以外の要因によってアニメーションの品質劣化が起きる場合には多少のテクニックが必要になってきます。 今回はUIにおいてアニメーションのパフォーマンスが重要とされる背景とWebアニメーションにお

先日、エウレカさんとグッドパッチのデザイナーで第一回合同勉強会を開催しました。今回のテーマはワイヤーフレームです。この勉強会は、ワークショップを通してナレッジの共有をし合い、個々のデザイナースキルを上げる目的があります。エウレカさんのレポートはこちらです。合わせてご覧ください！ １.ワイヤーフレームを作る意味とは ワイヤーフレームを作る意味についてお話をしてくれたのは、エウレカ原さんです。案件を進めるときにまずすること、ワイヤーフレームはなぜ必要か、ワイヤーフレーム制作で意識するポイントについて解説していただきました。 ワイヤーフレームを書く前に 案件を進めるとき、まずすべきことはプロダクトの目的とゴールの再確認です。 最終的に作っているものの方向性を見失わないようにするために、 何が目的でそれを実装するのか？ なんで必要なのか？ それを作ることによって何を解決するのか? を考える必要があ

複数の料金プランを持つWebサービスを利用する際、皆さんはどういう基準でプランを選びますか？私は自分に必要な機能は何なのか、料金に見合った内容かどうか、他のプランと比較してお得なのはどれなのか等を考えながら検討していきます。そのために一目でそれぞれのプラン内容がわかったり、各プランを簡単に比較できるデザインだと決めやすいのですが、自分にぴったりのプランがすぐにわからないと結局どれも申し込まない、なんてことも。そこで今回は複数のプランを持つWebサービスの料金表を見ながら、どんなデザインをしてユーザーに魅力を伝えているのかチェックしてみたいと思います！ SQUARESPACE http://www.squarespace.com/pricing/ プランを3つ用意しているSQUARESPACEは、おすすめの$16のプランを人気のプランとして画面の真ん中にくるように配置しています。緑背景の”M

こんにちは、だいきです。 海外のUIデザインに関する記事「14 Golden Eggs of Good UI Design（直訳: 優れたUIデザインの14の金の卵）」で書かれていたUIデザインに関するTipsがとても勉強になったので、その中からいくつか抜粋したものを翻訳しました！ （この記事はJohannes Thönesというブログの14 Golden Eggs of Good UI Designという記事の抜粋翻訳ブログです。） 1, 先進的な技術を使う理由 photo credit: Carlos Varela via photopin cc HTML5が新しい技術だからといって、それを使う必要性はありません。 新しい技術を使うことが目的になってはいけません。 ユーザーとユーザーが期待している事を考えてください。 どんなUX（ユーザーエクスペリエンス）をユーザーに与えたいですか？

こんにちは、だいきです。 2013年になってからもう二週間以上過ぎてしまいました。 新年になって海外の多くのブログで「2013年のWebデザインのトレンド！」 のような記事が出ていたので、UIデザイン会社であるGoodpatchのブログでは 「2013年に流行るであろうUIデザインのトレンドまとめ」をしてみたいと思います！ 1. アニメーション (参照: The Good Man http://thegoodman.cc/ ) このサイト「The Good Man」はブラジルのデザイナーさんが学校の卒業制作として作ったサイトだそうです。 一切画像を使わずHTMLとcss3で作られたのにも関わらず、一つのムービーを見ているかのようです！ このようなアニメーションがWebサイトで使われることで、コンテンツやサービスをよりユーザーに理解してもらえたり、Webサイトにおもしろい効果をつけられそうで