1. TOP
  2. 簡単ですぐに誰でもできるHP修正の指示書をエクセルで作るための秘訣

簡単ですぐに誰でもできるHP修正の指示書をエクセルで作るための秘訣

便利ツール この記事は約 8 分で読めます。

こんにちは。

 

マーケティングの読みものの管理人のKです。

HPの修正をする時などに、ページを印刷して、きれいに表示されなかったことありませんか?

また、スマートフォンでのページを印刷しようとしても、一部であれば写真に撮って送ればいいですが、LP(ランディングページ)などの縦に長いページだと、全てを撮影するのは大変ですよね。

 

そんな大変な思いをしている方は、是非とも今日の方法をお試しください。

誰でも簡単に、そしてすぐにできる方法があったのです。

 

この方法はもともと、私がLPの修正指示書を作ろうとして、何か良い方法がないか試行錯誤をしながら見つけた方法です。

ぜひ、みなさんの作業時間の効率化にお役立ていただければと思います。

 

ステップ①:事前準備編

それでは、早速はじめましょう!

と言いたいところですが、まずは事前準備を少し解説します。

 

使用ブラウザ

今回の指示書作りでのキーとなるのは使用するブラウザです。

  • Internet Explorer(インターネット・エクスプローラ)
  • Google Chrome(グーグル・クローム)
  • Firefox(ファイアーフォックス)
  • Safari(サファリ)
  • Microsoft Edge(マイクロソフト・エッジ)

などなど、他にもブラウザはありますが、今回は『Google Chrome(グーグル・クローム)』を使用します。

 

拡張機能をインストール

なぜ、『Google Chrome(グーグル・クローム)』を使うのかというと、その拡張機能が欠かせないからです。

では、具体的に何が必要なのか見ていきましょう。

 

 

まずは『Google Chrome(グーグル・クローム)』を立ち上げます。

 

 

画面の右側にある、「・」が縦に三つ並んでいる所をクリックしてメニューを開きます。

 

 

「メニュー」→「その他ツール」→「拡張機能」と進んでクリックします。

 

 

「拡張機能」のページが表示されたら、ページ下にある「他の拡張機能を見る」をクリックします。

 

 

ページが切り替わったら、左上の「ストア検索」のボックスをクリックして、「full page」と入力をして、「ENTER」キーを押します。

 

 

そうすると、候補がでてきますが、一番上に表示される「Full Page Screen Capture」を追加します。

右側にある「+CROMEに追加」というボタンをクリックします。

 

 

この画面がでたら、「拡張機能を追加」をクリックします。

 

 

以上で必要な拡張機能の追加が完了です。

そして、事前準備も終わりです。

 

ステップ②:実践編|PCサイト

いよいよ、実践編です。

事前準備が終わった、『Google Chrome(グーグル・クローム)』を使用して早速進めていきましょう。

 

対象ページへアクセスする

 

まずは、HPの修正指示書を作成したい対象ページを開きます。

今回のサンプルとして、Yahoo!JAPANで進め方を紹介していきます。

 

ページを読みこむ

 

対象のページへアクセスをしたら、先ほど追加した「拡張機能」のアイコンが右上に表示されていますので、そちらをクリックします。

 

 

ページの読み込みが完了すると、一枚の画像として、ページが表示されます。

 

 

画像が表示されたら、「右クリック」をして、「画像をコピー」をクリックします。

 

エクセルへ貼り付ける

 

画像のコピーが完了したら、エクセルを立ち上げます。

「A1」のセルが選択された状態で「CTRL + V」を押して「貼り付け」を実施します。

 

 

見た目には変化はありませんが、よく見ると「貼り付け」のアイコン(上図赤枠内)が表示されます。

 

 

この状態で、カーソルを上図のあたりに合わせると、カーソルが黒い十字になるので、クリックします。

※ここのクリックすべき場所を感覚的に覚えるのが少し難しいです。一度感覚を掴めるまで少し時間がかかるかもしれませんが、慌てないで何度か試してみましょう。

 

 

すると、□の図形が表示されます。

その状態になった後に、再度「CTRL + V」で「貼り付け」を実施します。

 

 

そうすると、コピーをしていた画像が貼り付けられます。

あとは、『図形』や『テキストボックス』を使って、ページのどこの部分をどのように修正するかを作り込んでいけば良いわけです。

 

 

ステップ③実践編|スマホサイト

続いては、スマホサイト(ページ)の修正書を作る方法です。

今回も『Google Chrome(グーグル・クローム)』を使います。

 

「えっ!?スマホサイトの見え方なのに、PCで見て大丈夫なの?」

 

と思われた方もいるかもしれませんが、実はPCを使ってスマホの見え方を確認する方法があります。

専用のブラウザや拡張機能などもありますが、今回はそれを使いません。

 

ディベロッパーツールを使う

では、早速『Google Chrome(グーグル・クローム)』を使って、スマホサイトの見え方をチェックしてみましょう。

今回使うのは「ディベロッパーツール」と呼ばれる機能です。

 

 

まずはスマホでの表示をチェックするサイトへアクセスします。

今回もサンプルとしてスターバックスのHPを使用します。

ページへアクセスしたら、先ほどと同様に「・」が縦に三個並んだメニューをクリックして開きます。

 

 

「メニュー」→「その他ツール」→「ディベロッパーツール」と進んでクリックします。

 

 

すると、こんな画面に表示が切り替わります。

画面が切り替わったら、赤枠のアイコンをクリックします。

 

 

すると、左側のサイトイメージの部分が小さくなり、スマホやタブレットで見た時のイメージとなります。

 

 

デフォルトではレスポンシブデザインが表示されていますが、メニューから端末ごとの表示に切り替えることも可能です。

 

 

あとは同じやり方でOK

ここからはPC編のときと進め方は同じです。

 

 

まずは「拡張機能」のアイコンをクリックします。

 

 

そうすると、ページの読み込みがはじまり、完了すると別ウィンドウで、画像が表示されます。

 

 

画像にカーソルを合わせ、「右クリック」から「画像をコピー」をクリックします。

 

 

エクセルを開いて、「CTRL + V」を押して「貼り付け」を実施します。

 

 

所定の場所をクリックして□の図形が表示されたら、再度「CTRL + V」を押して、「貼り付け」を実施します。

これでスマホのページも画像としてエクセルに張り付けることができます。

 

注意点

「Full Page Screen Capture」の拡張機能を使って作成をした画像は、そのまま画像として保存をしてしまうと、画像サイズが小さく、粗いものとなってしまいます。

エクセルへは画像として挿入する方法もあるため、「Full Page Screen Capture」で作った画像を「ペイント」ツールなどで画像として保存をして、それをエクセルに挿入してしまうと、きれいに表示されません。

 

同じように、画像として別で保存した物を印刷しようとすると、A4サイズでは粗すぎて文字が潰れてしまいます。

ですが、今回紹介した方法であれば、エクセルから印刷をすれば、A4でもA3でも画像の綺麗さはそのままで、くっきりと印刷をすることができます。

 

まとめ

画像としてエクセルに張り付けるとき、クリックすべき所定の場所を感覚的に掴むまでがすこし大変かもしれませんが、この方法を使えば、HP修正の指示書作りが格段に楽になることでしょう。

また、既存ページを繋ぎ合わせて、新規ページの構想を考えるときや、今の情報を刷新するときなどにも、具体的なビジュアルをイメージしやすくなります。

ぜひ、あなたの仕事の効率化にお役立てください。

\ SNSでシェアしよう! /

マーケティングの読みものの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

マーケティングの読みものの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!