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

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


XD：レスポンシブデザインの作り方

U3
2020/3/17
2024/11/7

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

https://wp.yat-net.com/?p=6784

コメント

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

関連する投稿

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

デザイン

  • 0
  • 50
  • 0
U3
アコーディオンメニューの設置とデザイン【アイコンの選択からラベルの配置まで】
アコーディオンメニューは、＞アイコンではなく、＋アイコンを選ぶのが正解！アイコンは左に置くとユーザーはラベルをクリックするので操作時間が短縮折り畳みラベルは－（消去、削除）ではなく×（閉じる）愛Kのを使うのがＤo！ユーザーの期待に沿ったアイコンを使う

デザイン

  • 0
  • 184
  • 0
U3
Adobe XD:位置の固定がなくなった
デザインモードにあった「位置の固定」が見当たりません。→2019年6月更新で、「スクロール時に位置を固定」がプロトタイプモードのプロパティインスペクターに移動しました。https://twitter.com/risay/status/1140858814125580288

デザイン

  • 0
  • 327
  • 0
U3
Adobe XD - レスポンシブリサイズ機能を習得しよう！

デザイン

  • 0
  • 127
  • 1
U3
Photoshopで人物を切抜き：CC「選択とマスク」
https://helpx.adobe.com/jp/photoshop/how-to/crop-using-select-mask-tips.html 1.「選択範囲／選択とマスク」（キーボードショートカットキー：command+option+R／Ctrl+Alt+R）ワークスペースに切り換える 2.「クイック選択ツール」でドラッグして、選択範囲を作成する 3.「境界線調整ブラシツール」でふさふさしている部分をドラッグする 4.「出力先」を選択し、「選択とマスク」ワークスペースを終了する

デザイン

  • 0
  • 90
  • 0
U3
マテリアルデザインとは？　導入方法など
マテリアルデザインについて 2014年にGoogleが発表したデザインのガイドラインのこと。 UIデザインの変遷スキューモフィズム　→　フラットデザイン・モダンUI　→　（わかりにくい）　→　マテリアルデザイン 　→　ニューモーフィズム（2020～）マテリアルデザインは現実世界を表現マテリアルデザインでは、光、影、奥行きの表現を追加することで、現実世界の物が持つ「質量」表現している。参考URL マテリアルデザインでやってはいけない72のこと（間違いチェックリスト）https://saruwakakun.com/html-css/material/failure マテリアルデザインでの「ボタン」の使用ルールと作り方（サンプルCSS付）https://saruwakakun.com/html-css/material/button マテリアルデザイン https://material.angularjs.org/latest/demo/フレームワークによる実装Material Design for Bootstrap 4https://mdbootstrap.com/docs/jquery/https://uxmilk.jp/76081

デザイン

  • 0
  • 257
  • 0
U3
WebP（ウェッピー）とは？　Googleが開発した画像のフォーマット
WebPとは、2010年にGoogleが発表した新しい画像の保存形式（フォーマット）。2020年秋以降、AppleのSafariを含む全ての主要ブラウザでWebPが利用可能になりました。メリット非可逆圧縮（JPEGと同じ形式）なのに、アルファチャンネル（透過）を使えます。JPGとPNGの良さを両方合わせ持つファイルサイズが小さいこと　→Webサイトの表示速度が速くなる変換方法Googleが開発した画像データ変換サイトSquooshを使います。https://squoosh.app/Photoshopのプラグインを使う方法もあります。

デザイン

  • 0
  • 74
  • 0
U3
Adobe XD で使用できるすべてのショートカットキー
やり直し　Ctrl + Shift + Zhttps://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html

デザイン

  • 0
  • 69
  • 0
U3
チャットボット　SYNALIO
誰でも直感的にチャットボットを作成できる　SYNALIO https://synal.io/  

デザイン

  • 0
  • 76
  • 0
U3
マテリアルデザインにおけるカード、チップス、タブの使い方
カードカードは、より複雑で詳細な情報への エントリーポイントとして用いられることが多い。カードは 異なるタイプのオブジェクトから構成されるコンテンツを表示するのに便利な手段である。また、似たようなオブジェクトでも、 サイズやアクションが多様なものを表示するのにも適している。サイズが同じでアクションもなく、一様なコンテンツは、単純なリストで表示すべき。コンテンツ内のテキストにリンクを貼るのはやめるべき。https://material.io/components/cardsこれで完璧！マテリアルデザインの「カード」の使い方リンクボタンをつけたいときはシンプルでフラットなものにします。色を変えるなどしてボタンであることが一目で分かるようにします。重要な情報を上に文字はサイズを変えて強調https://saruwakakun.com/html-css/material/cardsカード内でスクロールできるようにしてはいけないhttps://saruwakakun.com/html-css/material/failure#section2チップスhttps://material.io/components/chips#typesタブそれぞれのタブは相互に重複してはいけない。タブのラベルは意味のある分類を表し、論理的な構成にする。タブのラベルは省略してはいけない。(ex "今週のおすす...")各タブの幅は均等にする。タブのラベルは折り返してはいけない。タブのラベルは文字でもアイコンでもよいが、混在してはいけない。https://material.io/components/tabs

デザイン

  • 0
  • 620
  • 0
U3

アクセスランキング

1

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

8

2

Google Playストアでアプリを一時的に非公開にする方法

6

3

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

5

4

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

4

5

ホームページで複数ページのヘッダーとフッターを共通にするサンプルコード

4

6

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

4

7

★リスト表示をjQueryで絞り込んで表示させる方法(フィルタ機能)

4

8

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

4

9

Adobe:Special characters must be escaped :[<].と出た

4

10

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

4

11

顧客管理：BASEの例

4

12

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

4

13

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

3

14

コンタクトフォーム7のテキストエリアのサイズ指定方法

3

15

App Storeでアプリを一時的に配信停止にする方法

2

16

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

2

17

WBMP形式の画像ファイルとは

2

18

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

2

19

ホームページのアクセスカウンターは最近なぜ見なくなったの？

2

20

Facebook広告：Facebookピクセルとは？

2

コメントランキング

1

AIO (AI最適化) 重点要件

1

2

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

1

3

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

1

いいねランキング

1

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

2

2

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

1

3

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

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

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

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

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