ブックマーク / bagelee.com (4)

  • Netlifyとは? 〜概要から導入まで〜 - bagelee(ベーグリー)

    新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay12です! 前回はFirebaseのRealtime DatabaseのデータをRubyから、firebase-rubyというGemで操作を行うという記事でした。 Rubyからfirebase-rubyでRealtime Databaseにアクセスする 今回は静的ホスティングサービスである「Netlify」についてご紹介します! Netlifyとは? Netlifyは、静的サイトをホスティングすることができるWebサービスです。 WordPress等の動的な処理のいらないLPなどの静的なWebサイトであればNetlifyを通じて公開することができます。 公開手順も非常に簡単で、公式サイトでも「Deploy your site in seconds.」とうたっているだけのことはあり、 3ステップほどで公開することができます

    Netlifyとは? 〜概要から導入まで〜 - bagelee(ベーグリー)
  • 【UI/UX】ユーザーテストの基礎知識2 - bagelee(ベーグリー)

    今回は選択基準をもうけ、テストユーザーを選んだ上でどのようなテストを行なっていくのか、タスクデザインについての基礎知識をご紹介します。 タスクデザイン タスクデザインを行う際は、そもそもこのユーザーテストの目的はなんなのか立ち直って考えます。 まずは、簡単にどういった目的があるのか、どの目的を検証するためのタスクのアイデアをどんどん書き出していきます。 その上で、アイディアの中でユーザーが行うであろう代表的なタスクをいくつか選び、自分でそのいくつかのタスクを行なってみてください。 こちらのいくつかのタスク全部で30−45分くらいかかるとベストです。 この時にユーザータスクを現実的に、そして検証できる形にするのが大事です また、こういったタスクには正解があるタスクと正解がないタスクがあります。 正解があるタスク 利点 – 検証ができる – 時間が測れる – 正解できたのかできていないのか計測

    【UI/UX】ユーザーテストの基礎知識2 - bagelee(ベーグリー)
  • 画像に簡単にアニメーションをつけるcurtain.js - bagelee(ベーグリー)

    はじめに 記事では、画像に簡単にアニメーションをつけることができるcurtain.jsをご紹介します。 普通の画像がまるでカーテンのようにふりふりと風になびくアニメーションをつけたり、画像を水面に見立て、ブヨブヨとマウスカーソルに合わせて動いたり…。curtain.jsを使うと簡単に画像に対して様々な目新しいアニメーションをつけることができます。 curtain.jsとは curtain.jsは小さいvanilla WebGL JavaScriptのライブラリです。3Dのインタラクションやアニメーションを作ることができます。 HTMLの画像を含んだ要素を3DのWebGLテクスチャーplaneに変換し、shadersを使い、アニメーションを加えることができるようにしています。それぞれのplaneの大きさやpositionはCSSで変更することができるので、楽に配置変更サイズ変更をすることが

    画像に簡単にアニメーションをつけるcurtain.js - bagelee(ベーグリー)
  • デザインのバージョン管理に使えるツールを一挙紹介! - bagelee(ベーグリー)

    はじめに デザインのバージョン管理がだんだんとデザイン界隈に浸透してくるにつれ、バージョン管理のツールもどんどん増えて来ましたね。 今日の記事はそんな増え続けるデザインのバージョン管理のツールを一挙紹介し、それぞれどういった特徴があるのかをご紹介します。 結局何を使えば良いの? 最初に簡単にお伝えしておくと、今のところデザインのバージョン管理ツールは大きく6つあります。 Abstract Git for Sketch Kactus Plant Folio Trunk 現状だと、一番使いやすいのは間違いなくAbstractですが、こちらは値段も少しお高めです。スタータープランで、1人1月$9-10(USD) – (コントリビューターごとなので、3人コントリビューターがいると 1月$27-30かかります)。ビジネスプランだと$15-16.67(USD)です。 料金表: もう少し低価格でとりあえ

    デザインのバージョン管理に使えるツールを一挙紹介! - bagelee(ベーグリー)
  • 1