UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
WebからIoTまで！Milkcocoaを使って超簡単にリアルタイム通信を実装してみよう | creive【クリーブ】
こんにちは。Webエンジニアの田島です。 みなさんは今までサービスやコンテンツを作っていて、以下の様なことを思ったことはないでしょうか。 Web上でユーザ同士がチャットできる機能を実装したい Google Driveのように、複数人で同時にファイルを編集できる機能を提供したい パソコンとスマートフォンを連動させて、スマートフォンからパソコンを操作できるようにしたい Raspberry Piで取得した値を即時にWeb上で見られるようにしたい これらを実現するために共通する必要な要素が「リアルタイム通信」です。 今までリアルタイム通信を実装するには、サーバーを用意し、Node.jsやWebSocketといった技術を使ってリアルタイム通信特有のプログラムを記述する必要があったのですが、今回紹介するMilkcocoaというサービスを使えば、それらがなんとサーバーを用意することなく、フロントエンド側
ひたすら最新のユーザーインターフェイスを紹介し続ける「UI Movement」
ユーザーの新しい体験のためのインスピレーションがぎっしり詰まったサイトのご紹介。 実際に仕様する技術やなんやというのはないのですが、「こういう動きが体験できるといいな」というアイデアの種となるでしょう。 少し前にCSSのボタンだけをひたすら紹介するサイトをご紹介しましたが、そのユーザーインターフェイスバージョンと思っていただければと思います。 ユーザーインターフェイスのアイデア 実際にユーザーインターフェイスのアイデアと言っても様々あるのですが、特に多いのはやはりモバイルインターフェイスでしょうか。以下のような画像がずらずらと閲覧出来ます。 心地よさと軽量の両立はなかなかバランス感覚が必要な作業ですが、気持ちい操作ってやっぱりいいですよね。 ひたすらUIを紹介し続けるサイト「UI Movement」 UI Movement - The best UI design inspiration,
起業のきっかけは「祖母が遺した定期預金」。グッドパッチCEO土屋尚史氏に聞いた、急成長への道のり | ライフハッカー・ジャパン
業界でもいち早くUIデザインにフォーカスを当て、「グノシー」や「マネーフォワード」など、これまで数多くのアプリ・サービスのUIデザインを手がけてきた「株式会社グッドパッチ」。 4月にはいまスタートアップ界で注目を集めるベルリンへの進出も果たしました。 同社の創業者でありCEOの土屋尚史氏に、創業から現在に至るまでの軌跡をお聞きました。 土屋尚史（つちや・なおふみ） 株式会社グッドパッチCEO。関西大学中退後、ウェブ制作会社に就職しディレクターを経験。その後、デジタルハリウッド大学院、サンフランシスコでのインターンなどを経て、2011年に同社設立。 米田：会社が急速に成長していますね。いま社員数は何人ですか？ 土屋：65人です。最初は2人から始まって、その半年後に1人になって（笑）。 米田：2011年、僕が「ノマド・トーキョー」というプロジェクトで東京中のシェアハウス・シェアオフィスを渡り歩
デザインは理屈で学べる！ エンジニア向けデザインメンター業が求められる理由について聞いた | HRナビ by リクルート
アイデアは面白いのに、どうもダサかったり、UIがわかりにくかったりするWebサービスに出会ったことはないだろうか。 それはもしかすると、デザインを知らないエンジニアが、ふわっとした感覚と印象で作っているからなのかもしれない。そんなエンジニアでも、デザインのセンスを身につけることはできるのだろうか？ プログラマー向けにデザインを教える“デザインメンター”赤塚妙子さんに話を聞いた。 プログラミングを学んだデザイナーが始めた“デザインメンター業“ 今年の1月から“デザインメンター業”を始めたフリーランス デザイナーの赤塚妙子さん。美大を卒業後、デザイン事務所に就職。その後、Webの世界へ足を踏み入れ、今ではRuby on Railsの開発に参加するまでになった。 「自分がプログラミングを覚える中で、デザイナーとプログラマーが歩み寄る感じが面白くって。デザイナーがプログラミングを覚えることはあるけ
iOS上の万能テキストエディタ "Write" にMac版が登場
iPhone上で論文や本だって執筆する…。ちょっと前なら「そんな無茶な」と言われていたことが、アプリや周辺サービスの充実で当たり前にできるようになってきました。 その一つの鍵となったのがDropbox やiCloudとの連携です。ユーザーの側でまったく意識することなく文書が同期される仕組みがあるおかげで、iPhoneで編集した文章をパソコンで清書ということが楽にできるようになったわけです。 もうひとつの鍵は、しだいにサポートされるようになったリッチテキストの扱いです。いまではEvernoteでもリッチテキストを扱えますし、Markdown書法経由で楽にリッチテキストを書くアプリも増えました。 そのなかでも群を抜いた高機能とUIの美しさを誇るアプリが Write です。Markdownの扱い、DropboxやiCloudとの連携、他サービスへの共有方法の数の多さなど、総合力が高い一方でこれま
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
UXを学ぶならこれだけは目を通しておけ！ - UX-design
2013-04-11 UXを学ぶならこれだけは目を通しておけ！ UXとはなんぞや!?って日々思いながら手探りでUXを意識したサービス開発、UXの向上を測っております、どうも @tacumacy です。 ボク自身、UXのことはなんとなーくわかってはいましたが、本格的にそれを仕事としてやろうとなった時から本気で勉強しなきゃやばい！と思い猛烈に危機感を感じたので、めちゃくちゃネットサーフィンをしてUXに関する情報を集めては読みまくりました。そこでボクが読んで参考になった書籍や記事を、どうせならここでまとめて見れるようにしておこうと思います。もし勉強したいな、と思ったときに見ていただけると幸いです。 こんな人に読んでほしい ・これからUXを学びたいと思っている人 ・UXについて、手っ取り早く情報が欲しいと思っている人 書籍紹介 以下、これだけは頭に入れておきたいなぁと感じた内容をまとめてくださって
「スマートフォンのためのUIデザイン」を執筆しました - tikeda's blog
UIデザインの入門書「スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン」を執筆させて頂き、3月30日に発売になりました。ユーザーが見慣れて使い慣れたUIをルール（デザインガイドライン）や、UIコンポーネント毎のパターンにすることで、分かりやすく使いやすくできるのではないかという考え、iPhoneやAndroid、スマートフォンサイトとプラットフォームを越えUIデザインを捉えて解説しています。 スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン 作者: 池田拓司出版社/メーカー: ソフトバンククリエイティブ発売日: 2013/03/30メディア: 大型本 クリック: 117回この商品を含むブログ (5件) を見る UIデザインやスマートフォンのサービス開発に興味を持っている人や、仕事をしてみたいと思っている方の気持ちの後押しや原動力になればいいと
iaspectrum.net
iaspectrum.net 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
自分でできるデザイナーズ・サイト、Bootstrapをさらに簡単に最速でUIを構築できる「Jetstrap」は全てのウェブ制作関係者必携サービスとなるか 【増田 @maskin】 | TechWave（テックウェーブ）
「アイディアはあるんだけど、モックすら作れないIT起業家」「“UIだけなら自分で作れる” とやってみたけど、見にくいページにしかならない、どうしよう、、、」。高度なテクニックは不要、でも、やっぱりデザイナーさんに依頼しないといけないシーンが多いこの業界。 しかし、「Twitter Bootstrap」(以下 bootstrap)の登場により、多くの人がデザイン性の高いページデザインを短期間で作れるようになり世界は変わった。bootstrapは、プログラマーやディレクターなどが、最低限のコードの組み合わせでスッキリと解りやすいユーザーインターフェイス(UI)を構築できるライブラリ(支援プログラム群)のこと。 Bootstrapの登場で、スタートアップはスピーディにページを作りあげ、プログラマーは必要なページを “とりあえず” 作っておくくらいのことをするのが手軽になった。ただ、bootstr
ヘッダーやナビゲーション等、Webデザインをパーツ別に収集しているギャラリーサイトまとめ - かちびと.net
いくつか知っておいた方が、必要な時に 探しやすいと思ってメモします。Webサイト のデザインをヘッダーやフッターなど、 パーツ別に収集しているギャラリーサイトが いくつかあるのでまとめます。 そんな大量に有るわけではないですけど。パーツのデザインはいつも迷うのでこの手のギャラリーはいくつあっても結構重宝しますよね。 ブブンデザインアーカイブ 国内でおそらく唯一のパーツ別デザインギャラリーです。ナビゲーションやフッターなどで探せて、収集しているサイトも国内メインなので参考になるのでは。 ブブンデザインアーカイブ MephoBox ヘッダーやフッター、ナビゲーションやフォームデザインだけでなく、404やカレンダーなど全てのコンテンツをカテゴリにしてパーツデザインを収集しています。おすすめ。 MephoBox Pattern Tap こちらもナビゲーションやボタン、フォームデザインなどに分けてデ
chrome-life.com - このウェブサイトは販売用です！ - chrome life リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ドラッグアンドドロップで表示を自在に組み替えられるjQueryプラグイン·Gridster.js MOONGIFT
Gridster.jsは自由にレイアウトが組み替えられるUIを提供するjQueryプラグインです。 Pinterestに感化されたのか、ブロックの高さを組み替えつつ表示するUIが流行っています。今回紹介するGridster.jsはそれに似ていますが、横幅も変更可能で、さらに自分でドラッグアンドドロップして並びが変更できるのが特徴になっています。 ドラッグして場所を移動できます。 こんな感じに並んだりもします。 Gridster.jsはjQuery製のプラグインになっています。使う最小のカラム数、行数を指定できます。使える場所としてはiGoogle的なウィジェットを自分で並び替えて表示する類のUIであったり、写真を表示したりするのに良いかも知れません。 Gridster.jsはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTは
クックパッド流UIの作り方 - takeshi nagayama's blog
なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッド流UIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
神アプリの予感？ 手持ちのスマホが左手用補助デバイスになるアプリが密かな人気【やじうまWatch】
【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選
マイクロソフト、OfficeのUIフレームワークを「Office UI Fabric」としてオープンソースで公開
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Android Niceties
