【2024年版】UIデザインについて知りたい、学びたいときのおすすめ書籍12選 | 株式会社ニジボックス
「UIデザイン」という言葉は、今ではビジネスにおいて当たり前に使われる言葉になっています。 「UIデザイン」は単なる「見栄えが良いデザイン」とは違います。見栄えが優先されがちな、いわゆるビジュアルデザイン、グラフィックデザインは、視覚的にイメージを伝えるための表現だといえますが、「UIデザイン」は、ユーザーが直感的、かつスムーズにそのサービスを使いこなすことができるユーザーインターフェースを構築するためのデザインです。分かりやすくいえば使い勝手に特化したデザインといえるでしょう。 今回は、UIデザインについて学びたい、身につけたいというデザイナー、あるいはデザイナーと仕事をともにするプロデューサーやディレクターといった職種の方にぜひ読んでいただきたい本を紹介します。 UIデザインの基本は、ユーザーにストレスを与えないこと そもそもUIデザインの根本にある考え方は「ユーザーにストレスを与えな
2021年のエンジニア新人研修の講義資料を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。開発本部 オンボーディングチームの酒井（@sakay_y）です。社内のオンボーディングコンテンツを、どんどん社外へ公開することを夢見ています。 2021年もエンジニア新人研修を行いましたので、軽い紹介と、講義資料および一部講義動画（New!）を公開いたします。 2021年のエンジニア研修について 講義資料公開 Webアプリケーション基礎 HTTP/DNS ソフトウェアライセンス ソフトウェアテスト テスト自動化 アクセシビリティ Docker Chrome Developer Toolsの使い方 サイボウズのアジャイル・クオリティ デザインの役割と関わりかた データベース CI/CD セキュリティ モブに早く慣れたい人のためのガイド ITコミュニティ文化と情報発信に共通する成長と貢献の要素 正規表現 Kubernetesを使った開発入門 モニタリング入門 gRPC入門 日本語話
パフォーマンスチューニング9つの技 ～「探し」について～｜PostgreSQLインサイド
今回の記事は、パフォーマンスチューニングの観点と仕組みを理解することに主眼を置いています。具体的な対処方法についてはシステムによって異なるため、マニュアルの確認や、各種チューニングサービスのご利用をご検討ください。なお、この記事で対象にしているPostgreSQLのバージョンは9.5以降です。 本記事の構成 本記事「パフォーマンスチューニング9つの技」は以下4つの記事から構成されています。他の記事も併せてご覧ください。 パフォーマンスチューニング9つの技 ～はじめに～ パフォーマンスチューニング9つの技 ～「書き」について～ パフォーマンスチューニング9つの技 ～「探し」について～（本記事） パフォーマンスチューニング9つの技 ～「基盤」について～ 1. パフォーマンスチューニングの「探し」とは PostgreSQLは、SQLが発行されると、アクセス先のデータの特性を示す『統計情報』を参照
WAI-ARIAなにもわからない
ゆうてん🖖 @cloud10designs アジェンダ 1. 基礎 2. スクリーンリーダー（アクセシビリティ・サポーテッド） 3. オーサリング・プラクティス 4. 自動テスト 5. 仕様ディープダイブ twitter.com/cloud10designs… 2022-01-07 16:44:01 ゆうてん🖖 @cloud10designs WAI-ARIA勉強会、2月のどこか平日夜開催予定。 つよつよの人たちを召喚しているので、おそらく日本で一番くわしいWAI-ARIAの情報が聞けるはずだよ。オンラインでアーカイブもするつもりだから、忙しい人も安心してね。 twitter.com/cloud10designs… 2022-01-11 11:15:53 リンク connpass WAI-ARIA勉強会 (2022/02/17 19:30〜) アクセシビリティの向上に取り組む企業が増え
WSL2で起動したサーバーに外部の端末からアクセスする
３．wsl側でサーバー起動 ここでは、httpサーバーをport:3000で起動したものとする。 ４．ホストOSからwslのipアドレスを用いてアクセスできるか確認 確認作業はホストOSのブラウザで行う http://＜wslのipアドレス＞:3000 にアクセス これでアクセスできなかったらwsl内かWSLのイーサネットアダプター周りで問題が起きてる。 ５．ホストOSのipアドレスでwslのサーバーにアクセスできるようにポートフォワーディングの設定を行う 以下、コマンド実行はコマンドプロンプトかpowershellで。どちらも管理者権限で実行する必要がある。 ポートフォワーディングを設定 > netsh.exe interface portproxy add v4tov4 listenaddress=＜ホストOSのipアドレス＞listenport=3000 connectaddress
モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
商用可！手書きでナチュラルな無料フォント決定版（日本語・英語）
オシャレなカフェの黒板にチョークで書かれたような、ナチュラルな手書きフォントを検討中のひとにおすすめしたいコンテンツ。 ラフで少し崩したような絶妙なバランスは、利用する素材で仕上がりが大きく変わってきます。 今回は、商用利用できる手書き風フリーフォント素材をまとめてご紹介します。 日本語、英語フォントごとに分けています。 かわいいフォントや、レトロなフォント、おしゃれな筆記体フォントやブラシフォントなどと一緒に活用してみましょう。 コンテンツ目次 1. Adobe Fontsの手書きフォント（6個） 2. 和文、日本語の手書きナチュラル・フリーフォント（54個） 3. 英語の手書きプレミアムフォント（8個） 4. 英語の手書きナチュラル・フリーフォント（69個） 現在、137個の手書きフリーフォントを集めており、アップデート継続中。 Adobe Fontsで使える手書きフォント 「日本語フ
自宅にKubernetesクラスター『おうちKubernetes』を作ってみた | IIJ Engineers Blog
2019年新卒入社。基盤エンジニアリング本部兼クラウド本部所属のKubernetes大好きエンジニア。自宅ラックマウントサーバ勢。休日はコスプレしたり、バイクに乗ったり、絵を描いたり、サーバメンテしたり、激渋旅館を巡ったりしてます。 こんにちは、IIJの韮塚(にらづか)です。 私は名古屋支社の技術部に所属しており、普段はインフラ中心のSI業務と開発向け社内ツールの管理業務をしています。 みなさん、Kubernetesは触っていますか？ いま世の中ではKubernetesが急速に普及しつつあります。 大手クラウドベンダーは独自にカスタマイズしたKubernetesをサービスとして提供しており、多くのWebサービスがその基盤を利用して稼働しています。 中にはYahoo!やサイボウズのように、自社内で独自にカスタマイズしたKubernetesを持っており、その上で自社サービス提供するような会社も
施設のフリーテキスト入力の住所をPostgreSQLの文字列置換で立ち向かう
検索プラットフォーム事業部エンジニアの相澤です。 普段はPostgreSQLで複数の旅行会社のデータをまとめるような処理を取り扱っています。 弊社の得意な分野はまさに旅行系の「複雑かつ膨大な」在庫・料金などのデータ処理なのですが、これを高速に扱えるのであれば、他の部分に目が行くのがエンジニアのサガ。 そこで、様々な会社から入稿される施設データの中で特に厄介なものである、「フリーテキスト入力」をなんとか綺麗にできないかと考えました。 前がたり 旅行会社が持つ情報というのは、「電話番号」「緯度経度」「郵便番号」「住所」「禁煙・喫煙／露天風呂／インターネット環境／WiFi etcの有無」「バリアフリー／幼児／ペットetcの対応状況」というものになっているのですが、電話番号・郵便番号・緯度経度は数字の全角半角の表記ゆれがある程度でデータ管理がしやすいのに対し、施設名・住所は大抵の場合、入力する人が
Unicode（東アジア） - CyberLibrarian
Unicodeの字種の表です。 下表のリンク先のページに、十六進数の数値文字参照で記述した文字コード表を掲載しています。文字コード表中の各文字は、ユニコード・コンソーシアムが提供しているUnihanデータベースの該当文字へリンクしてあります。文字コード表中の文字は、環境によっては正しく表示されない場合がありますが、各ページからリンクしているPDFでは正しく表示されます。 字源的には同じだが字形の異なる中国語、日本語、朝鮮語、ベトナム語の漢字に同じコードを与えて統合した漢字です。 CJK統合漢字、拡張Aと拡張Bには、JIS X 0213の漢字が含まれています。 拡張Bには、多数の重複字の存在が指摘されています。 拡張Fには、文字情報基盤整備事業が提案した漢字（1,645字）、大蔵経テキストデータベース研究会が提案した漢字（2,884字）も含まれています。 拡張Gには、大蔵経テキストデータベー
PostgreSQLで無から複数行の任意のデータをSELECTする - tateren’s diary
テーブルも何も無い所から一行の固定値をSELECT（複数カラムもいける） postgres=# SELECT 'ゆゆ式' AS title, '三上小又' AS Author; title | author --------+---------- ゆゆ式 | 三上小又 (1 行) これはよくやる（？）気がするんだけど、何も無いところから複数行SELECTするのってどうやるんだっけと思ってちょっと調べたら… VALUES VALUESを使えば良いのか。 postgres=# VALUES ('野々原'),('日向'),('櫟井'); --必要最小限の VALUES コマンド column1 --------- 野々原 日向 櫟井 (3 行) こんな感じでVALUESだけでテーブルが返ってくるんだけど敢えてSELECT文に組み込むならFROM句の中で使ってこうなる。 postgres=# SE
Unicode 片仮名 - CyberLibrarian
範囲：30A0～30FF Unicodeの片仮名（The Unicode Standard Katakana）を十六進数の数値文字参照で記述した表です。 Katakana punctuation（片仮名句読点） Unicode 表示 名称 備考 JIS名称 JIS 30A0
aria-expandedのよくある間違い | masuP.net
WAI-ARIAの中で、コンテンツが展開されているかどうかの状態を表すaria-expandedは、WAI-ARIAの中でもよく使われている属性のうちの一つ[注1]ですが、誤った使い方をみかけることも少なくありません。また私自身も間違った理解のまま使用していた時期もありました。 [注1] : 出典 Usage of ARIA attributes - Analysis - Discuss - HTTP Archive そこでaria-expandedのよく見かける間違いと、仕様に基づいた正しい使い方をまとめました。 間違いその1：aria-hiddenとaria-expandedを混同する aria-expanded は要素、または要素が制御する別のグループ化要素が、現在展開されるまたは折りたたまれるかどうかを示す。ステートです。要素そのものが隠れているかどうかを示すaria-hidden
JavaScript で英数字や記号を全角から半角へ変換する方法
ブラウザ上で半角入力の制御は CSS の ime-mode プロパティが存在します。しかしこれは Internet Exporer 独自のものなので、Chrome ブラウザなど対応していないブラウザも存在します。 全角入力を拒否するような制御を JavaScript に組み込むことも可能ですが、半角に直してもう一度同じ内容を入力させる仕様は最適な対応方法ではないと考えています。 そこでユーザビリティを損なわず、故意ではない全角入力を許容するために、英数字や記号を全角から半角に変換する処理を提案させていただきます。 全角から半角へ変換するメリットある特定項目のデータを半角で統一することで、生まれるメリットもたくさんあります。例えば、検索画面で対象となるデータは、全角と半角が混在していると部分一致の条件を拡張しなくてはいけないので抽出するのが大変です。 Oracle であれば TO_SINGL
端末がタッチ（タップ）に対応しているか確認する | GRAYCODE JavaScript
ブラウザを表示している端末がタッチ可能かどうかを調べる方法について解説します。 この記事のポイント 端末がタッチに対応しているかを調べる PCのブラウザのエミュレータでiOS／Androidにしてもタッチ対応と判定する タッチに対応しているか判定する イベントハンドラのontouchstartプロパティ�はブラウザを表示している端末がタッチに対応しているときは存在し、対応していない場合は存在しない状態になります。 そこで、このプロパティが「undefined」かどうかを調べることがまず1つのヒントとなります。 iPhoneでwindow.ontouchstartを参照 加えて、同時に対応できるタッチの数をnavigatorオブジェクトのmaxTouchPointsプロパティから参照することで、より確実にタッチに対応しているかを調べることができます。 このタッチの数は1以上であればタッチに対
Chrome DevTools Devices does not detect device when plugged in
I cannot seem to get the DevTools Devices feature to work on my Samsung Galaxy S4 even after following the steps outlined at https://developer.chrome.com/docs/devtools/remote-debugging/ My device has Chrome v32 and Chrome Beta v33, while my PC has Chrome v33 and Chrome Canary v35. USB debugging is enabled on my device and device driver has been installed. I have never got the prompt as outline in
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン研修 2021 / Design training 2021
もじワク研究 | 目次
How I Made This Realistic Red Switch (Pure CSS)
OEM USB ドライバのインストール | Android Developers
