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

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


Googleアナリティクスで外部リンクのクリック数を計測する方法！

U3
2019/7/12
2024/11/7

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

https://analyze.siraberu.info/post-669/

コメント

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

関連する投稿

自動で背景を切り抜いてくれる、無料のサービス「切り抜きAC」
AIが自動で画像の背景を切り抜いてくれるサービスが出ています。切り抜きAChttps://clipping-ac.comフリー素材を配布しているACワークスさんの提供サービスです。実際に、このツールを使って切り抜いた使用前、試用後の写真を下に貼っておきます。調整なしでもこんなにきれいに切り抜けました。あとから微調整もできるようです。使い方https://blog.acworks.co.jp/2021/05/24/kirinukihowto/簡単Photoshopでもかなり簡単にきれいな切り抜きができるようになりましたが、そもそもPhotoshopを持っていない方も多いと思います。今までPhotoshopを起動して切り抜いていた手間も省けます。デザイナーでなくても、これで簡単に画像の切り抜きができるようになりました。これからは専門スキルよりも、「やりたいことがある人」だけが仕事をするようになるのでしょうね（弁護士ですらAI化されるという話もあるくらいです）。こういった便利ツールを使って、どんどん効率化していきましょう。

デザイン

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

デザイン

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

デザイン

  • 0
  • 0
  • 0
U3
アイコンフォント
複数の種類を使ってよいのかデメリットなどは

デザイン

  • 0
  • 109
  • 0
U3
XD：レスポンシブデザインの作り方
https://wp.yat-net.com/?p=6784

デザイン

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

デザイン

  • 0
  • 74
  • 0
U3
Photoshop：足りない背景を簡単につぎ足す方法（コンテンツに応じた塗りつぶし）★便利！
ものすごく簡単！写真などを定型サイズに合わせたいときに、背景が足りない場合があります。そんなとき、Photoshopなら簡単に自然な背景を追加することができます。メニューバー＞編集＞コンテンツに応じた塗りつぶし写真をレイヤーに取り込みます。レイヤーをラスタライズします。つぎ足したい部分（余白）を選択します。編集＞コンテンツに応じた塗りつぶし　を選択OKをクリック塗りつぶし部分だけの別レイヤーが出来ます。塗りつぶし　を使う方法もありますが、上記の方が断然自然ですごいです。すごいです。塗りつぶしの手順写真をレイヤーに取り込みます。レイヤーをラスタライズします。つぎ足したい部分（余白）を選択します。シフトキー+F5をクリックOKをクリックメニューバー＞編集＞塗りつぶし上記ではショートカットを使いましたが、メニューバーから選択することもできます。設定は下記の通りです。デフォルトでこうなっていると思うので、そのままOKボタンでよいと思います。使用：コンテンツに応じる描画モード：通用不透明度：100%写真もご参照ください。

デザイン

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

デザイン

  • 0
  • 900
  • 0
U3
Adobe Stock 単品価格
Adobe Stockの画像の購入価格 年間プラン　１か月あたり3480円（通常アセット１０点/月）　348円/アセット 月々プラン　3480円（通常アセット３点）　１１６０円/アセット クレジットパック（６か月有効）36,000円　8プレミアム画像　または　５HDビデオ　 （2018年１月現在）  

デザイン

  • 0
  • 124
  • 0
U3

アクセスランキング

1

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

8

2

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

6

3

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

4

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

2

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

1

3

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

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

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

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

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