UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
「この小さな札は何？」 サイゼリヤの注文方法が激変！ 「メニュー番号を手書き」からどう進化したのか
サイゼリヤが新しい注文方法を導入している。これまでは、各テーブルに置いてある注文用紙に利用客が番号を記入して店員に渡すスタイルだったが、どのように変わったのだろうか。筆者が都内の店舗で体験した内容を交えながら解説する。 テーブルで見つけた小さな「札」 入店後、店員に案内されてテーブルに移動すると、長方形の小さな札を見つけた。札には「いらっしゃいませ」「テーブル番号24」「注文用QR」といった情報が記載されている。見た目は、小売業界で導入が進んでいる電子棚札（画面が電子ペーパーになっており、価格などをリアルタイムに変更可能）に似ている。「この小さな札は何だろう？」というのが最初に見たときの感想だ。
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
松屋の券売機「使いにくすぎる」の声に運営元「見直しを実施」 牛丼愛好家・森永卓郎氏は「私は吉野家の注文の仕方が好き」（マネーポストWEB） - Yahoo!ニュース
牛丼チェーン「松屋」のタッチパネル式券売機が注目を集めている。ツイッター上での「UI（ユーザーインタフェース）がどんどん悪化している」という投稿が注目を集め、SNSや掲示板サイトなどで「わかりにくい」「使いにくい」といった共感の声が数多く寄せられた。幅広い年代に馴染み深い“国民食”となっている牛丼だが、その注文方法の捉え方は様々あるようだ。 【写真】はぁ～… ここにたどり着くまでに何度、タッチパネルを操作したことか 記者が改めてタッチパネル式券売機のある松屋の店頭で注文操作をしていくと、たしかに画面タッチする操作の数は多いようにも感じられる。 まずは店内で食べるかお弁当（テイクアウト）かを選び、牛めし、カレー、定食などのカテゴリーを選択。小盛、並盛、大盛などのサイズを選び、生野菜や生玉子をつけるなら探して選択して「カートに追加」して、「注文する」を押し、dポイントカードを持っているかの確認
マリオのUIがフラットデザインになった日を知っているか 〜 【視伝研】UIデザインの歴史を紐解く｜Yamashita Angelica
※ おことわり ※ この記事内で取り扱っているゲーム作品について、私は開発上の関わりは一切ありません。あくまでいち個人・いちファンとしての考察であることをご承知おきください。 今回の視伝研テーマは【UIデザインの歴史を紐解く】です。 年表形式でUIデザインの歴史を作りながらメンバーと意見を交換しました。PCやスマートフォンのOSのUIはもちろん、乗り物の操縦桿やSNSのデザインなど、さまざまな観点で資料を集めてみました。 そこで、元ゲーム屋の性として、個人的に楽しくなってしまうのはやっぱりゲームUIの歴史なのですが… なんか、ゲームのUIってこんなイメージありませんか。 ゲームUIデザイナーを目指す初心者が作りがちなやつ （一応弁明するとこれは1〜2分くらいで作った雑UIです）もちろんこういうのを作れることは大事なんだけど、「ゲームでよくあるやつ」以外のデザインの引き出しがないままだといず
「カブトクワガタ」は日本のゲームアクセシビリティの革命である
3行で 「カブトクワガタ」に搭載されている読み上げ機能によって、画面を見ることができない全盲のプレイヤーがゲームを楽しめるようになっています。 視覚に障害を持つプレイヤーだけでなく、未就学児や、文字を読むことに困難を抱える人など、色々な属性の人がプレイできるようになっていると思います。 システム面・技術面の両方において、「カブトクワガタ」は日本のゲームアクセシビリティに革命をもたらすポテンシャルがあり、その事実が、開発者を含めた多くの人に知られることを臨みます。 ※最終更新: 2023/07/27 カブトクワガタってなんやねん カブトクワガタ は、Nintendo Switchのゲームです。クワガタやカブトムシを育てて戦うRPGです。2023年3月15日にリリースされました。 なにがすごいのか ほぼ全ての文字を読み上げる このゲームは、画面に表示されるほぼ全ての文字を読み上げてくれます。本
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
40～50代で「スマホ左手持ち」が多いワケ 若者は右手持ちが主流
あなたはスマートフォンを操作する際、どちらの手で持ち、どの指で操作するだろうか？ おそらく誰しも基本の「型」があるはずだ。「みんな自分とだいたい同じでは？」と考えている人が多いかもしれないが、実はかなり異なっている。コンテンツ提供サイドとしては操作感への影響を意識しておく必要がある。 スマホの操作スタイルという、これまであまり気にしたことがなかった盲点ともいえる調査リポートを、調査会社のインテージが2023年1月27日に公開した。調査対象は日本を含む11カ国（日本、中国、韓国、インド、インドネシア、フィリピン、タイ、ベトナム、シンガポール、英国、米国）。サンプルサイズは各国500人だ。 ▼関連リンク（クリックで別サイトへ） 日本人のスマホの持ち方は独特？－国際比較調査でみるスマホ操作の国別傾向－ 調査の趣旨は、タイトルの通り諸外国との比較で違いを浮き彫りにすることである。だがそれ以前に、「
UIから「白」が消える日｜ritar
これは designing plus nine Advent Calendar 19日目の記事です。 こんにちは。ritarと申します。 今年の10月頃、YouTubeに大きいデザイン変更がありました。 アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは「アンビエントモード」という新機能です。 アンビエントモードこのモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。 これを見たとき自分は度肝を抜かれました。なんたってUIの領域にコンテンツの色が侵食しているのです。 これを踏まえて、最近UIと色について考えたことを、UIデザインの歴史を振り返りながら記していきます。先に要点を言うと、UIはどんどん「無色透明」になっていくと考えます。これは「技術が生活に浸透することによってUIは存在感を減らし
日本のウェブデザインの特異な事例
sabrinas.spaceより。 8週間もかからなかったはずのプロジェクト 日本のウェブデザインはどう違うのか? 2013年のRandomwireのブログ投稿で、著者(David)は、日本のデザインの興味深い相違点を強調しました。日本人はミニマリストのライフスタイルで海外に知られていますが、ウェブサイトは奇妙なほどマキシマリストです。ページには様々な明るい色(3色デザイン原則を破っている)、小さな画像、そして多くのテキストが使われています。2022年11月に撮影されたこれらのスクリーンショットで、自分の目で確かめて下さい。 ブログ投稿には、文化的専門家、デザイナー仲間、そして不満を抱く市民によって支持されている、考えられる理由がいくつか挙げられていました。 この理論が今でも正しいのか、また、もっと定量的なアプローチが可能なのか気になったのでやってみました。 私が見つけたもの 各国の最も人
自動車のタッチパネル操作は物理ボタンの4倍時間がかかる
By Glenn Lindberg/Vi Bilägare 近年ではスマートフォンだけでなく冷蔵庫や扇風機など多くの製品にタッチパネルが搭載されており、物理ボタンをポチポチ操作する機会が徐々に減少しています。自動車でも同様に大型タッチパネルを採用する車種やモデルが増加しており、エアコンや音楽再生などをタッチパネルで操作できるようになっています。しかし、自動車メディアVi Bilägareの調査では「タッチパネルは物理ボタンよりも操作に時間がかかる」という事実が明らかになりました。 Physical buttons outperform touchscreens in new cars, test finds | Vi Bilägare https://www.vibilagare.se/nyheter/physical-buttons-outperform-touchscreens-new
異形の片手用キーパッド「Azeron Cyborg」。慣れは必要だが手に馴染む形に変えられるカスタマイズ性の高さは魅力だ
異形の片手用キーパッドは，慣れが必要だがカスタマイズ性の高さは魅力 Azeron Cyborg Text by 小西利明 PCゲーマー向けの入力デバイスで，地味ではあるが根強い人気を誇るのが「片手用キーパッド」（※片手キーボードとも）という製品だ。キーボードやゲームパッドの機能をコンパクトにまとめて片手で操作できるようにした機器で，左手で使うように設計されたものが多い。単にキーボードの一部キーをまとめただけの安物もあるが，人気があるのは，各キーやスティックに任意の機能を割り振れるカスタマイズ重視の製品だ。ゲーマーだけでなく，作業時にキーボードショートカットを多用するデザイナーやイラストレーターからの需要も高い。国内で広く流通している製品としては，Razerの「Razer Tartarus Pro」（以下，Tartarus Pro）が挙げられる。 使ってみるとなかなか便利な片手用キーパッドで
商用利用OKの音素材、600種以上無料公開 バトルの攻撃音も……「Springin’ Sound Stock」
プログラミングアプリ「Springin'」（スプリンギン）などを提供するしくみデザインは6月23日、商用利用OKの無償音楽素材サイト「Springin’ Sound Stock」を公開した。戦闘ゲームの攻撃音や、8bitサウンドの効果音、システム音、乗り物の音など、600点以上をそろえた。 過去のプログラミングコンテスト使用音源など、同社のサウンドデザイナーが手掛けた音源を中心に提供。「つくる楽しさを知り、誰でもクリエイターになってほしいという願い」から公開したという。 誰でも無料で使うことができ、スプリンギンでの利用だけでなく、動画制作やイベントなどの商用利用も可能だ。 関連記事 タップやフリックなどのシステム操作音のフリー素材、電通が公開 商用利用も可能 電通は、タップやフリック、文字入力などの操作を想定したオリジナルのシステム操作音をフリー素材として公開した。「SND」と名付けられた
「この悪い子猫ちゃんめ！」まるでVRのように没入感の高い会話シーン - ゲームアプリのUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「この悪い子猫ちゃんめ！」、通称「わるこね」における会話シーンのカメラ演出の事例をご紹介します。 このデザインにより、以下の特徴があるように感じました。 一人称視点のカメラが固定式から移動式に変化することで、新しい表現になっている（新奇性） 該当の画面はこちらです。 最初はよくある会話シーンだと思っていました。 画面中央にキャラクターが表示されて、演技する系の画面デザインですね。 ©2021 xeen Inc. 会話を続けていくとキャラクターがプレイヤーに近づきます。 これにより見ている画面はプレイヤー自身の視点であることが強く意識されます。 ©2021 xeen Inc. 更にキャラクターに手を引かれてカメラが
「私たちは慣れに支配され、使いにくさに気づいていない」 UI研究者・増井俊之氏が語る“使いやすさ”の本質
機能とUIの進化はなぜ比例しない？ UI研究者に聞く、使いやすさの本質とUIのこれから 「私たちは慣れに支配され、使いにくさに気づいていない」 UI研究者・増井俊之氏が語る“使いやすさ”の本質 誰もが気軽に電子機器を持つようになった今、私たちの生活はデジタルの恩恵で確実に便利になっています。しかし、UIは“よりよさ”を求めた結果、期待した評価とは正反対の声が集まること少なくありません。 そこで今回は、慶應義塾大学環境情報学部の教授で、予測型テキスト入力システム「POBox」やiPhoneのフリック日本語入力システムの開発者であるUI研究者の増井俊之氏に、UIの本質についてお話をうかがいました。まずは増井氏がUIに関わることになったきっかけと、使いやすさの本質について。 UI研究に関わるようになった流れ ーー学生時代には電子工作やソフトウェアに興味をお持ちで、現在のUIにつながる研究は社会人
SMBCホームページ、デザインリニューアルの裏側。｜SMBC DESIGN
こんにちは。デザインチームの八嶋です。2021年3月22日、SMBCのホームページが大幅にリニューアルされました。このホームページリニューアルは、約5年ぶりの大幅リニューアルでページ数は約1500ページにも及ぶ大プロジェクトでした。このプロジェクトはインハウスデザイナーによるホームページのデザインディレクションとデザインチームが作ったデザインシステムによる連携で作られています。ホームページの役割からUIの設計までコアとなる部分をインハウスデザイナーが設計し、多数のパートナー様にもご協力いただき完成させています。（特にトランスコスモス様、ありがとうございます。） 今回のnoteは、ホームページリニューアルチームの一員でもある八嶋が、デザイナーの大塚とプロジェクトマネージャーの髙橋、そして、デザインシステムを担当したデザイナーの金澤にインタビューをしました！ ホームページリニューアルを通して、
無料で使えるかわいい8bitデザインのファミコン風CSSフレームワーク「NES.css」
ファミコン風デザインのウェブサイトを簡単に作れる無料CSSフレームワークが「NES.css」です。NES.cssはさくらインターネットのダーシノ氏が開発を行っており、ボタンや入力フォームといった基本的な要素から、SNSやキャラクターのアイコンまで用意されています。 NES.css - NES-style CSS Framework https://nostalgic-css.github.io/NES.css/# nostalgic-css/NES.css: NES-style CSS Framework | ファミコン風CSSフレームワーク https://github.com/nostalgic-css/NES.css ファミコン風CSSフレームワーク「NES.css」をリリースしました | Black Everyday Company https://kuroeveryday.blo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
羽田で電車に乗った人が送ってきたヘルプ、関東の電車の分かりづらさが示されていた
なぜスマホアプリのアイコンは近年立体的なポップなものから平面的なものに変わったのですか？
「脳汁ビシャビシャに出た」「無限ループって怖くね？」ポーラの特設サイトがスクロール芸極めてると話題に
