MisskeyのUI設計 | gihyo.jp
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説しています。 今回はMisskeyのWebクライアント（Misskey Web）におけるUIデザインの工夫や各種コンポーネントについて紹介します。 なお、「デザイン」という語は設計という意味と、見た目・意匠という意味がありますが、この記事ではどちらも含みます。 Misskey Webの設計思想 Misskey Webの設計思想として、「デスクトップでもモバイルデバイスでも同じように使えるようにする」というのがあります。 “同じように使える”とは、機能や使い勝手といった面でもそうなのですが、コンポーネント（UIを構成する個々のパーツ）レベルの話も含んでいます。 現在はこのような設計思想で開発していますが、Misskey初期の頃は、デスクトップ版Webクライアントとモバイルデバイス
UIの名称まとめ 〜よく見かけるけどあれなんていう名前？〜｜Nviveto
コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ
［CEDEC 2022］ボードゲームのデジタル化は，UIが面白さを左右する。オインクゲームズのセッションをレポート
［CEDEC 2022］ボードゲームのデジタル化は，UIが面白さを左右する。オインクゲームズのセッションをレポート 編集部：御月亜希 ゲーム開発者カンファレンス「CEDEC 2022」の初日となる2022年8月23日，オインクゲームズのデジタル部UIデザイナー・プログラマーである新藤愛大氏が，「ボードゲームのデジタル化への挑戦 - レッツプレイ！オインクゲームズの UI・ゲームデザイン」と題した講演を行った。 この講演では，さまざまアナログボードゲームをリリースしてきたオインクゲームズが，「レッツプレイ！オインクゲームズ」（PC / Nintendo Switch）でデジタル化するにあたってぶつかった壁や，その解決策が語られた。 「レッツプレイ！オインクゲームズ」公式サイト 登壇した新藤愛大氏。「レッツプレイ！オインクゲームズ」ではUIデザイン，モデリング，UIアニメーション，演出を担当
チャットソフトを複数使ってると『送らず改行してくれ！』の賭けが発生する→手間かけて防止・統一を望む声
ちゅん🐤 @KotorinChunChun 頑張って調査したけど未だ改善されずｗｗｗ 20200518 あらゆるチャットのEnterの挙動を徹底調査。～改行キーと送信キーは統一すべきである～ excel-chunchun.com/entry/20200518… twitter.com/nrslib/status/… 2022-05-29 16:44:54 リンク えくせるちゅんちゅん あらゆるチャットのEnterの挙動を徹底調査。～改行キーと送信キーは統一すべきである～ - えくせるちゅんちゅん チャットで改行しようと思ったのに送信されてしまった！！！ そんな経験ありませんか？ SNS・チャットソフトによって送信キーと改行キーがバラバラすぎなのが原因です。 いつも使っているソフトなのに、ショートカットキーがパッと出てきません。 数秒迷った挙げ句、 勇気を出してポチッと押したら送信されてし
Twitter、フォローボタンの色を変更も「見づらい」と不評 白いボタンの意味が真逆に
米Twitterは8月11日（現地時間）、フォローボタンの色を変更するなど、ブラウザ版、スマートフォンアプリ版両方のUIを変更した。しかしユーザーからは「見づらい」「分かりにくい」と否定的な声が多く、「TwitterのUI」といったワードが同日朝から日本のトレンドに入っている。ボタンの色を変えたのは「（UIの）コントラストを上げることで、投稿される写真や映像に注目を集めるため」（同社）という。 Twitterではこれまで、フォローしていないアカウントのボタンは白、フォロー済みのアカウントのボタンは青で表示していた。新しいUIでは、フォローしていない場合は黒、フォロー済みの場合は白く表示するよう変更。白いボタンの指す意味を逆にした。変更を受けたユーザーからは「間違えてフォロー外しそう」「（黒のときは）ダークモードにすると見づらい」といった声が出ている。 Twitterは色の変更について「確か
Vue.js UI UX DX Library - Inkline
Configuration file, design tokens, toast notifications and more!Your next Vue.js project deserves the best developer experienceInkline is the intuitive UI Components library for building high-quality, developer-friendly, configurable, and accessible Vue.js Design Systems. More than just a UI LibraryWhile many UI libraries focus solely on UI and UX, they often overlook the most crucial element - th
ユーザインタフェース設計
Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース（Graphical User Interface; GUI）アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は（とくに国内では）必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー
共創するためのデザイン批評
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
Kotlin用デスクトップUIライブラリ「Compose for Desktop」が登場、Win/Mac/Linuxアプリ開発対応。JetBrains
オープンソースのプログラミング言語「Kotlin」の開発元であるJetBrainsは、Kotlinでデスクトップアプリケーションの開発を容易にするUIライブラリ「Jetpack Compose for Desktop」（以下、Compose for Desktop）を発表しました。 We just published Compose for Desktop Milestone 1! It provides a declarative & reactive way to create desktop user interfaces with pure Kotlin, and you can even share your UI with @AndroidDev! Read about it, try it & go build some desktop UIs!https://t.co/Jp
pixivのUIを迅速にアップデートする UIUXチームのフロントエンドモダン化の歴史 - pixiv inside
こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。 UIUXチームとは UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。 UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。 イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました @s
接触確認アプリ「まもりあいJapan」において、UXとUIのデザイナーたちが大切にしたいと思っていたこと｜shosira
皆様、はじめまして。Goodpatch Anywhereの大橋と申します。Goodpatch Anywhereは2018年にスタートした、日本各地にいる専門家がフルリモートで仕事をしているデザインチームです（Goodpatchというデザイン会社の事業部門のひとつです）。 私たちGoodpatch Anywhereは、Code for Japanが中心となって有志チームが開発を進めてきた、接触確認アプリ「まもりあいJapan」の設計において、ユーザーとなる皆さんが触れることになるアプリの画面デザイン、機能、通知の内容、お伝えすべき情報などについて、エンジニア、公衆衛生や感染症の専門家と連携し、関係者にお話を伺いながらデザインやユーザーテストを重ねてきました。 既報のとおり、日本では今後、接触確認アプリを公的に導入することが決定されたため、本チームではサンプルコードや仕様の公開を通じて、接触確
“触り心地”がいいUIとはなにか PWA時代のWebエンジニア／UIデザイナーが思う、直感的な道具に必要な4つの性質
関心が高まりつつあるPWA（Progressive Web Apps）についての技術・情報交換の場である「PWA Night」。Vol.14の今回はUI/UXがテーマです。「さわり心地のよいウェブを考える」というテーマで登壇したWebエンジニアの竹本雄貴氏は、直接操作を感じさせる、触り心地のよいUIとは何かについて共有しました。 Webエンジニア／UIデザイナーとしてPWAに感じる可能性 竹本雄貴氏（以下、竹本）：今回オンライン開催ということで、PWA Night 14回目のUI/UX回で話させてもらいます、竹本と申します。今YouTube Liveの画面開いてますけど、100名ぐらいの方がオンラインになっていて、けっこう緊張しているし、今までやったことのない取り組みなので、かなり不安のなかやっています。 前回の「PWA Night CONFERENCE」のLT会では「手触りのよいウェブを
『グランブルーファンタジー』の世界観を支えるUIデザイン＜前編＞ | Cygames Magazine（サイマガ）
サービス開始からの6年間で変わったことと変わらないこと 『グランブルーファンタジー』の世界観を支えるUIデザイン＜前編＞ サイゲームスを代表するタイトルである『グランブルーファンタジー（以下、グラブル）』。ユーザーのみなさまに支えられ、先日、サービス開始から6周年を迎えることができました。 その『グラブル』の世界観を支えている重要な要素の１つが、「統一感のあるUIデザイン」です。6年という月日が経ち、少しずつ変化しながらも“ぶれることのない『グラブル』らしさ”を提供し続ける……その裏側にはUIデザイナーたちのクオリティーに対する徹底したこだわりがあります。今回は「サイ技（わざ）」企画として、『グラブル』のUIデザイナー陣に、『グラブル』のUIへのこだわり、そしてUIのこれまでとこれからを聞きました。 インタラクションデザイナ―チーム UIデザイナーノゾミ ソーシャルゲームのデザイナーを経て
メルカリは「軽トラ」の検索結果をどう改善したか？ 商品検索におけるUI/UXと、新たな挑戦
2019年9月25日、クックパッド株式会社にて「Cookpad Product Kitchen #4」が開催されました。今回のテーマは「ユーザー体験を支える検索・マッチング技術」。あらゆるサービスに採用されている「検索」機能。そんな検索機能における技術と工夫について、様々なIT企業のエンジニアたちが一堂に会し、自らの知見を語ります。プレゼンテーション「メルカリ商品検索のUI/UXと新たな挑戦 」に登壇したのは、株式会社メルカリ 元Director of Search/AI/Data Scienceの森山大朗氏。講演資料はこちら メルカリ商品検索のUI/UXと新たな挑戦 森山大朗 氏（以下、森山）：みなさんこんばんは。メルカリで検索の責任者をやっています森山大朗です。今日は、光栄にもログミーTechの記事を見ていただいたことがきっかけでこの場を作っていただいたということなので、がんばって話そ
リニューアル第一弾となる新しいWeb UIのおしらせ
こんにちは、技術書典のWeb担当 @vvakame です。 そしてこの記事の編集を担当した技術書典代表 @mhidaka です。 一年の大半という長きに渡り、燻っていましたが遂にアーキテクチャを刷新した新しいWeb UIをリリースしました！ 大規模変更となるためOpt-Inでの公開です。一週間くらい様子を見て問題がなさそうであれば移行Stepを進め、Opt-Outに切り替えます。 ここまで大きな変化が技術書典WebのUIに起こったことはありません。不安に感じるかもしれませんが、 ユーザーにとっては変化がないことのほうが改善が行われないリスクだと判断しました。今後もやきもきさせてしまうことがあるかもしれませんが、暖かく見守ってください。 今回は何もかもを作り直しており、さらなる前進のための基盤を整えました。 アーキテクチャの刷新は大変に大きな変更なのでUIの構造自体は旧来のものを維持していま
【2019年版】UIとUXデザイントレンド - baby-degu - Medium
Scenery Illustration by J.HUAこちらの記事は、2018年12月に公開された『 2019 UI and UX Design Trends 』の和訳になります。 はじめに私たちは去年、モバイルUIデザインのトレンドについての予測をまとめました。今年はモバイルだけを対象とせずに、さらに深く掘り下げていきます。 モダンなデザインの一番のトレンドは前後関係のあるつながりの中にあります。そのため、一般化することができません。 この記事を読むことであらゆるツール、技術の進歩、またユーザー向けのプロダクトが実際にどのように機能なのか開発者が理解し、全てが上手くいくように感じるでしょう。 近いうちに、販売だけでなく、生産するものすべてを網羅するユニバーサルデザインの考え方を発展させて行くでしょう。自分で何か物事を行うためには、より良いデザインの選択が必要です。 国家としての印象さ
新規登録 UI まとめてみた｜あき
シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録まわりで離脱の少ないデザインを勉強したかったので、いくつかアプリをスクショしました。自分用で作成しましたが、誰かの参考になればと思います。 また、まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです〜。 パターン一覧 1. 登録必須型 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別の参考事例 1. 不要な遷移を削る 2. 不要な操作を削る 3. わかりやすく伝える 4. 魅力的に伝える おわりに ・最適な新規登録のタイミング ・注意すべきデザインの視点 ・スクショの保管場所1. 登録必須型ユーザー登録なしではアプリが利用できないパターン。 傾向 母数としては一番多い形式。プロフィールが大切なフィットネス系では、利用前にかなりの入力を求
スマートフォンのディスプレイ巨大化に伴う、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まで
ユーザーの目線はどう動く？ グッドパッチのデザイナーが紐解く「日本語アプリケーションのUI」 | キャリアハック（CAREER HACK）
※ 2018年3月に開催された「UI Crunch #12「伝える」を加速させる。書く、読むUI」のレポート記事としてお届けします。 文化を考慮した日本語アプリケーションのUI 「言語は、文化のインターフェイスのひとつだと考えています。UIを設計するためには文化の理解が必要だと感じ、一度アプリケーションの世界から離れ、文化の研究を始めることにしました」 こう語ってくれたのが、グッドパッチ社で働くアプリケーションデザイナー／インターフェイスデベロッパーの丸怜里さん。彼が担当することになったアプリは、中川政七商店さんの「さんちの手帖」。いきなり開発に着手したわけではなく、文化の研究・調査からスタートしたという。 グッドパッチ アプリケーションデザイナー／インターフェイスデベロッパー 丸 怜里さん 慣れ親しんだ書字方向を意識する はじめに紹介されたのが、言語とインターフェイスの関係について。言語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はじめてのUIデザイン 改訂版
