UI/UXデザイナー うっくん

大阪弁トランスレーター UI・UX designer。某自動車メーカーでUIデザイナーをしていました。現在はdely株式会社で新規事業のUI/UXデザインを担当しています。

UI/UXデザイナー うっくん

大阪弁トランスレーター UI・UX designer。某自動車メーカーでUIデザイナーをしていました。現在はdely株式会社で新規事業のUI/UXデザインを担当しています。

    マガジン

    最近の記事

    固定された記事

    Figmaのオートレイアウトを完全に理解した話

    どーもーUI/UXデザイナーのうっくんです。  ちょっと前にFigmaにオートレイアウトという機能が追加されました。 最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。 オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイズしなおさないといけなかった。めんどくさいので、プラグインなどを使っている人が多

    スキ
    481
      • ImageMagickとAutomator を使ってPNGのアルファチャネルを一括除去する方法

        WhatこのnoteではImageMagickというコマンドライン向け画像加工ツールと、AutomatorというMac向けオートメーションツールを組み合わせて、png画像からアルファチャネル(png画像内のピクセルの透明度を司るレイヤーのようなもの)を取り除く方法を紹介します Why?iOSアプリをApp Storeに提出する際に、Images can't contain alpha channel or transparency  というエラーで怒られるケースがあります。

        スキ
        2
        • UIデザイナーがSwiftを学んでUIを実装したら生産性が爆上がりした

          まいど〜。dely株式会社(レシピ動画アプリ「クラシル」を作っている会社)でUIデザイナーをしているうっくんです。 この記事は毎年恒例の「dely #1 Advent Calendar 2020」の10日目の記事です。やっていくぜ!ウェイウェイ!(今年入社したので、まだノリがわかっていない) 昨日はnozaさんの良いレシピ検索体験とは?"選ばれた"を考えた話でした! nozaさんはAndroidやiOS、Webフロント・バックエンドなどなんでもこなせるマルチなエンジニア

          スキ
          166
          • 【動画で解説】Figmaの使い方

            最近、Periscopeの生配信でFigmaなどツールの説明をするのにハマっています。 自分の場合、最初にツールをざっくり覚えるときは動画がわかりやすいので利用するのですが、英語の配信者が多いので日本語でやったら良いんじゃないかと思いやっています。 それらの生配信動画を集めておきます。 決定版長いですが、これだけ見れば基本は完璧というやつ Frameの使い方Auto Layoutの使い方AutoLayoutがかなり進化しました!!Auto Layout2.0(勝手に命

            スキ
            17

          マガジン

          マガジンをすべて見る

          記事

          記事をすべて見る
            • ProtoPieで作る本格プロトタイプ作品7選!

              以前、ProtoPieというプロトタイピングツールを紹介しました。 Figmaに関するnoteと比べて反響が弱かったので、今回は少し違ったアプローチでnoteを書いてみようと思います。 Figmaと比べて利用人口が少ない上に、ツールの特性上、Figmaより流行る可能性はほぼ0なので、ProtoPieの使い方を説明するより「こんなことできるんだぜ」っていう内容の方が良いのではと思いました。 と、ツイートすると結構いいねももらえたので、確かに需要ありそう。 それでは1つ目

              スキ
              143
              • Figmaのconstraints徹底解説

                どうもーUI/UXデザイナーのうっくんです。 以前、Figmaのgroupとframeの違いについて書いた記事が評判でした。 そこではサラッとしか説明しなかったのですが、つまづく人も多そうなので、今回はconstraintsについて解説してみようと思います。 constraintsとは 「constraintsってなんやねん。日本語でおk」と思いますよね。安心してください。そういう方の為にこのnoteはあります。 constraints=制約。とは、frame(外枠

                スキ
                143
                • コンポーネントの使い方 - 応用編

                  前回の記事の続きです。 今回は、応用編なので「コンポーネントが使える」から「コンポーネントを使いこなせる」までレベルアップする人のための内容にしていきたいと思います。 それでは早速! インスタンスを切り離すコンポーネントを一度作ったら二度と変更しないと言うことはほぼあり得なくて、細かい変更を繰り返しながら実用的なコンポーネントを定義していくと言うのが基本的なワークフローになると思います。 そこで、「インスタンスを切り離す(Detach Instance)」と言う操作が

                  スキ
                  27
                  • コンポーネントの使い方 - 基礎編

                    まいど〜UI/UXデザイナーのうっくんです。 Figma関連のハウツー記事の評判がとても良いので今回もFigmaの使い方をレクチャーしていきます。 今回はおそらく多くのひとがつまづくコンポーネントについて。 この機能は奥が深いので、基礎編と応用編にわけて進めていきたいと思います。 コンポーネントってなに?超簡単に説明すると、コンポーネントとはデザインの一部を使い回し可能な部品としてまとめておくための機能です。 コンポーネントを使うと何がいいの?デザインファイルを複数

                    スキ
                    82
                    • 令和のデザイナーは速さが命!Figmaで多用するショートカット

                      どうもー、UI/UXデザイナーのうっくんです。そういえば、まだnoteでは発表していませんでしたが、去年末で某自動車メーカーを退職して、今年からはクラシルというレシピ動画サービスの会社でUI/UXデザイナーをやっています! よろしくです! 昨今、スマホアプリが日常的なものとなり、アプリを作るUIデザイナー(やプログラマー)の仕事がどんどん一般的になってきているのを感じています。「デザインをみんなのものにする」というコンセプトを掲げるFigmaが受け入れられているのもそうい

                      スキ
                      39
                      • Figmaのframeとgroupの違い

                        前回のFigmaに関するnoteがバズったので調子に乗ってまたFigma関連の記事を書きたいと思います。 前回の記事↓ 私がSketchからFigmaに切り替えた時に最初に「ファッ?」ってなったのが、frame(フレーム)とgroup(グループ)の違いです。 みなさん、なんとなくでやってませんか? 実は似て非なる機能を持つ、frameとgroup。今回はこの二つの違いについて徹底的に解説していきます。 groupとはgroupはその名の通りレイヤーをグルーピングしたも

                        スキ
                        229
                        • 【後半】ProtoPieでMVCに挑戦!(後編)

                          前編はこちら。 前編を読んで、それでもProtoPieで作ろうと考えている場合、おそらくある程度複雑なものを作ろとしていると思われます(笑) MVCを意識しようそこで重要になってくるのが、MVCです。序盤で説明した通り、MVCというのは(大まかに言うと)ロジック部分と表示部分の実装を切り離そうという考え方なので、それを意識していないとProtoPieでは、プロトタイプの構造が非常に複雑になって変更や追加が難しくなります。(ほぼプログラムを書いて実装してる状態に近くなってき

                          スキ
                          2
                          • ProtoPieでUIプロトタイピングするときのコツ&なんちゃってMVCに挑戦!(前編)

                            最近ProtoPieというUIプロトタイピングツールにハマっています。 ProtoPieについては過去に記事を書いているので、そちらもご覧ください。 最近流行のUIデザインツールである、Adobe XDやFigmaに追加されているオートアニメーション系のプロトタイピング機能を用いればアニメーションや画面遷移の確認はとても簡単にできるようになりました。 Adobe XDの「自動アニメーション」。状態AとBという、2つの画面間でオブジェクトの変化を自動検出して、その画面遷移

                            スキ
                            6
                            • Glide Appsを使って、本格的なアプリを10分で作る方法!

                              はいどうも〜UI/UXデザイナーのうっくんです。 メリークリスマス!!🎄 今回はGlide Apps という無料ツールを使って、自分用の簡単なアプリ(PWA = Progressive Web App)を作る方法を紹介したいと思います。 PWA とはプログレッシブWebアプリケーションは、Webを通じて配信されるアプリケーションソフトウェアの一種で、HTML、CSS、JavaScriptなどの一般的なWebテクノロジーを使用して構築されます。これらは、標準に準拠したブラ

                              スキ
                              227
                              • メディアクエリを使ってOSのダークモード設定を取得する方法

                                はいどうもーUIデザイナーのうっくんです。 以前CSSとjQueryを使って簡単にウェブサイトをダークモードに対応する方法をご紹介しました。 もうすぐ公開されるであろうiOS13ではOSレベルでダークモードがサポートされることもあり、せっかくなのでOSの設定に応じてウェブサイトもダークやライトの変更ができればより良いかと思います。 実はCSSのメディアクエリという書き方を使ってOSのダークモードに応じたCSSの条件分岐が可能なようです。 書き方はこちら。 @medi

                                スキ
                                4
                                • クリックした画像を全画面表示するJavaScript

                                  はいどうも〜UI/UXデザイナーのうっくんです。 今回は、以前よりやりたいと思っていた、「ウェブサイトで、クリックされた画像をなんでもかんでも全画面表示にするJavaScriptのご紹介です。 最初はなんとなく、クリックされた要素がimgだったらそいつに特別なCSSクラスをつけて、全画面表示になるように予めCSS書いとけばええんちゃん? と思っていたのですが、これが案外うまく行かなくて結局StackOverflowで見つけたJavaScriptのソリューションに頼ること

                                  スキ
                                  5
                                  • SwiftUI チュートリアルをやってみた

                                    はいどうも〜うっくんで〜〜〜〜す!!! SwiftUIチュートリアルをやってみました!紹介します。 本家はこちら。英語を読める方は公式でも全然OKです。 SwiftUIとは "SwiftUIゆうたら、ぎょうさんあるAppleプラットフォームぜ〜んぶで使える、UIをメッサ早く作れる新しいやり方や。しかもコードがキレイで、ブワーっちゅう感じやねん。" (Apple公式サイトより筆者が大阪弁に翻訳) 大変わかりやすいですね。Appleさんありがとうございます。 これまで

                                    スキ
                                    43