Peeper」WEBデザイナーはもちろん、WEB業界に携わっていると、あるサイトの配色が気に入ったり、このサイトのデザインを参考にしたいと思うこともあるでしょう。それらを調査するには、開発者向けのデベロッパーツールなどを活用して、サイトに使用されているフォントやカラーコードを調べたり、レイアウトが気になる場合は、余白のサイズなどを調べる必要があります。Chromeのデベロッパーツールについては、下記の記事をご覧ください。最新の内容に更新しました。弊社カスタマーサポートに届くお問い合わせの中でも、HTMLやCSSにほとんど馴染みのない方やWordPress初心者の方からの質問に多くあるのが、「文字の...しかし、デベロッパーツールでは、高機能なゆえに必要以上の情報が表示され、目をくらまされることもあります。初心者にとっては見た目もごちゃごちゃっとしていて、直感的に操作できるツールとは言い難いでしょう。Peeper」をご紹介いたします。Chrome」をダウンロードしておく必要があります。Peeper」については、ブラウザで検索して公式サイトから「Chromeに追加」を選んでいただくか、下記のボタンから公式サイトへジャンプしインストールすることが可能です。Peeper」の使い方Chromeに追加できると、Chromeの画面右上に下記のアイコンが表示されますので、クリックして起動します。調べたいサイト上で起動すると下記のようなコンパクトなウィンドウが表示されます。サイトの基本情報が表示されるデフォルトの画面デフォルトで表示されている上記の「GENERALタブ」では、サイトの基本情報が表示されます。上から順に説明いたします。サイトのOGP画像(SNS上で表示されるサムネイル画像)タイトル見出しに使われているフォントファミリーbodyに使われているフォントファミリーCSSファイルの容量、読み込み時間サイト全体の配色の調べ方2つ目の「COLORSタブ」(水玉のアイコン)を選択すると自動でカラーパレットが生成され、サイト全体の配色を瞬時に把握することができます。この画面に表示されている気になるカラーコードは、任意のカラーパレットにカーソルを合わせて下記箇所をクリックするだけで、簡単にコピーできます。ご自身のWebサイトにすぐに反映可能ですね。ページ上に存在する画像素材のサイズの調べ方3つ目の「ASSETSタブ」を開くとそのページに使用されている画像やメディアファイルを一挙に抽出し、一覧で表示可能です。All」をクリックすると、すべてのアセットをダウンロード可能です。ページ上の画像やメディアファイルを一括でダウンロードできるので、Webサイトをコピーしたり、サイトを模してデザイニングの練習をするときなどに便利な機能ですね。特定の要素の余白や行間、フォントサイズの調べ方タブ以外の機能としては、表示しているページ内の任意の要素を指定し、CSSのプロパティを簡単に表示することができます。Peeperを起動している状態で、任意の箇所をクリックするだけです。赤の点線枠で囲まれている箇所のCSSの大まかな情報を表示できます。デベロッパーツールを使わなくても、インスタントに情報を得られるので効率的ですね。Peeperの良いところは、その洗練されたUIの心地いい使い勝手でしょう。普段からWebサービスをお使いの方であれば、特に難しい操作などはないので、WEBデザイン初心者の方でも非常に直感的に使えるツールです。CSSの確認作業をしたい初心者の方はデベロッパーツールを使う前に、こちらのツールで慣れ親しんでおくのも良いかもしれません。...2020.02.11ワードやエクセルの表をテーブルタグに変換する便利なツール・ジェネレータ集2020.02.10上質な癒しを感覚レベルで訴えかける。Macでzip圧縮する時に注意しておきたいこと。2019.12.28【初心者向け】Gitとは何なのか。基本用語やその仕組みをまとめています。2019.12.27WEBマーケティングより広義のデジタルマーケティングについて基本から考える2019.09.18今更聞けない?Webサイトのアクセス解析やマーケティングにおいて知っておくべき基本用語2019.09.17読み手の心を動かすコピーライターの仕事とは?ライティングやコピーの基本要素を知ろう2019.07.21国内有力ウェブメディア17サイトの記事更新頻度を調査してみた。No.1】人はコンテンツのどこをどう評価するのか。コンテンツマーケティングに関する重要な話2019.07.01スクリーンショットの撮り方でここまで変わる!かっこいい記事にする為の10のテクニック2019.04.07強烈なインパクトでユーザーの視線を鷲掴みにするWordPressテーマ【MAXX】のトップページについて2017.01.26ファーストビューで動画を使うと見る側にどう伝わっているかという考察記事2019.12.15プロ級の会員制サイト運営をあなたの手に。No.1】人はコンテンツのどこをどう評価するのか。