Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

タグ

uiとwebdesignに関するkatchinのブックマーク (12)

  • 【UI/UX改善】CVRを向上させるスマホサイトのポイント10選 | LISKUL

    PCやサイトのスマホ版を作ったけど、思うように成果が上がらない・・・」「どうすれば成果の上がるスマートフォンサイトを作れるのだろうか・・・」とお悩みのweb担当者の皆様へ。 その答えは、「UI/UXの改善」にあります。 多くの企業がスマホサイトで成功していない原因としてありがちなのが「PCサイトを安易にスマホサイト風に変換しているだけ」というパターンです。 そのため、スマホとPCの違いを考慮して、スマートフォンでのユーザー行動を意識したUI/UXに改善するだけでも、CVRは簡単かつ速攻でアップするんです! そこで、今回はCVRを向上させるためのスマホサイトのUI/UXを改善するためのチェックポイントをご紹介いたします。ぜひ皆様のWebサイトの改善にお役立てください! サイトUIを改善するための分析手法を知りたい方は、こちらの資料を手元に置いてみてみてください。 ※記事は2014年7月8

    【UI/UX改善】CVRを向上させるスマホサイトのポイント10選 | LISKUL
    katchin
    katchin 2018/09/03
    “ CVRを向上させるスマホサイトUI/ UX改善ポイント10選” 読み込み遅いサイトはux駄目だけどね
  • レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所

    レスポンシブデザインとアダプティブデザインの違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。 モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題です。企業向けの巨大なモニターからスマートウォッチまで、ユーザーがオンラインで情報にアクセスする方法は数え切れないほどあります。 そのようなデバイス間の差を埋めようとするデザイナーには、2つのデザインの選択肢があります。アダプティブなサイトか、レスポンシブなサイトです。 レスポンシブデザインとアダプティブデザインの違いについて混同している人が、一定数見受けられます。どちらのデザインも経験していない人にと

    レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所
    katchin
    katchin 2018/02/21
    “レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所”
  • Webデザインにおけるスクローリングの新しいルール

    かつてWebデザインでタブーとされていたものが、近年もっとも人気がある手法の1つとして完全復活しました。ユーザーはスクロールが必要なサイトを好み、評価するようになったのです。スクローリングは過去の汚名を捨て去り、主要なインタラクションデザインの要素として新たに生まれ変わろうとしています。つまり、デザイナーは新たなルールを学ぶ必要があるということです。 この記事では、スクローリングの復活について探ります。この手法の長所と短所を説明し、ちょっとしたヒントも紹介します。 スクローリングが再評価された理由 簡潔に言えば、答えはモバイルデバイスにあります。 モバイルユーザーの数がデスクトップユーザーの数を上回って以来、UIデザイナーの誰もがこの流れに適応してきました。小さな画面を利用するユーザーが多くなったことで、スクローリングの必要性が増しました。画面が小さくなるほど、スクロールは長くなります。

    Webデザインにおけるスクローリングの新しいルール
    katchin
    katchin 2017/08/20
    Webデザインにおけるスクローリングの新しいルール
  • 有名サイトの事例から学ぶ12のWebデザイン・レイアウト

    ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション(SPA) 7. Fパターン 8. Zパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード

    有名サイトの事例から学ぶ12のWebデザイン・レイアウト
    katchin
    katchin 2017/01/31
     “有名サイトの事例から学ぶ12のWebデザイン・レイアウト”
  • スマホアプリのUIを動画でまとめたサイト「USER INTERFACES IO」 | ライフハッカー・ジャパン

    「USER INTERFACES IO」はスマホアプリのUIを動画でまとめたサイトです。普通のアプリとは少し違ったユニークなUIがたくさんまとめられています。アプリ制作する前に覗いてみるとインスピレーションを受けられると思います。 以下に使ってみた様子を載せておきます。まずUSER INTERFACES IOへアクセスしましょう。UIが動画でまとめられており、再生ボタンを押すとアニメーションがスタートします。 過去のアーカイブも検索できますよ。ジャンルごとにまとめられているので絞り込みも簡単です。斬新なUIを探す際にぜひ一度覗いてみてはいかがでしょうか。 USER INTERFACES IO (カメきち)

    スマホアプリのUIを動画でまとめたサイト「USER INTERFACES IO」 | ライフハッカー・ジャパン
    katchin
    katchin 2015/02/17
    スマホアプリのUIを動画でまとめたサイト。これは海外ものばかりだけど、良さげ
  • 事例紹介 | 株式会社インフォバーン

    事例紹介 | 株式会社インフォバーン
    katchin
    katchin 2013/02/07
    【スマホ調査】アプリは機能性・利便性をトコトン重視! ギズモード編集長のスマホライフを大解剖~前編~
  • クックパッドデザイナー片山育美さんが語る「ユーザー目的を達成するためのUI」とは — [画面遷移ワークショップvol.2 レポート] | Startup Dating [スタートアップ・デイティング]

    前回、5月に開催した「画面遷移ワークショップ」。その第二回を開催しました(前回の様子はこちら)。二回目となる今回は、日最大の料理レシピサイト、クックパッドUIデザイナー、片山育美さんをゲストにお招きしたトークセッション。後半には前回同様ソーシャルゲームの分野で活躍中のポケラボさんからお題を提供していただき、画面遷移を考えるワークショップを開催いたしました。 前半に6月にStartup Datingにインタビュー記事が掲載されて、大きな反響を呼んだ片山さんは、クックパッドに4人しかいないデザイナーの一人。片山さんはクックパッドPCサイト、iPhoneアプリAndroidアプリ、iPadアプリなどのデバイスに対応するデザインなども担当しているそうです。仕事以外にも、趣味がアプリ開発だという片山さん。最近制作した「恋人クイズ」というアプリは現在20万ダウンロードを超えているそうです。 こ

    katchin
    katchin 2012/09/16
     クックパッドデザイナー片山育美さんが語る「ユーザー目的を達成するためのUI」とは — 画面遷移ワークショップvol.2 レポート
  • TechCrunch | Startup and Technology News

    An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Over the past eight years, famed vehicle designer Henrik Fisker…

    TechCrunch | Startup and Technology News
    katchin
    katchin 2012/08/28
    ユーザー獲得をハックする
  • webデザインにおける視線誘導のおはなし | 07design.blog

    こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す

  • 絶対見ておきたい有名企業のスマホサイトまとめ (1/5)

    この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日のスマホサイトは2年間でこんなに変わった iPhoneAndroidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」(スマホサイト)を開設する企業が増えている。当初はiPhone(iOS)の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。

    絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
    katchin
    katchin 2011/02/21
    絶対見ておきたい有名企業のスマホサイトまとめ
  • 余計なクリックをさせてイライラさせてない? ユーザビリティ設計4つの原則(前編) | Moz - SEOとインバウンドマーケティングの実践情報

    不要なクリックをしなくちゃならないせいで、「すばらしい」が「うっとうしい」に変わっちゃうことが当にあって、しかもそういうのって結構出くわすのよね。だいたい原因はこんなところかしら? サイト・デザイナーによる、凝っているけど使い物にならない作品無神経な開発者が加えたお粗末な問題回避策「2か月もこのサイトの構築に取り組んできて、もう脳みそがクタクタです」的なSEO業者の見当違いな判断いずれにせよ、害などなさそうに見える余分なクリックのせいで、コンバージョン率に悪影響が及ぶこともあるわ。要するに、ユーザーをイラつかせちゃうってことね。 これから紹介するのは、私が歯ぎしりしてゲンコツを振り回したくなったクリックの例よ。 イライラ事例その1 「え?! 自動でリダイレクトしてくれないの?」先日、ワシントン大学大学院課程のページを見ていたときのこと(ちなみに、私を含めてSEOmozチームの4人に1人が

    余計なクリックをさせてイライラさせてない? ユーザビリティ設計4つの原則(前編) | Moz - SEOとインバウンドマーケティングの実践情報
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • 1