カテゴリー: Design

カテゴリー
Design

Interのプロパティ

サービス系UIデザインのTypographyとしてベースをInter + Noto Sans Japaneseのセットにすることが多い。これに加えて、DataTableの数値や、数式、化学式の表示には別途、Roboto Mono + Noto Sans Japanese などを定義したりするのだけどFontのLoad数（データ量）が増えるデメリットがある。

正直なところよほど長いProgram Codeを表示するケースでなければ、幅浪費を少なくしたいパターンが多いので、数値だけ等幅表示のfont-variant-numeric: tabular-nums;を設定する場合もある。

ただ英数字の識別性（0とO、6と8と9、4と9、1とlとIなど）という観点でグリフに難点を感じるケースは多い。

フォントのLoad数を抑えつつ、英数字の識別性を高める方法は無いのか？ということで、OpenType featuresを使った方法を試してみる。

今回の検討対象とするフォントはInter。

続きを読む “Interのプロパティ”
カテゴリー
Design

Illustratorの合成フォントはVariableフォントを設定できない

Illustratorの合成フォントにVariable fontを設定できないらしい。違うバグの関係もありバージョンダウンとか四苦八苦したのでメモ。

解決済み: 合成フォントにフォントが読み込まれない – Adobe Product Community – 14852303

しかしAdobe公式のIllustratorのマニュアルとか存在しないのだろうか？

カテゴリー
Design Develop

モーダルダイアログの背面を覆うあの板の名前

Ref : https://m3.material.io/styles/elevation/applying-elevation

DialogやDrawerをModal展開した時に背面に敷く板のお話。

丁寧に書くとモーダルやダイアログ、ドロワー展開時に背面UIを視覚的に減弱させつつ、操作遮断してユーザーの注意を前面UIに集中させる半透明レイヤーのこと（最近はボカシタイプもある）

こいつの名前がプロジェクト毎に「下敷き」「グレー板」などバラバラ、かつイマイチで20年ぐらいモヤモヤしている🤔

続きを読む “モーダルダイアログの背面を覆うあの板の名前”
カテゴリー
Design Game

コントローラーボタン配置

ゲームをやる人だとわかると思うのだけど、メーカーによってコントローラーのABXYボタンの配置が逆になっている問題。

続きを読む “コントローラーボタン配置”
カテゴリー
Design Develop

Figmaのメインコンポーネント移動

FigmaでB2B系など画面数が多いサービスをデザインするときに汎用パーツをコンポーネントにして一元管理することでデザイン・仕様変更などの対応コストを抑える構成にするが、その際にFigmaのライブラリ機能を使ってメインコンポーネントと画面デザインを別Figmaで運用することも多い。（MUIなどのデザインシステムのコンポーネントFigmaを利用する場合も同様）

ただ画面デザイン工程でメインコンポーネントに必要な要素が網羅されていることは少なく、往々にしてコンポーネントの作成＋追加が必要になる。

その際に、画面デザインFigmaで作成したコンポーネントを、メインコンポーネント管理のFigmaに移動させる場合があるのだけど、この方法がちょとわかりづらく、失敗するとメインコンポーネントに紐づかない迷子インスタンスが発生して実装時に混乱が生じるので、メインコンポーネントの移動方法をメモしておく。

続きを読む “Figmaのメインコンポーネント移動”
カテゴリー
Design Life

新デザイン

Casterの時のデザインが一番好きだけどな・・・🥸

カテゴリー
Design

擬態

youtube placeholder image

最近のお仕事で監視系コンソールの設計＋デザインしている流れでなぜだか擬態に行き着きアレコレ調べたりしている。

擬態の目的は主に「攻撃」「防御」の2タイプ。「隠蔽的」「標識的」の2つの方向性があり、その手法で「ベイツ型」「ミューラー型」「ペッカム型」「メルテンス型」などに分類される。

視覚（色、形状、動作）、嗅覚などを駆使して擬態するわけだけど、擬態する対象の選定が非常に興味深い。

長い時間をかけたABテストで選抜された実績結果だけあって、予想の範疇を超えるパターンがチラホラある。

これをUI/UXにどう活用できるのか？は検討ついていないけれど、改めて自然は偉大だなーと感心した次第。

ゆるゆると勉強しようと思った。

カテゴリー
Design Vehicle

teenage engineeringのスクーター

teenage engineeringのデザイン哲学が詰まった Vässlaの電動スクーター「epa-1」 | AXIS Web | デザインの視点で、人間の可能性や創造性を伝えるメディア

どうやって会社を維持しているのか不安を感じるTeenage Engineering。どういう経緯でオートバイのデザインをすることになったのかわからないけれど、少し安心😅

しかしこのバイクのデザインからはOP-1 、EP–133、EP series、TP–7に感じるスピリットをあまり感じない。デザインのスケールが違うからもう少しズームインしないとわからないのかしらん？

カテゴリー
Design

Colour Contrast Analyzer (CCA)

UIデザインをする際に色のコントラスト比や、色覚異常への対応を検討するために、ずっとColour Contrast Analyzer (CCA)というソフトを利用している。

Colour Contrast Analyzer – TPGi

んで、これ５年前ぐらいだかにアップデートされたのだけど、どうもHTMLベースのアプリに改変されたらしく、それまでのバージョンにあったシミュレーション機能が無くなり、単純に入力した色値を元にした判定結果しか確認できなくなってしまった。

このシミュレーション機能ってのは、なかなかのスグレモノで、PC画面に対して色覚シミュレーションができ、WEBもイラレもFigmaもこれだけでチェックすることができる。なぜこの機能を無くしたのか理解に苦しむのだけど、まぁWEBに特化した、開発コスト削減ってことなのかなぁ・・・。

その後も色々と似たようなアプリはリリースされているものの、任意アプリの中でしか動作しなかったりと、使い勝手がとても悪く、未だに古いバージョンを大事に利用している次第😩

もし、このシミュレーション機能に興味があれば、以下Gitに６年前のWindows版が公開されているので使ってみると良い。（ただしシミュレーション実行時にエラーが発生する😅）

ThePacielloGroup/CCA-Win: The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.

カテゴリー
Design Stuff

ペンタブグローブ

今年から手書きプロトタイピングをPC移行して液タブでシャコシャコと作業をしている。その時のペンタブグローブは自分の手に合うサイズが無くエレコムの2Lサイズ一択でこれまで利用してきた。

んが、誤反応が多く、ストレスフル、スピードも遅く、仕上がりも汚く・・・。しかしサイズが小さいグローブでは手が自由に動かせず汚い感じになるし、長時間やってると肩こり・頭痛がするし・・・と八方塞がりな状態で困っておりました。

んで、先日Amazonで手のサイズベースで再度探してみたところXENCELABSのLサイズでなんとかいけるのではないか？ということで購入してみました。（誤反応する場合に重ね着できるように2枚購入）

で、これがビンゴでサイズもちょうどよく、しかも1枚でも誤反応せずサクサク描ける。ストレスフリー！

ということでもし、手が大きくてペンタブグローブのチョイスに困っている方はXENCELABSのLサイズを試してみると良いかもyよーーというお知らせでした。

カテゴリー
Design

Adobe Creative Cloudの支払いを月払いから年払いに変更する方法

これまでAdobe Creative Cloudを月払いで契約していたが年払いに変更することになった。しかし同プランで支払いサイクルの変更はできないのでは？とのウワサがありチト調べてみた・・・

もし、月々プランから年間プランに変更ということであれば、一度解約し、契約の終了を待ってからの改めての契約になります。

月々払いを年払いに変更したいのですが – Adobe Support Community – 10231842
[購入ガイド] 製品・ご契約お手続きガイド

「お問い合わせください」ってどこにやねん？ということで回避策が無いのか試してみたところサクッと月払いから年払いに変更できたっぽいのでメモしておく。（事後の再現キャプチャなので一部不整合あり）

続きを読む “Adobe Creative Cloudの支払いを月払いから年払いに変更する方法”
カテゴリー
Design

Illustratorのカラースウォッチの設定が消失

長年Illustratorを使っているがこんな現象は初めて・・・😥

これ色々調整して作成したスウォッチなので作り直しは結構しんどい・・・復元できるのだろうか・・・。

各スウォッチの右側のアイコンは何を意味しているのかさっぱりわからない・・・
続きを読む “Illustratorのカラースウォッチの設定が消失”
カテゴリー
Design Soft & Service

Illustratorでテキストの一部が表示されない

Adobe Illustratorをver.27にUpdateした際に、過去データで一部フォントのテキストが歯抜け表示される現象に遭遇。

テキスト自体は存在しており、フォントを変更すると正しく表示されるが、特定のフォントにすると一部の文字が表示されなくなる状態。

上が元のテキスト、下が歯抜けになった状態
続きを読む “Illustratorでテキストの一部が表示されない”
カテゴリー
Design Soft & Service

penpot

Design Freedom for Teams
Penpot is the first Open Source design and prototyping platform meant for cross-domain teams. Non dependent on operating systems, Penpot is web based and works with open web standards (SVG). For everyone and empowered by the community.

Penpot – Design Freedom for Teams

Figmaの競合フリーサービス。まだ試していないので詳細不明だが、取り急ぎメモ。

カテゴリー
Design

ZOZIRUSHI

我が家のポットの象印。
微妙に時代によって変わっているらしい
象印はなぜ象がシンボル？　まほうびんとロゴの変遷がわかる企画展に行ってきた – エキサイトニュース(3/3)

カテゴリー
Design Develop

Touch UIとFlashの話

ソシオメディアの上野さんの記事。
丁寧に細部まで解説、考察されている非常に良い記事なので、UIデザイン関係者は必読。

この記事を読んで、当時FlasherとしてiPhone登場時にUIに感じたFlashの影響と、その経緯について書いておこうと思います。あまり懐古的にならない、将来につながる内容にしたいと思いますが、年齢的に無理かもしれません。ご了承ください。

続きを読む “Touch UIとFlashの話”
カテゴリー
Design Hardware Usability

視覚障がい者も健常者も、直感的に操作できるリモコン

三菱電機 ニュースリリース 「触りたくなるインターフェース」コンセプトを提案

三菱電機株式会社は、「触りたくなるインターフェース」コンセプトの提案として、視覚障がい者も健常者も直感的に操作できるリモコンを、空調機器を例にして盲学校と共同で試作しました。操作する項目ごとに操作部の形状や動きを変えて、設定状態をわかりやすくしているので、リモコンなどの機器操作に不慣れな人でも直感的に操作することができます。

非常に興味深い取り組みなのだけど、あっさりした情報しかなく、少し残念。
上記ページ内にあるPDFのほうがもう少し詳しい情報が掲載されている。

「視覚障がい者も健常者も、直感的に操作できるリモコンを盲学校と共同で試作 「触りたくなるインターフェース」コンセプトを提案」(0214-c.pdf)

あと、媒体記事で丁寧に解説しているものがあったのでこちらも > 目が不自由でも、機能が分かって使いやすいスイッチとは – MONOist（モノイスト）

映像は各ニュース媒体にはいろいろあったのだけど、三菱オフィシャルの映像は見つけられず。
Youtubeに一つだけグレーな感じの映像があったので、貼っておく。

youtube placeholder image

続きを読む “視覚障がい者も健常者も、直感的に操作できるリモコン”
カテゴリー
Design Develop

スウォッチの「未使用項目を選択」機能で使用色が選択される

イラストレータのスウォッチパネルの「未使用項目を選択」機能。
スウォッチを掃除する時に便利なのだけど、時々シンボルの中で利用している色が選択されるときがある。
気付かず削除してしまい、後で「あれ？あのカラーどこ行った？」と、諸々確認＋再作成ということが時々ある。
シンボル内でグルーピング＋スタライズした時にそうなることが多い気がするが、そうならないケースもあり、原因がよくわからない。
とりあえず選択されたスウォッチを都度確認しながら捨てているエブリディ。
便利機能なのだけど、便利に使えないのは、結構ストレスを感じるものである。
（贅沢心理ですな・・・）

カテゴリー
Design Develop

illustratorでフォントが表示されなくなる件

これまでHelvetica NeueのBoldが不意にフォントリストに表示されなくなることが時々あり、その都度、根拠もないままにOS再起動でやりくりしていたが、このたびWin10でHelvetica Neueや新ゴシックなどがごっそり一式表示されなくなるという状況が発生。
再起動したり、フォント再インストールなどしてみたものの、どうにも回復せず。
途方にくれていたところ、こんな情報を発見。
フォントキャッシュを再構築する方法
とりあえず書いてあるとおりに、”C:\Windows\System32\FNTCACHE.DAT”を削除して再起動して無事復旧。（OSXだと「セーフブートで Mac OS を起動してから再起動」でフォントキャッシュがクリアされるとのこと）
これとは別に、新ゴシックに関してはこんなバグもあったようだが、これは遭遇したこと無い。
Windows7でモリサワフォントが表示されない現象について　応急対処プログラム [2012.10.26更新]
デザイン作業を開始する時のフォントトラブルはものすごくテンション下がる。

カテゴリー
Design

視覚認知に対する文化的影響

ジワジワくる研究結果。
ここまでRowレベルの視覚認知に文化影響があるのは、ちと衝撃的。
Highレベルな要素に文化的影響があるのは当然として、Rowレベルのものは「人間」という種族レベルで暗黙的に考えられていたフシがある。

日本の人と北米の人ではものの探し方が違う — 京都大学
2017年03月27日
上田祥行 こころの未来研究センター特定助教、齋木潤 人間・環境学研究科教授、北山忍 ミシガン大学教授、Ronald Rensink ブリティッシュコロンビア大学教授らの国際共同研究チームは、視覚情報処理のみに焦点を当てたシンプルな課題を用いて、文化が視覚情報処理に与える影響を分析しました。北米と日本で実験を行った結果、傾きに対する剌激を扱った課題では差がみられるなど、思考や推論といった高次の認知だけでなく、基礎的な視覚処理もその人が属する文化による影響を受けていることが示されました。

現場への適用という面で見てみると、現状はあくまで視覚認知のレベルの話だし、差が発生する理由も不明な状態のため、理論的な取り込みはまだ難しく、従来通り「知見」的判断に依存せざるを得ない。しかし、デザイン時の条件として知っておいた方が良さそう（諸刃の剣っぽいけど）。

続きを読む “視覚認知に対する文化的影響”