食このブログは2019.07.25ウェブサイトの「背景画像」や右クリックできない画像、保存する方法ありますか?【デザイナーさん向け】タグ仕事向上Tipsパンフレットやチラシなど紙媒体を作っているデザイナーさんに向けて。お客様から「弊社のウェブサイトから画像を採って使って」と言われた。指示されたウェブページのその箇所を見てみたんだけど、右クリックしても「イメージを保存」が現れないしドラッグ&ドロップでのダウンロードもできない。いうとき一体どうしたらいいの?その解決方法をお話するよ。アイコンフォントちなみに、ゴチャゴチャ言ってくる人が多いのであらかじめおことわり。この記事は仕事上でお困りのデザイナーさんに向けたTipsで、顧客から画像の使用許可を受けていることを前提として書いています。一般の人がウェブサイトから勝手に画像を転用するとほとんどの場合、問題アリです。画像が右クリックで保存できないのはなぜ?理由はいくつか考えられるけど、いちばん多いのはこれです。画像が「背景画像」として表現されているから。背景画像って何?右クリックできないのはなぜ?HTMLで画像を表示させるには、ふつう<img>というタグを使いますが、それとは別に「ある領域の背景に画像を用いる」という記述方法もあります(CSS、background-image)。見た目はどちらも画像なんだけど、背景画像は意味としてはただの装飾なので、右クリックでダウンロードできるのは<img>タグで指定された画像だけなんですね。解析モードを使おう最近のウェブブラウザには、ウェブサイト制作者向けの「解析モード」というのがついています。解析モードにはそのウェブページで使われている画像を一覧できる機能があるから、そこから探してダウンロードしてみよう、というわけなのね。操作はMac/PCで。ウェブブラウザはできるだけ新しいものを使ってください。解析モードで画像一覧を見るにはまずはブラウザで指示されたウェブページを開きます。そのあとの手順は次のとおり。画像ディレクトリ(ページにより異なる)この中から目当ての画像を探して、右クリックやドラッグ&ドロップで保存すれば完了!目当ての領域を右クリックして探す方法ほかには、目当ての領域から調べる方法もあります。スクリーンショット及び説明はMac/Safariですが、他の環境でもだいたい同じなので試してみてね。これで解析モードが開いて、右側にスタイルシートの情報が表示されます。その領域にたしかに背景画像が設定されていたら、こんな感じの表示が見つかるはずです。background:url(...)background-image:url(....)これが目当ての画像らしい!とわかったら、「計算済み」のタブをクリックします。画像のURLが表示されているはずです。あとはこのURLをコピー、アドレスバーに入力すればその画像が表示されるはずなので、これを右クリック→保存すれば完了です。企業のウェブサイトではまずないと思いますが、行政や昔に作られたままのウェブサイトではたまにあるかも。画像を保存しようとしたら変なアラートが出たり、右クリックの反応が全くないときは、javaScriptによる「右クリック禁止」のプログラムが仕込まれているかもしれません。この場合も、さっき説明した「解析モードで画像一覧」の方法か、または設定でJavaScriptをオフにすることで保存できます。画像形式「SVG」のダウンロードSVGってのはイラレのパスみたいな画像形式です。これも、右クリックでは保存できない場合があります。SVGはjpgやpngみたいに画像ファイルとして扱うこともできるけど、実はその中身はアンカーの座標を書き連ねた文字列で、それをHTMLファイルに直書きする(*)ことでも画像を表示させることができます。「インラインSVG」なんて呼ぶんですけど、これが右クリックやD&Dでは保存できないのです。(*)ちなみに、なんでそんな面倒臭いことを?こうすると、ひとつのSVG画像を使いまわして、色や大きさだけCSSで変えることができるのです。デバイスが多様化したいま、どんなサイズでも綺麗に見えるベクター形式のSVGはウェブ制作者にはありがたいので、利用機会も増えています。インラインSVGの画像を保存するには?svgはイラレのベジェ曲線として扱えるから、もしかしたらこの方法で保存できるかも。Illustrator等で開く余談だけど、svgタグの中にビットマップ画像を埋め込むってケースもあるよ。アイコンフォント指示された画像が記号やアイコンぽいイラストの場合は、アイコンフォントを使って表現されたものかもしれません。これも右クリックで保存はできません。アイコンフォントは最近のウェブサイト制作ではよく使われます。Awesomeがあります。文字サイズをかなり大きく設定することでイラストのように使えたりもします。アイコンフォントはダウンロードできる?同じものをIllustratorやInDesignで再現するには、フォントファイルを入手してMacにインストールするという方法があります。詳しくは需要があれば。読みたいかたは質問受付フォームまで。著書「Illustratorおいしいネタ事典」が発売されました。イラレ初心者にも使えるTipsが満載です。チョコレートのパターンスウォッチ作ってみたIllustratorで、たくさんのアートボードを自動で作るスクリプト(1)[イラレTips]遠近グリッドをいますぐ消すには?わりとかんたんなグラデーションメッシュの描き方イラレ「遠近グリッド」の使い方:遠近グリッドで、こんな絵が描けるのよ。CC]フリーランスで仕事がない......って不安ならエージェント登録してみればいいのにフリーランスは全てが自己責任、何かあってからじゃ遅いから。「フリーナンス」に登録だけでもしておきなよウェブデザインスクールの選び方。Proにキーボードカバー。clearguard」買ってみたが悪くないよ。13のケース兼バッグインバッグにとても重宝キーボードショートカットは手に負担?腱鞘炎が気になるデザイナーさんにぜひ使ってほしい左手デバイス「Orbital2(オービタル2)」クリエイター丙についてこんにちは、鯛のマークのクリエイターブログです。クリエイターさんやフリーランサーさんに向けて書いています。IllustratorのTipsです。そのほかウェブのこと、WordPress、仕事術、旅行やゲームや趣味の話も雑多に取り扱っています。あなたのお役に立てれば嬉しいです。@creatorHeyこのブログについてこんなこと聞きたい。著書「Illustratorおいしいネタ事典」、イラストレーターさんの仕事を増やすウェブサイト制作サービス「いしつく!」代表など。#マイクラウェブデザインスクールの選び方。検索:イラレ使いのみなさんへ著書「イラストレーターおいしいネタ事典」イラレでこれどう描くの?を知りたい方に。なにげに今もじわじわ売れてます!Amazonで買う内容のご紹介ホームサイトマッププライバシーポリシーお問い合わせコンテンツの無断使用は固くお断りします。