minetti

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

minetti

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

    最近の記事

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

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

    スキ
    11
      • 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><

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

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

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

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

            スキ
            4
            • positionとoverflow hiddenを併用する際の注意点

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

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

                  スキ
                  4
                  2年前
                  • Figmaのプロトタイプでポップアップを作る

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

                    スキ
                    10
                    • Figmaの円ツールのarc/ratio機能で遊ぶ

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

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

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

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

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

                          スキ
                          2
                          • Sketchで"could not be opened"がでて悩んだ話

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

                            スキ
                            4
                            • あるあるデザインの作例からのデザイン練習-5

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

                              スキ
                              1
                              • あるあるデザインの作例からのデザイン練習-4

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

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

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

                                  スキ
                                  1
                                  • あるあるデザインの作例からのデザイン練習-2

                                    あるあるデザインの「丸インパクト」をモチーフに仮のデザインを組み立てる 所要時間:1時間 前回よりもバリエーションを意識して作成した。 中心の画像に対して文字を入れたパターンは丸インパクトらしい使い方ができたはず。 いっぽうで、中心に何かを置いたパターンでもっと画像の良さを引き出せると良かった。 前回の2トーンのバリエーションもいれればよかったなぁ。。

                                    スキ
                                    2
                                    • あるあるデザインの作例からのデザイン練習

                                      あるあるデザインという本が安くなっていたので購入。 最初の「だいたいツートーンでいける」をモチーフに仮のデザインを組み立てる 所要時間:1時間 オレンジバックの強い背景と黒い文字でやや警戒色ながらも少しトーンの落ち着いたオレンジなのでカバーできている気がする。 左上の強いアールをフックに靴を見てもらいやすくして、そのあとタイトルと日程が見れるなどの流れ。 やや、視線誘導が荒っぽかった。 バリエーションをもっと素早く増やせると良い。

                                      スキ
                                      1