Sociomedia はこれまで様々なシステム開発プロジェクトを通じて OOUI（オブジェクト指向ユーザーインターフェース）の設計メソッドを研究してきました。そのメソッドを御社のエンジニアリング／デザインチームが習得し開発プロジェクトの中で実践していけるよう、Sociomedia のデザインコンサルタントが講師となって、ワークアウト方式（手を動かしながら練習課題に取り組む）のトレーニングを行います。 Sociomedia の OOUI 設計トレーニングは、書籍やブログで話題になった Sociomedia 独自のデザインメソッドをより詳しく体系化し、UI設計の経験があまりないデザイナーやプログラマーの方でも段階的にその技術を体得していけるよう、難易度レベル別に用意された課題にワークアウト方式でチャレンジしていくものです。基本的にインハウスのエンジニア／デザイナー向けの内容となっています。So

Merpay Advent Calendar 2019 の 13 日目は、メルペイフロントエンドチーム の @tanakaworld がお送りします。 メルペイの管理画面は 2019 年 2 月のサービスローンチに先立ち、2018 年 11 月にリリースされました。私は 2018 年 8 月に入社してから一貫して管理画面開発に関わり、様々な機能開発・運用を行ってきました。その中でフロントエンドエンジニアとして関わったいくつかのプロジェクトをピックアップしてご紹介します。 目次 はじめに メルペイのフロントエンドチーム メルペイの社内向け管理画面 プロジェクトの振り返り 審査業務効率化プロジェクト マイクロサービス分割プロジェクト 課題感 分割の方針 分割後のアーキテクチャ Component v2.0 リニューアルプロジェクト 課題感 デザインポリシー 開発フロー 社内向け管理画面で今後注

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない

こんにちは、ミツイです。 寒いですね。もう極暖ヒートテック＆コートです。 真冬に何を着ればいいのか不安です。。 最近、一括処理のUIで迷うことがありました。 一括処理とは、複数のアイテムに対し一括してあるアクションを行う操作。 Gmailのメール一括削除とかああいうやつです。（英語だとBulk actionですね） ぱっと思いつくのがGmailだったので参考にしようと思ったのですが、どうにもイマイチ。 もっと良いのがあるのではないかと思い、色々なサービスを探したので記事にまとめておこうと思った次第です。 ではさっそくGmailから。 Gmail www.google.com 各アイテム（各メール）の左にチェックボックスがあり、選択したアイテムに対して上部の操作バーにあるアクションを実行します。 操作バーにあるチェックボックスで、表示中の全てのアイテムに対して選択・選択解除を行うこともできま

スクロールバーのデザインをCSSだけでカスタマイズする方法を具体例を挙げながらまとめていきます。すごく、簡単です。 普通にブラウザの右側に出てくるスクロールバーはまだいいですが、コンテンツの中でスクロールさせる要素のスクロールバーがダサすぎて、なんとかしたい人向けです。 ちなみに、今回メモするTipsは、-webkit系でのみ有効です。ご了承ください。 Firefoxでは、スクロールバーをCSSでカスタマイズすることは現状できないようですね。 -webkit-scrollbarでスクロールバーをカスタマイズできる -webkit-scrollbarというプロパティを指定することで、スクロールバーのデザインはカスタマイズ可能です。 簡単なカスタマイズには簡単な知識だけしか必要ないと思うので、実際に私が扱った要素だけ紹介します。 ::-webkit-scrollbar::-webkit-scr

スクロールバーをカスタマイズしてコンテンツを設置できるJavaScriptのほとんどは、スクロールの挙動が独自だったりします。ブラウザのネイティブのスクロール操作を使用し、快適に動作するコンテンツを実装できるライブラリを紹介します。 5kBの超軽量で、他スクリプトの依存はありません。また、IE9+対応なのも安心ですね。 デフォルトのスクロールバーをカスタマイズ 同系統のスクリプトの多くはJavaScriptでスクロールバーを模倣しますが、当スクリプトはデフォルトのスクロールバーを使用するので、パフォーマンスを損なうことはありません。 スクロールバーのデザイン スクロールバーはCSSでスタイルを簡単に変更できます。 5kBの超軽量スクリプト 他のスクリプトの依存はなく、超軽量の単体で動作するスクリプトです。 ネイティブのスクロール スクロール操作にJavaScriptは使用せず、ネイティブの

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

ソシオメディアが独自に提供するUIデザインパターン集。これを使えばUI設計を効率化できます。

スマホアプリをインストールすると初回起動時にアプリの簡単な概要や機能説明、使い方説明などが表示されることがあります。 よく「チュートリアル」と呼んだりしますが、正確には左右に画面をスライドして表示する手法のことを「ウォークスルー」と言います。 1回しか出ないのでなかなか強く記憶には残らないかもしれないですが、アプリのファーストインプレッションに大きく影響するので、伝える内容はもちろんですが、それが与える視覚的、感覚的印象も同じくらい重要となります。 「ユーザにアプリの使い方を学習させるためのUI」にはいくつか種類があって、他にも「コーチマーク」など通常画面上にオーバレイしてボタンや操作を順にポップアップなどを使って説明していく手法などもあるのですが、今回はウォークスルーを採用しているアプリの方が最近は多いと感じるのでそちらのタイプをメインに紹介していきます。 ※ウォークスルーがあまり一般的

※本コラムは、長谷川のブログ「underconcept」からの転載です。 ユーザー体験（ユーザーエクスペリエンス／User Experience: UX）という言葉が広く聞かれるようになってきた。半ばバズワードのように、特にウェブデザインやマーケティングの記事などの中では、この言葉を見ない日はない。しかしながら、多くの場合、UXという言葉の真意や可能性を取り違えてしまっている。本稿では、いくつかの観点からUXの本質を考えてみる。 1.UI/UXという誤用 1.1. UIとUX まず、多くの記事や講演などで見られる「UI/UX」という表現からとりあげてみたい。 UI/UXとは、もちろん、User Interface / User Experience（ユーザーインターフェイス／ユーザーエクスペリエンス）の省略形であるが、多くの記事などで「すぐれたUI/UXデザイン事例」、「UI/UX講座」な

申し訳ありませんが、リクエストしていただいたページはこのサーバにございません。 次のような原因が考えられます。 リンクに間違いがあるか、リンクが更新されている。 URLが誤っている。 ファイルが存在しない。 恐れ入りますが、トップページから再度ご訪問ください。

はじめまして、デザイナーの小林です。 すっかり暖かくなりましたね。 今日はランチタイムに会社近くの公園で桜を見てきました。毎日春を感じてウキウキしています。 「春」といえば、入学や就職など新しい一歩を踏み出す人が多い季節ですよね。 私も最近、プロダクトオーナーからUIデザイナーの道に一歩踏み出しました。 デザインは独学、未経験でUIデザイナーになったのですが、クラウドワークスではリードデザイナーの上田と一緒にデザインガイドラインのブロジェクトを担当しています。 デザインガイドラインのプロジェクトを担当する中で、まずはじめにAtomic Designなどコンポーネント指向から勉強していきました。独学でも勉強していたつもりですが、UIデザインに関する知見をよりスピーディに得ることができたように思います。 そこで、今回は新人UIデザイナーの私がどのようにコンポーネント指向を勉強していったのかをご

Chrisはロンドン在住のフリーランスのUXデザイナーです。彼はシャーピー（油性ペンが有名なメーカー）、コーヒー、プロトタイプ、付箋紙を愛しています。彼はブログやポートフォリオのウェブサイト、Just UX Designの中で色々な思いを書き綴っています。 検索はWebデザインの重要な要素であるにもかかわらず、ユーザビリティが悪いことがよくあります。このような使いにくい検索が及ぼす影響を認識することで、経済的な損失を防ぐことができるでしょう。 お客様が実際に店舗へ出向いたとき、スタッフが把握していない商品について尋ねたとしましょう。スタッフは肩をすくめて、商品がないことに関して謝罪するだけでしょう（もしくはそれすらしないかもしれません）。お客様はその店舗に不満を抱き、代わりに近くにある競合店舗へ向かうでしょう。 あなたがこの架空のビジネスのオーナーだとしたら、こんな対応をするスタッフには嫌

アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し

Apple Design Resources Design apps accurately and quickly using official Apple design templates, icon production templates, color guides, and more.

Adobe初のUI/UXデザインツール「AdobeXD」の使い方を見てきました！【CSS Nite in Kobe】 先日CSS Nite in Kobe Vol.23 「〜WebサイトやモバイルアプリのUXの設計、UIのデザインからプロトタイプの作成、共有まで〜 Webデザイナー、ディレクター必見「Adobe XD」の使い方じっくり解説」に参加してきました。 講師はAdobeのマーケティング担当である轟 啓介さん。セミハンズオンという事で、参加者はノートPCを持ち込み、実際にAdobeXDを操作してXDの魅力を体験しました。 AdobeXDとは？さて今回のテーマは「AdobeXD(アドビ エックスディー)」。 正式名称はAdobe Experience Design(アドビ エクスペリエンス デザイン)ですが、もうすっかりXDで定着しました。 Adobe初のUI/UXデザインツールという

相互補完型のユーザー調査である両者は、反復デザインのサイクルで重要な役割を果たす。定性的な調査は、デザインプロセスに情報提供をする。一方、定量的な調査は、ベンチマークプログラムやROI算出のための基礎となる。 Quantitative vs. Qualitative Usability Testing by Raluca Budiu on October 1, 2017 日本語版2018年3月5日公開 はじめに ユーザビリティテストによる調査では、割り当てられたいくつかのタスクを1つ以上のデザインで参加者に実行してもらうことになる。しかしながら、そうしたユーザーテストによる調査で収集できるデータには、2つの種類がある： 定性データ：複数の観察結果から構成され、デザインが使いやすいか、使いにくいかを特定する。 定量データ：1つ以上の指標（タスク達成率やタスク時間など）の形式であらわされ、タス

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

ツクルバには「tsukuruba technology」なるサーバーサイドエンジニア、UI/UXエンジニア、デザイナーからなる独立ユニットがある。それぞれGREE、サイバーエージェント、広告デザイン事務所というバックグラウンド持つ彼ら。エンジニア×デザイナーにおける理想のチームについて語ってもらった。 エンジニアとデザイナーは何にコミットすべきか。 ここ最近、日本国内でも「デザイン×エンジニアリング」など領域をこえるクリエイターが注目されるようになってきた。 「エンジニアでも最低限、デザインの基礎理解は必要だ」 「デザイナーもプログラミングを学ぶべき」 「決して相容れない生き物だから、それぞれ干渉すべきではない」 などなど、さまざまな意見がある。もちろんチームの規模、提供するサービス・プロダクト、ビジネスモデルやフェーズもさまざまであるし、正解もない。 ただ、とくに「これからのキャリア」を