タグ

ブックマーク / uxmilk.jp (6)

  • 見出しを最後まで読まないユーザーのためのアイブロウヘッドライン

    UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 ユーザーがオンラインで読むことを想定して、文言を書いていますか? アイトラッキング調査によると、多くのユーザーはオンライン記事の見出しを数単語だけ読み、最後までは読まないそうです。 さらなる調査で、ほとんどのユーザーが見出しの最初の2単語だけに目を通していることがわかりました。ユーザーはCTAをクリックする前に、見出しを見て内容を予測しているのです。 ユーザーは早くキーワードを知りたがる 見出しの最初の2単語でユーザーに文のヒントを与えないと、ユーザーは見出しをスキップするだけではなく文自体も読まないでしょう。 ユーザーが情報を手に入れるまでの忍耐力と行動力は長く続きません。そのため、彼らの興味を引くために見出しの最初の数単語に強いキーワー

    見出しを最後まで読まないユーザーのためのアイブロウヘッドライン
    Nemisama
    Nemisama 2018/10/22
  • インタラクションの参考にしたいUIアニメーション5選

    MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト5選 1. カ

    インタラクションの参考にしたいUIアニメーション5選
  • 複雑なコードは不要!簡単に使えるHTML/CSSジェネレーター22選

    今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi

    複雑なコードは不要!簡単に使えるHTML/CSSジェネレーター22選
  • dribbbleのぬるぬる動くメニューUIのアイデア10選

    アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう! Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい

    dribbbleのぬるぬる動くメニューUIのアイデア10選
    Nemisama
    Nemisama 2016/06/20
    「GIF for Restaurant Menu」アイコンも動くのか!
  • Facebookのプロトタイピングツール、Origami Studio発表

    UX MILK編集長。株式会社メンバーズ LXグループ所属。LX(ラーニングエスペリエンス)にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 近年アプリ制作者の間では、UIだけでなくアプリのUXを検証すべく、プロトタイピングツールの需要が年々高まっています。国内ではPrott、国外ではInvisionやPixate、Flintoなどがありますが、最近だとAdobeもAdobe XDというツールを発表するなど、大手も積極的に業界に参戦しています。 そんな中、Facebookの開発者向けイベント「F8」にてFacebookのプロトタイピングツール「Origami Studio」についてのプレゼンテーションがありました。FacebookやFacebook Messengerのみならず、Instagramやその関連アプリなど、多数

    Facebookのプロトタイピングツール、Origami Studio発表
  • Gitを一度はあきらめた人のためのわかりやすいスライド9選

    エンジニアの方はすでにGitを使用している方も多いと思いますが、最近ではGitを活用しているデザイナーの方も増えてきました。今回はGit初心者の方にもわかりやすく解説されているスライドをまとめてみました。Gitは使っているけど、うまく活用できていないという方にもオススメです! デザイナのためのGit入門

    Gitを一度はあきらめた人のためのわかりやすいスライド9選
  • 1