タグ

UIとログイン前に関するkaraumaのブックマーク (8)

  • ユーザーを夢中にさせるAmazonが採用する4つのUXデザイン要素 デザイン会社 ビートラックス: ブログ

    世界を制覇し始めているGAFAの一角であるAmazonの凄さは下記の数字を見ただけでも伝わってくる。 49% – アメリカのeコマース市場におけるAmazonのシェア1.12億人 -アメリカ国内のAmazon Primeのメンバー数3人に1人 – アメリカの成人でAmazon Primeに加入している割合全世帯の半数 – アメリカ国内でAmazon Primeに加入している割合95% – Primeメンバーシップを更新したいと思う率250万 – Amazonで商品を売っている外部店舗の数約7.8兆円 – Amazon社が保有する現金この成功の要因は何であろうか?確かに安さはあるだろう。しかし、意外と見落としがちなのがデザイン的要因である。 実は私、デザインも凄いんですApple製品のデザイン性の高さを語るケースは多いが、Amazonに関してデザインのトピックが取り上げられる事は稀である。A

    ユーザーを夢中にさせるAmazonが採用する4つのUXデザイン要素 デザイン会社 ビートラックス: ブログ
    karauma
    karauma 2018/10/26
    膨大な選択肢を最初から提示しない、基本だけどこのNGやりがち。アマゾンはメインナビには商品カテゴリーを表示してない。あえて”Departments”の中に”隠す”ことでいきなりたくさんの選択肢を与えないようにしてる
  • jquery小技まとめ32

    作成:2013/07/1 更新:2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー(Google Analytics関係とか)なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール 1.ページ内リンク/フッターまわり/トップに戻る 2.パララックス スライド 3.カルーセル 4.レスポンシブなスライダー 5.ヌルヌルサクサクなスライドメニュー 6.サムネイル付きクロスフェードスライドショー 補助 7.Google Ana

    jquery小技まとめ32
    karauma
    karauma 2018/03/02
    “フラットデザインに合いそうなjQueryプラグイン。これすごい良いですね!ブラウザに依存する部分はあるのですが、Photoshopでいちいちぼかしを入れる必要がなくなると ”
  • jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法

    可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる|Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法|Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー|Webpark とい

    jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
  • アニメーションをWebサイトに導入するためのテクニック

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の1つです。現代のWebサイトでは、細かなインタラクションのデザインが根的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の1つは、ページの読み込み(ローディング)時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち

    アニメーションをWebサイトに導入するためのテクニック
    karauma
    karauma 2017/05/18
    スケルトンスクリーンとは、情報が徐々に読み込まれるページの空白状態のことです。情報が画面上に徐々に表示されるので、即座に反応しているという感覚を生み出します。
  • Standard Inc. アプリやWebサービスのUXデザイン会社

    UX Design for Users ユーザーへの価値とビジネスの成立を実現するUXデザインを提供し、 アプリやWebサービスの新規立ち上げや改善をサポートします。 提供するサービス About STANDARD 私たちSTANDARDはUXデザインを軸に、スマートフォンアプリやWebを活用した新規事業の立ち上げや既存サービスの改善を支援するネットワーク型のデザイン会社です。 ユーザーの抱えている課題から価値を定義し、理想の体験を構想・設計するだけでなく、ビジネスとしても成立するための仕組みをデザインすることで、事業の成長と未来を豊かにするサービスの創出に貢献します。 私たちについて

    Standard Inc. アプリやWebサービスのUXデザイン会社
    karauma
    karauma 2017/05/17
  • WordPress Themes, HTML Templates - ThemeForest

    Everything you need for your creative projects, for one low cost Millions of creative assets Unlimited downloads Simple commercial licensing One low cost Cancel any time

    WordPress Themes, HTML Templates - ThemeForest
  • Calltoidea - Light up your imagination

    If you like Calltoidea, let's trythe first community for link lovers.

    Calltoidea - Light up your imagination
    karauma
    karauma 2015/09/14
    カテゴリ別にまとめてあって数は少ないけどアイディア探しにはいいかも
  • 簡単に使えて、コンバージョン率が高まるUI Tipsまとめ | Goodpatch Blog

    しっかりと考えられたUIのアプリやWebサイトはとても使いやすいく、使っていてとても楽しいですよね。この記事を見ているデザイナーやディレクターの方の中でショッピングサイトや登録型サービスを担当し、UI設計をしている方もいるのではないでしょうか。UI設計をする上で必ず考えるのが「ユーザーが使いやすいUI」だと思います。しかし前述したショッピングサイトや登録型サービスの場合は使いやすさと共に、「ショッピング購入数」や「登録者数」にも気を配る必要があります。そこで今回は「ショッピング購入数」や「登録者数」を示す、”コンバージョン率” を高めるUIとはどんなものか、海外の記事を参考に考えてみたいと思います。 (この記事はGoodUIから翻訳抜粋したものです) GoodUIには簡単に使えて、コンバージョン率を高めるUIのアイデアがいくつかまとめられています。その中から6つ、素晴らしいアイデアをピック

    簡単に使えて、コンバージョン率が高まるUI Tipsまとめ | Goodpatch Blog
  • 1