yuh

シキラボのデザイナー、yuh（ユウ）です。UIをメインにイラスト制作も少し。趣味はゲー…

yuh

シキラボのデザイナー、yuh（ユウ）です。UIをメインにイラスト制作も少し。趣味はゲームと絵を描くこと！ 関わったお仕事の話やツールの紹介等、デザインに関することを書けて行けたらいいなと思っています。よろしくお願いします。

  • シキラボ開発部

    • 18本

    開発部のメンバーの記事をまとめています。是非ご覧ください！

【Adobe XD】飾り枠素材の作成③

こんにちは、シキラボのデザイナーyuhです。 前回に引き続き、飾り枠素材について書いていきます。 飾り枠シリーズ最終回として、各辺の中央にパーツがあるデザインのものを作成してみます。 素材を用意するまずは元になる各パーツ素材を作成します。 Illustratorで枠を作成し、切り分けたパーツをXDへ。 パーツのサイズに小数点が入らないよう、キリの良い数値にしましょう。 枠全体が8の倍数ならパーツも8の倍数で揃えると扱いやすいです。 各パーツをコンポーネント化します。 中央

yuh

    • 【Adobe XD】飾り枠素材の作成②

      こんにちは、シキラボのデザイナーyuhです。 前回に引き続き、飾り枠の作成方法について書いていきます。 今回作成するものはこちら。 ラインがパターンになっている枠の作成方法についてです。 以前紹介した内容を前提にしているので、まだ読んでいない方は こちらをチェックしてみて下さい！ 素材を用意する 最初に枠の素材を作成します。 角と縦横のライン、計3つのパーツを用意して、 Illustratorで作成してXDへ持っていきます。 各パーツをコンポーネント化したら、 前回と同

      yuh

      • 【Adobe XD】飾り枠素材の作成①

        こんにちは、シキラボのデザイナーyuhです。 前回の記事ではリピートグリッドの便利なポイントを紹介しました。 今回は、自由にサイズ変更ができる飾り枠素材を作成してみたので、その方法を紹介します。 素材を用意する まずは飾り枠の元になる素材を用意します。 枠の角部分と、縦横のラインの中央のパス素材、計3つです。 Illustratorで作成し、コピー＆ペーストで持ってきました。 角とラインの2つの素材で十分だと思うかもしれませんが、これには理由があります。それは後ほど説明

        yuh

        • 【Adobe XD】リピートグリッドが便利だと感じるポイント3選

          こんにちは、シキラボのデザイナーyuhです。 前回の記事ではスタックの使い方を紹介しました。 今回はAdobe XDでも基本的な機能の1つであるリピートグリッドについての基本と、便利だと思う個人的なポイントなどを書いていきたいと思います。 基本的な使い方リピートグリッドとは、同じデザインを素早く繰り返し配置することが出来る機能です。 ブログの記事一覧など、同じ構成要素が繰り返されるレイアウトはよくありますよね。そのようなデザインの作成にとても重宝します。 1.複数配置し

          yuh

        【Adobe XD】飾り枠素材の作成③

        yuh

        • 【Adobe XD】飾り枠素材の作成②

          yuh

        • 【Adobe XD】飾り枠素材の作成①

          yuh

        • 【Adobe XD】リピートグリッドが便利だと感じるポイント3選

          yuh

        マガジン

        • シキラボ開発部
          18本

        記事

          【AdobeXD】スタック機能の活用方法と小ワザ

          こんにちは、シキラボのデザイナーyuhです。 前回の記事ではパディングの使い方を紹介しました。 今回は、Adobe XDのスタック機能とその活用方法、 ちょっとした小ワザについて書いていきたいと思います。 スタック スタックは、グループ内のオブジェクト同士の余白を指定する機能です。 コーディングで言うところのマージンが近いですね。 要素と要素の間の余白を、それぞれ個別に設定できます。 使い方は、 1.スタックを適応したいオブジェクトをグループ化 2.グループに対して「

          yuh

          【AdobeXD】スタック機能の活用方法と小ワザ

          yuh

          【AdobeXD】パディングを応用したコンポーネント作成

          こんにちは、シキラボのデザイナーでXD大好きなyuhです。 今回は、Adobe XDのパディング機能を使用したコンポーネント作成について書いていきたいと思います。 パディング パディングは、グループ内の周囲の余白を固定する機能です。 この機能をオンにすると、グループ内の要素の大きさに変化が起きても、 固定した数値の幅の余白を常に保ってくれます。 ボタンやカード等、中のコンテンツに合わせて 背景の大きさを自動で変更して欲しい時に便利です。 パディングをオンにした際に余白

          yuh

          【AdobeXD】パディングを応用したコンポーネント作成

          yuh

          識学クラウドのUI　-デザイン改修-

          こんにちは、シキラボのデザイナーyuhです。 今回は担当した識学クラウドのUI改修について書いていきたいと思います。 識学クラウドとは 株式会社識学が提供している企業向けのクラウドサービスです。 ”成果の上がる組織をつくる”理論、「識学」の理論に基づいた 組織マネジメントツールです。 主な機能として以下のものがあります。 ・組織分析と結果の可視化 ・動画学習による社員への識学理論の浸透 ・企業と候補者のズレをなくす採用ツール 識学をシンプルかつ効果的に実践することで

          yuh

          識学クラウドのUI　-デザイン改修-

          yuh

          自分を変えた、Adobe XDの魅力

          こんにちは、シキラボのデザイナーyuhです。 今回は、UIデザインツールのAdobe XDについて書いていきたいと思います。 XDは私にとって欠かせないものなのですが、その理由は デザイナーとして一歩前進することが出来たきっかけだからです。 衝撃的な出会い 以前の現場でアプリゲームのUI作成の仕事をしていた頃、たまたま検索で見かけたのがXDとの出会いです。 その時はまだβ版でしたが、早速インストールしてみることに。 実際に触ってみると、「もっと早く知りたかった…！」と直ぐ

          yuh

          自分を変えた、Adobe XDの魅力

          yuh

          yuhのプロフィール

          初めまして、こんにちは！デザイナーのyuh（ユウ）と申します。 株式会社シキラボで、UIデザイナーとして「識学クラウド」のUIやWebデザインを行う傍らで、 イラストの制作や世界観設計などの仕事も行っています。 ここでは私の自己紹介として、これまでの経歴とその時の思いを綴ろうと思います。 デザイナーを目指したきっかけ私のデザイナーとしての原点は、ゲームと漫画です。 元々、小さい頃からゲームや漫画が好きで、休み時間にいつも絵を描いていた小学生時代。中学生や高校生になってもそれ

          yuh

          yuhのプロフィール

          yuh