JVCケンウッドが11月21日にビクターブランドから発売する「HA-NP1T」は、豊富なカラーバリエーションや、かわいらしいデザインが特徴のイヤーカフ型ワイヤレスイヤフォンです。イヤーカフ型イヤフォンをいろいろ試している筆者は先行して製品を体験していますが、これ、かなり良いです。
ビクターの“耳をふさがない”新作イヤーカフ型イヤフォン「HA-NP1T」の完成度が高い！ カラバリと中高音域のクリアさ、価格に魅力あり
JVCケンウッドが11月21日にビクターブランドから発売する「HA-NP1T」は、豊富なカラーバリエーションや、かわいらしいデザインが特徴のイヤーカフ型ワイヤレスイヤフォンです。イヤーカフ型イヤフォンをいろいろ試している筆者は先行して製品を体験していますが、これ、かなり良いです。
Googleカレンダーアプリが生まれ変わる | ライフハッカー・ジャパン
アプリのデザインを自由に変更できるようにアプリのデザインを、GmailやGoogle Driveと同じように変更できるアップデートです。 たとえば、選択した配色に合わせてアイコンや設定、その他のUI要素を調整するアダプティブコンポーネントも備えています。 角丸、グレーのトップバーとサイドバーに加えて、Material 3によるGoogleカレンダーの変更点は以下のとおりです。 モダンなボタン、ダイアログ、サイドバーGoogleのカスタムデザインによるタイポグラフィ新鮮で「読みやすく、鮮明」なアイコンカレンダーにはダークモードも追加され、ユーザーはライト、ダーク、またはデバイスのデフォルトから選択できます。 Googleによると、これらのアップデートはタスクリストビューを含め、ウェブ上のカレンダー全体で統一されます。
サンワ、Excel作業に向く多ボタン仕様の静音テンキー
サンワサプライはこのほど、多ボタン仕様の静音テンキー計3モデル「NT-27UBK」「NT-WL27BK」「NT-BT27BK」を発表、販売を開始した。価格はそれぞれ5940円、7920円、9020円（税込み）。 NT-27UBKはUSB有線接続、NT-WL27BKは2.4GHz無線接続、NT-BT27BKはBluetooth 5.0接続に対応したテンキーパッドで、数字キーに加え方向キーやショートカットキーを標準で搭載。コピー/貼り付け/検索キーなど計39キーを備えている。 関連記事 ラトック、勤怠管理などに向くクラウド対応キーパッド ラトックシステムは、クラウド上にデータを直接書き込める法人向けのWi-Fi接続対応キーパッド「RS-KBWF1」を発表した。 フォーカルポイント、Magic KeyboardとドッキングできるBluetoothワイヤレステンキー フォーカルポイントは、Mac用
数年後に「デザインが浸透している状態」を見据える。みずほ銀行のデザイン組織における育成のしくみ｜Cocoda
みずほ銀行のデザイン組織では、立ち上げと同時に「育成」にも取り組んでいます。 これは、単純にデザイン組織のリソースを増やそうという目的だけでなく、数年後の「みずほ全体に、デザインが浸透している状態」を見据えて、組織全体にデザインを扱える人を増やしていく目線で取り組んでいるのが、特徴と言えるかもしれません。 みずほ銀行デザイン組織では、立ち上げと同時に「育成」に投資具体的に行っている「デザインチーム内の育成施策」「全社に向けた兼業制度」の2つを例にまとめてみます。
「ガンダム」など手がけたメカデザイナーが島根で創作活動 故郷でリセットし世界のファン魅了｜FNNプライムオンライン
人気アニメ「ガンダム」シリーズなどで、メカデザインを手がけるクリエーター・山根公利さん。東京から島根にUターンし、20年以上にわたって浜田市を拠点に世界のファンを魅了するデザインを制作し続けています。都会ではなく、あえて地方…田舎で最先端の仕事を続ける理由に迫りました。 9月21日に益田市にある島根県芸術文化センター「グラントワ」で開かれたイベント。 安彦良和さん： 山根さんが出雲から出てくることは、結構すごいこと。生の打ち合わせをあわせないといけない、『山根さんが来るぞ』とみんな色めき立つ。 「機動戦士ガンダム」のキャラクターデザインを務め、現在もアニメ監督として活躍する安彦良和さん。そして、現在は浜田市在住のメカデザイナー・山根公利さんです。長年、日本のアニメ界をリードしてきた「巨匠」によるトークショーです。 日本だけでなく、世界各国でも絶大な人気を誇るアニメ「ガンダム」シリーズ。山根
【CSS】position: sticky で固定ヘッダーを実装する - Qiita
はじめに こんにちは。HRBrainでオウンドメディア・ランディングページの開発を担当している渡邉です。 Webサイト制作でよく使う固定ヘッダー。 この記事では、 position: sticky で固定ヘッダーを実装するメリットについての解説と、実装例を紹介します。 position: fixed の問題点 position: fixed は、要素をビューポート（ブラウザの表示領域）に対して固定表示する際に便利なプロパティです。 しかし、 position: fixed を使用すると、固定された要素が他の要素の上に重なって表示されてしまうため、コンテンツが隠れる問題が発生します。 これは、position: fixed を適用することでヘッダーが通常フローから外れるためです。 例えば、以下のようなHTML構造とCSSスタイルシートを考えてみましょう。 See the Pen Header
HTML/CSSでできる、押したくなる最新Webボタンエフェクト集
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。 See the Pen Shin
見た目そのまま編集可能なオープンソースのHTMLメールデザインツール「SENDUNE」を使ってみた
SENDUNEは簡単にHTMLメールをデザインできるオープンソースのツールとのことなので、実際に使い勝手を確かめてみました。 Open source, drag and drop HTML email designer. | SENDUNE https://designer.sendune.com/ サイトにアクセスするとこんな感じ。あらかじめプリセットが用意されています。 「Your Logo」と書かれた部分をクリックすると左側でロゴの設定を編集できるようになりました。「Upload Image」をクリック。 標準でいくつかの画像が用意されていますが、今回は「Click To Upload JPEG or PNG or GIF」をクリックし、手持ちのGIGAZINEロゴ画像を選択して「開く」をクリックしました。 アップロードされた画像を確認し、「Select」をクリック。 ロゴの下の枠に
5つの基本原則で実現する、ユーザビリティの高い画面設計 - Qiita
はじめに：なぜ今、ユーザビリティが重要なのか？ みなさん、こんにちは。日々Figmaと格闘しながら画面設計に励むイェンです。 「使いやすい」と言われるアプリやWebサイト。実は、その裏には綿密に計算された設計があるんです。今回は、私が実際のプロジェクトで学んだ、ユーザビリティを向上させるための5つの鉄則をご紹介します。 これらの鉄則を押さえておけば、ユーザーから「使いやすい！」と絶賛されるデザインが、きっと作れるはずです。さあ、一緒に探検してみましょう！ 【1】 シンプルイズベスト：余計なものは思い切って削ろう ユーザーが迷わず操作できる画面を作るには、シンプルさが鍵となります。 ・不要な要素を削除し、本当に必要な情報だけを表示する ・情報の優先順位を明確にし、重要な要素を目立たせる 具体例： ナビゲーションメニューは5-7項目に絞り、よく使う機能をトップレベルに配置します。 Figmaで
プログラマーがデザイナーと仕事をするときに気をつけたいこと - Qiita
はじめに 「美大式ビジネスパーソンのデザイン入門」が素晴らしかったので、 デザイナーの方たちと仕事する時に気をつけたいことを自分なりに言語化したものになります。 なお、書籍からの感化だけではなく 自分が携わっているプロジェクト(PJ）を通して感じていることを合わせた２章でまとめています。 PJを通して感じていること 書籍「美大式ビジネスパーソンのデザイン入門」を読み終えて PJを通して感じていること HRTの精神を忘れない こちらの書籍で有名なHRTです。 HRT = 「Humility（謙虚）」、「Respect（尊敬）」、「Trust（信頼）」 私たちが1行のコードを書くのに1日かけたことがあるように、 出来上がってきたデザインが（我々からみて）シンプルだったとしても、我々からは見えない多様なプロセスを得て出来上がってきたものです。 成果物に対して敬意を払い、建設的に議論をするように心
CSS Grid で repeat auto-fit や minmax を使って可変サイズを実現しても余白は固定なのかあ……待てよ？ - Qiita
この記事の概要 CSS Grid を使うと、スクリーンの幅にあわせて列数や列サイズを可変させて、簡単にレスポンシブな実装ができます。 しかし、margin や padding、gap といった余白関連のプロパティは固定値です。 そのアンバランスさを解消すべく記事を書きました。
熟練が必要なUIについて、それがよくない理由と、UIの慣性について
久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ
「デザイン白書2024」を公開
公益財団法人日本デザイン振興会は、各都道府県や企業、行政などのデザインに関する多様な取り組みを網羅的に取りまとめたレポート「デザイン白書2024（WHITE PAPER ON DESIGN 2024）」を2024年6月4日（火）に公開しました。 背景・経緯 経済産業省と特許庁は2018年に『「デザイン経営」宣言』を発表し、日本の産業競争力強化のために、デザインを企業価値向上のための重要な経営資源として活用する「デザイン経営」を推進することを提言しました。その後、大企業や中小企業、スタートアップ、官公庁などでデザイン活用が進み、経済産業省デザイン政策室はデザイン活用をさらに拡大するために、2023年に「これからのデザイン政策を考える研究会」を開催しました。研究会では、2023年度・2024年度グッドデザイン賞審査委員長の齋藤精一氏が座長を務め、当会からは深野弘行理事長、柴田文江理事、田川欣哉
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
個人的におすすめしたいFeature-Sliced Designというフロントエンドアーキテクチャ設計方法論
Feature-Sliced Designというフロントエンドアーキテクチャ設計方法論をプロジェクトに導入してみたところ、 個人的には良いと感じているので、どのような設計方法論なのか、具体的にどのような部分が良いと感じたかを紹介していきたいと思います。 Feature-Sliced Designとは？ Feature-Sliced Designは、フロントエンドアプリケーションを対象としたアーキテクチャ設計方法論です。公式サイトでは、「コードを整理するためのルールと規約の集大成」と記載されています。 Feature-Sliced Designの設計方法論 Feature-Sliced Designでは、プロジェクトはLayerで構成され、各LayerはSliceで構成され、各SliceはSegmentで構成されます。 Layer Feature-Sliced Designの第一階層をLay
Design Docs を活用して効果的にプロダクト改善
No one is an island. Learnings from fostering a developers community.
デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン
こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
紙っぽいかわいいWebサイト作りたい - Qiita
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Excel」シートタブのデザイン変更が原因で、自動化処理のパフォーマンスが大きく低下／日本マイクロソフトが緩和策を案内
