マガジンのカバー画像

UIまとめ

107
UIに絡んだ記事をまとめてます。
運営しているクリエイター

#UXデザイン

行政サービスにおける“デザインシステム”とは何か

行政サービスにおける“デザインシステム”とは何か

Goodpatchの行政デジタル化リサーチチームです。今週から毎週月曜日にこちらのマガジンにリサーチ内容を発信していきます。

よろしければフォローをお願いします!

今週から6月の初めにかけては、以下の2つのテーマを隔週で扱っていきます。

1.『8か国のデザインシステムから見る行政デジタルサービスの指針』
ー 4月26日,5月10日,24日,6月7日に公開予定(4本立て)

2.『世界の行政に

もっとみる
まずは紙とペンでUIをデザインしよう、みんなで。

まずは紙とペンでUIをデザインしよう、みんなで。

アンカーデザインの木浦です。

ここ数年、弊社を含めUIデザインの現場ではFigmaやAdobe XDなどのツールが当たり前のように使われるようになりました。

パワフルだけど使いこなすのが難しいAdobe PhotoshopやIllustratorと比べて、ある程度直感的に使用できるFigmaやAdobe XDはデザインを学び始めた方にも積極的に利用されているように見受けられます。これらのデザイ

もっとみる
UIデザイン時にやってしまいがちな18の誤ち

UIデザイン時にやってしまいがちな18の誤ち

WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。

私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。

本記事で使用する画像はすべてVictor氏のツイートから拝借して

もっとみる
UXデザイナーとして入社して、8ヶ月間でやったことを振り返ってみる

UXデザイナーとして入社して、8ヶ月間でやったことを振り返ってみる

こんにちは、@versionfive です。
SmartHRのプロダクトデザイングループにUXデザイナーとして転職して、10ヶ月ほど経ちました。

昨年年末で入社8ヶ月くらいだったのですが(すでに2ヶ月以上経過…)、自分がどんな仕事してきたか振り返ったほうがいいかなー、とぼんやり考えるようになっていました。

UXデザイナーとして入社後に設定したテーマ(やること)は、常に自分の中にありますが、「S

もっとみる
現実とWEBを「融かす」新しいスキューモーフィズム

現実とWEBを「融かす」新しいスキューモーフィズム

今回のお話同僚に教えてもらった記事についてみていきます。
皆さんは、スキューモーフィズムというデザインをみたことがありますでしょうか。

もしかしたらこんなデザインを昔みたことがあるかもしれません。

これはiOS3あたりかと思いますが、昔のiPhoneのデザインです。
今の若い人は一切みたことがないかもしれませんが、こんなにも物理ボタンのようなデザインをしていたのです。(今見るとダサいですが、当

もっとみる
Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。

ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。(スマートキャンプでもまだまだ模索中......)

スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet(ビスケット)」という新サービスを発表をしました。

まだ開発中のサービスですが、このBiscuet(ビスケット)

もっとみる
iOS もシャドウ使っていいの?  - iOS の階層表現をまとめてみた #Zaim

iOS もシャドウ使っていいの?  - iOS の階層表現をまとめてみた #Zaim

あれ、iOS ってフラットデザインじゃなかった?
でも、最近シャドウ表現増えてない?

最近、iOS でもボトムシートや Floating Action button など 階層(Z 軸)が異なる UI が少しづつ多くなってきた気がします。App Store の Today もカードにシャドウついてますしね。

そこで、整理をかねて最近のデザイン傾向をコンポーネント別にまとめてみました。

***

もっとみる
「モード」を減らす工夫、あえて「モード」を加える工夫

「モード」を減らす工夫、あえて「モード」を加える工夫

紙飛行機画面を見つめる日々昔なつかしのガラケー時代のメール機能を思い出してみてください。
ぼくが当時つかっていたガラケーのメール機能は、受信ボックス、送信済みボックス、メール新規作成などのメニューリストが最初に表示されていました。メニューから「メール新規作成」を選び、内容を入力して送信ボタンを押すと「メール送信中…」というメッセージとともに紙飛行機が飛んでいくアニメーションつきの画面が表示されまし

もっとみる
課金 UI まとめてみた

課金 UI まとめてみた

売上を伸ばしたい。
課金率を伸ばしたい。
でも、難しい!

コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。

Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。

まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見い

もっとみる
1年間ひたすらUI設計に関わって、情報に向き合った話と2018年振り返り

1年間ひたすらUI設計に関わって、情報に向き合った話と2018年振り返り

自分の2018年は振り返ると、「ひたすら現場で汗をかいた」1年だったと思います。もともと現在の会社に移ってきたのも「自分自身の知識、スキルをつねにアップデートし続けられる圧倒的に成長できる課題がある場所」を求めてのことだったので、そういう意味でこの1年は自分にとって「現場で体感できる“生きた”知見を多く吸収できた」年になりました。

個人的にデザイン界隈の軽い振り返り2018デザイン業界にも大きな

もっとみる
実践UI Flows - UI制作のはじまり

実践UI Flows - UI制作のはじまり

UI Flowsは、37signalsというアメリカのウェブアプリケーション開発会社が生み出した、画面遷移図の上位互換的なUI制作ノウハウです。

チームで行う最初のUI制作フローUXデザインやエンジニアリングに比べ、UIデザインをチーム全体で進めるノウハウは意外なほど浸透していません。

これは、遷移図やワイヤーフレーム作りをディレクターと意思決定者間で行い、その後のUI制作はデザイナー個人に任

もっとみる
Fluid Interfaces実践 - なめらかなUIデザインを実現する

Fluid Interfaces実践 - なめらかなUIデザインを実現する

こんにちは。プロダクトデザイナーのミカサ トシキ(@acke_red)です。レシピ動画アプリ「クラシル」のUI/UXのデザイン領域を担当しています。

この記事では、WWDC2018にてAppleが提唱し、昨今のUIデザインの新たな潮流である “Fluid Interfaces” をいかに取り入れていけば良いか、クラシルでの実践事例をあげつつ、考えていきたいと思います。

※この記事は dely

もっとみる
アンケートフォームを作るときに気をつけること。

アンケートフォームを作るときに気をつけること。

仕事でアンケートフォームのデザインを作ることになりました。たくさん勉強したので、デザイナーとしてアンケートフォームを作るときに気をつけることをまとめてみました。

1、入力フォームの構造・本当に必要な項目を洗い出す
本当に必要な項目だけをフォームに設けます。なぜならフォームの項目が増えるたびに、コンバージョン率は下がるからです。ユーザーに対して要求する情報がなぜ必要なのか、どのように利用するのか常

もっとみる
検索 UI まとめてみた

検索 UI まとめてみた

検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。

パターン一覧
1. フリーワード型
2. サジェスト型
3. グループ型
4. あとからフィルター型
5. 条件指定型
6. レコメンド型

フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。

良いところ
シンプル。入力と同時に検索結果を表示できるので、最短で検索対象

もっとみる