知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
募集サービスの検索画面をつくるとき、理屈っぽいデザイナーが考えたこと｜ムラキ｜note
## これはなに なんでも募集できるサービス「bosyu」の検索画面をつくったデザイナーが、その思考プロセスをまとめた記事募集サービス「bosyu」のデザイナーをしているムラキと申します。bosyuは名前の通りなんでも募集できるサービスでして、「明日一緒にランチしてくれる人募集」から「私のこと雇ってくれる会社募集」まで、本当に多種多様な"募集"をユーザーさんに出して頂いています。 募集が増えれば増えるほど、より自分に合った募集を探したいという気持ちは高まるわけですが、実はこれまで、bosyuの検索は「募集中の"募集"を、キーワードの全文検索で引っ掛けるだけ」という最低限のものでした。これでは不便だよねということで、本日、ソート機能や検索サジェストなどをつけたリニューアル版をリリースしました。 というわけで、「検索画面のデザインに至るまで、デザイナーがどんなことを考えていたのか」について書い
Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ
先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示（複数行テキストの切り捨て） ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿で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まで
強度の高いUIをデザインする｜池内健一
デザイナーの池内（@KD6JOE）です。アプリのUIデザインなどをやっています。この記事ではUIをデザインを始めたばかりの人向けに、強度の高いUIをデザインをするための手順をご紹介します。 最低限の品質のUIをデザインできるようになることがこの記事の趣旨です。ここで紹介する手順はあくまで一例で、ガチガチにこの通りに進める必要はないし、ケースバイケースです。自分のやり方に取り入れられるところだけ取り入れてください。 強度の高いUIデザインとは強度の高いUIデザインとは以下のものを指しています。 ・あらゆるUIパターンの検討がなされている ・どのUIパターンを採用するかロジカルに決定している ・仕様漏れがなく開発がスムーズに進む逆に強度の低いUIデザインとは、パターン検討がほとんどされず、ツッコミどころがありまくり、仕様が二転三転するものです。結果開発スケジュールの遅延を引き起こします。 ただ
任天堂が新人研修で伝えている、あそび心のデザイン｜娯楽のUI 公式レポート #1 | キャリアハック（CAREER HACK）
任天堂の新人研修で語られているのは「あそび心を伝える」という大切さについて。『スーパーマリオメーカー』を例に、UI/UXデザインチーフである正木義文さんが語ってくれた。 [目次] ・「みなさんとクイズをしたいと思います」 ・任天堂流「伝え方」のこだわり ⅰ教えるよりも体験してもらう ⅱファーストインプレッションを大事にする ⅲ体験は面白く ・わかりやすさと高機能を兼ね備えた、UIのデザインプロセス ・「あそび心を伝えるUIデザイン」3つのポイント ⅰUI脳と娯楽脳の二人三脚 ⅱ短所を「娯楽脳」で長所へ変える ⅲ将棋3席 麻雀5席 「みなさんとクイズをしたいと思います」 ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「まずは、みなさんとクイズをしたいと思います」 そんな、あそび心溢れる一言で幕を開け
Material Designを最速で使いこなす｜池内健一
Material Designを使いこなすための最速の手順を紹介します。最近UIデザインを始めた方、iOSアプリのデザインはしていたけどAndroidのデザインも行う必要になった方、WebサービスでMaterial Designを使ってみたい方、Androidエンジニアでデザイン方面ももっと知りたい方などは参考にしてみてください。 Material DesignとはMaterial DesignとはGoogleが構築したUIデザインフレームワークです。Androidだけでなく、WebやiOSのデザインにも活用できます。 ざっくりとした内容は「Material Designとは」でググってみてください。基本理念をわかりやすく解説している記事が並んでいます。この段階ではなんとなくMaterial Designってこんなんだなって理解したら十分です。 それではガイドラインを読み込む前に、まずは準
2018-bonfire-design-komerco-design-system
2018/04/20で発表したBonfire Design #3 の登壇資料です。
デザイナー不在のチームのデザインフローを整えた話
カウルTech Blogをご覧のみなさまこんにちは。 2017年の3月にHousmartにジョインしたデザイナーの稲井です。 食う寝る遊ぶが大好きなので色々と回り道してますが、よろしくお願いします。 さて今回はテックブログへの初投稿ということで、デザイナー不在の開発チームにジョインしてからの半年間を振り返って、チーム内でのデザインフローをどのように整えていったか？といった内容で送りしたいと思います。 スタートアップ企業でのインハウスデザイナーの役割や、デザインワークフローの改善に興味のある方は参考にしていただければと思います。 ジョインする前の状況の確認 基本的にエンジニア3人（iOS,Android,WEB,サーバーサイド）の体制で開発をしており、デザインに関しては外部から手伝ってくれるデザイナーさんやフリーランスの方に機能ごとにスポットで依頼しているという状況でした。 サービスとしては
ペンとふせんで！スマホUIのアイデアプロトタイピング - クックパッド開発者ブログ
検索事業部のデザイナー倉光です。 今回は、開発現場でアイデア発散フェーズにやっていることの一例を紹介したいと思います。UIデザインの手法として比較的知名度は高く、デザイナー以外でも学びたいという要望も多い「ペーパープロトタイピング」についてです。 前提として プロトタイピングにはフェーズと目的に応じて 様々な手法がありますが、今回は「小規模チームでアイデアをぽんぽん出し、伝え合うためのプロトタイピング」の話です。ユーザーに実際に評価してもらうためのプロトタイプの作り方についてはこの記事では割愛させていただきます。 また非デザイナーの方は「いやいや、デザイナーじゃないと画面なんてうまく書けないよ…」と躊躇してしまうかもしれませんが、本記事では社内のディレクター/エンジニア/インターン生が書いた成果物も掲載していますので、そちらも参考になると思います。 目次 目次 1.ペーパープロトタイピング
【アイデアの可視化】ストーリーを使ったサービスをデザインする方法｜Goodpatch Blog グッドパッチブログ
こんにちは！プロジェクトマネージャーのKatsukiと申します。 今回は、私が日々の業務で意識している「ストーリー」についてや、誰でも簡単にアイデアを可視化できる「ストーリーボード」についてまとめました。 ストーリーって何？ ストーリーとは、物語論において物語世界の中で起きる出来事を時系列で表した流れのことを指します。例外はありますが、基本的にストーリーは「キャラクター」「シーン」「プロット（要約）」の3要素を含みます。 人類史上はじめて物語の構造を分析したと言われるアリストテレスは、「ストーリーは大きく３つのセクションに分けられる」と定義しました。それは、「始まり・中盤・結末」です。古代から人間はストーリーを楽しみ、ストーリーと主に発展してきました。 共感を生むストーリーは、観客の心を大きく動かし、そのストーリーに触れる前とは違う一皮むけたような感覚すら覚えさせてくれます。 そこから、観
ストーリーボードを使ったUXデザインのためのアイデア発想法とは？ | えそらLLC UX ブログ
UXデザインにおけるストーリーボードの基礎 まずは、「ストーリーボード」とは何か聞いたことがない方のために、基礎をおさらいしておきましょう。 ストーリーボードとは ストーリーボードは、あなたの製品・サービスを通してユーザーがどのような体験をするのかを、一つのストーリーとして描写したものです。汎用性が高く様々な場面で使えるツールですが、私たちはこれを、UXデザインにおいて最も重要な「ユーザーが感じる価値」を視覚化するためのツールとして使っています。 ストーリーボードのサンプル ストーリーボードでは、1つの体験を複数のコマに分割して時系列で表現します。各コマは、そのシーンを象徴する「イラスト」と、状況や心境を説明する「ナレーション」や「セリフ」によって構成されます。 コマ数に決まりはありませんが、「ユーザーが感じる価値」にフォーカスしたい場合、私は4コマ（各コマの役割は後述）をおすすめしていま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『リングフィット アドベンチャー』ゲームとフィットネス、混ぜるな危険のゲームデザインが成立するまでの苦労【CEDEC 2020】 | ゲーム・エンタメ最新情報のファミ通.com
UIデザイン講習会
デザインシステムとFlutter
http://www.life-is-bitter.com/entry/designguideline_start
【CEDEC 2018】明快で軽快！ Nintendo SwitchのUIを触るだけで楽しい理由 - GAME Watch
エンジニアのためのスライドデザイン実践講座 / How to design presentations for engineers
デザイン落とし穴 - 抜け出すための傾向と対策 -
