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

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


Font Awesome 5のアイコンをIllustratorやXDで使う方法！

U3
2020/4/13
2024/11/7

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

https://notes-de-design.com/design/font-awesome-5-illustrator/

コメント

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

関連する投稿

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

デザイン

  • 0
  • 259
  • 0
U3
Adobe Sensei　
AIを使ってデザインを支援してくれる新しいツール

デザイン

  • 0
  • 87
  • 0
U3
コンバージョンボタンのデザインについて
参考https://swingroot.com/conversion-cta/色緑色が、青、紫、オレンジと比較してダウンロード数が3倍という結果も。コンバージョン率は同じ赤と緑なら、赤の方が21%コンバージョン率が高いというデータがある。よって安心が必要なボタンは緑行動を引き起こすボタンは赤がよさそうである。デザインの統一感にこだわり過ぎず、効果のあるCTAボタンを。重要なのは目立っていることである。ボタンとわかりやすい形アイコンをつける文字の左側にアイコンを配置するとボタンとわかりやすい立体感、動きボタンのテキスト訪問者目線の話し言葉に。

デザイン

  • 0
  • 136
  • 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
【CSS】liの背景を縞々にする
liやセルの背景色を交互に付ける疑似クラスの:nth-child(n)を使いますnth-child(2)2番目のみに適用します。nth-child(2n)(2*0)=0、(2*1)=2、(2*2)=4という計算を繰り返すため偶数に背景色が付きます。nth-child(2n+1)(2*0+1)=1、(2*1+1)=3、(2*2+1)=5という計算を繰り返すため奇数に背景色が付きます。nth-child(2n-1)(2*0-1)=-1、(2*1-1)=1、(2*2-1)=3という計算を繰り返すため奇数に背景色が付きますが、この計算式を使うことはあまり無いでしょう。li:nth-child(even){ background:#CCCCCC; } tr:nth-child(even){ background:#CCCCCC; } td:nth-child(even){ background:#CCCCCC; } 古いIEは非対応です。

デザイン

  • 0
  • 112
  • 0
U3
「インフォグラフィック」を簡単に作れるサイトCANVA
インフォグラフィックとはグラフィカルに情報を伝えることをインフォグラフィックと言います。次の7種類があります。ピクトグラム：非常口のマークなど、直感的にわかるマークダイアグラム：情報を幾何学的なマークで表したものチャート相関図フローチャート年表地図ノンデザイナーがインフォグラフィック作るとなると敷居が高く感じますが、かんたんにインフォグラフィックが作れるツールがあります。Canvahttp://www.canva.com作ったインフォグラフィックを埋め込みコード（HTML)として出力して、ホームページに埋め込めます。ワードプレスに挿入する用の出力形式もあります。ホームページに埋め込んだ場合、Canva上で行った修正がそのまま反映されるのでとても便利です。インフォグラフィックのシェアなどもできます。Canvaのクレジットは表示されるものの、無料プランもあります。他にもあります。easel.lyhttps://www.easel.lyPiktocharthttps://piktochart.comVenngagehttps://venngage.com

デザイン

  • 0
  • 140
  • 0
U3
Webデザインのトレンド　ダークモードの実装
ダークモード普及の理由夜間目に優しい有機ELディスプレイでは省エネになる実装@media (prefers-color-scheme: dark){ /* ここにダークモード時のコードを記述*/ /* 例 */ .dark{ background-color: #1c1a1a; color: #faf8f7;; } } これでOS側でダークモードに設定した際、記述したスタイルが適用されてダークモードに設定できます！ダークモードのときに表示したいスタイルを @media (prefers-color-scheme: dark) { と } の間に書いていきましょう。ピュアブラックとピュアホワイトは使わないことhttps://pecopla.net/web-column/darkmode-designChromeをダークモードで使うhttps://www.atmarkit.co.jp/ait/articles/1912/19/news028.html

デザイン

  • 0
  • 130
  • 0
U3
Adobe Stock ：Adobeが提供するサブスクリプションの素材ストックサービス
イラストレーターやアフターエフェクツでモーショングラフィックスを作る時に便利なベクター素材もあります。アニメーション動画、PR動画などを作りたい時にもぴったりでは。

デザイン

  • 0
  • 121
  • 0
U3
Rocket.chatの使い方
ロケットチャットの使い方https://qiita.com/nh321/items/5ec9d4b636448c2b3a69

デザイン

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

デザイン

  • 0
  • 1057
  • 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で送る