閉じる運営:株式会社セルリアビジネスを成功へと導くWebコンサルティング・インターネット広告・Web制作を提供する会社です。WorkspaceSNS運用HOME>デザイン・Web制作>Illustrator>Illustratorで配置した画像のサイズ変更と解...Illustratorで配置した画像のサイズ変更と解像度を最適化する方法Illustratorでは、配置した画像のサイズを変更したり解像度を最適化したりすることが可能です。今回は解像度の単位や印刷用とWeb用の解像度の違いなどを踏まえながら、Illustratorで画像のサイズや解像度を変更する方法を解説します。記事URLhttps://digitor.jp/textbook/illustrator_resolution/POINTこの記事をざっくり言うとIllustratorでは解像度を調べてから変更する画像をラスタライズすると最適化ができる印刷用の解像度とWeb用の解像度は異なる本記事ではIllustratorで配置した画像のサイズ変更と解像度を最適化する方法について解説します。画像解像度とは、画像の精細さを表す数値です。印刷物やWebサイトには、それぞれ最適とされる解像度があります。印刷データの場合は、画像解像度が十分でないと、画像が荒くなりきれいな印刷物として出力できません。一方で、PCやスマートフォンなど端末のディスプレイモニタで見るWebの画像は、解像度が高すぎると読み込み速度が遅くなり、ユーザーの閲覧状況に負担をかけてしまいます。したがって、用途に合わせて画像解像度を調整する必要があるのです。画像解像度には「dpi」「ppi」「lpi」という3つの単位がありますが、一般的には「dpi」が用いられます。inch(ドット・パー・インチ)」の略で、1インチ(=2.54cm)の幅の中にどれだけのドッドを表現できるかを示す単位です。1インチの幅にどれだけのドットが入るかという意味がイメージしやすくなるように下の画像を参考にしてみてください。通常はdpiが用いられますが、画像編集ソフトの設定によっては、その他の単位を目にすることもあります。以下の表にそれぞれの特徴をまとめたので参照してください。一般的に用いられる画像解像度の単位。画像データで使われるデジタルの単位。新聞・雑誌などの印刷紙媒体で用いられるアナログの単位ppiという単位は、Photoshopを使っていると、しばしば目にする単位です。ppiはデジタルデータなので、点に色の階調を持っているという違いはありますが、1インチあたりにある点の数という意味では同じなので、画像の鮮明さの指標という観点においてはdpi=ppiに置き換えても考えても問題ありません。印刷用の解像度とWeb用の解像度の違い印刷に使える画像解像度と、Webの表示に最適な画像解像度は異なるのは前述した通りです。以下に、用途別の画像解像度の目安を表にしましたので参考にしてください。印刷用に使うデータとしてクライアントから画像を提供してもらう時や印刷所にデータを入稿する時は、十分な画像解像度があるかを双方で確認することが重要です。その際、最適な解像度を知っておく必要があるので、上の値は覚えておきましょう。画像解像度の変更方法Illustratorでも、書き出しの際に画像解像度を設定することができますが、リンクや埋め込みで配置する写真の画像解像度を変更する場合は、通常Photoshopなどの画像編集ソフトウェアを用います。Photoshopでの画像解像度の変更方法は以下の記事も参考にしてください。配置画像の解像度を調べる方法まず、Illustratorで解像度を調べる方法について説明します。画面上部にあるメニューバーからウィンドウをクリックし、表示されるメニュー項目の中から「ドキュメント情報」を選択します。「ドキュメント情報」を選択すると、ドキュメント情報を表示するパネルが開きます。このパネルの右上にあるオプション項目を表示するハンバーガーメニューのアイコンをクリックします。表示されたオプション項目の中から、リンクした画像を確認する場合は「リンクされた画像」、埋め込み画像は「埋め込まれた画像」を選択します。ここでは、画像が埋め込み配置されているので「埋め込まれた画像」を選択します。3.情報から解像度を確認する「埋め込まれた画像」のドキュメント情報が表示されるので、この中から解像度の項目を確認します。次に、Illustratorで配置した画像の解像度を維持したままサイズを変更する説明します。画像配置にはリンク配置と埋め込み配置がありますが、元画像の画像解像度を変更できるのはリンク配置です。1.コントロールパネルにある「Photoshopで編集」をクリックリンク配置した画像を選択ツールでクリックすると、画面上部にあるコントロールパネルに、画像の情報が表示されます。ここに表示された項目の中から「Photoshopで編集」をクリックします。2.Photoshopで画像解像度を変更する「Photoshopで編集」をクリックすると、Photoshopが起動しリンクの元画像のデータが開きます。画面上部にあるメニューバーからイメージをクリックし、表示されるメニュー項目の中から「画像解像度...」を選択します。「画像解像度...」を選択すると、画像解像度を設定するパネルが開きます。このパネルで値を変更します。画像解像度を変更せずに、画像のサイズを変える場合は、縦横比固定のチェーンの形をしたアイコンをONにして、再サンプルにチェックを入れた状態で数値を変更します。幅、もしくは高さを変更し、「OK」をクリックします。解像度が変更できたら、メニューバーからファイルをクリックして表示されたメニュー項目の中から保存をクリックするか、commandキーとSを押して画像を保存します。3.Illustratorでリンク画像を更新するIllustratorに戻ると、上の画像のように「リンクパネル内のファイルが削除または修正されました。リンクファイルを更新しますか?」というアラームが表示されますので、この表示パネルにある「はい」をクリックします。最後に、ドキュメント情報を開いて画像解像度の変更が正しく反映されているか確認しておきましょう。次に、Illustratorで配置した画像の解像度を最適化する方法を説明します。ここではリンク画像配置を、埋め込み画像配置に変換し、ラスタライズすることで解像度を最適化する方法を説明します。画面上部にあるメニューバーから選択をクリックし、表示されたメニュー項目の中から「すべてを選択」を選択します。画面上部にあるメニューバーからウィンドウをクリックし、表示されたメニュー項目の中から「リンク」を選択します。「リンク」を選択すると、リンクの設定パネルが開きます。このパネル右上に、オプション項目を表示されるハンバーガーメニューのアイコンがあります。このアイコンをクリックして表示された項目の中から「画像を埋め込み」を選択します。「画像を埋め込み」を選択すると、Photoshop埋め込みオプションというパネルが開きます。このパネル下部の「OK」をクリックすると、画像配置がリンクから埋め込みに変わります。次にラスタライズを行います。ラスタライズは、画面上部にあるメニューバーからオブジェクトをクリックし、表示されたメニュー項目の中から「ラスタライズ...」を選択します。「ラスタライズ...」を選択すると、上の画像のようなラスタライズを設定するパネルが開きます。このパネルにある項目で画像解像度を変更できます。4.ラスタライズのパネルで解像度を変更ラスタライズのパネルに、解像度という項目のプルダウンメニューがあるので、これをクリックして解像度を選択します。パネル右下にある「OK」をクリックすると、画像がラスタライズされ解像度も変更されます。画像解像度が変更されました。この画像解像度の最適化は、Illustratorですでに多くの画像配置が済んだ後に、解像度の変更が必要になった場合に大変便利な機能です。Photoshopなど写真編集ソフトウェアが使えない環境でも、画像解像度を変更する代替手段として役立ちます。ラスタライズに関しては以下の記事も参考にしてください。最後に、書き出しの際の画像解像度の設定方法を説明します。画面上部にあるメニューバーからファイルをクリックし、表示されたメニュー項目の中から「書き出し形式...」を選択します。「書き出し形式...」を選択すると、書き出しの設定パネルが開きます。このパネル下部にあるファイル形式の項目で、画像の形式を選択します。ここではjpgで説明します。3.用途に合わせた解像度を選択jpgを選択すると、JPEGオプションというパネルが開きます。このパネルで解像度を変更することができます。他の画像形式の場合は、設定項目等が異なりますが、同様に解像度を設定できるものもあります。設定したら「OK」をクリックすると、指定した画像解像度でファイルが書き出されます。まとめ今回は印刷用のデータとして画像解像度を変更・調整する流れで解説しましたが、Web用の画像素材を作る際にも画像解像度を変更・調整は必須の作業になります。画像解像度の設定はプロのデザイナーとして活動していく上では必須の知識であり、ノンデザイナーのビジネスパーソンにも画像解像度の理解が必要な状況が多々あります。本記事を参考にして、画像解像度の基本を理解し、Illustratorを用いて適切な画像データを作成できるようになっておきましょう!その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。作成したデザインのフォントをIllustratorでアウトラインする方法を解説。Illustratorにフォントを追加インストールする方法Illustratorではフォントを新たにインストールすることが可能です。Illustratorでトンボ(トリムマーク)を作成する方法Illustratorでトンボ(トリムマーク)を作成する方法を解説します。最後までお読みいただきましてありがとうございます。以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。企画し実装まで支援する伴走型Webコンサルティング会社です。<AOHON>Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。