シキラボ開発部

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

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

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

スキ
10
Adobe XDの便利な機能~コンポーネント編~

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

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

スキ
15
Adobe XDの便利な機能 ~ ステート編 ~

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

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

スキ
14
Adobe XDの便利な機能~リンクアセット編~

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

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

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

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

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

スキ
4
「B-PROJECT 快感*エブリディ」大型リニューアルの話

「B-PROJECT 快感*エブリディ」大型リニューアルの話

こんにちは!今回は「B-PROJECT 快感*エブリディ」と言うアプリゲームの大型リニューアルプロジェクトを、UIデザイナーとして経験したことを書いていきます。 「B-PROJECT」と「B-PROJECT 無敵*デンジャラス」 「B-PROJECT」は、MAGES.の乙女向けブランドLOVE&ARTが手掛けるアイドルプロジェクトです。 詳細に説明すると、 総合プロデュースを多数の人気曲を持つ西川貴教、企画・原作を大ヒット作「シュタインズゲート」を手がけた志倉千代丸、 キ

スキ
10
ManaBun開発記② ~ サービス開発でのXDの具体的な活用例 ~

ManaBun開発記② ~ サービス開発でのXDの具体的な活用例 ~

こんにちは!今回は前回の記事で触れた、 「ManaBun開発の連携面でどうXDを活用しているのか?」の具体的な活用例を書いていきたいと思います! デザインキットでルールの一括管理 シキラボは、プロダクトのUIデザインをする上でデザインデータの管理に非常に重きを置いています。 Adobe XDを使っているのですが、UIそのもののレイアウトデータと別にコンポーネント管理をするためのデータをつくっています。 それをシキラボでは「デザインキット」と呼び、デザイナーだけではなくディ

スキ
8
ManaBun開発記①~ XDを取り入れた連携重視の開発フロー ~

ManaBun開発記①~ XDを取り入れた連携重視の開発フロー ~

こんにちは!今回は現在運用及び開発中の「ManaBun(マナブン)」 とはどのようなサービスなのか?と開発の経緯、開発の連携面でどうXDを活 用しているのか?を書いていきたいと思います! ManaBunとは 「Manabun」は、フォーサイト社が運営する”資格試験の学習をメインとした”eラーニングサービスです。 学習効果に強いこだわりのあるサービスで、「オンラインと問題集の連携」や「個人への最適化」など多数のポイントがあります。 フォーサイト社が30年近く培ったノウハウが詰

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

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

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

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

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

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

スキ
3