#アプリ模写100本ノック｜Miwa Kuramitsu
「アプリ模写100本ノックはいいぞ」というツイートしたら、思ったより反響があったので、やり方をまとめました。 デザインツールを使って1pxレベルでスタイル再現していくUI模写もいいけれど、瞬発力を鍛えるなら30分間1本勝負で1つのアプリUIの骨格を観察・スケッチ・考察していく「アプリ100本ノック」おすすめです。 久々にやったけど、楽しい… pic.twitter.com/PvOIPeCuhf — Miwa Kuramitsu / transitkix.eth (@transitkix) April 7, 2022 骨格を即興で模写する 今回の「アプリ模写100本ノック」では、骨格のみを高速で模写します。そのアプリのコア体験について制作者の意図を考察し、気づきを通してデザインパターンの引き出しを広げることがねらいです。 UIデザイナーには「対象を観察する・事象から法則性を見つけ出す・即興で
Reflective UI実践：現実世界が映り込むUI表現｜usagimaru
Reflective UIと呼ばれる表現がにわかに注目されています。そのいくつかの事例紹介や、私自身が実際に実装してみてどうだったかの所感を書き留めておこうと思います。 Reflective UIとはReflective UIとは、光や映像の反射表現を活用してUIの質感を高めた表現を指します。ジャイロや加速度センサーを使って擬似的に反射を表現したり、カメラで取り込んだ映像をUIのテクスチャとして活用して、より現実感を持たせた表現などがあります。 カメラを使う場合、例えばフロントカメラでユーザーの顔や背後の映像を撮影しリアルタイムに加工して、テクスチャとしてUIの見た目に反映します。これがスマートフォンで実装されるとまるでGUIが鏡のように映り込む質感を持った物体かのように錯覚するので、「クールな新しい表現」として注目されています。 Reflective UIに明確な分類や定義があるかは定か
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
マイクロインタラクション
UIのディテールをほんの少し工夫するだけでUXは劇的に改善します。本書では効果的なマイクロインタラクション――ひとつの作業だけをこなす最小単位のインタラクション――の意味、有効性、デザイン手法を学びます。マイクロインタラクションを「トリガー」「ルール」「フィードバック」「ループとモード」に分解して豊富な実例とともにていねいに解説し、さらにプロトタイプやドキュメント作成、テストといった実践的な手法も紹介します。マイクロインタラクションを活用すれば、ありふれた製品も顧客を引きつける魅力的な製品に生まれ変わらせることができます。ドナルド・ノーマン推薦書！ 翻訳者によるサポートページ。 本書に寄せて ――ドナルド・ノーマン 賞賛の声 まえがき 謝辞 意見と質問 1章 マイクロインタラクションのデザイン 1.1 機能ではないが侮れない存在 1.1.1 大規模なマイクロインタラクション 1.2 マイク
iOS開発入門Objectsまとめ
はじめに Xcode 11.4 の Storyboard で表示される Objects についてまとめました。これでざっくり色々使えるはず！ github サンプルコード集 Widgets ラベルとかボタンをウィジェットとしてまとめました。 基本的には IB で設定可能ですがコードで設定する場合の簡易実装も書いてます。 Label 文字表示するだけのやつ。 簡易実装 @IBOutlet private weak var label: UILabel! { didSet { label.text = "Labelです" label.textColor = .systemGray2 label.textAlignment = .natural label.font = .systemFont(ofSize: 17) } }
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
縁の下のUIデザイン―少しの工夫で大きな改善！ 記事一覧 | gihyo.jp
第25回デザインシステムで、使い勝手／デザイン／コードに統一感を持たせる 池田拓司 2021-08-20
約4万RTされたグルメアプリ「Dish」を2ヶ月でリリースするまで｜ren@Anyflow Inc.
こんにちは、株式会社ピケの ren です。 本日リリースした Dish (ディッシュ) という、現在地からサクッとランチが決まるグルメアプリについての note です。 5月12日に仮説検証のために行ったツイートが約4万RTされ、その後の約二ヶ月の間にチームでどうような動きがあり、本日 iOS版がリリースされたのか、というのをストーリーベースで書いていきます💪 目次 ・ Dish って？ ・作り始めた理由 ・バズってからの一週間 ・体験設計の見直しと迷走 ・約20人に行ったユーザーインタビューとβテスト ・バズからくる安堵感 ・ 手触り感の無さ ・ ユーザーインサイトの発見 ・そしてリリース ・2ヶ月間で学んだこと ・ まとめDishって？Dish は、現在地からサクッとランチが決まるアプリです。 せっかく渋谷に来たから、美味しいランチが食べたいけど、わざわざ調べるのは面倒…といったシチ
アップル ヒューマンインタフェースガイドライン
アップル ヒューマンインタフェースガイドライン 原文：Apple Computer Inc. 訳：かろでん☆みゅーあ 2006-06-28 はじめに アップル ヒューマンインタフェースガイドライン序文 アップルは、強力なコアファウンデーション、そしてアクアと呼ばれる、目の離せないユーザインタフェースを結びつけた、世界で最も先進的なオペレーティングシステム、Mac OS X を手にしました。 進化した機能と、美的に洗練された色使い、そして透過処理、アニメーションによって、Mac OS Xは新規のユーザにはコンピュータ操作をより容易に、同時にプロフェッショナルユーザには彼らがMacintoshに期待する通りの生産性を提供します。 ユーザインタフェース、すなわちふるまいと外見は、よく練られた緊密なユーザ体験を、Mac OS X向けに開発された全てのアプリケーションに利用できるようにします。 これ
Vue Designer: デザインと実装の統合
プレビューのレンダリング 意味解析 props / data あたってるスタイル import してるコンポーネント GUI 上の操作との対応付 コード編集・生成
cocoda
200+ DESIGN behindsCocodaは、デザインの裏側をまとめた事例集です。 日本を代表するデザイン組織から、200以上の事例が公開されています。 CONTENTS デザインの裏側をまとめた 200以上の事例ブランドから、プロダクト設計、デザイン組織の立ち上げ...。様々なデザイン領域の深い事例が、日本で最高峰のデザイン組織によって掲載されています。 RECOMMEND あなたの興味に合わせて デザイン事例をおすすめあなたの興味に合わせて、豊富なデザイン事例の中から ピッタリなコンテンツをおすすめします。 MY LIST 自分好みのリストに まとめるコンテンツの中でぴったりなものを見つけたら、あなただけのリストを作って、いつでも見返すことができます。 GET STARTED さっそくはじめる
任天堂が新人研修で伝えている、あそび心のデザイン｜娯楽のUI 公式レポート #1 | キャリアハック（CAREER HACK）
[目次] ・「みなさんとクイズをしたいと思います」 ・任天堂流「伝え方」のこだわり ⅰ教えるよりも体験してもらう ⅱファーストインプレッションを大事にする ⅲ体験は面白く ・わかりやすさと高機能を兼ね備えた、UIのデザインプロセス ・「あそび心を伝えるUIデザイン」3つのポイント ⅰUI脳と娯楽脳の二人三脚 ⅱ短所を「娯楽脳」で長所へ変える ⅲ将棋3席 麻雀5席 「みなさんとクイズをしたいと思います」 ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「まずは、みなさんとクイズをしたいと思います」 そんな、あそび心溢れる一言で幕を開けた『娯楽のUI - by Nintendo -』。任天堂で働く現役デザイナーによるデザイン解説セッションだ。 UI/UXデザインチーフである正木義文さんが語ったテーマは「
UI / UX 学びまとめ
夏、満喫してますか？ 夜は何してる？ フェス、ナイトプール、おうちでまったり、友達とビアガーデン……。ViViモデルが夏の夜にやりたいこと×メイクをまとめました。
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UX-mov | アプリのUIが動画で見れるギャラリーサイト
宣言的UI
フロントエンドカンファレンス沖縄2023
Spectrum, Adobe’s design system
LottieFiles: Download Free lightweight animations for website & apps.
ソシオメディア | UIデザインパターン
