サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
www.coromos.com
サクサクと動いて、ユーザーを魅了する効果がある今人気のTinder風UI。そのUIを採用しているアプリを紹介していく。先日、Tinder風UIがUXを高める4つの行動心理学的理由という記事が話題になっていました。 ここでも紹介されているように、サクサクと動くTinder風UIは、出会い系というジャンルにおいては、ユーザーを魅了する効果があるようです。 世界では、既にTinder風UIを出会い系以外のジャンルでも活かそうと試みているアプリがいくつもあります。そこで今回はそのようなTinder風UIのアプリを紹介していきます! 1.Tinder Tinder風UIの元祖というか、Tinderそのもの。 次々と紹介される異性の写真を好きor嫌いでスワイプし、お互いに好きを選んでいるとメッセージができるという出会い系アプリ。 2.Stylect 靴に特化したモバイルコマース。50,000
ダイエット食品のランディングページのユーザーテスト事例を公開!LPのCVRを向上させるためのユーザーテスト活用術を詳しく説明。 ユーザーテストでは、ユーザーが思ったことを発話するので、「○○についての情報が不足している」、「○○の説明が理解できない」等のコンテンツについての課題を明確に抽出することができます。こうした課題を発見し、コンテンツの追加・補足・修正を繰り返すことで、大きな成果が期待できるLPになる。(上図参照)LPにおけるユーザーテストの目的とは? ユーザーテストによってわかる課題は大きく分けて2つ。1つは、ユーザビリティや動線についての課題、2つ目はコンテンツについての課題である。 サイトの構成自体がシンプルなランディングページ(LP)のユーザーテストでは、後者のコンテンツに対する課題抽出が目的となることが多い。 コンテンツについての課題とは? LPの目的の多くが、申込や資
プッシュ通知を活用すると、能動的にユーザーへ通知が行えて、アクティブ率を向上させることができる。マーケティングの面でいうと、アプリとブラウザサービスで大きく異なる特徴の1つであろう。たくさんのアプリがその恩恵を受けるために、「push通知」を承認させるための確認ダイアログを表示させている。 ほとんどのユーザーがプッシュ通知を承認しない? しかし残念なことに、UIscopeで様々なユーザーテストを見ていると、多くのユーザーがそのダイアログを見た瞬間、条件反射的に“承認しない”を選択してしまっている。 あるアプリを独自でテストした際に、チュートリアルの理解度を検証するために、5人のユーザーに普段通り自由にアプリを1分間使ってもらうという内容のテストをした。 すると、6人中5人全員がプッシュ通知を承認しなかった。 ※そのうち4人はダイアログが出た瞬間に文言も読まずに反射的に“承認しない”
こんにちは。 タイトル通りですが、ECサイトのユーザーテストを1年間担当して分かった、UXの高いECサイト(成功していると定義)にある3つの共通点を紹介したいと思います。 それぞれECサイトによって課題やターゲットが異なります。そもそも扱っている商品ジャンルも違うので絶対ではないかも知れませんが、ユーザーが「使いやすい、また利用したい」と言ったECサイトには以下の共通点がありました。こんにちは。 タイトル通りですが、ECサイトのユーザーテストを1年間担当して分かった、UXの高いECサイト(成功していると定義)にある3つの共通点を紹介したいと思います。 それぞれECサイトによって課題やターゲットが異なります。そもそも扱っている商品ジャンルも違うので絶対ではないかも知れませんが、ユーザーが「使いやすい、また利用したい」と言ったECサイトには以下の共通点がありました。 目次 1 写真が綺麗
プラグイン=エラーの温床? “WordPress”ってとても便利ですよね。やりたいと思ったことがプラグインのダウンロードのみですぐに実現できるところが魅力の1つです。 しかしその便利さの反面、プラグインには以下のようなリスクもあります。 WP本体のバージョンアップで使えなくなることがある プラグインの更新で使えなくなることがある WP内システム全ての把握が難しく、メンテナンス・エラーへの対処が複雑化する head内にjsが貼付けられ、サイトの読み込みが遅くなる そこで、今回はプラグインを使わずにWordPressで実装したことを書きます。ただ普通に書いても他サイトと被ってしまうので「WordPressでプラグインを使わずに実装できることまとめ」系の記事から被りが少ないもの・実用的なものを”可能な限り”選んで書きます。 プラグインなしで著者情報を編集・表示させる 著者情報はデフォルトで
今流行のフラットデザインと相性が良いゴーストボタンを使って雰囲気を高めているWebサイトの紹介です。ゴーストボタンは、ボタンを派手に目立たせたい時に使うよりも、サイトの雰囲気を壊すことなくボタンを置きたい時に使うのが効果的です。”ゴーストボタン(Ghost buttons)”とは、背景色を透過にし、囲み線だけで表現されるボタンです。 流行り始めてから日が浅いためにまだ正式名称は決まっていませんが、幽霊のようにサイトの中に溶け込むことから”ゴーストボタン”と言われることが多いです。 ”ゴーストボタン”を使っているサイトとして、最もメジャーなサイトはTwitter Bootstrapでしょうか。 2013年頃から流行しているフラットデザインとの相性が良いために、”ゴーストボタン”を使うサイトが最近増えてきています。 ”ゴーストボタン”は、ボタンを派手に目立たせたい時に使うよりも、サイトの雰囲気
アイコンの大きさ、適当に決めていませんか? ユーザーはおもった以上にアイコンをタッチすることに苦労しています。 最適な大きさのアイコンはどのようなアイコンなのでしょうか。ダーツでブルに命中させることは、ダーツ盤の他のどの場所に命中させるより難しいことです。これは、ブルが最も小さい的だからですね。スマートフォンのアイコンを触る事にも同じ原理が当てはます。 ユーザーにとって、小さなアイコンは、大きなアイコンを触るのよりも難しいことです。あなたがスマートフォンのインターフェースをデザインする時は、ユーザーがタップしやすいようアイコンを大きく作るのが望ましいことです。しかし、具体的にはどうやってユーザーの大半が最も使いやすいように作るのでしょう?多くのスマートフォンの開発者はこの事について考え、その殆どが、答えをシステムの開発者が提供したインターフェースのガイドラインに頼ってきました。 携帯の
ほとんどのアプリ開発者はアプリの紹介や使用方法の説明をする付属のウェブサイトを持っています。いくつかのウェブサイトはとてもユニークなものです。美しい写真を背景として使うものや、鮮やかな色彩や文字のスタイル、大きなアイコン、余白を効果的に使う事で、見る人に感銘を与えるものもあります。 今回、素晴らしいアプリ紹介のホームページを20例紹介します。それぞれ独創的で今まで見たこともないようなものばかりです。 Human Turnplay Everest ChowNow Hipstamatic Weather [snap] Faces ShakeItPhoto Starmatic Kelvin App Spendee App Note’d FiftyThree Flight Card Triplagent Nizo App Tourism App Weather
現在、世界の5人に1人はスマートフォンを所持しています。もしもあなたのウェブサイトがモバイル端末上でうまく表示されなかったら…それが大きな機会損失となることは、容易に想像できますね。そこで!今こそ、レスポンシブデザインを始める時です。この記事では、レスポンシブデザイン初心者のあなたにいくつかの注意事項を紹介します。最近の調査によると、アメリカ人の25%はスマホをウェブページへのアクセスのみに利用しているようです。世界の5人に1人はスマートフォンを所持し、そのうちの半分以上はネットサーフィンにそれを使っています。 ということは。もしもあなたのウェブサイトがモバイル端末上でうまく表示されなかったら…それが大きな機会損失となることは、容易に想像できますね。 そこで!今こそ、レスポンシブデザインを始める時です。この記事では、レスポンシブデザイン初心者のあなたにいくつかの注意事項を紹介します。
皆さんは、Twitter Bootstrapを使ったことはありますか? Twitter Bootstrapは、フロントエンドフレームワークの一種です。 フロ皆さんは、Twitter Bootstrapを使ったことはありますか? Twitter Bootstrapは、フロントエンドフレームワークの一種です。 フロントエンドフレームワークとは、HTML/CSS、JavaScriptで「多くの人が共通して作るであろう部品」を、簡単なコードを数語書くだけで使えるようにしてしまうフレームワークです。 今までは、デザイナーの仕事は一枚の巨大なPhotoshopファイルをつくること。その後は、それをマークアップをするエンジニアがそれをコードに置き換えていくことだと思われていました。 しかし、アジャイル・リーンな開発手法が増える中、初期の開発サイクルでこの「デザインをゼロからつくること」に時間をかけ
毎日、多くのサービスが作られていますよね。 その過程でUIに関する多くの問題がでてきていますが、その問題を抱えているのは他の開発者も同じなのです。 そんな問題を有名サービスはどう解決しているのかという具体例付きで解説している電子書籍を今回は紹介します。毎日、多くのサービスが作られていますよね。 その過程でUIに関する多くの問題がでてきていますが、その問題を抱えているのは他の開発者も同じなのです。 そんな問題を有名サービスはどう解決しているのかという具体例付きで解説している電子書籍を今回は紹介します。 Mobile UI Design Patternsという名前の書籍で、こちらからダウンロードできます。 今回はGetting Inputという章をおおまかに紹介していきます。 ここでは、ユーザーが行う入力アクションに関する問題に触れています。 入力アクションについて 1.スマートキ
こんにちは。 UI、UX、ユーザービリティについて勉強されている方も多いと思いますが、ネット上にUI、UX、ユーザビリティについての良い記事が多くあったので、5つ選んでまとめてみました。こんにちは。 UI、UX、ユーザービリティについて勉強されている方も多いと思いますが、ネット上にUI、UX、ユーザビリティについての良い記事が多くあったので、5つ選んでまとめてみました。 是非、全リンク見て頂ければと思います。 目次 1 UIとは 2 UXとは 3 UI/UXの違いは何 4 UXはどのように向上させるのか 5 ユーザビリティテストでUI/UXを向上させる ➀ UIとは ユーザーにとっては“ユーザーインターフェイス”こそが製品そのもの 2005年に書かれた記事。椅子やマウスを例えに出して、ユーザーインターフェースの重要性を説いています。 UIとは、サービスの本質に出会う前の入り口であ
優れたユーザビリティとは?スマホアプリの開発、デザインをしている時にUI/UXデザインの事例が見れると便利です。アプリの画面推移などが画像や動画でまとめてあり、ユーザビリティの高いアプリを制作するのに参考になる海外Webサービスを紹介します。Webサイト、スマホアプリのデザイン、ユーザビリティは最近になってさらに重要度が増してきています。デザイナーの方はもちろんのこと、開発者の方もユーザーが使いやすいように工夫する必要性が出てきています。 Webやアプリのデザインのトレンドには毎年様々なトレンドがあり、そのトレンドに応じて優れたデザインのWebサイトやアプリが出てきます。しかし、そういった変化は表面的な変化が中心です。優れたサイト、アプリの見た目だけを参考にしても、それによってUX(ユーザーエクスペリエンス)が高められるとは限りません。 もちろん、表面的な見た目もとても重要です。ですが
この度 6月に開催されたアップルのWWDC。ここで、開発者にとって最大のサプライズといっていい発表がありました。それは、iPhone/iPad(総称してiOS)などのアプリ開発で使える 全く新しいプログラミング言語 “Swift”の発表です。 このSwiftという言語は、今までiOSでのアプリ開発で使われていた Objective-Cというプログラミング言語を置き換えられるようにつくられました。Objective-Cはその使いにくさで有名だったこともあり、Swiftを評価する人は多くいるようです。 私たちへの影響 さて、今回ここで話題にしたいのは「普段 開発をしていない人たちにとって、どんな影響があるか?」です。Swiftのおかげで今までよりも開発が楽になる部分もあるかと思います。しかし、個人的に一番大きい影響は、 「これまでアプリ開発未経験だった人が、iPhone/iPadでのアプリ
今年も開催されたGoogleのカンファレンスイベント”Google I/O 2014″では、ウェアラブルデバイス向けのOS「Android Wear」、テレビ向けのOS「Android TV」、自動車向けのOS「Android Auto」などが発表されました。 これらの新しいプラットフォームの誕生によって、Androidはもはやモバイル向けのOSだけでなく、Googleが提供するサービス全体のOSへと変貌していきます。 そして、スマートフォンの誕生によってデザインが変わったように、デバイスが変われば、デザインも変わります。 Web、デスクトップ、モバイル、そして新しく発表されたAndroid Wear、Android TV、Android Auto。それらのプラットフォームのUI(ユーザーインターフェイス)に統一感を出すためにGoogleが新しく発表したのが、次期AndroidOS「
こんばんは! 今日は海外サイトでよく見かけるようになった、背景に動画を使っているサイトを集めてみました。 最近はバイラルメディアからサイトまで、動画の持つ力を上手く利用したサイトが増えてきていますね!! サイトの背景に動画を使うことで、写真や文章よりもインパクトを与え、ユーザーに強く印象を残すこともできます。 ユーザーがサービスの内容を理解できなくては意味はありません。 文章や写真で紹介するよりも、動画を見た方がすっと内容を理解できるサービスがあることも確かです。 今日紹介するサイトを参考に、動画を上手く取り入れてみてはいかがでしょうか? herrlich media IUQO petit ACCUEIL Design Matters NEXT A-Class Coulee Creative theQ camera Holly Fulton Media Nov
こんにちは! 今回も勢いのあるフリマアプリについてまとめてみました!今回は前回のログインページまとめとは違い、サービスの顔であるLPをまとめています。 サービスによって、今流行の一枚の画像を背景に使ったシンプルなデザインから、サービスの説明までされている縦長のデザインまで様々なものがあります。 同じフリマアプリでもここまで違いがあると面白いですね。 今後LPを作る際の参考にしてみてはいかがでしょうか? Listor bolo ママモール Sumally LINE MALL メルカリ Fril 番外編 ここからの3サービスはアプリのダウンロードを促すページとは違い、webブラウザでのサービスページになります。 ショッピーズ マムズフリマ prima 前回の【こんなにも違うの?フリマアプリのランディングページまとめ】の記事はこちらからご覧頂くことができます!
最近は、通信環境が整ってきたおかげで高画質な画像をおしげもなくウェブサイトに使えるようになりました。 しかし、高画質で、表示速度が速かったとしても、「通信速度の制限」が問題になります。一定期間内に一定基準以上の通信が発生した場合に起きるあの制限です。 例えば、直近3日で1GB使うと通信速度が10KBしか出ない、などの現象です。 こういった通信制限の動きはこれからもしばらく続いていくので、「容量をできるだけ減らす」ことも良いサイトの基準になってくるのではと思います。 そこで、今回は画像の圧縮ソフト・サービスをまとめてみました! JPEG Optimizer ブラウザ上で画像圧縮ができるサービスです。一枚ずつしか圧縮できないのが難点ですが、圧縮レベルを選べたり、画像サイズも同時に替えられたりと便利な機能が魅力的です。 Kraken.io こちらもブラウザ上で画像圧縮ができます。
「情報だけじゃ面白くない。 その先にあるリアルとの繋がりを考えています。」 ■■次世代の情報収集スタイル カメリオ■■ 気になるニューステーマを『フォロー(追跡)』すると、あなたに代わって自動で最新のニュースをリアルタイムに収集・お知らせしてくれる便利アプリ。 自己紹介と担当している業務の紹介をお願いします。 株式会社白ヤギコーポレーションCOOの渡辺と申します。プロダクトをメインに、他にもファイナンス、会社の組織作りなども担当しています。 今はカメリオのプロダクトのディレクションを担当しています。 カメリオの中で大切にしているユーザー体験を教えて下さい。 三つありますね。 一つ目が、「気になる情報」を見逃さないこと。 これってすごい基本的なことなんですけど、自分の気になっている事に関して必ず情報が得られることです。 二つ目が、その「気になる情報」がどんなにニッチでも、ユーザ
日本のECサイトは本当に海外のウェブサイトと異なるのか 様々な記事で言われている日本のウェブデザインの「違い」について調べてみました。 前提として、海外の一般的なウェブデザインというのは 文字に対して写真が多い フラットデザインである ボタン等の色使いは控えめである 背景に大きな画像、もしくは動画を使っている などの要素を含んでいます。対して日本の一般的なウェブデザインは 写真に対して文字が多い 様々な項目が整然と並んでいる ボタンやバナーに色を多用していて、全体的にカラフルである 背景が白である などの要素を含んでいることが多いです。もちろん、これらの条件に該当しないサイトは海外にも日本にも存在しますし、フラットデザインだから良いというわけではありません。 今回はあくまで、「何が違うのか」を視覚的に比較してみようという記事です。 デザインが異なる(ように見える)のは、言語上の問
先日、Tinder風UIがUXを高める4つの行動心理学的理由という記事が話題になっていました。 ここでも紹介されているように、サクサクと動くTinder風UIは、出会い系というジャンルにおいては、ユーザーを魅了する効果があるようです。 世界では、既にTinder風UIを出会い系以外のジャンルでも活かそうと試みているアプリがいくつもあります。そこで今回はそのようなTinder風UIのアプリを紹介していきます! 1.Tinder Tinder風UIの元祖というか、Tinderそのもの。 次々と紹介される異性の写真を好きor嫌いでスワイプし、お互いに好きを選んでいるとメッセージができるという出会い系アプリ。 2.Stylect 靴に特化したモバイルコマース。50,000点の靴の中からスワイプしながら、お気に入りの靴を探すことができる。また、使い続けていくとあなたの興味にあった靴がレコメ
私はUX業界に長い間携わってきたので、これまで多くの経営者と話す機会がありました。ほとんどの経営者は、”UX”のスペル程度のことしか知らず、それ以上の知識はほぼありませんでした。 現状、UXについて誤解している方々がまだまだ多いように見受けられ、それがストレスに感じることもあります。しかし、経営者などの決定権を持つ人に対してUXについての誤解を解くとこができる良い機会となり、楽しさを見いだせることもあります。 今回はUXについて経営者たちと話している時に出てきたトピックの中から7つを選んでみました。全てあなたの上司やクライアントに提言する価値があると思います。特にあなたがUXコンサルタントで相手がクライアントだった場合に有効です。 UXは反復して行われるものである 「なぜそんなに時間がかかるんだ。」と短気なCFOに聞かれたことがあります。私たちはアプリケーションのデザインを作っていま
新規事業やスタートアップといった新しいサービスを開発するうえでユーザーテストの重要性が日本でも認識されるようになりました。 そのユーザーテストのメリットとしては、開発者側とユーザーとのギャップを埋め機会損失を最小に抑えることができ、開発のムダを減らすことができるというのがあります。 ※ユーザーテストしたいのに、クライアントを説得できない・・・という方はこちらの記事をお読みください。 さて、今回は”どのタイミングでテストするのが効果的か”また、”どのタイミングで何が検証できるか”について解説していきます。効果的な5つのタイミングと、そこで検証できることを確認していきましょう。 効果的なテストのタイミング 開発プロセスの中の、「企画→モックアップ作成→リリース前→リリース直後→(ファーストアップデート)」これらが効果的とされている5つのタイミングです。 実際、素早く開発サイクルを回す
レスポンシブウェブデザインだけでなく、トレンドのフラットデザイン等を取り入れているだけでもない、洗練されていて印象的なウェブサイトを集めました。 言葉では説明できないものばかりなので、それぞれのサイトに訪問して体験してみてください。 Healing Histories BlackNegative.com Pictoplasma Sound Creatures Drexel University: Get Going Today 6wunderkindercom/ evanshalshawom/bond… www.webleeddesigncom/ benthebodyguardm/index… nofrks Seaquence
今回ご紹介するのは、既にご存知の方もいると思いますが、 多くのスタートアップベンチャー、新規事業を進める際に使われている「リーンスタートアップ手法」です。 リーンスタートアップ手法とは ”構築(build)—測定(measure)—学習(learn)”の3つのプロセスから成るサイクルです。 このサイクルを早く回すことで、プロジェクトのリスクを減らし、開発と学習を迅速化する手法です。 まだ完成していないモノを、”素早くリリースし、素早くフィードバックを得て、素早く改良する”といったイメージでしょうか。 しかし、とりあえず早くリリースしているだけであったり(構築のみ)、改善点を見つけるだけで満足してしまったりと(サイクルを回していない) 一部だけかじって、リーンスタートアップを実践していると勘違いしている企業やチームが多くある様に思えます。 重要なのは、サイクルを回し、そして迅
色彩学で言われているように「黒」からは権力や上品、フォーマルなどの言葉が連想されます。もしそういった要素を含むウェブサイトをデザインしたい場合は黒を多用してみてはいかがでしょうか。そこで今回は黒を基調としたウェブサイト50個をまとめました。 Haunted Hotel Ride Spark Tonnelier GRAD Haunted Hills Septime Creation TEDx Gatineau Tomas Berdych Whitley Neill With a Trace burn F1 Cyril Masson David Yurman Football HQ Orlando Web Design 40th Film Fest Gent Le meilleur Pressels Revolution is Sound Romeo Dallaire The New Mac
「良いUIが必ずしも良いUXにはならないが、良いUXには出来る限り良いUIが必要。UXの一部であるUIを向上させるためにはユーザーテストが必要なのだ」 この記事を読んでいただいてる方も誰もが恋愛をしたことがあると思います。もちろん僕もしています。 UXやUIの記事は分かりやすい物もあれば少し専門的すぎる物もあるのが現状です。なので、少し違った例でUXとUIを分かりやすく解説していきたいと思いました。 まず、あなたは今、3対3の合コンに来ています。男性がユーザーで、女性がサービスそのものと仮定しましょう。 男性側がユーザー設定なのでスゴく上目線に書いてありますのでご了承を。 UIとは まずは先にUIから UIとは英語で表記すると【User interface】 インターフェイスを直訳すると接点、一言でいうと、ユーザーと商品の接点と言えるかと思います。人で言うなら、外見・イメージ・
こんにちは。 昨今UX/UI向上のためのユーザビリティテストについて多くの情報があるので、今一度ユーザーテストの基本を【what・why・how】の3点から解説していきたいと思います。 1.ユーザーテストとは-what- まずは、そもそもユーザーテストとは何かというところから解説していきたいと思います。 ユーザーテストとは、「ユーザーが参加したテストの評価手法の総称」の事を指します。 簡単に言い換えると、 ユーザーにタスク(作業)を実行するように依頼し、そのタスクを実行する過程を観察・記録する事です。 観察の方法は、会場に集めたユーザーを観察したり、動画を撮影してもらったり、1対1で使ってもらう方法などがあります。 方法は別として、一貫しているのは「思考発話法」をユーザーテストと設定していることです。 「思考発話法」とはユーザーに、考えていることを話しながら操作してもらうことで
次のページ
このページを最初にブックマークしてみませんか?
『coromos-コロモス-』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く