りょーた ❖ DESIGN engineer

フロントエンドエンジニア兼デザイナー 神戸デジタルラボ→株式会社ニュートラル→フリーランス ペンギンのイラスト描いてます(instagram.com/ryotanny/)

りょーた ❖ DESIGN engineer

フロントエンドエンジニア兼デザイナー 神戸デジタルラボ→株式会社ニュートラル→フリーランス ペンギンのイラスト描いてます(instagram.com/ryotanny/)

ストア

  • 商品の画像

    スマホとペンギンの壁紙(スマートフォン用)

    【ダウンロード販売】「飛ばないペンギン」という名前でペンギンのイラストを描いています。 じーっとスマホを見てるペンギンの壁紙を作りました! スマートフォンにご利用いただけます。
    300円
    飛ばないペンギン
  • 商品の画像

    スマホとペンギンの壁紙(デスクトップ用)

    【ダウンロード販売】「飛ばないペンギン」という名前でペンギンのイラストを描いています。 じーっとスマホを見てるペンギンの壁紙を作りました! デスクトップにご利用いただけます。
    300円
    飛ばないペンギン
  • 商品の画像

    新生活ワクワクのペンギンの壁紙(デスクトップ用)

    【ダウンロード販売】「飛ばないペンギン」という名前でペンギンのイラストを描いています。 春の新生活らしいペンギンの壁紙を作りました! デスクトップにご利用いただけます。 ぜひ、あなたのPCで新生活を迎えましょう!!
    300円
    飛ばないペンギン
  • 商品の画像

    スマホとペンギンの壁紙(スマートフォン用)

    【ダウンロード販売】「飛ばないペンギン」という名前でペンギンのイラストを描いています。 じーっとスマホを見てるペンギンの壁紙を作りました! スマートフォンにご利用いただけます。
    300円
    飛ばないペンギン
  • 商品の画像

    スマホとペンギンの壁紙(デスクトップ用)

    【ダウンロード販売】「飛ばないペンギン」という名前でペンギンのイラストを描いています。 じーっとスマホを見てるペンギンの壁紙を作りました! デスクトップにご利用いただけます。
    300円
    飛ばないペンギン
  • 商品の画像

    新生活ワクワクのペンギンの壁紙(デスクトップ用)

    【ダウンロード販売】「飛ばないペンギン」という名前でペンギンのイラストを描いています。 春の新生活らしいペンギンの壁紙を作りました! デスクトップにご利用いただけます。 ぜひ、あなたのPCで新生活を迎えましょう!!
    300円
    飛ばないペンギン
  • もっとみる

最近の記事

  • 固定された記事

【誰でもできる】Figmaで画面遷移図をautoflowなしに作るテクニック

デザインエンジニアのりょーたです。 突然ですが、皆さんは画面遷移を表す際に、どうしていますか? よくデザイナーさんに聞くと「Autoflow」を使うといいよ!と教えてくれます。(関係ないけどOGPがアニメーションなってるのすご) 私はWebデザインで画面遷移を示す際に使っていましたが、使っていて不便だと思う点がいくつかありました。 例えば Autoflowの不便な点①:プラグインを起動していないと矢印が追従してくれない Autoflowの不便な点②:テキストが操作し

    • Figmaでプラグイン「FigTodo」を公開しました🚀

      デザインエンジニアのりょーたです。 今回は、Figmaのプラグイン「FigTodo」を初めて実装・公開したので、プラグインを作成するに至った経緯や、開発におけるナレッジについて紹介したいと思います。 リリースメモ: 6月15日にv2を公開しました。 UIを大幅に改善しています。 拡散やコメントも大歓迎です!Xでコメントしていただく際は「#FigTodo」とハッシュタグをつけてポストしていただければリアクションします! プラグイン「FigTodo」をなぜ作ったかFigT

      • PWAインストールの体験を向上させるTips

        デザインエンジニアのりょーたです。 突然ですが、皆さんはPWAをご存知でしょうか? PWAは、Progressive Web Applicationの略称で、ウェブアプリケーションでありながら、ネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。 最近、TimeShareというウェブアプリケーションを作成したのですが、その際に「PWAをインストールする」体験の低さを感じたため、取り組んだ内容について書こうかと思います。 PWAに興味がある 導入したけど、

        • 【デザイナー・エンジニア向け】2023年導入して魅力的だったソフトウェア10選

          今年も早くも12月になり、残りわずかとなりました。 色々な振り返りをする時期かと思いますが、今年は例年にも増して色々なアプリ、ツールを導入して今では重宝しているものが多かったので、まとめようかと思います。 なお、今回紹介するソフトウェアの多くは後で紹介するSetappというアプリを通してインストールしています。この記事は、各ソフトウェアの魅力を紹介をしつつも、「Setappはいいぞ」という裏テーマもあります笑 最後に招待リンクを貼っておくので、もし気になった方はご覧くださ

        • 固定された記事

        【誰でもできる】Figmaで画面遷移図をautoflowなしに作るテクニック

          つながる勉強会を終えて

          タイトルにもあるように、2021年1月より計21回にわたって開催したつながる勉強会を、2023年9月で終了しました。勉強会に参加いただいた皆様、本当にありがとうございました! また、これまで運営に関わってくださった、ゆーたろーさん、ユウトさん、uたそさん、ジョイさん、なるおさん、本当にありがとうございました🙇‍♂️ 立ち上げ期から最後まで運営に携わっていたので、本記事では 勉強会の運営に至った経緯 勉強会を開催して良かった点 勉強会を終了した理由 コミュニティ運営か

          つながる勉強会を終えて

          デザインとエンジニアリングの両立の価値

          デザイン≧エンジニアリングになってきたりょーたです。 株式会社ニュートラルでMusubiteのデザインとフロントエンド領域の責任者をしているほか、副業でデザイナーとしてネイティブアプリのデザインを行なっています。 最近気づきがあったので、忘れないうちに書いておこうかと思います。 ◎体験 非IT企業に就職した大学の友人と話す機会があり、「社内ツールを作る場合、〇〇の機能を作るのってエンジニア目線でたいへん?」という質問を受けた。 その際に、「作るのは難しくなさそうだけど

          デザインとエンジニアリングの両立の価値

          キャリアのJカーブ

          株式会社ニュートラルでCDOをしています、りょーたです。 最近Youtubeで動画を見て、これまでのキャリアについて良い気づきを得たので、入社して半年たった今、振り返りも兼ねて書き残したいと思います。 ↓ 視聴した動画はこちら 私のこれまでのキャリアを記載しておきます 守破離を意識する 動画を見て強く印象に残ったのは、「守破離」という言葉です。 「守破離」と言う考え方は初めて知ったのですが、今後のキャリアを考える上でとても良い指標になりますし、仕事を行う上で型として

          キャリアのJカーブ

          最適なOGP画像を作るためにFigmaでコンポーネントを作った

          皆さんは自身のメディアやポートフォリオ、サービスはお持ちでしょうか? お持ちの方の中には、OGP画像について以下のような悩みを持った方は少なくないはずです。 🫠「埋め込み先のメディアによってプレビューに表示されるOGP画像のアスペクト比がバラバラなのに、1枚しか用意できないのマジ困る…」 私もまさに、その中の一人でした。 弊社サービスのMusubiteのOGP画像を用意するにあたり、マストで表示させたい情報があったのですが、メディアによって情報が切れてしまうという事象があ

          最適なOGP画像を作るためにFigmaでコンポーネントを作った

          ランチャーツールをRaycastに変えました

          早起きしたので気分良く記事を書いているりょーたです。 最近、生産性に関わるツールを置き換えたので、感想をつらつらと書いていきたいと思います。特に課題感は感じてないけど読んでやるか、という方がいましたら幸いです。 タイトルにもあるとおり、ランチャーツールをalfred(powerpack) → raycastに変えました。 余談ですが、AI機能も開発中とのことなので、かなり楽しみなところ👀 Raycastのよかったところ raycastを使い始めて2週間ほどなのですが

          ランチャーツールをRaycastに変えました

          テキストにグラデーションのアニメーションを加える

          CSSが好きなりょーたです。 今回は、ポートフォリオで実装しているテキストのグラデーションを使ったアニメーションの実装方法を紹介します。 実際の成果物は以下をご覧ください。 これを見て既視感を感じた方はおそらくAmazon Prime Videoを使っている方でしょうか??笑 本家はおそらくアニメーションを作って埋め込んでいるのだと思うのですが、今回は、HTMLとCSSでやってみました。 アニメーションの色やスピードは自由に設定できますので、ご自由にお試しくださいね!😜

          テキストにグラデーションのアニメーションを加える

          ChatGPTにGraphQLの学習ロードマップを相談してみた

          と、noteのAIアシスタント(β)に書き出しを考えてもらった、りょーたです。 これまで「GraphQLの勉強を始めよう」とn度目かの思い立ちをしたのですが、毎回忘れてしまう癖がついていたので、今回はChatGPT先生に学習の進め方を聞いてみたところ、かなり参考になる話ができたので、記録として残したいと思います。 1. 自分の状況を伝える改行しようと思ってEnterを間違えて押して、途中でプロンプトが終わってしまったのですが、先生は意図を汲んで、 GraphQLを学習す

          ChatGPTにGraphQLの学習ロードマップを相談してみた

          【Portfolio】RSSで取得した記事データを表示する

          こんにちは、今年もお花見をしていないりょーたです。 まだ夜は寒いですね🥶 今回は、自分のポートフォリオに、RSS経由で取得した note Qiita Zenn の記事リンクの一覧を表示するようにしたので、そちらについてまとめたいと思います。 ↓実際のページはこちら やりたかったこと私は普段、先ほどあげた3つのメディアで記事(ブログ)をあげているのですが、折角なのでこの情報をポートフォリオ内で集約して表示したいと考えました。 CMSを用いて、記事を作成するたびに

          【Portfolio】RSSで取得した記事データを表示する

          【Musubite】トークテーマの改善を行いました

          こんにちは、りょーたです。 株式会社ニュートラルでデザインエンジニアをしています。 今回は、弊社のプロダクトMusubiteのUI改善と、それに伴うUX向上についてのお話第3弾です。 1つ目の記事はこちら 👉「ドロップダウンのUX改善を行いました」 https://note.com/ryotanny/n/n8fbe24230ae7 2つ目の記事はこちら 👉「チャットのUX改善を行いました💬」 https://note.com/ryotanny/n/n95b164ba38

          【Musubite】トークテーマの改善を行いました

          【Musubite】チャットのUX改善を行いました💬

          暖かくなってアウターを変えたら夜が意外と寒くて震えがちなりょーたです。 株式会社ニュートラルでデザインエンジニアをしています。 今回は、弊社のプロダクトMusubiteのUI改善と、それに伴うUX向上についてのお話第2弾です。 1つ目の記事はこちら 👉「ドロップダウンのUX改善を行いました」 改善箇所今回改善した箇所は、企業の中のエンジニアとのチャット画面です。 Musubiteにおけるチャットは、もちろん雑談としての利用もあるかと思いますが、 初めましてのアイスブレ

          【Musubite】チャットのUX改善を行いました💬

          【Musubite】ドロップダウンのUX改善を行いました

          暖かくなって嬉しい反面、花粉が辛くなってきましたね🤧 株式会社ニュートラルでデザインエンジニアをしています。 今回は、弊社のプロダクトMusubiteのUI改善と、それに伴うUX向上についてのお話をします。 改善箇所今回修正したのは、検索フォームや、ユーザー情報の入力フォームのドロップダウンです。 修正前は、ユーザーの入力値によってフィルターされた候補を選ぼうとすると、クリック(タップ)するアクションが必要でした。 もし、そのアクションを行わなかった場合、その入力内容は

          【Musubite】ドロップダウンのUX改善を行いました

          MVPリリースに向けて2ヶ月間取り組んだ内容の振り返り

          こんにちは。2023年1月より株式会社ニュートラルでデザインエンジニアをしております、りょーたです。 この度、Musubite(読み方:むすびて)というサービスをMVPでリリースしました👏👏👏 一旦の区切りとして、ジョインしてからの約2ヶ月を振り返りをしたいと思います。 役割私は1人目デザイナー&1人目フロントエンドエンジニアとして、以下を担当していました。 モックやグラフィックの作成 フロントエンド開発全般 前職はSIerでフロントエンドエンジニアをしており、フロ

          MVPリリースに向けて2ヶ月間取り組んだ内容の振り返り