UI Interactions
copy.ui-arrow-02 { position: relative; width: 30px; height: 30px; border: none; background-color: transparent; transition: transform 0.3s ease; } .ui-arrow-02:before, .ui-arrow-02:after { content: ''; background-color: #2980b9; position: absolute; top: 50%; width: 1px; height: calc(70% - 1px); margin-top: -35%; } .ui-arrow-02:before { left: 50%; margin-left: -25%; transform: rotate(-45deg); } .ui-
59分割ヤバイ｜深津 貴之 (fladdict)
こばかなさんと、グリッド分割の話をしてるときに出たネタなのだけど。 グリッドの59分割ヤバイよねぇというお話。 画面を59分割すると、様々な比率で端数がでない。汎用的なグリッド分割できて素敵。個人的にはnoteで図表を描く時は、 ・幅620px ・天地左右マージン15px ・グリッド59分割 10pxを意識すると、色々と便利だと思う。 これ全部、ピクセルパーフェクトに分割できる。 1分割 = 590px grid 2分割 = 290px grid 3分割 = 190px grid 4分割 = 140px grid 5分割 = 110px grid 6分割 = 90px grid 8分割 = 65px grid （厳密には10の倍数でないので△） 10分割 = 50px grid 12分割 = 40px grid 15分割 = 30px grid 20分割 = 20px grid 24分割
Sketch はもういらない？ デザインツール Figma の紹介
Figma：https://www.figma.com/ （2019 年 12 月 1 日 ： 古くなって意味消失してた部分を編集しました） Figma とは デザインツール、Figma をご存知でしょうか。 一言で表すならば、コラボレーション機能満載の Sketch です。 本記事を公開した 2017 年時点では、あまり知名度が高くなかったものの、2019 年時点ではだいぶユーザーが増えたように感じます。Google Trends で、Sketch と XD、そして Figma の今と昔を比較してみます。 2017 年 2019 年 （純粋には比較できませんが）2 年前は Sketch と Figma に約 25 倍も開きがありました。ですが現時点では約 10 倍くらいでしょうか。日本ではなんと逆転しています。（タイトルの通り！） そこでもう少し Figma に頑張ってもらうべく、本記事
Vueでちゃんと作っていくにはElementUIよりBulmaの方が良くないか - Qiita
Vueのアドベントカレンダーをウォッチしていてて、Nuxt.jsであるアプリを作っている途中です。 色々な記事でElementUIが取り上げられているので、私も使ってみましたが正直微妙になってきたので止めることにしました。 単体でレスポンシブのサイトは簡単に作れない。 ElementUIはUIパーツのライブラリです。 レイアウトも部品として影響していますが、提供している部品の数はさほど多くありません。 そして、モバイル向けに配慮した機能は全く提供されません。 そのため、レスポンシブ対応するためには、一からやるか他のCSSフレームワークを組み合わせる必要が出てくると思います。 タイポグラフィ、レイアウトなどが簡単にできるわけではない ElementUIはあくまでもUIライブラリです。 私はコレを最初に見た時、Bootstrapみたいだから簡単にきれいなレイアウトが整うんだろうなと思っていまし
無料で動きのついたデザインモックアップを作りiOS・Androidで動作確認ができる「Fluid UI」
「Fluid UI」は既存のパーツを配置するだけでWebサイトやアプリのモックアップをサクサク作成でき、簡単な画面遷移や複数人での編集も行えるサービスです。実際に使ってどんなことができるのか試してみました。 FluidUI.com - Create Web and Mobile Prototypes in Minutes https://www.fluidui.com/ Fluid UIのページへ行き、右上の「CREATE ACCOUNT」をクリックします。 メールアドレスとパスワードのほかに、最初のプロジェクトの名前とどんな端末の画面で表示させるかを設定します。 今回は「first project」という名前の「iPhone 6」向けのプロジェクトを作成することにしました。入力したら「CREATE ACCOUNT」をクリックします。 画面上の「Add page」ボタンで新しいページを追加
もう縦スクロールって疲れません？進化する私たちの指と視野｜ワカモノのトリセツ
こんにちは！現役女子大生二人組による若者の今を伝えるメディア「ワカモノのトリセツ」です。 春休み満喫中の私たちは、自然と携帯を見る時間が増えました。 そんな時に、 「あれ？最近縦スクロールするのがもう嫌になってきたぞ？！」と思うようになったことに気づいたのをきっかけに、今回は縦スクロールについて私たちの最近の価値観をお話しします。 ■ 縦スクロールで満足できていた時代縦スクロールコンテンツで代表的なものはこちら。 ・Instagramのフィード投稿 ・コスメやファッション、旅行系のキュレーションメディア ・Twitterのタイムライン ・クックパッド ・Safari、Chromeなどのウェブブラウザたち 昨年の夏頃までは、まだ縦スクロールへのストレスが薄かった気がします。20件、30件とインスタのフィード投稿を見るのが全く辛いと感じませんでした。コスメやファッション、旅行系のキュレーション
ユーザーインタフェースにおける視覚効果 - Frasco
われわれの目はとても奇妙な器官であり、ときどきわれわれ自身に嘘をつきます。ヒトの視知覚の特性を知っていれば、より親しみやすく、よりすっきりとしたデザインの作成が可能となるでしょう。視覚トリックを活用し、読みやすくてバランスのとれたフォントを制作するタイプフェイスデザイナーだけでなく、ユーザーマシンを作るインターフェースデザイナーにとっても役に立つ知識です。 １．整然としたビジュアルサイズ どちらが大きいでしょうか？：400ピクセル四方の正方形でしょうか？それとも400ピクセル四方の円でしょうか？幾何学的に言えば、どちらも幅と高さはまったく同じです。では、下図をご覧ください。われわれの目は、正方形の方が円より重い（大きい）と瞬時に捉えてしまうのです。余談ですが、ビジュアル効果を言い表す際には、重さに関係した単語の方が適切です。 この図形が正しく描かれていると信じられない方たちのために、ガイド
GoodpatchのUIデザイナーがおすすめ UIデザインを理解するためのブックリスト【2021増補版】｜Goodpatch Blog グッドパッチブログ
今回は、GoodpatchのUIデザイナーにヒアリングし、UIデザインを理解するためのおすすめ本をまとめました。 次のような人に特におすすめです。 UIデザイナーになったばかりの人 もっとUIデザインについて勉強したい人 サービス、アプリ開発に携わるエンジニア・ディレクターの人 目的別に6つのカテゴリに分けてご紹介します。あなたの関心に沿ったトピックから、 気になる本を見つけていただけると嬉しいです。 1. UIデザインを基礎から理解する ユーザーインターフェース（UI）とは何なのか、どんなデザイン要素があるのか、UIが機能する環境とは？、どうやって作ってリリースするのか…UIデザインを始めるために、まずは基礎知識を網羅しましょう。 ■ はじめてのUIデザイン 改訂版 この本は、著者の1人である吉竹遼さんが「UIデザインを体系的に学ぶための本が少ない」という課題感から企画されました。そのた
実は使いにくいかも？スマートフォンで要注意な定番UI・６選 | UI改善ブログ by f-tra
PC向けウェブサイトではごくあたりまえに使われている便利なユーザーインタフェースが、スマートフォンで閲覧時に思わぬストレスを生んでいる可能性があります。 本日はEFOにも関係のありそうな６つの定番UIを、モバイルでのユーザビリティの観点から検証していきます。 要注意UIその1：モーダルウィンドウ 要注意UIその2：折りたたみ表示 要注意UIその3：ページTOPへのスクロール 要注意UIその4：固定表示 要注意UIその5：画面内のスクロール 要注意UIその6：別窓表示 要注意UIその1：モーダルウィンドウ モーダルウィンドウとは、画面上にを浮かび上がるように表示する子ウィンドウのことで、一般には画面がグレー（またはホワイト）アウトし、その上にコンテンツが重ねあわさるようなユーザーインターフェース（オーバーレイ表示といいます）となっています。 一度開いたダイアログボックスをユーザーが閉じるまで
最近のWebのUIデザインで採用されているナビゲーションのパターン16種類のまとめ
最近のWebのUIデザインで採用されているさまざまなナビゲーションの名称とその役割、使う時のポイントを「Web UI Design Patterns 2016」から紹介します。 検索のナビゲーションは、ユーザーが特定の何かを探していて、それがどこにあるか分からない時に直接その何かにアクセスすることができます。 最も基本的なパターンはメインのナビゲーションに検索のオプションとして含めることで、右上に配置するのが人気です。虫眼鏡アイコンを添えたり、ドロップダウンで拡張した検索機能にしてもよいでしょう。 Notifications: 通知 ユーザーが何らかの操作をした時、もしくは新しい内容を伝える時に知らせることができます。 通知が普及したのは、ソーシャルメディアサイトにおけるプッシュコンテンツの影響が大きく、他のサイトでも通知を利用して新しいコンテンツやプロダクトやコメントを知らせるようになり
iPhoneでのAPPデザイン設計に最適なワイヤーフレーム集「Basement iOS」
アプリをデザインするためには、まず全体の構成設計が必須。しかしすべてのページやコンテンツ分を一から作り上げるのはなかなか大変だと思います。今回はそんなときに活躍してくれる、iPhoneでのAPPデザイン設計に最適なワイヤーフレーム集「Basement iOS」を紹介したいと思います。 さまざまな種類のページ設計ワイヤーフレームがまとめられており、作りたいアプリのジャンル別に使い分けることができます。 詳しくは以下 全部で110種の画面が用意されており、Social、Ecommerce、Base elements、Markups & Gesturesといったテーマの中にさらにカテゴリ分けがされ、ほしいデザインイメージに合わせて組み合わせていけば、設計を容易に行うことができます。シンプルで見やすい、そのままデザインを当てはめていけばOKなクオリティが保たれているのも魅力。今まで手描きや、一から
Inspired: 顧客の心を捉える製品の創り方を読んだ - ninjinkun's diary
プロダクトマネージャーの職能+ユーザー体験設計の本です（と解釈しています）。 最近Rebuild: 98: Superhumans Wanted (Naoya Ito)やエンジニアからみた良いプロダクトマネージャとは？ - サンフランシスコではたらくソフトウェアエンジニア - Higepon’s blogで話題のプロダクトマネージャーに興味があって、関連しそうな本を読みたいと言っていたら、知人がこの本を紹介してくれました。 Netscapeなどでプログラマーをしていたバックグラウンドを持ち、eBayなど複数の会社でプロダクトマネージャをしていた経験を持つ著者がプロダクトマネージャーの職能について語る本で、以下のような内用が含まれています。 プロダクトマネージャーとは何か どうやって他の職種と連携して働くか どうやって製品を見つけ出すか どうやってユーザー体験を作っていくか 自分にとっては、
【Sketch3入門】最近注目されているsketch3を使ってみました。 | DevelopersIO
皆様、こんばんは清田です。 最近、勉強会等で耳にするようになってきたsketch3をプロジェクト内使用してみる機会があったのでご紹介します。 iOSエンジニア・UI/UXデザイナー勉強会のセッションでも紹介されたり、いろいろな企業でも採用され始めているとのことです。 実際 sketch3 の存在を知ってはいたのですが、実際に案件内で使用してみて結構いい感じでした！ sketch3とは sketch3公式サイト sketch3はオランダののアムステルダムのBohemian Coding社が開発しているとのこと 現在はMac専用のツールみたいです、Window版をリリースしなさそうな予感。。。 価格は8月29日現在で¥7,800円で、App Storeから購入ができます。 たまに半額セールをしている時があるみたいなので、そのタイミングが狙いめですね。 また無料で14日間使えるのフリートライアル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイナーはダウンロードしておこう！iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース
v-ons-radio - Onsen UI
高齢者UIプロトタイプ検証の学び
ディレクターにもうれしい。Adobe XD用の日本語ワイヤーフレームUIキット「Wires jp」提供開始！ – Adobe Creative Station
ログイン - はてな
Amazing workflow of UI design
Sketchで変わるワークフロー
