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

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


Adobe XD：リピートグリッドの間隔を調整したい

U3
2020/3/17
2024/11/7

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

https://blogs.adobe.com/japan/web-exploring-repeat-grid-in-adobe-xd/


セルの隙間にマウスを移動すると、セル間のパディングを簡単に調整できる

コメント

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

関連する投稿

Googleアナリティクスで外部リンクのクリック数を計測する方法！
https://analyze.siraberu.info/post-669/

デザイン

  • 0
  • 112
  • 0
U3
デザインの余白：上下に余白がある場合は下の余白を少し広く
「視覚的な安定感」を出すために、下側の余白（ボトムマージン）をわずかに広く取る手法が非常によく使われます。1. 理由：人間の視覚特性（錯視）人間は、幾何学的に真っ中心にあるものを、「少し下に沈んでいる」と感じる傾向があります。視覚的中心: 数学的な中心よりも、わずかに上が心地よい中心（視覚的中心）と感じられます。安定感: 下の余白を広くすることで、重心が下がり、デザインが「どっしり」と安定して見えます。逆に下が狭いと、要素が下に落ちそうな、窮屈で不安定な印象を与えてしまいます。2. 具体的な活用シーンシーン余白の調整方法効果ポストカード・ポスター下の余白を一番広くする（上＜左右＜下）額装された絵画のような高級感と安定感が出る。ボタン内の文字下を数ピクセルだけ広くする（または上を詰める）アルファベットの小文字などの重心を考慮し、中央に見えるようにする。Webサイトのセクション基本は上下均等だが、フッター付近は広く取るコンテンツの終わりを明確にし、安心感を与える。名刺のデザイン下側に名前や連絡先を置く際、底辺に余裕を持たせる手で持った時の隠れを考慮しつつ、視覚的なバランスを整える。3. 「均等」の方が良い場合もちろん、すべてにおいて下を大きくすれば良いわけではありません。以下のような場合は上下均等が好まれます。グリッドシステムを重視するWebデザイン: 規則正しいリズムで作る場合、上下のパディング（内側の余白）を揃えたほうがコーディングも美しく、モダンでフラットな印象になります。情報密度が高いアプリのUI: 画面をスクロールして次々に情報が出てくる場合、余白に差がありすぎるとリズムが崩れて見づらくなることがあります。まとめ：迷った時の「黄金比」もし「どれくらい広げればいいか？」と迷ったら、まずは以下の比率を試してみてください。上：下 ＝ 1：1.2 〜 1.5これだけで、プロっぽく落ち着いたレイアウトに見えるはずです。

デザイン

  • 0
  • 9
  • 0
U3
画像からイラストレーターのデータを作る方法
「会社ロゴデータがないから名刺からトレースして作って欲しいと言われた」といったようなことhttps://dnsk.jp/blog/illustrator_pass「ウインドウ」メニュー＞「画像トレース」を選択し、画像トレースパネルを表示します。配置した画像が選択された状態で、画像トレースパネル右下の「トレース」ボタンをクリックすると画像トレースが実行されます。※ CC2018 以降のバージョンの方はプロパティパネル上の「画像トレース」ボタンをクリック、https://www.too.com/support/faq/adobe/illustrator/24254.html

デザイン

  • 0
  • 115
  • 0
U3
PDFのテキストをコピーペーストすると、文字化けする【解決】
pdfを開いて「ファイル」→「書き出し形式」→「スプレッドシート」→「MicrosoftExelブック」で保存。

デザイン

  • 0
  • 1361
  • 0
U3
Adobe XDで作成したデータをPSD（Photoshop）データとして書き出せる「Photopea」
Photopeahttps://www.photopea.com/サイトにアクセスし変換したいXDファイルを開いて、「ファイル」から「PSDとして保存」注意・リピートグリッドを解除しておく必要がある・ロゴは文字化けした・フォントは変わる

デザイン

  • 0
  • 1062
  • 0
U3
SVGのpath要素
SVGを使えば表現できる図形やアニメーションの幅が広がります。今ではほとんどのブラウザがSVGをサポートしています。＜マーク等、画像を使うほどでもない時に使います。SVGのpathタグを使っている例https://coubic.com/のフッターメニューの折り畳み上向き＞下向き＞ナビメニューナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめhttp://photoshopvip.net/97481参考https://ferret-plus.com/7522https://liginc.co.jp/web/html-css/html/154217

デザイン

  • 0
  • 99
  • 0
U3
レスポンシブデザインでWebサイトのデザインを作成する方法
https://marketingnative.jp/how-to-create-a-responsive-web-design/

デザイン

  • 0
  • 107
  • 0
U3
Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法
https://hayashikejinan.com/webwork/css/913/

デザイン

  • 0
  • 263
  • 0
U3
アトミックデザインとは
アトミックデザインは、Skechと相性が良い考え方。Uデザイナーにとての銀の弾（問題を超簡単に解決してくれる手段）となりうるパーツを一番小さい単位（ボタンなど）からデザインしていく（原子からデザインしていく）手法。LABEL要素、INPUT要素、Buttonなどの各要素のデザインをまず決める。アメリカのWebデザイナーが提唱したデザイン手法。

デザイン

  • 0
  • 50
  • 0
U3
Canvaがイラレ・フォトショなどの代用品を無償でリリース（2025/10/31）
Canvaがフォトショなどの代用品を永年無償で使えるようにしてくれているようですhttps://forest.watch.impress.co.jp/docs/news/2059733.html 豪Canvaは10月31日（日本時間）、統合グラフィックスツール「Affinity 3.0」をリリースした。永久に無償で提供するとしている。CANVAのアカウントがあれば使える。また、画像生成AIは有料プランに加入していれば使える。参考：CANVAの年間契約プランは￥8,300

デザイン

  • 0
  • 18
  • 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

Webデザイナー＋コーダー＝Readdy

2

14

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

2

15

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

2

16

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

2

17

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

2

18

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

2

19

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

2

20

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

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で送る