Web担メモ

ログインメモする

Web担メモ

HOME

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

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

U3

2020/4/3

2024/11/7

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

動画

関連する投稿

マテリアルデザインのボタン

マテリアルデザインはGoogleにより明確なガイドラインが発表されています。「ボタンの位置や形」や「影のつけ方」までルールが決まっています。https://saruwakakun.com/html-css/material/vs-flat

デザイン

0
173
0

U3

「デザイン・ルールズ」から学ぶ、情報が伝わりやすいデザインの4原則

デザインというと、センスや才能が必要だと思われがちですが、実はいくつかのルールを知るだけで、見やすいデザインを作ることができます。デザインの基本を学べる名著「デザイン・ルールズ」で紹介されている4つの原則をご紹介します。1. 近接（Proximity）関連する項目は近くに配置し、関連しない項目は離して配置することで、情報のまとまりを視覚的に表現する原則です。2. 整列（Alignment）すべての要素を何らかの線で整列させることで、デザイン全体に統一感と秩序をもたらします。これにより、視覚的なつながりが生まれ、プロフェッショナルな印象を与えます。テキストや画像など、すべての要素がどこかの基準線に揃っているか確認してみましょう。3. 反復（Repetition）デザインの視覚的要素を繰り返すことで、統一感と一貫性を生み出す原則です。例えば、同じフォント、色、アイコンのスタイルを繰り返し使うことで、ブランドイメージを強化し、ユーザーに安定感を与えます。4. コントラスト（Contrast）要素間に意図的な違いを持たせることで、視覚的な面白さを生み出し、重要な情報を際立たせる原則です。色、サイズ、フォント、太さなどを対比させることで、重要な部分にユーザーの注意を引きつけることができます。---これらの4つの原則を意識することで、誰でも見やすく、伝わりやすいデザインを作成することができます。ぜひ、今日からあなたのデザインに取り入れてみてください。

デザイン

0
6
0

U3

アコーディオンメニューの設置とデザイン【アイコンの選択からラベルの配置まで】

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

デザイン

0
184
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

Dreamweaverでファイルを開くと、『・・・.cssへのアクセス中に共有違反が発生しました。』というメッセージが

根本原因は不明ではありますが、問題となる"font-awesome.min.css"を、それぞれのサーバー上のcssディレクトリに置いて、"font-awesome.min.css"のフォントの"url"を"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0//fonts/ ..."に置き換えることで、作業も運用もエラーも出ずに取り敢えず行えております。

デザイン

0
1236
0

U3

Retina（レティナ）ディスプレイ：アップル製品

Retina（英語で網膜という意味）はApple社の高精細ディスプレイの名称です。通常の液晶画面の２倍のピクセル数を通常の画面サイズのまま表現することができます。非Retinaディスプレイで普通に表示されていた画像が、Retinaディスプレイではぼやけて見えることがあります。Retinaディスプレイチェックツールhttps://pasotan.com/tools/retina-checker

デザイン

1
120
0

ブラウザによって色が違う

違いの表現できるモニターで見ると異なって見えます。モニターを変えると同じに見えます。違いの分かるモニターの場合Edge,Chromeの見え方がそのまま（比較的色あせた感じ）Firefox,IEはやや鮮やかに見えるhttps://mato-memo.net/windows/srgb-color.html

デザイン

0
900
0

U3

スマホアプリのプロトタイプアプリ「Prott」

無料で30日使えます。https://prottapp.com/ Adobe CCならXDもありますが、Prottはクラウドサービスなので共有がしやすそうです。

デザイン

0
603
0

U3

画像からイラストレーターのデータを作る方法

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

デザイン

0
105
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

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

4

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

4

5

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

4

6

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

4

7

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

4

8

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

4

9

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

4

10

顧客管理：BASEの例

4

11

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

4

12

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

3

13

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

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

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

1

3

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

1

この投稿者に問い合わせ

お名前

メールアドレス

電話番号（任意）

本文

この投稿者に問い合わせ

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

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

シェア
ログイン
利用登録する
ログアウト
マイアカウント
メモする

このサイトについて
問合せ