なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
CEDEC 2010「torne(トルネ)のUIでこだわった19のポイント」 - ゲームの花園
CEDEC2010、3日間参加してきました。 かなりたくさんセッションを受講したので可能な限りレポートしようと思います。ただ、すでにニュースサイトではたくさんアップされているようなので、かぶらないように最初はtorneのやつから書こうと思います。 概要 PS3専用の地上デジタルレコーダーキット「torne（トルネ）」の開発の経緯の紹介 torneのコンセプト torneのUIでこだわった19のポイント 技術面から見たtorne 公式サイト CEDEC2010:torne(トルネ)に注ぎ込まれたゲーム制作現場のノウハウ コンセプト:Torneと家電の違い Torneは開発当時、BD/DVDに焼けない、CS/BS/短波が映らない、録画モードが標準しかない、撮った映像を編集出来ないなど欠点があった。 →そこでTorneでしか体験出来ない、スペックに頼らないモノづくりの追求 家電製品 torne(
アプリのアップデート500本ノックから学ぶUI改善のヒント｜宮﨑 晃
「ザ・マイクロコピー」という本の中で次のような一説がでてきます。 何も考えずにこれしかないだろうと3回クリックするのと、これかなぁと迷いながら1回クリックするのとは同じ重みを持つ 。ちょっとした「？」がどれだけユーザーの集中力を邪魔しているか。 アプリの使い方に意識がさかれて、メインコンテンツへの集中がおざなりになっていたら勿体ない。アプリの運用者としては避けたい状況です。 そこで今回は「ユーザーに考えさせない工夫」を集めてみました。 それでは、いってみましょう！ ①補足はとにかくシンプルに 長い説明は読み飛ばされるもの。最低限の言葉におさえることでユーザーの心理的負荷を下げていきたい。■無印良品：初回起動画面のUI変更 繰り返しや補足は全て削除。「はじめてor復元」のシンプルな画面に進化。 ■アパホテル：クーポン画面のUI変更 挨拶/会員情報/長い注意書き…etcを全て削除。1番重要な｢
ユーザーインタフェース設計で意識したいデザインの考え方｜はのめぐみ
こんにちは！はのめぐみです。キッチハイクというサービスでプロダクトデザイナをしています。 2月にデザイン戦略部メンバーで社内勉強会を行い、アプリケーションのデザイン原則についてレクチャーをしました。この note ではその内容を紹介していきます🙌 勉強会のゴールは「足並みを揃える」ことキッチハイクのデザイン戦略部は、コアスキルや得意分野が違うメンバーが集まっています。バランスがとれたメンバー構成である一方、UI や Figma の知識、ルール感覚はチーム内でバラバラです。UI デザインをコアスキルとしているのは私1人というのもあり、みんなの足並みを揃えたいと思っていました。 知識がないと、どう調べればいいかすらわからないこともあります。自分が「当たり前だ」「常識だ」と思っているものも、専門外の人にとってはピンと来ないときも多いと思います。 そこで、デザインの当たり前をチームの当たり前にす
2019好きなゲームUI/UXまとめ｜尾形
↓本記事はアドベントカレンダー「Game Graphic Design Advent Calendar 2019」用に書きました。 ----------------------------------------------- 記事内容の削除についてのお詫びにつきまして 本記事は、ゲームタイトルの作例をもとに自分の目線で文章を書いておりました。 しかし、「ゲームUI演出ブログ」での記事削除などの事例もあり、 法的な部分での判断により記事を削除いたしました。 本記事にコメントを寄せていただいた方、みていただいた方々、そしてご紹介したゲームタイトルに関わっていた制作者の皆様方、本当に申し訳ございませんでした。 中には記事になったものに対して不快に思われた方もいるかもしれません。 制作者の皆様に強く敬意を表すとともに、以後改めて著作物であることを強く意識していこうと思います。
Fluid Interfaces実践 - なめらかなUIデザインを実現する｜dely design
This domain may be for sale!
GitHub Open Source Collection
Sign up or Sign in to view personalized recommendations, follow creatives, and more.
Re-building the New App Store App – Today View | Phill Farrugia
Re-building the New App Store App – Today View Phill Farrugia June 19, 2017 If you didn’t already know, Apple announced an entirely redesigned iOS App Store experience this month at the WWDC conference. It has an increased focus on rich, in-depth, long form content over the previous interface which often tended to cram as many app icons as possible onto the screen at any one time. I recently wrote
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
『ペルソナ5』のカッコよすぎるUIの制作工程を紹介！ アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC＋KYUSHU 2017】 - ファミ通.com
2017年10月28日、福岡県の九州産業大学にて、コンピューターエンターテインメント開発者向けのカンファレンス“CEDEC＋KYUSHU 2017”が開催。本記事では、同カンファレンスにて行われたセッション“ペルソナシリーズにおけるUIクリエイティブの手法 ～ペルソナ5のUI事例～”のリポートをお届けする。 本セッションに登壇したのは、アトラスの和田和久氏と須藤正喜氏。和田氏はデザイナーとして入社後、さまざまな作品に携わり、現在は『ペルソナ』チームを統括しつつ、『ペルソナ3 ダンシング・ムーンナイト』、『ペルソナ5 ダンシング・スターナイト』のプロデューサーを担当している。須藤氏は、アトラス初のUI（ユーザーインターフェース）専属デザイナーであり、『ペルソナ5』ではアートディレクターとUIデザインリーダーを兼任。各種イベントのデザイン監修やプロモーション、ライツデザイン監修なども行っている
LINE NEWS風のUI実装 - Qiita
初めての記事投稿です。 いろいろと説明が不足するかと思いますがご容赦ください。 LINE NEWS風のUIとは・・・ タブ＋スクロール型の記事(TableView,CollectionView等で実装されている)のアプリをよく見ます。 Yahoo! JAPANアプリ,スマニュー等、ニュース系のアプリだけじゃなくファッション系でもよく見ますね。 その中でもLINE NEWSの以下の点に惹かれました 記事部分の横フリックでタブ部分が追従する 選択中のタブを表す領域がスクロールに伴って大きさが変わる 選択領域に入っていくと少しずつタブのテキストの色が変わる タブ部分を無限にスクロールできる よく使われているデザインだと思いますが意外と作り方がネットに転がってなかったです。 どうやって実装してるか非常に気になり試行錯誤の末実際に作って見ました。 記事部分のフリック まず最初にとっつきやすいことから
Implementing the Twitter iOS App UI (Update: Swift 3)
After using Twitter’s iOS App for a while, I started looking at it with the developer’s eye and noticed that some of the subtle movements and component interactions are extremely interesting. This sparked my curiosity: how did you guys at Twitter do it? More specifically, let’s talk about the profile view: isn’t it elegant? It looks like a default view, but if you look closely you’ll notice there’
業務システムのUI構築に採用されるJavaScriptコントロール「Wijmo」。軽量で高性能な製品を提供しつづける舞台裏を開発者に聞く［PR］ － Publickey
業務システムのUI構築に採用されるJavaScriptコントロール「Wijmo」。軽量で高性能な製品を提供しつづける舞台裏を開発者に聞く［PR］ 業務アプリケーションの開発でWebとモバイルへの対応を進めようとするとき、大きな課題の1つとなるのが、Webやモバイルに合わせた優れたユーザーインターフェイスをどう構築するのか、でしょう。 デスクトップアプリケーションとして作り込まれてきた業務アプリケーションのユーザーインターフェイスを、Webブラウザ対応にし、しかもモバイルデバイスの小さな画面とタッチ対応へ再構築することは容易な作業ではありません。 HTML5/JavaScriptのユーザーインターフェイスコントロールである「Wijmo」（ウィジモ）は、こうした課題を解決できる機能を提供します。 Wijmoは、業務アプリケーションでよく使われるExcelライクなグリッドコントロール、オートコン
dribbbleのぬるぬる動くメニューUIのアイデア10選
アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！ Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい
Appleも唸るクオリティ！「Enlight」に学ぶUXの工夫 - MdN Design Interactive
Amebaクリエイティブディレクターが語る スマホアプリのデザイントレンド 2016年1月28日 TEXT：山幡 大祐（株式会社サイバーエージェント） 日々進化するデバイスやユーザーに合わせ、スマホアプリのデザイントレンドの移り変わりは非常に早い。本コラムでは、アップデートによって進化を遂げたサービスUIや新機能、新サービスなどにフォーカスし、より良いユーザー体験を提供するうえでの工夫についてサービスごとに考察する。今回は、AppStoreのBest of 2015に選ばれた、写真加工アプリ「Enlight」を取り上げる。 このアプリは、写真加工を感覚的な操作で、本格的に楽しめるアプリである。一般的なトリミングやフィルタ処理はもちろん、画像の変形やマスク処理、トーンカーブによる色調整といった本格的な機能も揃えている優れものだ。そんな、多機能でクリエイティブなアプリに隠された工夫をひも解いて
自分のアプリに似たアプリを探してみる
mokosoftの主力アプリだと言える、クロスワードアプリですが、 ２ｃｈやブログで宣伝などをしている間に、無料のクロスワードアプリが多く増えてきたように思います。 自分が広めた以後に、どんなのが増えてるのかを自分なりに調査してみました。 mokosoftのクロスワードアプリの外観です。 デザインセンスのかけらもない、いかにも素人が作ったというUIになっています。 先に言っておきますが、こんなアプリのUIを参考にしたらいけません。 また、クロスワードの答えが間違っている場合に赤文字で表示するという「不正解ハイライト機能」というのがついています。 設定画面、ゴミですね。 いきなり「不正解文字ハイライト」とかいわれても何のことやらわからない。 機能にこんな命名をしてはいけない例です。 iPhone編 辞書ソフト等を作っていると思われる、dicwizard.jpさんの公開されているクロスワードア
iOS7からメールアプリ等で使用されているUITableViewCellをスワイプし表示するメニューのOSSをいろいろ試してみたメモ - Qiita
iOS7からメールアプリ等で使用されているUITableViewCellをスワイプし表示するメニューのOSSをいろいろ試してみたメモObjective-CiPhoneiOS 更に追記 最近はMGSwipeTableCellを利用しています。SWTableViewCellが稀に認識しないことがあって他にもバグっぽい挙動で悩んだりもしたので乗り換えました。 追記 SWTableViewCellに斜め問題を改善したPull Requestをしてたのですが無事本家にMargeされました。 別でアニメーションの改善も送ってたのですが、バウンスの仕方が同じアニメーションじゃないという理由で却下されちゃいました。んー残念。 求める物はiOS7のメールやリマインダーで左スワイプにしたとき表示される感じのメニューです。 OSSを探してみたら意外と多く見つかったので、その中から個人的に良さそうなものを選別して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Swift — Custom Navigation Bar Image for iOS 11 Large Titles 🎨
今年気になったハイクオリティなデザインUIキット − 2014 - NxWorld
長文日記