minetti

UIデザイナー/ フロントエンドエンジニア 趣味は、山登り・キャンプ・アニメなどなど

minetti

UIデザイナー/ フロントエンドエンジニア 趣味は、山登り・キャンプ・アニメなどなど

記事一覧

SteamDeckがプレイする度にクラッシュしているので調査したら、たぶん直った話。

※この記事の解決方法は必ずしも全員の解決につながるものではありません。解決方法の実行は自己責任でお願いします。よくわからない方は公式サポートへ問い合わせしましょ…

minetti
1か月前
4

NextJSとVercelでSSGする時の困りごと備忘録

最初に、この記事は、何かを解決できたという記事ではありません。。 ただの備忘録となります。 ここ最近、個人で、 NextJS(SSG) + Vercel Hosting + prisma + planetScal…

minetti
5か月前
8

Figmaに待望のflex wrap機能が入った

Figma conf 2023で色々なアップデートがありました アップデートのハイライト記事 https://ux-news.com/highlights-from-the-figma-config-2023-dev-mode-auto-layout-up

minetti
10か月前
2

LaserPecker2でM1 Macのソフトが動かなくて困って解消するまでのメモ

結論以下のページ、アプリダウンロード付近の黄色い箇所[Click to UserManual]からPDFを読んで、LaserPeckerのファームウェアをアップグレードした所、ソフト経由でデータ…

minetti
1年前
2

Figmaでイラレ、フォトショっぽいカーニング調整の機能が入ってたよ

2021年に記事にするまでもなく、2020年7月に実装されておりました。 動画でもみれる通り、 // カーニングoption + >option + <// font weightcmd + option + >cmd + opti…

minetti
2年前
21

positionとoverflow hiddenを併用する際の注意点

cssの positionとoverflow:hiddenを併用する場合。 上手く、overflow:hiddenが効かない時がある。 以下のような指定だと起こる <div style="overflow: hidden; width: 40…

minetti
3年前
2

ワーキングプロダクトにおける新機能の追加とオンボーディング-Slackを見て

Slack Connectを見て、その機能オンボーディングがよかったのでメモ サイドナビ 左から状態による、NEWタグの変遷である。 サイドナビは上部に主要なチャット、スレッド…

minetti
3年前

Sony α6000を買って1年が経ったので振り返り

こんにちわ、ゴールデンウィーク最終日で白目むいてます 今日、α6000を手にして1年が経ちました。 それを勝手に記念して1年で撮ったものや、買ったものなどを振り返って…

minetti
4年前
4

Figmaのプロトタイプでポップアップを作る

こんにちわ。 Figmaを日々つかって楽しい日々を送っています。 Figmaのプロトタイプの機能でポップアップ及びモーダル表現が楽しくなる機能があります。 インタラクショ…

minetti
4年前
12

Figmaの円ツールのarc/ratio機能で遊ぶ

Figmaの円ツールのarc/ratio機能はご存知ですか? Figmaで円を描いて選択し、 次の画像の白丸(ピンクで囲ったとこ)があるのでクリックアンドドラッグしてみてください。 …

minetti
4年前
2

サービスの黒を調査してみた

Webデザイナーを目指したての頃、Webサイトの黒はすべて#000の黒かと思っていました。 デザイナーになってからは目が良くなって、この黒は黒じゃないなってなんとなく理解…

minetti
4年前
4

Sketchにフォトショ、イラレっぽいショートカットを設定する

PCを変えるたびに検索しているので備忘録として。 Sketchを開き、Services > Services Preferencesを開く [ショートカット]のタブが開くと思うので 左の[アプリケーション…

minetti
4年前
2

Sketchで"could not be opened"がでて悩んだ話

結論から話すと、デフォルトで入れられているApple iOS UIというUIライブラリをインストールすることでもろもろ解決された。 パソコンを変えたのでSketchを入れ直してファ…

minetti
4年前
4

あるあるデザインの作例からのデザイン練習-5

あるあるデザインの「さんかく散らす」をモチーフに仮のデザインを組み立てる このパターンの気づきとしてシリアスなトーンよりは、動きをつけているのでアクティブなイメ…

minetti
4年前
1

あるあるデザインの作例からのデザイン練習-4

あるあるデザインの「左から4分の1の法則」をモチーフに仮のデザインを組み立てる このパターンの気づきとして、左側に配置する色は概ね写真と同型のコンラストでないと帯…

minetti
4年前

あるあるデザインの作例からのデザイン練習-3

あるあるデザインの「太枠にいれてみる」をモチーフに仮のデザインを組み立てる 1,2は縦だったので横バージョンで作成 枠を作ると、画面が広く感じられる気がする。単に画…

minetti
4年前
1

SteamDeckがプレイする度にクラッシュしているので調査したら、たぶん直った話。

※この記事の解決方法は必ずしも全員の解決につながるものではありません。解決方法の実行は自己責任でお願いします。よくわからない方は公式サポートへ問い合わせしましょう。 ある日からSteamDeckが頻繁に落ちるようになり、システムが再起動して「インストールの確認」画面が表示されるようになった。googleで調べたところ、似たようなユーザーがたくさんいて、解決策が定時されていたので実行してみた。 解決方法SteamOSをプレビュー版のバージョン3.6にする 更新されたファン

NextJSとVercelでSSGする時の困りごと備忘録

最初に、この記事は、何かを解決できたという記事ではありません。。 ただの備忘録となります。 ここ最近、個人で、 NextJS(SSG) + Vercel Hosting + prisma + planetScaleを使いサイトを作っていました。 そもそもなんでSSGにしたかAmplifyHostingの時も、VercelHostingの時も、NextJSのserverSidePropsを用いて、SSRで配信を行おうと試みていました。 しかし、どちらのhostingの場合も

Figmaに待望のflex wrap機能が入った

Figma conf 2023で色々なアップデートがありました アップデートのハイライト記事 https://ux-news.com/highlights-from-the-figma-config-2023-dev-mode-auto-layout-updates-font-picker-and-more/ devモードやdiaglomの買収などがビッグニュースのようですが、実務的には、記事内のOther Figma Announcementsの方がよっぽどビッグニ

LaserPecker2でM1 Macのソフトが動かなくて困って解消するまでのメモ

結論以下のページ、アプリダウンロード付近の黄色い箇所[Click to UserManual]からPDFを読んで、LaserPeckerのファームウェアをアップグレードした所、ソフト経由でデータを出力できました。 https://app.laserpecker.net/app ※ファームウェアアップデートに関しては自己責任でお願いします。(この記事はあくまで個人の備忘録になります) ※正確な情報を知りたい方は、公式サポートに連絡をお願いいたします。 ソフト動かなくて詰む買

Figmaでイラレ、フォトショっぽいカーニング調整の機能が入ってたよ

2021年に記事にするまでもなく、2020年7月に実装されておりました。 動画でもみれる通り、 // カーニングoption + >option + <// font weightcmd + option + >cmd + option + >// line heightshift + option + >shift + option + < これで、調整も楽々です。 figmaがどんどん使いやすくなっていく!

positionとoverflow hiddenを併用する際の注意点

cssの positionとoverflow:hiddenを併用する場合。 上手く、overflow:hiddenが効かない時がある。 以下のような指定だと起こる <div style="overflow: hidden; width: 400px; height: 300px;"> <div style="position: absolute;top: 0px;left: 500px;"> <img src="sample.jpg"> </div><

ワーキングプロダクトにおける新機能の追加とオンボーディング-Slackを見て

Slack Connectを見て、その機能オンボーディングがよかったのでメモ サイドナビ 左から状態による、NEWタグの変遷である。 サイドナビは上部に主要なチャット、スレッド等を見るための機能が並んでいるが、このNEWタグは上部にあるのでとても目立つ。 サイドナビの横幅可変がついた事で、このタグが見れるか試したが ちゃんと3点リーダーでナビゲーションは省略された。(図中央) 上部に主要機能を集中させる事は、普段使いの目の置き場になり、 新機能追加などに敏感ではない僕の

Sony α6000を買って1年が経ったので振り返り

こんにちわ、ゴールデンウィーク最終日で白目むいてます 今日、α6000を手にして1年が経ちました。 それを勝手に記念して1年で撮ったものや、買ったものなどを振り返ってみます。(ただの散財記録です) 本体とダブルズームレンズキット(80,000円) 新古品的なものをアマゾンのマケプレでポチりました。 (ちなみにアマゾンアフィはやってないのでリンクに意味はないです) リンクのはもうちょい安い。。 初めてのミラーレス1眼でわくわくしてたのを覚えています。 次の写真は「夢の島

Figmaのプロトタイプでポップアップを作る

こんにちわ。 Figmaを日々つかって楽しい日々を送っています。 Figmaのプロトタイプの機能でポップアップ及びモーダル表現が楽しくなる機能があります。 インタラクション機能のOpen Overlayです。 次の画像のようにポップアップを表示するボタンとポップアップがあるとします。 このような場合にボタンとポップアップをプロトタイプ機能でつなげた場合、デフォルトではNavigate Toというインタラクションがついています。 ここをOpen Overlayに変更しま

Figmaの円ツールのarc/ratio機能で遊ぶ

Figmaの円ツールのarc/ratio機能はご存知ですか? Figmaで円を描いて選択し、 次の画像の白丸(ピンクで囲ったとこ)があるのでクリックアンドドラッグしてみてください。 これがarc処理です。 たぶん結構楽しいはずです 今度は上の画像の中心にある白丸を動かしてください。 これがratio処理です。(はい、もう楽しいですね?) arcとratioを使うと、ピザ🍕やランドルト環👁(視力の奴)を一瞬で描けます 急にピザやランドルト環を描く必要が出た時にご活用くだ

サービスの黒を調査してみた

Webデザイナーを目指したての頃、Webサイトの黒はすべて#000の黒かと思っていました。 デザイナーになってからは目が良くなって、この黒は黒じゃないなってなんとなく理解しました。今となっては#000はコントラストが強いため避けるようにしています。またブルー系列のブラックが白に馴染み個人的に好みであることもわかりました。 今回この「黒」とユーザーが認識していそうな部分にどんな黒が使われいるのか調べてみました。 調査したのはPCサイトで良く見られているであろう文字色にどんな

Sketchにフォトショ、イラレっぽいショートカットを設定する

PCを変えるたびに検索しているので備忘録として。 Sketchを開き、Services > Services Preferencesを開く [ショートカット]のタブが開くと思うので 左の[アプリケーション]を選択して、下にある[+]ボタンをクリック あとは、入力していくだけです。 ただメニュータイトルはアプリケーション上の[正確な表記]が必要です。 今回僕が設定したメニュータイトル一覧 コピペ用// レイヤーを一番後ろへArrange->Send to Back//

Sketchで"could not be opened"がでて悩んだ話

結論から話すと、デフォルトで入れられているApple iOS UIというUIライブラリをインストールすることでもろもろ解決された。 パソコンを変えたのでSketchを入れ直してファイルを開こうとしたら The document “xxx.sketch” could not be opened. が表示され、特にエラー内容も出ない状態で悩んでいた。 SketchTalkでもいるっぽい。 自分が作成したファイルは、プラグインもコミコミだったのでそこらへんかなと思い、プラグイ

あるあるデザインの作例からのデザイン練習-5

あるあるデザインの「さんかく散らす」をモチーフに仮のデザインを組み立てる このパターンの気づきとしてシリアスなトーンよりは、動きをつけているのでアクティブなイメージであったり明るい雰囲気を出すパターンに向いてると感じた。 作例を見てもパステルカラーの例が多く、女性的なプロダクトやアパレル系のグラフィックなどで利用できそうだと感じた。

あるあるデザインの作例からのデザイン練習-4

あるあるデザインの「左から4分の1の法則」をモチーフに仮のデザインを組み立てる このパターンの気づきとして、左側に配置する色は概ね写真と同型のコンラストでないと帯にかける文字などのコントラストを邪魔するので写真選びが重要そうだった。 夜空の写真を選んだため赤帯側は少し科学雑誌要素を、青帯の方は、わくわく感がでるようにパターンを分けた。

あるあるデザインの作例からのデザイン練習-3

あるあるデザインの「太枠にいれてみる」をモチーフに仮のデザインを組み立てる 1,2は縦だったので横バージョンで作成 枠を作ると、画面が広く感じられる気がする。単に画像の上に文字を置く以外の楽しみも増えバリエーションが増えるパターンの1つに感じた。 ブロークングリッドが流行り始め、画像からあえて文字を出すパターンも増えたことによりモダンなイメージも与えられる。