最速・最高のファイルアップロードに近づくための1歩 - Qiita
Webアプリを作っていてよく出くわすのがファイルアップロードですね。単純にアップロードするだけなら実装自体はたいしたことないものですが、より良くしようと思うと想像以上に奥が深く…悩ましい沼感があります🤔 今回は今までファイルアップロードを実装していく中で手に入れた改善ポイントを紹介していきます。これで最速・最高のファイルアップロードに1歩でも近づけられればと思います。 なお、僕が普段開発をしているアーキテクチャの都合上、 nginx Rails の話が出てきますが一部を除きWebアプリなら普遍的に使える話だと思います。 2つの側面から紹介します。 UI編 と パフォーマンス編 です。 UI編は、HTML5を中心に使い勝手を向上させるためのポイントを紹介します。パフォーマンス編ではRailsのファイルアップロードを約10倍高速化⚡️した事例を紹介します。それでは長いですが、よろしくお願いし
スマートフォンのディスプレイ巨大化に伴う、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まで
Nintendo SwitchのUIはなぜ使い勝手がいいのか!? 全員で体験し、“あたりまえ”を磨く任天堂のもの作り【CEDEC 2018】 - ファミ通.com
前述したように、本体機能とはゲーム機本体に最初から内蔵されているソフトウェアのこと。任天堂の家庭用ゲーム機で初めて実装されたのは、2001年に発売された ニンテンドー ゲームキューブで、当時はセーブデータ管理などだった。以降、ニンテンドーDS、Wii、ニンテンドー3DS、WII Uとハードが進化するにつれ、さまざまなシステムやサービスが追加されていった。こうした多機能化に加え、任天堂のゲーム機以外でも多機能でゲームを遊べるデバイスがつぎつぎに出現。そうした状況の中、ニンテンドースイッチも同じ多機能化を目指すことの是非から考え直したそうだ。その結果、たどり着いた答えが“ゲーム機なので、ゲームで遊ぶに特化しよう”と、原点回帰したじつにシンプルなもの。「これがニンテンドースイッチに込められた思いです」と小野氏。つくるものを厳選し魅力を凝縮するとともに、ストレスを感じさせないことを目指した。その実
2017年、デザインガイドラインについて考える。｜Yuya Furusato｜note
株式会社rootのUIデザイナー 古里祐哉です（@remmyfurusato）。 rootでは、サービスの立ち上げやリニューアルに伴う、UI/UXデザインをご支援しています。 さて、今年を振り返えると「デザインガイドラインに注力した」年でした。デザインガイドラインを必要とされるクライアント様には共通点があります。 ・レイアウトパターンやパーツの使い方が定義されていないで、設計者やエンジニアが迷う。 ・結果、サービス全体の一貫性がなく使いづらい。 このような課題を抱えるクライアント様からのご依頼を多くいただきました。サービス開発の現場で、徐々にデザインガイドラインの重要性が広まってきているのではないでしょうか。 デザインガイドライン作成を通して考えたことをまとめたいと思います。 デザインガイドラインとは？ デザインガイドラインの定義は「サービスやプラットフォームのデザイン方針を示したドキュメ
UXピラミッド – UXデザインの正しい評価方法 – デザイン会社 ビートラックス: ブログ
前回の「UXハニカム – UXデザインの正しい品質評価方法 –」では、サービスやプロダクトのUXデザインを評価する際に一般的に用いられている、UXハニカムを活用した方法を紹介した。加えて、実はもう一つユーザー体験のクオリティを測る方法がある。 ユーザー体験を構成する3つのポイント消費者がサービスを受けるとき、ユーザーがプロダクトを利用するときに受け取る体験の質を高めるのがUXデザイナーの仕事になる。 そして、その体験を左右するのが、1. 見た目の品質 (Look), 2. 感覚の品質 (Feel), 3. 使いやすさ (Usability) である。大きく分けてこの3つの要素のクオリティが高いほど、ユーザーに対してより優れた体験を提供することが可能になる。 実用性と利用感覚を測るUXピラミッドUXハニカムに加えて、もう一つのUXクオリティを測る手法としてUXピラミッドがある。6つの階層で構
UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog
最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり
つよいUI - transitkix design log
…というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり！あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。 つよいUIであるための7つの視点 1.本来、そこにあるはずの情報がない場合はどうなりますか？ リストUIで載せる情報が0件、文章が空っぽ、画像がない時など 2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか？ 数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など 3.ユーザーさんの立場によって、表示要素に変化はありませんか？ ゲストとログインユーザー、無料会員と有料会員…など 4.ロード中、もしくはロードされるまで何が出ていますか？ 通信中の表示、読み込み中の画像エリア…など 5.予期せぬエラーが起こった時、画面はどうなりますか？ 通信エラー、リンク先のコン
マイクロインタラクションを考える上で重要な４つの要素
Saraはコロラド在住のUXデザイナーリサーチャーです。彼女はSpringboardの意欲的なUXデザイナーのエキスパート・メンターでもあります。バイオリン演奏、国際開発の背景を持ち、旅行と社会を変えるデザインを作ることを好みます。 マイクロインタラクションは、ユーザー体験を簡単で楽しく印象に残るものにします。 ほとんどのマイクロインタラクションは目立たなく気づかれにくいものですが、効果的に使うことで、ユーザーをプロダクトのファンにすることができます。 言い換えるならば、マイクロインタラクションには、ユーザーとテクノロジーの間にあるギャップを埋め、同時にユーザーを惹きつけることができる可能性があるということです。 マイクロインタラクションの４つの要素 Microinteractionsの著者であり、Mayfield Robotics のプロダクト統括責任者であるDan Saffer氏は、マ
カード型UIにおける５つの効果的なテクニック
「カード」とは、画像やテキストなどの情報が書かれた下図のようなデザインのことをいいます。カードは、シンプルな使いやすさとデザイン性とのバランスを重視する際にはもっともよく使われる手法となりました。PinterestやFacebookのようなサービスで使われはじめ、現在では多岐にわたる企業で使用されています。
その文字、薄すぎない？ デザインにおける灰色の明度は何%が最適か
UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導
アプリのUIデザインと配色パターンまとめ（非デザイナー向け） - Qiita
はじめに 私は主にiOSアプリのプログラマーなのですが、デザインまで一緒に頼まれる事があります。 デザイナーじゃないので１からデザインをしていくなんて到底無理です。 そんな時にノンデザイナーの方でも良い物を作るために UIデザインのギャラリーサイトと配色パターンを決める便利なサイトをご紹介致します。 基本他のアプリを真似参考にするといい感じにできちゃうかもしれません。 Web系開発の方も配色パターン等は参考になると思います。 デザインをする前に デザインをする前に呼んでおいたほうがいい物 - ITエンジニアに易しいUI/UXデザイン - デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 - ノンデザイナーのための配色理論 アプリデザイン CAPPTIVATE.co 動きのあるカッコいいUIばっかり載っています。 種類別で見ることもできるので便利ですね。 Mobile D
2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ
アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。多くのトレンドは検討する価値がもちろんありますが、一緒に新しい技術も必要となります。 優れたUIデザインは、シンプルさ（英: Simplicity）と有効性（英: Effectiveness）が全てです。これこそがデザイナーが機能性を達成しようとする理由です。しかし反対に、もしユーザーがアプリをうまく使いこなせないとき、UIデザインは失敗と言えるでしょう。 デザイントレンドが変化する理由にはさまざまな要因が考えられます。たとえば2015年の大きな流れとして、ハードウェアの変化やモバイル端末のレスポンシブ化が挙げられます。 公開された多くのモバイルアプリは、人気のある機能を必需品としてすぐに変化させてきました。さらに今では若者のおよそ90%が、モバイル端末上で基本的な操作を行
Facebook UIデザイン大解剖─UIの使いやすさを決める「グレースケール」の配色ルール ｜ブログ｜root｜芯を問い、成長に貢献する
初めまして、rootアシスタントデザイナーの内藤です。 今日はFacebookのモバイルUIを事例に、UIデザインにおける「グレースケール」の使い方について考えてみます。 そもそも「グレースケール」とはなんなのか。僕も、言葉だけ知っていてなんとなく使っていたので改めて調べてみました。 IT用語辞典（e-words.jp）によると グレースケールとは、画像などに使われる色の種類・範囲を表す用語の一つで、白と黒とその中間の何段階かの灰色のみを用いること 一言でいってしまえば、限りなく黒に近いものから限りなく白に近いものまで「いろんなグレー」ということでしょうか。 グレーという色は地味ですが、UIデザインにおいて実はもっとも重要で、なおかつ難しい色なのではないかと考えています。 例えば、Webサイトのキーカラーなどは、目立ちますし、サイト、しいてはブランドそのものの印象を決定づける色なので、色選
出来る限り短く説明するReactJS入門 - Qiita
VTeacher 所属の Masaki Suzuki です。 ※各項目をできるだけ3行以内にまとめています デザイナーさんやフロントのエンジニアさん向けのReact.js（リアクトジェーエス）入門です。 「最近、『リアクト』と聞くけど、つまり何？」ってひとが対象です。 React.jsとは React.jsはUIのパーツ（構成部品）を作るためのライブラリです。 FacebookがOSSとして公開しています。 初回投稿日：2015年06月21日 この投稿はReactが話題になり始めた頃（6年前のv0.1の頃）、整理した記事です。 最新情報はこちら React Server Components 2021年からReactを始めるなら React Server Components 一択ではないか？ https://zenn.dev/rgbkids/articles/e58ef9b947b199
Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ
スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しかし分かりにくい、使いにくいといった問題点があります。ハンバーガーメニューに代わる、より分かりやすく使いやすいスマホ向けのナビゲーションを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.ogura.blog/entry/2017/02/28/190245