マガジンのカバー画像

シキラボ開発部

18
本
開発部のメンバーの記事をまとめています。是非ご覧ください！
運営しているクリエイター

#Adobe_XD

【Adobe XD】便利な機能～スクロールグループ編～

こんにちは！今回は最近活用してみて便利だった、Adobe XDの「スクロールグループ」についての使い方と実際に活用してみての感想を書いていきたいと思います！ スクロールグループとは 「スクロールグループ」は2020年6月のAdobe XDの大型アップデートで追加された機能です。 アートボード内のコンテンツを個別にスクロール領域に定義できる機能で、 「水平スクロール」「垂直スクロール」「自由スクロール」の3種類の方向に設定できます。 水平スクロールはコンテンツのカルーセ

モリオ

Adobe XDの便利な機能～コンポーネント編～

こんにちは！シキラボのモリオです。 今回は繰り返し多用するパーツを一元管理することで、効率的な作業が実現できる、Adobe XDの「コンポーネント」機能の使い方と、注意点について書いていきたいと思います！ コンポーネントとは Adobe XDにおける「コンポーネント」とは、ボタンやアイコンなどの共通のデザインでかつ繰り返し使用するパーツを管理する上で役立つ機能です。 コンポーネントには2種類が存在し、最初にコンポーネント化したパーツを「メインコンポーネント」それを複製した

モリオ

Adobe XDの便利な機能 ～ ステート編 ～

こんにちは！シキラボのモリオです。 今回は、プロトタイプをよりリッチに表現可能になり、画面数の削減も期待できる「ステート機能」の解説、使用方法と注意点について書いていきたいと思います！ ステート機能とは Adobe XDにおける「ステート機能」とは、一つのコンポーネントに「通常状態」「ホバー状態」等、複数の「状態」を登録しておくことができる機能です。 この機能を利用することで、従来では各状態をアートボード単位で繋げて見せていた状態の変化が、コンポーネント単位で実現可能にな

モリオ

Adobe XDの便利な機能～リンクアセット編～

こんにちは！シキラボのモリオです。 今回は、前回お話しした「コンポーネント」機能のパーツ管理能力を更に向上できる「リンクアセット 」機能の解説。 それの応用方法について書いていきたいと思います！ リンクアセットとは Adobe XDにおける「リンクアセット」とは、クラウド上に保存したソースドキュメントにカラー、文字スタイル、コンポーネントをアセットとして登録しておくことで、同様のアセット構成を別ドキュメント側でも利用できる機能です。 また「メインコンポーネント」を編集する

モリオ

Adobe XDの便利な機能 ～ ステート応用編① ～

こんにちは！シキラボのモリオです。 今回は、前回お話しした「ステート機能」を応用することで作成可能な便利パーツの作成方法を書いていきたいと思います！ 今回の作成パーツ 今回は一つのコンポーネントに複数のステートを使用した「ラジオボタン」の作成方法を解説していきたいと思います！ また今回の解説は、以前紹介した記事のアップデート版になりますので、まだ読んでいない方は下記からチェックしてみてください！ 作成方法の解説 ステートを設定するにはメインコンポーネントが必要なので、ま

モリオ

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

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

yuh

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

yuh

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

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

yuh