入力時間11％減！書きやすいエディタのUIデザイン - クックパッド開発者ブログ
こんにちは、投稿開発部の佐野大河（@sn_taiga）です。 先日、クックパッドのiOSアプリでレシピのエディタ画面をリニューアルしました。今日はそのUIデザインの設計についてお話します。 方針は「簡素化」 エディタ画面は、レシピを考えて記録・投稿する人にとって重要な機能の一つです。レシピには材料や作り方、料理写真、タイトル、紹介文などさまざまな項目があり、頭の中にある料理をこれらの形に落とし込んでいくのはなかなか大変な作業でもあります。なので、レシピを書く際の手間を減らし、ユーザーがストレスなくレシピを書けることを目的に「簡素化」という方針を定め、改善に取り組みました。具体的に行ったことは大きく以下の二つです。 １.入力や編集のステップを少なくする 以前のエディタ 新しいエディタ 以前のレシピエディタはひとつの項目を選択するとモーダルが開き、入力を終えたら元の画面へ戻ってくるウィジェット
カスタマージャーニーマップはどう使う？「幸せハンス」と「わらしべ長者」で考えるマップの役割 | A.C.O. Journal | A.C.O. Inc.
童話をカスタマージャーニーマップにすることで、役割を考えてみました こんにちは、UXディレクターの川北です。A.C.O.ではユーザーリサーチをする際、ユーザーを理解するために、カスタマージャーニーマップなどのツールを取り入れています。ユーザーの体験をマップとして可視化することは、物事を客観的に分析して全体像の把握をしたりチームメンバーが共通の認識を持つためにとても有効な手段です。 しかし、マップで可視化すると満足感があるため、仕事をした気分になってしまったり、そもそもの目的を見失ってしまうことがあります。マップは次のステップへの1つの手段で、マップを元に考えて分析をして発見のために役立てるものですが、実際にどのような役割があるのでしょうか？ 本記事では2つの物語「幸せハンス」と「わらしべ長者」それぞれをカスタマージャーニーマップに可視化し、マップの役割について考えてみたいと思います。物語を
UXからCXへ - 理想と現実の狭間で奮闘するサービスデザイナーの本音(1) CX(カスタマー・エクスペリエンス)デザインって何だろう?
CXデザインとは? はじめまして、リクルートテクノロジーズの間宮と申します。 リクルートグループのIT/ネットマーケティングテクノロジーの開発・提供を行っているリクルートテクノロジーズで、CXデザイングループのマネージャーをしております。 本連載では、CXデザイングループのメンバーがリレー形式で、事例を交えて、われわれが考えるCXデザインの概要を紹介していきます。なお、ここで書かせていただく内容は、個人的な見解や持論であるということを理解いただければ幸いです。 当社のCXデザイングループは顧客体験の向上を最大のミッションとし、「カスタマーにサービスを選んで頂く理由を創り、伝える」ことを主な業務として、2017年4月に立ち上がった組織です。 具体的な業務はサービスのブランディングからサイトなどのプロダクトデザイン、プロモーションなどのコミュニケーションデザインやコンテンツ開発など、多岐にわた
人はなぜ「分かりやすいデザイン」でも失敗するのか｜Tsutomu Sogitani
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
ログアウトのUXを軽視してはならない
Roxanne はライブチャットやビジネスプロセス自動化を専門とする英国に本拠を置くソフトウェアハウスであるParker Softwareのオンラインコンテンツマネージャです。 ログアウトの体験は、ログインする回数が増えている中で見落とされやすいものです。素晴らしいUXほど、ユーザーを送り出すことよりも招き入れることに重点が置かれているのは当然かもしれません。しかし、重視されていないということは、ユーザーのログアウト体験が疎かになっていることを意味します。 最近、アカウントを作成したときのことを考えてください。そのブランドがWebサイトやアプリの入り口から、スムーズかつ素早くユーザーを迎え入れようと苦心しているのは間違いありません。アカウントを作成してアクセスするプロセスは、とても簡単で夢中になります。しかし、ログアウトに関しても同様に言えるということは、滅多にないでしょう。 ログアウトは
起業家が犯しがちなデザインについての過ち「デザインは1週間で」
そんな声を、そう珍しくない頻度で耳にします。（先月だけで2度耳にしました。） これはデザイナーにとって明らかに醜悪な話ですが、実はビジネスにとっても最悪な計画です。 言いたいことは分かります。 賢明な彼らには「デザインに凝るよりも、仮説検証が先だ」という意図があるのです。 しかしそんな彼らに伝えたいことがあります。 それは、 「ソリューションやコンセプトが正しく伝わらないと、仮説検証に致命的なノイズが生まれる」 ということです。 「最低限のデザイン」とは？ 先に言っておくと、UIデザインを1週間で形にすることは可能です。それどころか、1日2日で作ることも可能かもしれません。 また、初期フェーズ等においてはデザインが最低限のもので構わないことには大いに同意できます。 最低限というのは、ソリューション検証に耐えられるだけのデザインを指します。 検証のためにはまずきちんとソリューションとコンセプ
なぜUXという言葉は広まったのか｜Tsutomu Sogitani
2001年にデザイナーを目指すために会社を辞めるといったとき、ある先輩からは「その仕事儲かるの？」と言われ、上司には後悔しないかと何度も確認されました。でもそれは当然のことで、確かにその頃の多くの人の認識は「デザインはビジネスとは少し距離がある世界」でした。デザインは自分たちの仕事の延長上にあるものではなかったのです。 それと比べると、昨今のビジネスシーンにおけるデザインへの関心の高さには隔世の感を覚えます。事業課題としてデザインが議題にあがることは日常茶飯事です。経営者や事業責任者の口からデザインやUXという言葉が出ることは珍しくありません。先日拝見したある大規模システムのロードマップには「デザイン」というフェーズがしっかりと書き込まれていました。 もちろん人によってデザインの定義が違っていたり、広義のデザインと狭義のデザインが混在していたり、デザインに対する過剰な期待や誤解が含まれてい
料理をつくる人はどんな課題を抱えているのか？ 〜ユーザーの課題を施策につなげるインタビューの取り組み〜 - クックパッド開発者ブログ
こんにちは。投稿開発部 ディレクターの五味と申します。 初日の記事から5日間に渡ってお届けしてきた「クックパッド MYキッチン」の連載も、いよいよ今回が最終回です！ 私たち投稿開発部では、クックパッドユーザーの中でも特に「レシピを投稿するユーザー」にとって最適なアプリを追求するために、「クックパッド MYキッチン」アプリをリリースしました。ではこれからそこで、ユーザーにどのような体験や機能を提供していくべきでしょうか。 今回は、ユーザーの課題を起点に次の施策を発想していくために行なっている、ユーザーインタビューの取り組みについて紹介します。 App Store / Google Play 料理をつくる人はどんな課題を抱えているのか 投稿開発部は現在「クックパッドにレシピを投稿するユーザーを増やすこと」を目標とし、その戦略として「レシピ投稿の継続率を改善すること」と「レシピを投稿し始める人を
デザイナーが沖縄での２週間のリモートワークを通して学んだリアルなUX | DevelopersIO
意味不明なタイトルかもしれませんが、私は今年の４月の上旬から沖縄県の那覇市内及び、そこから車で行ける離島においてトータルで連続２週間のリモートワークと旅を並行して行いました。何故そんなことしたの？とか、やってみてどうだったの？という内容を書いていきます。 結論を先に書くと、最高でした。 場所が限定でなく、同じことをやろうとする人にとってできるだけ役に立つ内容になれば良いと思います。 経緯 経緯に関するまとめです。 Vagabonding Vagabonding（Rolf Potts 著）という旅に関する本を読んだのがきっかけです。私は英語版で単語を調べつつ読みましたが、日本版があるようです。読み終わってから知りました。 内容は大体下記のような感じです 旅は所有物を増やすのではなく、個人の選択の幅を広げるのが目的 やり方次第で大量のお金を必要しない旅も可能 Vagabondingとはライフス
データサイエンティストによる統計入門 ― k平均法でデータをクラスタリングしてみよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
データサイエンティストによる統計入門 ― k平均法でデータをクラスタリングしてみよう！ ビッグデータ、データサイエンス、人工知能など、統計学を主軸においた分野が隆盛ですが、統計学には高いハードルを感じる方も少なくないでしょう。k平均法を実際に手を動かしながら理解することで、データ分析を身近に感じることができます。 はじめまして、藤井健人（@studies）と申します。イタンジ株式会社でデータ基盤周りの運用を担当しています。 「ビッグデータ」「データサイエンス」「人工知能」といったバズワードに代表されるように、統計学を主軸においた分野の隆盛が日常となって久しいです。 しかし「統計学は学問的な要素があり難しい」という印象を持たれやすく、「実務に活かすのはハードルが高い、怖い」と感じる方も少なくないのではないでしょうか。 そういった方を対象に、今回は統計学の手法の一つであるk平均法を学んでいただ
タベリー | とある仕様書 – Yamotty – Medium
グループ共有機能仕様書の公開に踏み切ったのは、10Xのプロダクトがどうやって作られているか、について部分的に触れてもらえると思ったから。 10Xでは「細かな実装・デザインの白兵戦」・「認知と理解を獲得していく空中戦」を一緒に戦えるプロダクト・マネージャーを育てていきたいと思っているので、この仕様書を読んで「10Xで力を試してみたい！」という方はぜひ以下のフォームから応募してほしい。ユーザーの感情を科学できる人が10XのPMにはフィットすると思う。 仕様書の前提となる考え仕様書は「チームのワーキングスタイル」によってその役割をかえるものだ。今の10Xは「ユーザーの前に積まれた膨大な課題の山に優先度を付け、とにかく早くプロダクトをプッシュしていくこと」が最優先のチーム。 そのため、「膝を突き合わせて瞬発力の高いコミュニケーション」を重視している。リモートはしない。 この環境では議論のすべてが口
“押してオーラ”でCV率アップ！？CSSアニメーションでクリックしたくなるCVボタンを作る | デジタルマーケティングブログ
こんにちは、クリエイティブDiv.の萩原です。 皆さんは、Webサイトを見ていて「このボタンをクリックしたい」と思ったことはありますか？ サイトの目的にもよりますが、特にLPやキャンペーンサイトでは、ユーザーにCVボタンをクリックしてもらうことが非常に重要です。 魅力的なビジュアルやキャッチコピーでアピールしても、いざCVしようとした時に「ボタンはどこ？」「これクリックできるの？」などと思われてしまっては、ユーザーを逃してしまいます。 では、一体どんなボタンならユーザーの心を引き付けることができるでしょうか？ 今回はCSSアニメーションを使用して「クリックしたくなるボタン」を作るテクニックをご紹介します。 その1：「あ、これ押せそう」と思わせる See the Pen button hover animation by Risa Hagiwara (@cr022) on CodePen.
着信認証のUIデザインから考える、モーダルウィンドウの使い所とアンチパターン - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。デザイナーの田村です。 最近「ジョブ理論」という本を読み終えたのですが、お堅いビジネス書かと思っていたら、あまりにもUXデザインや人間中心設計に通ずるものを感じて驚きました。*1 とても面白かったので、興味のある方はぜひ読んでみてください。 さて今回は、クラウドワークスの一部の機能で、「着信認証」を導入したときのことを書きたいと思います。 「着信認証」のUIデザインというと、なかなか特殊なケースかと思いますので、今後同じ状況に遭遇したデザイナーにとって少しでも参考になれば幸いです。 着信認証とは？ 着信認証のUIデザイン 草案 改定案 効果（KPIへの影響） モーダルウィンドウの使い所 モーダルウィンドウとは？ なぜモーダルウィンドウを選んだか アンチパターンに注意する 仕様を理解する おわりに 着信認証とは？ 着信認証は、Webサービス上で指定された電話番号にかけることで、本
最近のWeb制作会社のスタイルの傾向を業界内から見た雰囲気で分類してみた。 - たかもブログ
Web制作業務を生業として起業や個人として独立する方が増えています。 取りあえずWeb制作なら独学でも出来そう、といった誤ったハードルの低さの認識で制作会社やフリーランスが溢れかえっています。 Web制作を依頼しようとしてクラウドサービスやネット検索で探すと、すごい数のWeb制作会社がヒットしてどこに頼めば良いか、分からない人には混乱するでしょう。 そこで特に理由はないのですが、なんとなくWeb業界の中からみてWeb制作会社を性質別に分類してみました。 制作業界の人間から見て実際の制作事情と、依頼する際の注意点などを中心として書いています。メリットは書いていないので、ちょっと印象よくない部分もありますが、すべての分類で良い制作会社は多々あると思っています。 Web制作会社を探す際に参考になればと思います。 あえて実会社名は挙げておりません。 あくまで独自の視点です。 すべてのWeb制作会社
Webサイトを使いやすく！UIデザインのCSS小技テクニック21個まとめ（実例サンプルコード付）
素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。 文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報（文字ラベル）をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。 背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな
2018年に流行しそうな、注目Webデザイントレンド20個を大予想
あっという間に一年が過ぎ、2017年には多くの革新的なデザインが登場しましたが、2018年はどんな一年になるでしょう。今回は、2018年に注目したいデザイントレンド20個を大予想。たくさんのデザイン事例と一緒にご紹介です。 グラフィックデザインの201年トレンドと比較てみてはいかがでしょう。 https://photoshopvip.net/106130 コンテンツ目次 1. 3Dデザインが人気に。 2. ARデザインの増加 3. 3Dタイポグラフィの増加 4. デジタル・ハンドメイド・アート 5. 鮮やかで発色の良い色やグラデーション 6. 2Dを融合した3Dアニメーション 7. フレキシブルな3Dデザイン 8. よりアーティスティックな写真デザイン 9. モダンなレトロイラストレーション / アニメーション 10. カラーフィルタを使った写真デザイン 11. レスポンシブ・ロゴ 12.
寒い日には食べたくなる！失敗しない【鱈ちりポン酢仕立て】簡単レシピ: ぽちゃぽちゃチャッキー簡単cooking
簡単料理レシピブログです。プロの料理人が詳しく簡単な料理レシピを説明させて頂きますその他、食材や料理について書いてます。たまに色々書きます。 皆様おはこんばんち！ 今回は冬が旬の鱈（たら）を使った簡単レシピ メチャメチャ美味しいからね！ しかも失敗しらずのレシピです 鱈（たら）はタラ目タラ科のうちタラ亜科に所属する 魚の総称でごさいます。 北半球の冷たい海に住んでいる低生魚です。 タンパクな白身の魚で美味しいですよね。 鱈（たら）は風邪の予防や眼精疲労の緩和などの効果が期待できます。 脂肪分が少なく年配の方や胃腸の弱い方でも食べやすい魚です。 旨味成分のイノシン酸やグルタミン酸が豊富なので タンパクなのに美味しい魚ですよ！ その鱈（たら）を使った簡単レシピ 【鱈ちりポン酢仕立て】です。 ではでは、さっそく簡単レシピ紹介させて頂きます。 《材料》 鱈（たら） 3切れ（1切れ50~60㌘） 白
tableで任意の行にマウスホバーしたら他の行をblurさせる
Result マウスホバーしてるところ以外をぼかしてホバー中のコンテナをハイライトする、みたいなの。 この手の手法とコードはほぼ同じです。 csstable {/*table全体*/ background: #f5f5f5; border-collapse: separate; font-size: 12px; line-height: 24px; margin: 30px auto; text-align: left; } th { background: #444; color: #fff; font-weight: bold; padding: 10px 15px; position: relative; } td { border-bottom: 1px solid #e8e8e8; padding: 10px 15px; position: relative; transitio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.appp.la/
2018年に起きること・起きそうなこと＋2017年に起きたこと【ネッ担まとめ】 | ネットショップ担当者が知っておくべきニュースのまとめ
