このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:ミス激減!チェックボックスでファイルを複数選択する (12/05)
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • Windows:目的毎,ファイルの種類(拡張子)毎に既定アプリを変更 (11/25)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    「解像度」ってフォントサイズにも影響するよねというお話

    このエントリーをはてなブックマークに追加
    イメージ


    こんにちは、さち です。

    画像編集をしたりイラストを描いたりするようになると
    よく出てくる言葉「解像度」。

    「解像度」は印刷に関係する数値だから
    ウェブ用の画像には関係ないと言われることがあります。
    本当なのでしょうか?

    今回は、「解像度」はフォントサイズにも影響するよというお話。
    個人的に気になって調べた内容ですがお役に立てば幸いです。




    そもそも「解像度」って何?

    操作画面

    一般的に「解像度」というと
    液晶ディスプレイ等のピクセル数(1920x1080等)を指す
    と思うかもしれません。

    しかし、画像編集での「解像度」はまったく別のもの
    同じ単語でも意味が全然違うので混同してはいけません。
    ややこしいですね。

    画像編集で使う「解像度」の単位は「dpi」や「ppi」。
    「dpi」は「dots per inch」の頭文字を取ったもの。
    「ppi」は「pixel per inch」の頭文字を取ったもの。
    どちらにも入っている「per」は「/(斜線)」のことだと思って下さい。
    時速60キロを「60キロ/時」と書くときの「/」と同じです。

    つまり、
    「dpi」 = 「ドット/インチ」
    「ppi」 = 「ピクセル/インチ」ということです。
    「インチ」は長さを表す単位です。
    (1インチ=2.54cmですが覚えなくていいです)

    だから、「dpi(ドット/インチ)」と「ppi(ピクセル/インチ)」は
    「1インチの間に○○個のドット(ピクセル)がある」という意味。
    「解像度」は点の密度を表しているわけです。

    画像はこの「解像度」をもとに印刷が行われます。
    例えば、縦横300ピクセルの画像を印刷する場合
    300dpi では1インチに300ドットなので縦横1インチの大きさで印刷されますが
    100dpi では1インチに100ドットなので縦横3インチの大きさで印刷されます。

    つまり、「解像度」は画像の印刷サイズに影響します。




    ウェブ用画像に「解像度」は関係ない?

    「解像度」は印刷用の数値。
    ウェブ用の画像であれば「解像度」はいくつでもいい。
    そんな話を聞いたことがあるかもしれません。
    これは、ネット上の画像の表示が「ドットバイドット」方式だからです。

    「ドットバイドット(dot by dot)」とは
    画像の1ピクセルを液晶画面の1ピクセルに合わせる表示方式のこと。
    つまり、ドットバイドット方式で画像の大きさに関係するのは「ピクセル数」だけ。
    だから、ウェブ用画像の解像度はいくつでもいいと言われるわけです。

    では、ウェブ用画像を作るときは
    解像度はテキトーな数値で良いのかというと、そうではありません。
    実は、解像度は画像に入れる「文字」のサイズにも影響するからです。




    文字サイズ「pt(ポイント)」には解像度が関係する

    やっとここからが本題です。
    前置き(予備知識)の説明が長かったですね、すみません…。

    Photoshop, CLIP STUDIO PAINT, IllustStudio 等のソフトは
    画像に文字を入れる機能がありますよね。
    初期設定では、文字サイズの単位は「pt(ポイント)」です。
    (設定から単位を変更できる場合もあります)
    操作画面

    「pt」は長さを表す単位で、「1pt = 1/72(≒0.014)インチ」。
    実は、文字サイズでも「インチ」という単位が関わっているんです。

    思い出して下さい。解像度の単位は「ピクセル/インチ」でしたよね?
    こちらにも「インチ」という単位があります。
    つまり、解像度は文字サイズに影響する数値なんです

    例えば、同じ「24pt」の文字でも
    解像度が異なると画面上のサイズはこんなにも違います。

    サイズの比較
    ※ px = pixel(ピクセル)

    96dpi では 72dpi より約1.3倍大きく
    300dpi では 72dpi より約4倍も大きいサイズになります。

    ちなみに、「pt」を「px」に変換する式は「解像度」を用いて次のようになります。

    計算式

    文字サイズ「pt」が一定の場合
    「解像度」が大きいほど、文字サイズ「px」も大きくなるのが分かります。

    先ほどの例で計算すると次のとおり。

    【300dpiの場合】 24 × 1/72 × 300 = 100 px
    【96dpiの場合】 24 × 1/72 × 96 = 32 px
    【72dpiの場合】 24 × 1/72 × 72 = 24 px


    72dpi はキレイに約分できるので「pt」の数値がそのまま「px」になります。
    計算の手間が省けますね。
    ウェブ用画像の解像度に 72dpi がよく使われるのはこれも理由なのでしょうか。




    「Word」の表示はWinとMacで大きさが異なる(オマケ)

    比較

    Windows で作成した Word ファイルを Mac で開くと
    上の画像のように『文字小っさ!』となります。

    拡大率は「100%」
    フォントサイズは「10.5」
    フォントは「MS 明朝」
    Windows と Mac どちらもまったく同じ条件。
    でも、Mac の方が小さい。

    もう気付いているかもしれませんが、原因はやはり「解像度」です。

    実は、Word のフォントサイズも単位が「pt」。
    基本的に、Word は印刷することを前提にしているので
    px より pt を使う方が都合がいいのです。
    「pt」が同じであれば、解像度が異なっても
    紙に印刷した時の文字の大きさが同じになるからです。

    Windows は 96dpi、Mac は 72dpi です。
    つまり Mac のディスプレイ上での文字サイズは
    Windows の4分の3(75%)になってしまいます。

    実際に、10.5pt で計算してみると
    Windows での 10.5pt は「14px」
    Mac での 10.5pt は「10.5px」。
    10.5px はちょっと小さいですよね。




    以上の内容は、
    調べたことをもとに自分なりにまとめたものです。
    誤りなどありましたら指摘して頂けるとありがたいです。








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2016 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ