Web担メモ
ログイン メモする
Web担メモ
  • HOME

Web担当者が、日々の業務の中で役立ったことをメモしています。


Adobe XD：スクロールできるアートボードの作成

U3
2022/11/11
2024/11/7

編集にはカテゴリー認証が必要です ▼受付終了にする

スマホで際の時に垂直スクロールさせて長いコンテンツも表示できるようにしたい。
参考URL https://helpx.adobe.com/jp/xd/help/create-scrollable-artboards.html

コメント

コメントはまだありません。

関連する投稿

SketchとXD 違いは？
2010年に発表されて以来、『Sketch』はその利便性から多くのUIデザイナーに愛されてきました。しかしその後『Adobe XD』が頭角をあらわすと、多くのデザイナーは「結局どちらを使えばいいの？」という問題に直面しました。https://goworkship.com/magazine/adobexd-vs-sketch/結論としてはAdobe XDに軍配

Adobe XD

  • 0
  • 172
  • 0
U3
XD：レスポンシブサイズ変更
レスポンシブサイズ変更は横に伸び縮みの時に使う。縦に伸び縮みさせたいときは、レスポンシブサイズ変更をオフにする。レスポンシブサイズ変更「手動」で幅固定にすると、引っ張ってもサイズは固定になる。グループオブジェクトはレスポンシブサイズ変更がデフォルトでオンになっている自動と手動を切り替えて使う。

Adobe XD

  • 0
  • 583
  • 0
U3
Adobe XD：オブジェクトが勝手にパスに変換されてしまう
数値指定による角丸ツールが出てこないと思ったら、□のオブジェクトが勝手にパスに変換されていました。一度パスに変換されると、もうオブジェクトには戻せないので、また一からオブジェクトで作りなおす必要があります。レイヤーのアイコンを見れば、選択している□などの図形がオブジェクト（■）なのか、パス（🖋）なのかがわかります。XDだけの現象のようですが、オブジェクトの角丸ポイントを選択した状態で他の要素に対して操作（コピー＆ペーストなど）を行うと勝手にパスに変換されます。一度パスに変換されるとオブジェクトに戻せないため、注意が必要です。

Adobe XD

  • 0
  • 3612
  • 3
U3
コーディングを依頼するときのXDへの指示の書き込み方サンプル
TantanWebファクトリーさんの,小規模WEB制作のための簡易的なスタイルガイドhttps://tantan.work/2021/06/18/style-guide-ui-pattern/コーダーさんに依頼するときのXDの指示の書き込み方サンプル。参考になりました！

Adobe XD

  • 0
  • 1254
  • 1
U3
Adobe XDでFont Awsomeを使う
XDにFont Awesomeのアイコンを表示させる手順大きくは、以下の手順になります。Font AwesomeをデスクトップにインストールFont Awesomeのサイトで貼り付けたいフォントをコピーXDに貼り付ける：テキストを選択してペーストする。Font Awesomeを選ぶ。注意！！XDには、FreeまたはBrand のアイコンしかペーストできません。（イラストレーターはそれ以外もOK）詳しい手順を説明します。　１　デスクトップにフォントオーサムをインストールフォントオーサムのページにアクセスし、ローカルにデスクトップ版をインストールします。ダウンロードしたフォルダから、otfsの３つのファイルをインストールします。（クリックするとインストール用のモーダルが開きます。）「フォントをインストール」をクリック2　フォントオーサムのページから、目当てのアイコンをコピーしますまたフォントオーサムのぺ時に戻ります。Icons＞Free　で、無料アイコンの中からアイコンを検索しましょう。英語ですが、キーワードから検索もできます。日本語で検索できるようなサイトも、ググると出てきます。検索したら、アイコンをクリックするとコピーされます。３　XDに戻って、テキストでペーストテキストのフォントをfont-awsome5 Brands(または Free)を選ぶとアイコンが表示できます。font-awsome5 Free の場合は、Solid とRegularの選択もしてください。Solidの方が表示できるものが多いかも。

Adobe XD

  • 1
  • 2535
  • 0
U3
AdobeXDでマスクを使う方法
XDでは、Photoshopのクリッピングマスクのようなこともできます。マスクを作成して、画像やその他のコンテンツを部分的に隠します。XD上での操作画像を用意します。画像の上に、シェイプで丸などを描きます。画像とシェイプの両方を選択し、Windowsの場合は右クリックでシェイプをマスクを選択／macOS の場合は、オブジェクト／シェイプでマスクを選択https://helpx.adobe.com/jp/xd/help/create-a-mask-with-shapes.htmlhttps://helpx.adobe.com/jp/xd/how-to/mask-in-xd.html

Adobe XD

  • 0
  • 480
  • 0
U3
Adobe XD　共有方法の違い
Adobe XDは、作ったデザインを関係者にリンクで共有できるとても便利な機能があります。お客さん、社内のメンバー、プログラマ－等、共有する関係者の立場によって、共有モードも変えられます。XD の新しい共有モードhttps://helpx.adobe.com/jp/xd/help/share-designs-prototypes.htmlデザインレビュー特徴：コメント機能利用シーン：制作途中段階で、社内などで意見を集めたいとき。開発特徴：デザインスペック共有機能あり。フルスクリーン無し利用シーン：コーダーやプログラマーにデザインを渡すとき。プレゼンテーション特徴：コメントはできない。利用シーン：クライアントへデザインを確認してもらうときユーザーテスト特徴：フルスクリーンのみ。利用シーン：実際の動きに近い形で確認したいときカスタム特徴：上記に含まれるすべての機能がついている。開発者への共有デザインの情報が簡単に共有できるので、受け取ったエンジニアの負担が軽くなります。https://haniwaman.com/xd-share/アクセス権の設定公開リンク非公開リンク　※推奨招待されたユーザーのみがアクセスできるセキュリティで保護された非公開リンクパスワードリンク

Adobe XD

  • 0
  • 1758
  • 0
U3
プロトタイプモードで画面遷移が設定できる
Adobe XD は画面上部に「デザイン」「プロトタイプ」「共有」の３つのタブがあります。「プロトタイプ」を選択すると、オブジェクトをクリックしたときに＞マークが出て、それをドラッグ＆ドロップして遷移先と繋げることができます。

Adobe XD

  • 0
  • 126
  • 0
U3
メインコンポーネントにテキストやオブジェクトを追加するには
メインコンポーネント（親）を編集して、その上にテキストやオブジェクトをおいても、インスタンス（子）に反映されません。方法あらかじめ用意したテキストをカットメインコンポーネントの中の一つのオブジェクト（背景など）を選択ペースト２の手順を踏めば、インスタンスへ反映されました。

Adobe XD

  • 0
  • 189
  • 0
U3
XDの便利な使い方（Tips）
ガイドを出すには：アートボードの左端にカーソルを合わせてドラッグするx、y座標に+50 などと入力とするとパディングが入れられる●インタラクションの設定スマホのハンバーガーメニューなど「プロトタイプ」モードにする。アクション＞オーバーレイ

Adobe XD

  • 0
  • 84
  • 0
U3

アクセスランキング

1

【解決】モニターディスプレイが消える「入力信号が見つかりませんでした」

5

2

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

4

3

VSCodeで複数ファイルを横断して検索＆置換する方法　Option+Shift+F

4

4

NEWマークを任意の日数だけ表示させる（JavaScript）

4

5

ロケットチャットの新規通知をデスクトップ表示させるには

4

6

Excelで一つの値を一番下のセルまでコピーしたい時

3

7

自分のチャンネルのYouTube動画に広告が表示されないようにしたい

3

8

コーディングを依頼するときのXDへの指示の書き込み方サンプル

3

9

Rocket.chatのスターとピン止めの違い

3

10

TortoiseSVNのインストールと日本語化

3

11

Excel：都道府県をプルダウンで選択すると、その都道府県の市区町村だけが次のセルの選択肢として出てくる

3

12

Events Managerの予約フォームをカスタマイズしたい

3

13

rakuten handを初期化しても電話番号の情報が残っている

2

14

Macでカタカナ変換するショートカットキー

2

15

無料でフォームを作成できるツール

2

16

ロリポップの「スタンダードプラン」と「ハイスピードプラン」は何が違うの？

2

17

ワーカーへ外注する際の源泉徴収の概念（法人）

2

18

コンタクトフォーム７：テキストボックスの幅がsize:で変わらない

2

19

GoogleChrome（クローム）が勝手に翻訳してしまう

2

20

Google広告で領収書や支払明細を発行したいとき

2

コメントランキング

1

AIO (AI最適化) 重点要件

1

2

AIコピペハラスメントとは？〜AIが生成した文章をそのまま送るのはやめよう

1

3

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

1

いいねランキング

1

AIコピペハラスメントとは？〜AIが生成した文章をそのまま送るのはやめよう

2

2

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

2

3

Looker Studio（Googleが無料で提供するBIツール）

1
この投稿者に問い合わせ
この投稿者に問い合わせ

当サイトでは、Cookieを使用しております。

すべての Cookie の使用に同意いただける場合は、下記の「同意します」をクリックしてください。

  • シェア
  • ログイン
  • 利用登録する
  • ログアウト
  • マイアカウント
  • メモする
  • このサイトについて
  • 問合せ
Copyright © Web担メモ
シェア
いいね！ X このエントリーをはてなブックマークに追加 LINEで送る