はてなブックマーク

コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ

Figmaのビューワーでできることについてプロトタイプで確認する Figmaを使っていますが、有料・無料プランでできることが細かく分かれていたので2021年6月現在の仕様をまとめてみました。（一部理解が間違っているところがあったらごめんなさい） Figmaの料金プランについて Figmaは無料版と有料版のアカウントがありますが、一人でFigmaのファイルを使って作業をするだけなら無料版でもなんの問題もありません。 しかし、チームで共同作業をしたい、複数のファイルをフォルダ（プロジェクト）で分けて管理したいという場合には有料版にアップグレードしないと辛いでしょう。 Figmaには無料版でも有料版でも上記のように、EditerとViwerという大きく二種類の種別が存在します。 Editerは無料でも有料でも使えます。 Viewerは無料で使えますが、Starterプラン(無料)アカウントの作成

今回はFigmaの公開ファイルの中からDesign System(デザインシステム)が綺麗にまとまっているものを紹介します。 Design System(デザインシステム)とは？UIデザインを制作する前に、このサイト・サービスで使うカラースタイルやフォントサイズ、コンポーネント（ボタンやフォームなどよく使うものをライブラリ化したもの）をまとめて、担当デザイナー以外の人でもパッと見てすぐにデザインを作成していけるよう、要素を整理したもののこと。 開発メンバーにもデザインシステムを理解してもらうことで、 「ここのフォントサイズはいくつで、ここのカラーは#000000で、、」 と毎回Instans(デザイン情報)を見なくても、 「ここはtext_small(小さいテキスト)、ここはPrimary Color(メインカラー)」 と、登録しているライブラリを呼び出し実装をすることが可能になります。さ

はじめにUIデザインを作成するとき、何から始めるのか デザインを作成する際、ツールを手に入れた後にまずやることは、画面サイズを決定することになります。印刷なのか、デバイスなのか、デバイスならPCなのかタブレットなのかスマホなのか、、など選択肢は多々あります。 UIデザインを作成する際必要になるサイズを決めていく中で知っておく必要のあるワードを紹介していきます。 画面解像度(dpi) 画面解像度とは、端末の実際のディスプレイの広さのことを指します。単位はピクセルを使います。 呼び方：画面解像度/デバイスピクセル/dpi(dot per inch) 例えばPCの標準は1920px × 1080px、スマホだと2020年秋に発売したiPhone12だと2,532px × 1,170pxになります。 一見PCの方が物理的な端末サイズは大きく、スマホの方が小さいのに、なぜピクセル数はスマホの方が大き

MTGなどで音声を録音しておきたいと色々記事を探し Soundflowerを入れると良いという言葉を間に受けインストールしました(@Mac) しかし、、、 まず最新のmac OSではSoundflowerは使えないらしいです 何も知らず、意気揚々とMTGに参加するも 相手の声も全く聞こえず、自分の声も届いていない 色々調べてサウンド設定を触ったり ※出力をヘッドフォンにするも何も聞こえず Audio MIDI設定を触ったりしたものの改善されず、、 リモートワークでMTGに参加できないと致命的すぎて アンインストールを即座に決行しました が、 ここにもいくつもの落し穴が とりあえずインストールしようとしてる人へ向けトラップをいくつか紹介しておきます Soundflowerのトラップまずは裏でずっと動いている状態のSoundflowerを停止(unload)しないと削除自体できません 1. S

After EffectsでLottieデータを作成する際、 画像が使えない問題からどうしてもパスのデータを生きた状態で AE上に持ってこないといけなかったのですが AEはパスの癖がややあってイラストレーター上で作る方が早かったり 同じパスデータを使いたいということがありました。 色々調べたところ２種のインポート方法があるようです 20201019追記：有料ツールを使えばイラストレーターのレイヤー名＋パス全てをそのままAE移植できるよう。overloadという有料ツールをプロの方は使っているそう 1. １つのオブジェクト（パス）をコピペでAEヘ持ってくる 2. いくつか重なっているオブジェクトをまとめて１つのオブジェクトとしてAEに読み込ませる 一つ目のパスをコピペする方法 とりあえず単体のパスだけ欲しい時には便利です １つのオブジェクト（パス）をコピペでAEヘ持ってくる 1. まずIll