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

大阪弁トランスレーター UI・UX designer。某自動車メーカーでUIデザイナー…

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

大阪弁トランスレーター UI・UX designer。某自動車メーカーでUIデザイナーをしていました。dely株式会社を経て、現在は小売系企業でDX関連の担当をしています。
  • 固定された記事

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

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

UI/UXデザイナー …

    • GitHub Pages でReact Appを公開する方法

      背景2019年ごろより、自身のPorfolio兼自己紹介用のWebページとして、GitHub Pagesという仕組みを使って無料でWebサイトをホスティングすることを行なっています。 2022年ごろにはさらに一歩踏みこんで、Reactで作ったSPAをGithub Pagesの仕組みを使ってホスティングするようにしていました。こうすることで↑で紹介しているような静的ページ（いわゆる「ペライチ」）ではなく、複数のページをリンクして本格的なアプリケーションを無料で公開できるという

      UI/UXデザイナー …

      • プロトタイプのすすめ

        この記事は、私がフリーランスのUIデザイナーとして複数の企業様や個人の方々にプロトタイピングについて聞かれることがあり、有料にてアドバイスさせていただいている内容を一般化して記事にしたものです。 Webサービスやアプリのアイデアは思いついたけど、自分はデザイナーではないので、どうすれば良いかわからない。 プロトタイプは作った方がいいと思うんだけど、どのように作れば良いかわからない。 そもそも作るべきなのかわからない。なんとなく不安だけどやっぱり作った方がいいの？ のよ

        ¥5,000
        UI/UXデザイナー …

        • 【衝撃】AdobeがFigmaを2.8兆円で買収しました

          2024/02/07 現在、独占禁止法に関連する事情により、買収が中止されたようです。以下投稿時の内容です↓ 衝撃の2兆円以上の巨額買収昨日、とんでもないニュースが飛び込んで来ました。 なんと、Photoshopなどのクリエイター向けツールを提供することでお馴染みのAdobe社が、このnoteでも大人気のデザインツールFigmaを開発するFigma社を200億ドル（約2.8兆円)で買収したということです！ 2016年にソフトバンクがマイクロチップの製造大手であるARM社を

          UI/UXデザイナー …
        • 固定された記事

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

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

        マガジン

        • Figma
          7本
        • ProtoPie
          4本

        記事

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

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

          UI/UXデザイナー …

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

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

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

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

          UI/UXデザイナー …

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

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

          【動画で解説】Figmaの使い方

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

          UI/UXデザイナー …

          【動画で解説】Figmaの使い方

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

          ProtoPieで作る本格プロトタイプ作品７選！

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

          UI/UXデザイナー …

          ProtoPieで作る本格プロトタイプ作品７選！

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

          Figmaのconstraints徹底解説

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

          UI/UXデザイナー …

          Figmaのconstraints徹底解説

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

          コンポーネントの使い方 - 応用編

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

          UI/UXデザイナー …

          コンポーネントの使い方 - 応用編

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

          コンポーネントの使い方 - 基礎編

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

          UI/UXデザイナー …

          コンポーネントの使い方 - 基礎編

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

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

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

          UI/UXデザイナー …

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

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

          Figmaのframeとgroupの違い

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

          UI/UXデザイナー …

          Figmaのframeとgroupの違い

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

          【後半】ProtoPieでMVCに挑戦！（後編）

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

          UI/UXデザイナー …

          【後半】ProtoPieでMVCに挑戦！（後編）

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

          ProtoPieでUIプロトタイピングするときのコツ＆なんちゃってMVCに挑戦！（前編）

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

          UI/UXデザイナー …

          ProtoPieでUIプロトタイピングするときのコツ＆なんちゃってMVCに挑戦！（前編）

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

          Glide Appsを使って、本格的なアプリを10分で作る方法！

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

          UI/UXデザイナー …

          Glide Appsを使って、本格的なアプリを10分で作る方法！

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