「ui」カテゴリーアーカイブ

Nintendo Switchの「ホーム画面のUI」を独自に改善する“あそび”がにわかに盛り上がりを見せる。とある開発者の発言に触発か | AUTOMATON

Nintendo Switchの「ホーム画面のUI」を独自に改善する“あそび”がにわかに盛り上がりを見せる。とある開発者の発言に触発か | AUTOMATON

Nintendo Switchの「ホーム画面のUI」を独自に改善する“あそび”がにわかに盛り上がりを見せる。とある開発者の発言に触発か | AUTOMATON

多くのゲームファンが集まるコミュニティサイトRedditでは、PS4であれXbox Oneであれ、いわゆるホーム画面のUIを独自にデザインし直した画像が投稿されることがある。アイデアを思いついた人がその時々に制作して披露しているため、そう頻繁に投稿されているわけではなかったが、Nintendo Switchのコミュニティではこの...

はてなブックマーク - Nintendo Switchの「ホーム画面のUI」を独自に改善する“あそび”がにわかに盛り上がりを見せる。とある開発者の発言に触発か | AUTOMATON はてなブックマークに追加

UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | knowledge / baigie

UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | knowledge / baigie

UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | knowledge / baigie

デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名な...

はてなブックマーク - UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | knowledge / baigie はてなブックマークに追加

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス

Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub...

はてなブックマーク - よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス はてなブックマークに追加

UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話|鈴木 健一 / PLAID & STANDARD|note

UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話|鈴木 健一 / PLAID & STANDARD|note

UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話|鈴木 健一 / PLAID & STANDARD|note

この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか?皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しなが...

はてなブックマーク - UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話|鈴木 健一 / PLAID & STANDARD|note はてなブックマークに追加

企画を元にゲームのUIを作るときの流れ|tkm|note

企画を元にゲームのUIを作るときの流れ|tkm|note

企画を元にゲームのUIを作るときの流れ|tkm|note

「Game Graphic Design Advent Calendar 2019」の初日の記事です。 ゲーム制作に関する素敵な記事がたくさん公開されると思いますので、私自身もワクワクしてます。 言い出しっぺとして、初日としてまず何を書こうかなと思ってたんですが、以前Twitterでチラッとつぶやいた「普段ゲームUIを作るときってどういう工程があ...

はてなブックマーク - 企画を元にゲームのUIを作るときの流れ|tkm|note はてなブックマークに追加

CSSフレームワークBulmaについて – 一休.com Developers Blog

CSSフレームワークBulmaについて - 一休.com Developers Blog

CSSフレームワークBulmaについて - 一休.com Developers Blog

フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.comレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後...

はてなブックマーク - CSSフレームワークBulmaについて - 一休.com Developers Blog はてなブックマークに追加

現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法 | Alto-tascal

現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法 | Alto-tascal

現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法 | Alto-tascal

はじめに 現代では多くの人々がスマートフォンやタブレットを所持し、ゲームを楽しんでいることと思います。 モバイル向けのゲーム市場は大きく、世界では今も多くの開発者たちが iOS / Android 向けの商用ゲームを作っています。 さて、モバイルゲームの開発には、多くの開発者を悩ませるちょっと困った事情があります...

はてなブックマーク - 現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法 | Alto-tascal はてなブックマークに追加

トグルスイッチの誤用をやめよう | UX MILK

トグルスイッチの誤用をやめよう | UX MILK

トグルスイッチの誤用をやめよう | UX MILK

AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状...

はてなブックマーク - トグルスイッチの誤用をやめよう | UX MILK はてなブックマークに追加

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべ...

はてなブックマーク - 管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス はてなブックマークに追加

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか? この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visu...

はてなブックマーク - UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス はてなブックマークに追加

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか? この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visu...

はてなブックマーク - UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス はてなブックマークに追加

O’Reilly Japan – インタフェースデザインのお約束

O'Reilly Japan - インタフェースデザインのお約束

O'Reilly Japan - インタフェースデザインのお約束

デジタル製品のデザインに役立つ101の指針。製品のユーザビリティや性能を高める上で必須かつ基本のツボ、マスターすれば時間を節約し顧客満足度をアップできるテクニックが101のコンパクトなルールにまとめられています。メッセージが明確で説明もわかりやすいので短時間で気軽に読むことができます。101のルールは、タ...

はてなブックマーク - O'Reilly Japan - インタフェースデザインのお約束 はてなブックマークに追加

O’Reilly Japan – インタフェースデザインのお約束

O'Reilly Japan - インタフェースデザインのお約束

O'Reilly Japan - インタフェースデザインのお約束

デジタル製品のデザインに役立つ101の指針。製品のユーザビリティや性能を高める上で必須かつ基本のツボ、マスターすれば時間を節約し顧客満足度をアップできるテクニックが101のコンパクトなルールにまとめられています。メッセージが明確で説明もわかりやすいので短時間で気軽に読むことができます。101のルールは、タ...

はてなブックマーク - O'Reilly Japan - インタフェースデザインのお約束 はてなブックマークに追加

UIデザイン力を鍛えるリデザインの勧めとコツ|坪田 朋 / Basecamp

UIデザイン力を鍛えるリデザインの勧めとコツ|坪田 朋 / Basecamp

UIデザイン力を鍛えるリデザインの勧めとコツ|坪田 朋 / Basecamp

Twitterでクラシルのリデザインの題材として使って良いとつぶやいたら数名からリデザイン案をもらえました。ありがとうございます! リデザインは、デザインの基礎スキルを身につけられると思うので、どんどんやったら良い派ですが、リデザインする際は何かにフォーカスすると振り返りしやすく技術を積み上げやすいです...

はてなブックマーク - UIデザイン力を鍛えるリデザインの勧めとコツ|坪田 朋 / Basecamp はてなブックマークに追加

Googleが繰り返すデザイン変更からたどり着いた極意「明白こそが至高」について解説 – GIGAZINE

Googleが繰り返すデザイン変更からたどり着いた極意「明白こそが至高」について解説 - GIGAZINE

Googleが繰り返すデザイン変更からたどり着いた極意「明白こそが至高」について解説 - GIGAZINE

by Rajeshwar Bachu GoogleはGoogle検索やGmailなどさまざまなプロダクトを作成していますが、そういったプロダクトをデザインする中で得た知見などをまとめるためのデザイナー・開発者たちによる共同プロジェクト「Google Design」が存在します。そのGoogle Designが、「明白なUIこそ至高のUIである」として、ユーザー...

はてなブックマーク - Googleが繰り返すデザイン変更からたどり着いた極意「明白こそが至高」について解説 - GIGAZINE はてなブックマークに追加

Androidの父、とんでもない縦長端末を披露! – すまほん!!

Androidの父、とんでもない縦長端末を披露! – すまほん!!

Androidの父、とんでもない縦長端末を披露! – すまほん!!

Androidの父ことAndy Rubin氏は、Twitter上にて、見たこともないほど縦長の端末を披露しました。 背面は角度によって宝石にように色を変える光沢素材が採用されています。 GEM Colorshift material pic.twitter.com/QJStoiDleH — Andy Rubin (@Arubin) October 8, 2019 筐体に合わせ、とんでもなく縦長のディスプレイを...

はてなブックマーク - Androidの父、とんでもない縦長端末を披露! – すまほん!! はてなブックマークに追加

「ダークモード」は、本当に“目に優しい”のか? 5つの観点から科学的に検証した結果|WIRED.jp

「ダークモード」は、本当に“目に優しい”のか? 5つの観点から科学的に検証した結果|WIRED.jp

「ダークモード」は、本当に“目に優しい”のか? 5つの観点から科学的に検証した結果|WIRED.jp

IMAGE BY APPLE/WIRED UK 標準の白い背景を黒に置き換える「ダークモード」は、健康意識が高いネット利用者たちにとってデファクトスタンダードになった。ダークモードは、ブラインドを下ろしたりサングラスをかけたりするのと似たような感覚で、ドラマ『MR.ROBOT/ミスター・ロボット』のような反体制的な雰囲気に浸る...

はてなブックマーク - 「ダークモード」は、本当に“目に優しい”のか? 5つの観点から科学的に検証した結果|WIRED.jp はてなブックマークに追加

中川政七商店が「楽天撤退」1年でEC売上を急回復できた理由 | BUSINESS INSIDER JAPAN

中川政七商店が「楽天撤退」1年でEC売上を急回復できた理由 | BUSINESS INSIDER JAPAN

中川政七商店が「楽天撤退」1年でEC売上を急回復できた理由 | BUSINESS INSIDER JAPAN

楽天市場での販売を止めて1年と経たずに、自社ECサイトで売り上げをすぐに取り戻せそう——。そんなSPA(製造小売り)を勇気づけるツイートが、2カ月前に話題になった。 つぶやいたのは、1716年創業の老舗企業「中川政七商店」(奈良県奈良市)で、取締役兼コミュニケーション本部本部長を務める緒方恵氏。同社は日本の伝統...

はてなブックマーク - 中川政七商店が「楽天撤退」1年でEC売上を急回復できた理由 | BUSINESS INSIDER JAPAN はてなブックマークに追加

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note

webやアプリのUIデザイン上達のコツとして、模写(コピー)がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践!となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバー...

はてなブックマーク - デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note はてなブックマークに追加

タッチスクリーンをやめて機械的なノブとダイアルに戻す米海軍 | TechCrunch Japan

タッチスクリーンをやめて機械的なノブとダイアルに戻す米海軍 | TechCrunch Japan

タッチスクリーンをやめて機械的なノブとダイアルに戻す米海軍 | TechCrunch Japan

10人の水兵の命を奪うことになった海上での衝突事故を受けて、米海軍は一部の船で、不人気のタッチスクリーンによるインターフェースを廃止し、伝統的な機械式のコントロールを採用することにした。「そうできるからといって、そうすべきだとは限らない」と、米海軍の当局者は、廃止されつつある新技術について語ってい...

はてなブックマーク - タッチスクリーンをやめて機械的なノブとダイアルに戻す米海軍 | TechCrunch Japan はてなブックマークに追加

米海軍が駆逐艦からタッチパネルを撤廃、旧来のスロットル操縦に戻す – Engadget 日本版

米海軍が駆逐艦からタッチパネルを撤廃、旧来のスロットル操縦に戻す - Engadget 日本版

米海軍が駆逐艦からタッチパネルを撤廃、旧来のスロットル操縦に戻す - Engadget 日本版

米軍は通常、可能な限り新しい技術を取り入れています。しかしながら今回は、明確な技術的後退を選択しました。米海軍は今後18〜24か月をかけて、駆逐艦の制御パネルに使われていたタッチパネルを廃止し、従来のヘルムコントロールと物理的なスロットルを導入します。 この決定は駆逐艦ジョン・S・マケインが起こした事...

はてなブックマーク - 米海軍が駆逐艦からタッチパネルを撤廃、旧来のスロットル操縦に戻す - Engadget 日本版 はてなブックマークに追加

最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends

最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends

最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends

Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきま...

はてなブックマーク - 最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends はてなブックマークに追加

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス

スマホでボタンをどこに配置するとユーザーは操作がしやすいのか? 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons ...

はてなブックマーク - スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス はてなブックマークに追加

DarkModeのデザインを中心とした色彩設計の考え方 – くらげだらけ

DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ

DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ

こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます! PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWD...

はてなブックマーク - DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ はてなブックマークに追加

DarkModeのデザインを中心とした色彩設計の考え方 – くらげだらけ

DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ

DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ

こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます! PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWD...

はてなブックマーク - DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ はてなブックマークに追加

UIの使いづらさにイラッとする!これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface | コリス

UIの使いづらさにイラッとする!これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface | コリス

UIの使いづらさにイラッとする!これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface | コリス

使いにくいUI、間違いやすいインタラクション、誤解されるデザインパターンを再現したUser Inyerfaceを紹介します。ベルギーの制作会社「Bagaar」による、使いにくい最悪なユーザインターフェイスを楽しむゲームで...記事の続きを読む

はてなブックマーク - UIの使いづらさにイラッとする!これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface | コリス はてなブックマークに追加

JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components | コリス

JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components | コリス

JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components | コリス

<!-- Carousel --> <div class="carousel"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-...

はてなブックマーク - JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components | コリス はてなブックマークに追加

will-changeで目指す60fpsのぬるぬるCSSアニメーション – Qiita

will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita

will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita

こんにちは、CSSとVue.jsでアニメーション使いまくりのポートフォリオ作ったり、シューティングゲーム作ったりして遊んでいるゆきです。 今日はCSSアニメーションで無茶しすぎてMacBookがカイロになった反省からの「負荷をかけずにぬるぬるのCSSアニメーションを実現するための試行錯誤」の顛末をまとめます。それでもCS...

はてなブックマーク - will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita はてなブックマークに追加

アップルのログインボタン、競合より上に配置を=開発者向け指針 – ロイター

アップルのログインボタン、競合より上に配置を=開発者向け指針 - ロイター

アップルのログインボタン、競合より上に配置を=開発者向け指針 - ロイター

6月4日、米アップルが今週公表した開発者向けガイドラインによると、同社はiPhoneやiPadのアプリにアップルのアカウントを使ってログインできる「サイン・イン・ウィズ・アップル」のボタンを、グーグルやフェイスブックのボタンより上に配置するよう求める方針だ。写真はアップストアのプロダクトマネージ...

はてなブックマーク - アップルのログインボタン、競合より上に配置を=開発者向け指針 - ロイター はてなブックマークに追加