UI/UXデザイナー うっくん
マガジン
記事一覧
UIデザイナーがSwiftを学んでUIを実装したら生産性が爆上がりした
まいど〜。dely株式会社（レシピ動画アプリ「クラシル」を作っている会社）でUIデザイナーをしているうっくんです。 この記事は毎年恒例の「dely #1 Advent Calendar 2020…
Figmaのオートレイアウトを完全に理解した話
どーもーUI/UXデザイナーのうっくんです。
ちょっと前にFigmaにオートレイアウトという機能が追加されました。
最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。
オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイ
GitHub Pages でReact Appを公開する方法
背景2019年ごろより、自身のPorfolio兼自己紹介用のWebページとして、GitHub Pagesという仕組みを使って無料でWebサイトをホスティングすることを行なっています。
2022年ごろにはさらに一歩踏みこんで、Reactで作ったSPAをGithub Pagesの仕組みを使ってホスティングするようにしていました。こうすることで↑で紹介しているような静的ページ（いわゆる「ペライチ」）で
プロトタイプのすすめ
この記事は、私がフリーランスのUIデザイナーとして複数の企業様や個人の方々にプロトタイピングについて聞かれることがあり、有料にてアドバイスさせていただいている内容を一般化して記事にしたものです。
Webサービスやアプリのアイデアは思いついたけど、自分はデザイナーではないので、どうすれば良いかわからない。
プロトタイプは作った方がいいと思うんだけど、どのように作れば良いかわからない。
そもそも
ImageMagickとAutomator を使ってPNGのアルファチャネルを一括除去する方法
What?このnoteではImageMagickというコマンドライン向け画像加工ツールと、AutomatorというMac向けオートメーションツールを組み合わせて、png画像からアルファチャネル（png画像内のピクセルの透明度を司るレイヤーのようなもの）を取り除く方法を紹介します
Why?iOSアプリをApp Storeに提出する際に、Images can't contain alpha chan
UIデザイナーがSwiftを学んでUIを実装したら生産性が爆上がりした
まいど〜。dely株式会社（レシピ動画アプリ「クラシル」を作っている会社）でUIデザイナーをしているうっくんです。
この記事は毎年恒例の「dely #1 Advent Calendar 2020」の10日目の記事です。やっていくぜ！ウェイウェイ！（今年入社したので、まだノリがわかっていない）
昨日はnozaさんの良いレシピ検索体験とは？"選ばれた"を考えた話でした！
nozaさんはAndro
【動画で解説】Figmaの使い方
最近、Periscopeの生配信でFigmaなどツールの説明をするのにハマっています。
自分の場合、最初にツールをざっくり覚えるときは動画がわかりやすいので利用するのですが、英語の配信者が多いので日本語でやったら良いんじゃないかと思いやっています。
それらの生配信動画を集めておきます。
決定版長いですが、これだけ見れば基本は完璧というやつ
Frameの使い方Auto Layoutの使い方A
ProtoPieで作る本格プロトタイプ作品７選！
以前、ProtoPieというプロトタイピングツールを紹介しました。
Figmaに関するnoteと比べて反響が弱かったので、今回は少し違ったアプローチでnoteを書いてみようと思います。
Figmaと比べて利用人口が少ない上に、ツールの特性上、Figmaより流行る可能性はほぼ０なので、ProtoPieの使い方を説明するより「こんなことできるんだぜ」っていう内容の方が良いのではと思いました。
と
Figmaのconstraints徹底解説
どうもーUI/UXデザイナーのうっくんです。
以前、Figmaのgroupとframeの違いについて書いた記事が評判でした。
そこではサラッとしか説明しなかったのですが、つまづく人も多そうなので、今回はconstraintsについて解説してみようと思います。
constraintsとは
「constraintsってなんやねん。日本語でおk」と思いますよね。安心してください。そういう方の為に
コンポーネントの使い方 - 応用編
前回の記事の続きです。
今回は、応用編なので「コンポーネントが使える」から「コンポーネントを使いこなせる」までレベルアップする人のための内容にしていきたいと思います。
それでは早速!
インスタンスを切り離すコンポーネントを一度作ったら二度と変更しないと言うことはほぼあり得なくて、細かい変更を繰り返しながら実用的なコンポーネントを定義していくと言うのが基本的なワークフローになると思います。
コンポーネントの使い方 - 基礎編
まいど〜UI/UXデザイナーのうっくんです。
Figma関連のハウツー記事の評判がとても良いので今回もFigmaの使い方をレクチャーしていきます。
今回はおそらく多くのひとがつまづくコンポーネントについて。
この機能は奥が深いので、基礎編と応用編にわけて進めていきたいと思います。
コンポーネントってなに？超簡単に説明すると、コンポーネントとはデザインの一部を使い回し可能な部品としてまとめて
令和のデザイナーは速さが命！Figmaで多用するショートカット
どうもー、UI/UXデザイナーのうっくんです。そういえば、まだnoteでは発表していませんでしたが、去年末で某自動車メーカーを退職して、今年からはクラシルというレシピ動画サービスの会社でUI/UXデザイナーをやっています！
よろしくです！
昨今、スマホアプリが日常的なものとなり、アプリを作るUIデザイナー（やプログラマー）の仕事がどんどん一般的になってきているのを感じています。「デザインをみん
Figmaのframeとgroupの違い
前回のFigmaに関するnoteがバズったので調子に乗ってまたFigma関連の記事を書きたいと思います。
前回の記事↓
私がSketchからFigmaに切り替えた時に最初に「ファッ？」ってなったのが、frame(フレーム)とgroup(グループ)の違いです。
みなさん、なんとなくでやってませんか？
実は似て非なる機能を持つ、frameとgroup。今回はこの二つの違いについて徹底的に解説して
Glide Appsを使って、本格的なアプリを10分で作る方法！
はいどうも〜UI/UXデザイナーのうっくんです。
メリークリスマス！！🎄
今回はGlide Apps という無料ツールを使って、自分用の簡単なアプリ（PWA = Progressive Web App）を作る方法を紹介したいと思います。
PWA とはプログレッシブWebアプリケーションは、Webを通じて配信されるアプリケーションソフトウェアの一種で、HTML、CSS、JavaScriptな