デザイナー向け認知科学／認知心理学の入門書
デザイナー向け認知科学／認知心理学の入門書若手のUIデザイナーから「使いやすいアプリをデザインするために認知心理学を勉強したい。どんな本を読んだらいいですか？」と相談を受けたので、いくつか紹介してみます。ちょうど、大学入試センター試験（国語）で「デザイン」や「アフォーダンス」が取り上げられたこともあり、このタイミングで書いてみることにしました。 認知心理学の学問分野は広大ですし、僕は認知心理学者ではありませんので、あくまでも、１）デザイナー向けに、２）仕事に役に立つ、３）入門書、 という観点で選びました（前半の入門編）。 （僕自身は、多摩美術大学の大学院生の時に、須永剛司教授（現・東京藝大）の研究室で、インタフェース・デザインの実践研究をしながら、文献や論文、ゼミの輪読、学会や勉強会などを通じて、認知科学／認知心理学を学び、それがその後のインタラクション研究に続いていきます。） 後半の中級
iOS vs. Android App UI Design: The Complete Guide
UI Course UX Course LP Course Blog Tools Data Visualization Color Picker Accessible Color Generator Gradient Generator Interactive Typography Tutorial Design Hacks If you’re designing both an iOS and an Android (Material Design) version of an app, this guide is your new best friend 😎. We’re going to cover the most relevant differences between iOS and Android for UX/UI designers. If you’ve created
納期がある開発で、機能を最大限盛り込む UI の構築｜ふくちっち
こんにちは、CookpadTV 株式会社のデザイナーの若月です。クッキング Live アプリ「cookpadLive」のデザインをしています。 先日、クックパッドで行われたクックパッドはサービスの作り手を採用したいんです。で発表を行った内容の詳細を書きます。 なにをしたのか アプリのリニューアル(アプリ名変更・機能追加)を 1ヶ月という納期がある中で、ユーザの体験を損なわずに必要な機能を最大限盛り込むために、開発を行うために、ユーザ体験と開発のスピードのバランスを取りながら UI を作りました。 リリースするまでのフロー 1. 問題発見 / ワイヤーフレーム 現状アプリの問題発見の洗い出し・リニューアル後の理想の姿を考えることをまず考えました。まとめたものをリーダーやチームメンバーに壁当てしつつ、ワイヤーフレームを組み立てます。 2. 仕様整理 ワイヤーフレームを元に、仕様表を作成します。
OOUI社内勉強会を開催しました - 弥生開発者ブログ
こんにちは、@torimizunoです。 10月になってHiGH&LOWの新作映画が公開されたことが嬉しく、強く生きているこの頃です。 最近Misocaのデザインチームでは、全6回に渡りOOUIの社内勉強会を行いました。 その後メンバーでオブジェクトについて議論する機会が増えたり、思考やアウトプットに効果を感じているので、どのような目的や流れで勉強会を実施したのかを共有したいと思います。 目的 OOUI（オブジェクト指向ユーザーインターフェース）について、雰囲気理解でなく、個々が理解して考え、UIに落とし込む能力を鍛えるため勉強をする。 知見が高まってきたら、社内でのオブジェクト指向を親会社 (弥生株式会社)との共同プロジェクトにも発展させていきたい。 実施方法 1回1時間の全6回で実施 社内デザイナーは共通理解度を深めるため、基本的には参加 デザインパートナーの方や社内メンバーは自由参加
UIデザインにおけるインターフェイスアーキテクトの役割｜Goodpatch Blog グッドパッチブログ
アーキテクチャ（Architecture）とは一般には建築や建築学を指しますが、コンピューターの世界ではあるシステムの概念や設計思想を「アーキテクチャ」という言葉で分類することがあります。中でもソフトウェアの領域では実装モデルの設計指針や分類、コンポーネントの相互関係、ソフトウェアの構築方法などを定めた一連の構造をそう呼ぶことがあります。 アーキテクト（Architect）とは建築家や（建築）設計士、技術者といった職種を指しますが、コンピューターの世界では「アーキテクト（仕組士）: システムのアーキテクチャを設計する責任がある、人、チーム、あるいは組織」（IEEE 1471）と規定されます。要するに、システムの構造設計に関して責任を持つ役割です。「構造設計の指針を示し、実行する人」と言った方がわかりやすいでしょうか。 このような、構造設計やそれを担う設計士の役割は、当然のようにUIデザイン
宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita
この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり「ビジネスロジックの変更や追加」に対応するコストを低く保つこと（技術的負債の抑制）ができるようになったことを解説するものです。 技術的負債の抑制には、技術的負債の原因となりがちな「広範囲の密結合」と「適切な疎結合を保つ仕組みの欠如」が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論（ここでは「現代的な設計論」とよぶもの）です。クリーンアーキテクチャなんかでGUIによく適用されるHumble Object Patternのようにプレゼンテーションとビューを分離する必然性が無くなるでしょう。 ポイントは ある程度以上の規模で開発するなら設計論をうまく使い設計しないと、技術的負債を抱え込む（ビジネスロジックの変更や追加に対
Macintosh から iPhone へ受け継がれるデザイン原則｜Goodpatch Blog グッドパッチブログ
こんにちは。iOS Developer（当時）のusagimaruです。 先日WWDC 2017が閉幕しましたが、グッドパッチでもデベロッパーを中心にWWDC報告会が開催されるなど、とても注目度が高いイベントでした。個人的には、リフレッシュレートの120Hz化によって今後UIやコンテンツがどのように変わるのか、UIKitレベルで統合されたドラッグ＆ドロップによって体験がどのように変わるのか、HEVC/HEIFコーデックによってコンテンツはどこまで進化するのか、ARKitによってUIがどのように進化するのかが気になります。 WWDCで気になったデザイン系セッション さて、6月後半でそろそろWWDCの熱狂が落ち着いてきた頃合いだと思いますが、平熱に戻った今だからこそ改めてWWDCを振り返ってみたいと思いました。デベロッパーとしては、これからがある意味でWWDC本番なのかもしれません。今回も気に
UIデザイン力を鍛えるリデザインの勧めとコツ｜坪田 朋
Twitterでクラシルのリデザインの題材として使って良いとつぶやいたら数名からリデザイン案をもらえました。ありがとうございます！ リデザインは、デザインの基礎スキルを身につけられると思うので、どんどんやったら良い派ですが、リデザインする際は何かにフォーカスすると振り返りしやすく技術を積み上げやすいです。 今回は、僕もクラシルのリデザイン案を作りつつそのコツを書いてみたので参考になればと思います。 デザイン力を鍛えるリデザインのコツ インターン採用でリデザイン課題を出すとだいたいの場合、グラフィック、UI設計、カラー変更など全部盛りの案を持ってきてくれる事が多いのですが、変更箇所が多すぎると狙いが分散した結果、フィードバックしにくい事がよくあります。 ポイントを絞り、リデザインの意図を伝えて、その案を叩きに対話できるとディスカッションのスキルもアップする上に『おおちゃんと深く考えてるじゃん
Sticky Sidebar ⬆⬇
Sticky Sidebar 😎 Sticky Sidebar ⬆⬇ is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports jQuery/Zepto and compatible with Firefox, Chrome, Safari, and IE9+. Source can b
Googleアシスタント開発入門 2019
どうも、Japan Digital Design, Inc. で Technology & Design Div. に所属している石本（@t32k）です。 受付くんβ（社内受付システム）というものを作って、Voice UIについて調査していたので、今回は、その裏側の技術であるGoogleアシスタント（SiriやAlexaなどのAIアシスタント）について、共有したいと思います。 受付くんβThe States of Assistant in 2019Amplify your Web ContentsUser your Android AppBuild a Custom ExperienceThe States of Assistant in 2019 Googleアシスタントと聞くと、家で使うスマートスピーカーやNest Hubのようなスマートディスプレイを思い浮かべがちなのですが、Goog
脱初心者のためのUIデザインの心得
#UIのじかん https://graspy.connpass.com/event/138971/
マンガでわかるHCI: インターフェイスってなに？｜マンガでわかるHCI（ヒューマン・コンピュータ・インタラクション）
インターフェイスってなに？小さい子や、親の世代に、HCI（ヒューマン・コンピュータ・インタラクション）という研究分野のことを話すと、必ず聞かれるのが、「そもそもインターフェイスってなに？」という質問。 たしかに、なんかふわっとして掴み所のない単語ではあります。 マンガでも紹介しているように、インターフェイスという言葉を文字通り訳すと、FaceとFaceの間（inter）という意味になります。 英語のFaceという言葉は、顔という意味以外にも、「面（側面の面）」という意味もあるので、ある意味、なにか「モノとモノとの間」、というイメージです。 ↑ モナカのあんこも、面と面のインターフェイス インターフェイスいろいろインターフェイスと言ってもいろいろあります。 例えば、電話。 電話は、人間と人間の間のコミュニケーションの間を受け持つデバイス、すなわちインターフェイスと言えます。 また、文字や話言
Cocoda!で『Human Interface Guideline』を実践しながら学べるコンテンツがリリースされました！🚀｜グレイテストヒロキ | Cocoda!｜note
Cocoda!で『Human Interface Guideline』を実践しながら学べるコンテンツがリリースされました！🚀 Cocoda!デザイナーのグレイテストヒロキです🕺 この度、UIデザインを学習している人・もっとUIデザインのスキルを付けたいデザイナーに向けた、デザインガイドライン(Human Interface Guideline)を元にしたアプリデザインができるようになるコンテンツが追加されました！🎉 同時に、アプリデザインだけでなく「WEBデザインが作れるようになる」コンテンツも追加されているので、そちらと併せてチェックしてみてください！✨ ↓↓早速取組んで見たい方はこちらから👍👍↓↓ https://cocoda-design.com/contents ✍️Human Interface Guideline(=HIG)とは HIGとはApple社が提供するiOS
UI デザイナーなら抱いて寝るべき1,198gの道具箱｜Fenrir Designers
来年新卒入社する UI デザイナーにブックリストをおくるから、おすすめの本はないかと同僚に聞かれたので「 そりゃあもう、オシドリ本一択だろう 」と即答した。 O'Reilly の『 デザイニング・インターフェース 第2版 』Jenifer Tidwell ( 著 )、色鮮やかな水鳥の細密画が目を引く、通称オシドリ本。UI デザイナーならおそらく、手にしたことないという人はいないだろう。 しかし私の返答に、同僚は苦い顔をしたのだ。 「 それはちょっと初学者には重いと思います... 」 重い？何もハーマンを読めとは言ってないじゃないか。オシドリ本だよ？何一つ難解な表現などないこの本が重い？心外だな、と思いつつも手にとってみたら、なるほどずっしり重かった。 うん、これは 1kg はこえている気がする。なんだか無性に気になったので測ってみたら 1,198g あった。 確かに重いな。電車で読んだりす
電子カルテならではの要望に応えるUI/UX #uxmilk_fest
UX MILK Fest 2019で発表した時のスライド資料です。
OOUX(OOUI)を知らなかったらタスクベースのUIを設計していた話 - Qiita
※2019/4/上旬 ユースケース駆動開発実践ガイドを読んであまりにも適当にユースケース記述及びロバストネス図を書いていたことがわかったため、修正しました。あとタイトルも修正して、この記事で注目してほしいキーワードを入れました。 TL;DR システムにおける画面の設計や配置をなんとなくでやっている方、以下の記事を一読してみることをお勧めします。 私はデザインのデの字も知らずに画面設計していたので目から鱗でした。 OOUX – オブジェクトベースのUIモデリング OOUI の目当て はじめに 社内で使うようなあまりだれも関心を持っていないようなシステムを開発した際に意図せずタスクベースのUIになってしまってました。 上記記事を読んで画面の設計の仕方について学ぶことが出来たため、自分が失敗した点を含めて投稿してみます。 OOUX(OOUI)とはなんだ？という話はしません(できません)。上記記事
UIデザイン初心者がキュレーションメディアを１ヶ月間トレースしてみた！｜田島 美鈴
こんにちわ！現在大学３年でモスティープレイスという会社でデザイナーのインターンをしています、田島美鈴 @abcmisuzuです。 この記事では、デザイン初心者がキュレーションメディアのUIトレースをしてみてのどんな気づきがあったのかや、どんな成長が実感できたかを書いていきます。 UIトレースを始めたキッカケ現在デザイナーとしてお仕事を初めて3ヶ月が経ちましたが、これからの自分の将来像についてうまく想像できずにいました。 そこで５年後の自分がどんなデザイナーになっているのか、から逆算して３年後、１年後、3ヶ月後、そして1ヶ月後と会社の先輩と相談しながら目標を立てていきました。 そんな中で、これからはメインだったグラフィックから離れて事業やUIのタスクをこなせるようになる必要があり、まずは世に出せるデザインを作れるレベルになるためのスキルアップが必須でした。 正直「UIトレースって何なの？やっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからはじめるReact Hooks
宣言的UI
大切なことは、「はじめてのUIデザイン」にまとまっていた｜なみもりなみこ｜note