Stephen Moyersはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。 彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 あなたのサイト内のコンバージョン率を低下させている原因は「検索機能」にあるかもしれません。 致命的な問題ではなくても、コンバージョン率アップに役立っていなければ検索機能の意味がありません。サイト内検索を最適化してユーザー体験を向上させれば、Webサイトのユーザビリティと楽しさを大いに向上できます。 ユーザーはWebサイトが楽しいほど頻繁に訪れ、会員、顧客、購読者などの人数増加に繋がります。サイト内検索の改善は簡単ですが、よくある間違いによって検索するときの体験が邪魔されていることが多いです。サイト内検索を適切なものにするやり方を身につけて、競合サイトと同じ落とし穴にはまるのを避けましょう。 見

<label for="inp" class="inp"> <input type="text" id="inp" placeholder="&nbsp;"> <span class="label">Label</span> <svg width="120px" height="26px" viewBox="0 0 120 26"> <path d="M0,25 C21,25 46,25 74,25 C102,25 118,25 120,25"></path> </svg> <span class="border"></span> </label>

この方、先生と同じコーイチさんで、アイコンの似顔絵も似てる。そしてこのログインフォームはめちゃカワイイ twitter.com/koysd/status/9… — Yama Baked(@bluestar_music)Tue May 01 11:46:25 +0000 2018

デザインそのものと違い、UXデザインにかかるコストはやや抽象的に思えるかもしれません。通常、UXデザインにおけるスケジュールやマイルストーン、コストなどは、推定によって算出されます。そして、このような経験に基づく推測は、実際の事例によって形成されます。 UXデザイナーへの報酬が不明瞭な理由には、さまざまな要因があります。プロジェクトの範囲、必要なテストの量、デザイナーの経験、プロダクトの複雑さや機能の違い、フリーランサーかUXデザイン会社かなどによってコストは変動します。 インターネットで典型的なUXデザイナーの相場を調べれば、実際にこのような曖昧な価格設定を見ることができます。Upworkは、１時間あたり$110〜$270の間で成果物ごとの内訳を提供しています。一方、ほかの会社は、アプリの品質次第で合計$2,000〜$35,000の範囲を提示しています。また、綿密な調査やアジャイルプロセ

Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日（忘れもしない2018年3月30日！）iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら（インストールなど煩わしい手続きなしで）すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの

ホームページを作成する際、必ずといっていいほど作成するのが本番用デザインの設計図である「ワイヤーフレーム」です。 ワイヤーフレームは一般的にWebディレクターが作成しますが、デザイナーに渡した時に「どう作ればいいかわからない」などのフィードバックを受けた経験はないでしょうか。 プロジェクトを円滑に進めるためのコミュニケーションツールでもありますので、あくまで設計図とはいえ適切に作成したいものです。 そこで今回は、ワイヤーフレーム作成時に気を付けたいポイントと便利なツールをあわせてご紹介します。 ワイヤーフレーム作成で悩んでいるWebディレクターの方は、参考にしてみてください。 参考： 新人Webディレクターの基礎、制作の現場で使うワイヤーフレームの作り方｜ferret ワイヤーフレーム作成の注意ポイント9個 1. アイデア出しは個人でしっかりと行う http://mindmap.jp/00

はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜：ISE Technical Conference 2018

こんにちは。 タップル誕生の新機能開発チームでおでかけ機能のプロデューサーをしている永友です。 先日、半年の開発期間を経て、おでかけ機能をリリースしました。 おでかけ機能は、これからの日本の恋愛の在り方を大きく変える可能性を秘めた、 タップル過去最大規模の大型新機能となります。 タップルチームの中で、おでかけ機能のコンセプト構想は1年前からあり、 本腰入れてチーム組成しミッションに向き合ったのが半年前。 この半年は生みの苦しみで 私個人も、チームとしても時に楽しく、時に苦しくもがいた半年だったので、 おでかけ機能をどんな思いで作ったのか、どんなところにこだわっているのか書いてみようと思います。 ・・・ ①おでかけのコンセプト設計 マッチングサービスのトレンドは今、「気軽にマッチする時代」から「気軽に会う時代」に移り変っています。 世界中で数々のマッチングサービスが生み出される中、 マッチし

2001年にデザイナーを目指すために会社を辞めるといったとき、ある先輩からは「その仕事儲かるの？」と言われ、上司には後悔しないかと何度も確認されました。でもそれは当然のことで、確かにその頃の多くの人の認識は「デザインはビジネスとは少し距離がある世界」でした。デザインは自分たちの仕事の延長上にあるものではなかったのです。 それと比べると、昨今のビジネスシーンにおけるデザインへの関心の高さには隔世の感を覚えます。事業課題としてデザインが議題にあがることは日常茶飯事です。経営者や事業責任者の口からデザインやUXという言葉が出ることは珍しくありません。先日拝見したある大規模システムのロードマップには「デザイン」というフェーズがしっかりと書き込まれていました。 もちろん人によってデザインの定義が違っていたり、広義のデザインと狭義のデザインが混在していたり、デザインに対する過剰な期待や誤解が含まれてい

はじめて iMacG3 を使った時、私はとても前向きな気持ちになった。説明書を読まなくても何をどうすればいいの分かったし、自分の思い描いた通りに動かすことができた。 道具は使う人の能力を拡張させると言うけれど、私はあの丸いマウスと一緒に、文章を書いたり、絵を描いたり、本当に何でも出来る気がしたのだ。 それは Mac だけではなかった。iPhone も、iPadも、Apple 製品はいつも私を高揚させた。なぜ私はこんなにも惹かれるのか。不思議に思いながらも、私は Apple 製品を追いかけてきた。 どうして？ ... 実はその秘密は既に明らかになっている。 それは、モードレスだからだ。 直感的だとか、シンプルだとか、一貫性があるとか、そういったものは表出された一部にすぎない。 この秘密は、 今から 9 年も前にインターネットに公開されたテキストにあっさり書かれている。ソシオメディアの上野学

わりかん・決済アプリ「paymo」を運営する AnyPay, Inc.のPM & UI/UX Designer。技術とデザインの力をプロダクトに結集させるプロセスがとても好き。Twitterは@ikutani41。 WebサービスやiOS/Androidアプリのデザインをするとき、どのようなアカウント概念を採用するか検討したことはあるでしょうか？ ほとんどのアプリは、ユーザーごとにアカウントを作って情報やログを紐づけたり、機密情報を扱う場合は認証機構を設けたりする必要があります。また、どのようなタイミングで、どのような操作でアカウントを作ってもらうかはとても重要で、さまざまな選択肢があります。 一般的なデザイン アプリをインストールして初めて開いたとき、下図のような画面をよく見るかと思います。 こういったデザインが採用される背景には、理由があります。 ユーザが慣れているため操作に迷いにくい

こんにちは。デザイナーのヴィクトリアです！ 今回は、Webデザインの専門用語についてご紹介したいと思います。最近のLIGデザイナー陣の会話に頻出している単語を中心に集めてました。一通りおさえておけば、飛び交う会話の内容も理解できるはず。 これからデザイナーを目指す人や駆け出しの人に届けー！ デザイナー陣だけでなく会話にダントツ出てくるワード 1.UI UIは、User Interface（ユーザーインターフェース）を省略した言葉です。 詳しくは先輩デザイナーのみやっちが書いているので、そちらを引用します！ UIはユーザーインターフェースの略で、コンピュータやシステムとユーザーの橋渡しをするためのものです。 パソコンで言うと、本来コマンドで動作を書くべきところを、クリックやドラッグなどの直感的な操作で実現してくれるOSやソフトウェアがインターフェースにあたります。 また、クリックやテキスト入

デザイナーにコミュニケーションスキルが必要と言われるしその通りだと思うけど、日本の美大でコミュニケーション教育は重視されてないのに関わらず、社会に出たら突然「重要です！」と言われて最近の新卒は「突き放された気持ちになる」と言う話をたまに聞く。 社会人はデザイナーに限らず、コミュニケーションスキルが必要だけどデザイナーが不幸なのは教えてくれる人が極端に少ない点だと思う。 デザインスキルは楽器演奏と同じで、実践による反復運動の繰り返しで身につくモノなので本人の努力次第だけど、コミュニケーションスキルは言語化してレクチャーする方が伸びが早い。 デザイン相談を依頼されて「うちのデザイナーはコミュニケーション力が無くて...」と課題感を持つ人は多いですがデザイナーの問題だけではなく、デザイナーが下流工程に居る事で情報不足・見積もり不足で、不利な状況が故にその問題が起こっているケースの方が多い。 この

普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ

本日は、LBSのEntrepreneurship Clubが主催するMONZO社のプレゼンがあったので、聞きに行ってきました。MONZOはRevolutと並ぶ、ロンドンを拠点とするFintechの雄で、オンライン銀行口座やコンタクトレスデビットカードといった一般ユーザー向けの金融サービスを提供する企業です。 （HPはこちら→https://monzo.com/） User Interface（UI：ユーザーがサービスを使用する際に触れるウェブサイトやアプリのデザイン）やUser Experience（UX：ユーザーが製品・サービスを使用する経験）に定評があり、LBSの学生にもユーザーが沢山いる有名な企業です。 さて、ユーザーにとって良いデザインのプロダクトを作ることを目指し、実際に非常に使いやすいアプリを作っているMonzoはどうやって優れたアプリを作っているのでしょうか。 答えは「徹底的

実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。 たとえば、リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。 今回はこれらのサンプル例を作成するために、Material Motion、IBMのアニメーション原則、Motion in Manifestoのガイドラインを参考にしています。 また今回のサンプル例は、InVision Studio（現在は限定ユーザーのみのアーリーアクセスで、メール登録

通っていたサンフランシスコのデザイナー養成所Tradecraftの一番最初の課題で、アプリをピックアップして、見知らぬ人に声をかけてユーザビリティテストをして改善のプロトタイプを作って検証するーというものがあったのですが、そのプロセスをこの度記事にまとめてMediumに投稿しました。 するとGoogleのデザイナーが、なんとFoursquareの創業者のDennisにメンションしているではないですか。 Awesome, just shared with the team!— Dennis Crowley (@dens) 2018年3月9日 チームの人にシェアしてくれたみたいで、Foursquareのエンジニアの人からメッセージが届いたり、その日のうちに人事の人から「今ちょうどシニアプロダクトデザイナーのポジションを募集しているんだけど、興味があったら連絡待ってるよ」みたいなメールが届きまし

@ryo_panさん主催のポートフォリオナイトに参加しました。 このイベントでは主に「ポートフォリオは作品を羅列するだけではなく、その制作プロセスも語って、スキルや個性を表現していこう」ということを話していた気がします。 ざっくりまとめるとこんな感じなのかな↓ ポートフォリオのゴールを考える・wariemonさん（CI&VI&UI系）：登壇資料、ポートフォリオ ・目的と手段を明確にする：自分が持つ武器で、目標に到達する手段を選ぶ ・作品以外の強み：ブログ＆登壇資料も自分を語る材料にできる ・差別化：自分らしさを表現しよう ポートフォリオを作る前にすべきこと・SHUN_macherさん（UX系）：ポートフォリオ ・自己分析＆コンセプト設計：自分を一言で説明できるキャッチフレーズがあると分かりやすい ・過去と未来を考える：現状（これまでの経験）＆理想（これからやりたいこと＆やりたくないこと）を

UXとは何でしょうか？とにかくユーザーに分かりやすく、簡単にすることと考えている方は多いかもしれません。しかし改めて考えてみると、明確に答えるのは難しいのではないでしょうか。シンプル至上主義のUXへのアンチテーゼを、皆さんご存知「赤ずきん」の話を通してみてみましょう。– SEO Japan 2017年のUXLxでのAxbom氏のキーノートはこちら(英語) 昔々あるところに、リール―という女の子がいた。 しかし、いつも古くてボロボロな赤いずきんを被っていたので、皆は彼女のことを「赤ずきん」と呼んでいた。 そんな彼女もいつも被っている赤ずきんに飽きてしまった。そう、彼女はイメチェンをしようとしているのである。 彼女は初めて自分のおばあちゃんのところを訪れようとしていて、いい感じの緑ずきんを買いたいと考えている。 彼女は素晴らしい検索エンジンを使い、すぐに「オオカミのウール」というサイトを見つけ

今回は、僕がPM & UI/UXデザイナーとして仕事をしている中で、「あの本に出会ってて良かったなあ」と思い返せるものを5冊に絞って選んで紹介したいと思います。 Material Design Guideline Material Design Guideline いきなり書籍じゃなくてアレですが、「UIデザインとはどういうことを考えて、どんな風にやるのか」はこれを読み込んで勉強しました。 Googleが提唱するMaterial Designについて、↓のような内容がまとまっています。 ・思想やコンセプト ・それらをUIデザインに落とし込む際にどのような考え方をすれば良いか ・Material Designらしさを作り出すための具体的な表現方法 ・いくつかのパターン 1番良いなと思う点は、とても体系的に情報が整理されているため、「UIデザインは感覚でやるんじゃなくてちゃんと理由があるんだ」