Build. Contribute. Evolve.Shape the merchant experience for Shopify’s core product, the admin.

※某まとめサイトにてまとめていた記事の転用です BASENAME: 2150782012031271001 STATUS: Publish ALLOW COMMENTS: 1 ALLOW PINGS: 1 CONVERT BREAKS: richtext DATE: 12/06/2018 00:54:50 良い・悪いと思ったデザイン例からデザイン思考、デザインに関した事例などを多数サイトやSNSでの投稿を参考・引用してまとめました。 ■はじめにデザインに関する疑問や、ここでの前提をまずまとめていきます。 ―――デザインとは？ （design）の語源は、デ（de：削る）・ザイン（sign：形作る）である。これはラテン語で「私欲を削り落とし、本質を磨き上げること」を意味する。 出典 なぜゴッホは貧乏で、ピカソは金持ちだったのか? | 山口 揚平 |本 | 通販 | Amazon デザイン（de

ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション

World IA Day 2019 TokyoIA in IxD - OOUIとこれからのUI

先日行われた HCD-Net 関西フォーラム 2020 での私の講演「オブジェクト指向UI入門」の内容を、ほぼそのままのスクリプトで連続ツイートしていこうと思います。 https://t.co/x9hZMw3cMW

Today we can use a variety fonts but there was a time when we didn't have web-fonts and only a few variations. Most usable were — Georgia, Arial and Times New Roman. But if you wanted to do something unusual and use your own fonts — that's what I would call pain in the ass. The `@font-face` rule was announced only with the CSS3 fonts module. The first formats for embedded fonts were Embedded OpenT

よりよくユーザーに興味を持ってもらえる施策を打てないか考えた。そこで実際のアプリの画面を用いてコーチマークを使っている事例を集めて、どういうコーチマークが世の中に存在しているのか調べてみることにした。 コーチマークとは、実際の画面を使って、使い方を表示しているものである。 ○DELISH KITCHENの例ウォークスルー後にコーチマークを表示している。 ボタンだと分かりづらい、スワイプで操作するような使い方をコーチマークを用いることで説明している。 これは単純でわかりやすく必要最低限で、ユーザーの早く使いたい気持ちを邪魔しなくてすむと考えた。 ○ニュースアプリウォークスルー直後に、いつ通知を受け取りたいかという設定画面が来る斬新なUI。それでも早速使うというボタンが下部に用意されているので早く使いたい人間には、そちらが使えるようにしてある。 肝心のコーチマークに関しては、すべての機能を紹介

概要Figmaとは何か、何ができるのか、チームでシステムデザイン設計するときにFigmaを使うと何がいいのかを初心者向けにざっくり紹介していきます。 「〇〇するにはどうすれば？」といった具体的な疑問はyoutubeに動画がたくさん上がっているので見てください。 目次 Figmaとは何か 画面の作り方 チーム設計でFigmaを使うメリット Figmaを利用してみて まとめ Figmaとは何かFigmaはユーザーインターフェース（UI）のデザインをブラウザ上で簡単に作れるデザインツールです。 デザインツールといえばデスクトップアプリのAdobe XDやSketchが有名どころですが、Figmaも負けず劣らずの操作性と利便性を兼ね備えています。また、エディターが２名までなら無料で使うことができるので１人での利用だけでなくチームでの利用にも始めやすいツールです。 本記事でFigmaの利便性を紹介し

前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで

こんにちは。ZOZO広報の松尾です。最近買い物をしていたら、お店に「アドベントカレンダー」が並んでいました。もうあっという間に年末ですね。みなさん、2019年はどんな一年でしたか？ 私がZOZOに入社したのは昨年12月なのですが、それからもう一年が経ちました。本当に変化の大きな一年でしたが、一つひとつ乗り越えてこれたな…と振り返っては、少しほっとする思いでいます。 12月15日、ZOZOは「ZOZOTOWN」誕生15周年目を迎えます。前社長の前澤さんが退任し、また大きな節目を迎えることになった私たちZOZOですが、これまでの15年間も、多くの、そして時に大胆な変化を遂げながら成長してきました。 …ここで、みなさんに質問です！15年前のZOZOTOWNがどんな姿だったか、知っていますか？ 実は15年前、初期のZOZOTOWNは、今とは全く違う姿をしていました。そこで今回は、ZOZOTOWNが

ウェブサイトに貢献このウェブサイトではあなたからの情報提供をお待ちしています。参考資料の追加・修正のリクエストはリポジトリのイシューから専用のテンプレートで行えます。

https://www.npmjs.com/package/png-dpi-reader-writer https://gyazo.com/ee8098ea31f3ad9f54882d79f9459d4b

2019.03.15 #FROKAN HANATANI Takuma(@potato4d) Sample and GIF image repo: https://github.com/potato4d/frokan20190315

スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ

ハロー、@seto_hiです。 北海道で避暑をしています。 アプリ開発をしていると様々なコンバージョン率がKPIになることは多いですが、誠実さを欠いたUIを作ると数字がよく伸びることが稀によくあります。 そういったものは一時的な利益には繋がりますが、長期的な利益には繋がらないと考えています。 自分が今後そういったUIを作らないための予防線としてこの記事を書きます。 不利益の排除 ・不利益な動線を奥深くに隠す ・ユーザーが設定を変更する手間を増やす ・「メールマガジンの解除にはメッセージを送ってください」 ・「メールマガジンの解除にはログインが必要です」 ・過度に警告を表示する ・「この設定をOFFにするとアプリが正常に動作しなくなる可能性があります」 ・「本当にOFFにしてよろしいですか」 ・不利益な動線を目立たなくする ・不利益な動線のシグニファイアを消す ・スマートフォンならスクロール

2018/4/27（金）に渋谷・DeNAオフィスで開催した『UI Crunch #13 娯楽のUI - by Nintendo -』。"もっと楽しく"を追求する、任天堂のUIデザイナー3名をお迎えし、「Splatoon」 や「Nintendo みまもり Switch」 などの事例を交えながらお話いただきました。 https://ui-crunch.connpass.com/event/82969/ 　 ■■■■コンテンツ■■■■ 00:00:00～ 自己紹介・もくじ 00:03:57～ ①あそび心とUI 00:23:02～ ②SplatoonUIの狙い 00:42:22～ 任天堂の紹介 00:46:14～ ③NintendoみまもりSwitch は 誰のもの？ 01:07:07～ さいごに 01:10:51～ Q&A 【UI Crunchとは】 UI Crunchは、DeN

これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同