DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • 画像がにじまないホームページを制作する方法

画像がにじまないホームページを制作する方法

design_thing

  • top
  • blog
  • 画像がにじまないホームページを制作する方法

画像がにじまないホームページを制作する方法

2019.01.19.

スポンサーリンク

スポンサーリンク

どうも、転ぶときは前向きに転びたいブロキです。
不安だけ煽るように人に話してしまうときってありますよね・・そういう時も指摘して終わるだけでなく、少しの提案を最後に入れて話したいものですね。下げるだけでなく最後にグイッと上げるってことが大事だと思います。

さて、いまやスマートフォンでホームページを見たりすることは当たり前になりましたね。それと同じくPCでもスマホでも、機種によってモニターの大きさがいろんなサイズになり、解像度が以前よりどんどん上がってキレイになってきています。

モニターの解像度とは?

macbookのモニター写真

モニターの解像度とは、画像を表示するために必要なpx(ピクセル)の集まりの画素数のことで、いまのスマホやPCなどのデバイスではこの画素数が上がってきているということです。デジカメなども同じように画素数が上がれば上がるほど画像がキレイに表示されます。

この解像度が上がることで影響を受けるのはホームページ(webサイト)の場合、写真だけではありません。多くのホームページでは表示しているロゴやナビゲーションメニュー、ページのデザインなどに画像が使用されています。その画像にも影響が出てしまうのです。

実際に最近のノートPCやスマホで見ると、画像が滲んでいるのがわかります。ボクのリニューアルする前のサイトもあらゆるところに画像を使用していたので、画像や写真、ロゴがぼやけていました・・

画像がにじまないホームページにする方法

画像がにじむ、ぼやけることは視認性が低くなるだけでなく、もしかするとビジネスサイトの場合信用度にも関わってくるかもしれません。にじませないようにするにはどうすればいいのか・・?方法はいくつかありますのでご紹介いたします。

1. ロゴやアイコン画像はsvgファイルで表示する

おそらくホームページに使用・表示されている多くの画像の拡張子はjpg(ジェイペグ)やgif(ジフ)画像だと思います。この拡張子の画像にすると、その画像サイズの解像度より大きくは表示されないので、解像度が上がってしまうとどうしても画像がぼやけてしまいます。
冒頭にも述べましたが今はいろんな大きさのモニターからホームページにアクセスされる時代・・そんな時代に合わせた拡張子にする必要があります。

svg画像はベクター形式でつくられている画像で(ややこしい説明は省いています)、ベクター形式のデータは拡大・縮小しても画質が変わらないという特徴を持っています。特にロゴやアイコンなどに最適で、どのサイズのモニターで表示してもキレイにくっきりと、ストレスなく表示されます。ボクのサイトの左上にあるロゴはまさにsvgファイルで表示させているのですが、くっきりしてますよね?

2. 文字はできるだけwebフォントを使用する

webフォントを使用しているページ

スマホが登場する前、ホームページに文字ですら画像を使用してつくることは当たり前になっていました。文字を画像にしていた主な理由はいろんなフォントを使用でき、デザインの幅を広げることができるからです。

しかしスマホが普及したことでモニターの大きさが変わり、サイズが決まっている文字の画像を読ませることが難しくなりました。サイズが決まってしまっているのでスマホの幅に合わせるとなると、どうしても小さく表示するしかなくなってしまうんですよね・・
さらに不便なのはスマホに合わせたサイトにしようとすると、画像をまた作り直さないといけないので一文字修正したい場合でもまたデザイナーにお願いしないといけない・・正直、かなり効率が悪いです。

そこでgoogleは「webフォント」を用意してくれました。
今まではwebで表示できるテキストのフォントは数種類くらいしかなく、表示されてもモニターによっては読みにくかったりしていたのですが、モニターの解像度が上がってきたことでより鮮明に表示され、webの進化によっていろいろなフォントを表示できるようになりました。文字の画像をつくる必要がほとんどなくなったのです。

これからはさらにいろんなフォントを誰でも簡単に使用できるようになっていくので、webフォントを使用したホームページをつくることは意識しておきましょう。

3. 表示する写真のサイズは2倍に

「大は小を兼ねる」ということわざは皆さんご存知だと思います。これはweb上に表示させている写真にもいえることで、大きなサイズの写真は縮小してもきれいに表示されますが、小さなサイズの写真は拡大するとぼやけてしまいます・・

ただ、大きな写真はその分データの容量も大きくなってしまい、写真を表示するスピードが遅くなってしまうことがあります。遅くなってしまうとホームページを訪れた人にストレスを与えてしまう可能性があるので、写真のサイズはそのままで容量のみを小さくしてくれるwebサービスを使って画像の容量はできるだけ抑えて表示するようにしましょう。

ボクのサイトの場合、この「パンダちゃん」をよく利用しています。データ容量が半分以下に落とすことができるのでいいですよね。

時代の変化に対応するホームページにしよう

今回は手っ取り早く対応できる3つの項目を紹介しました。何年も前からホームページをお持ちの人はどこから手をつけたらいいのか悩まれるかもしれませんが、その場合は制作してくれた人やボクにご相談ください。できるだけシンプルで、ストレスのないホームページをつくっていきましょう!

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

think

【感謝】おかげさまでBUROKI designとして開業して2周年を迎えました

本日5月13日。 BUROKI designは開業2周年を迎えました。 開業する前からこのブログの更新は続けていたので、開業当時、開業1周年のこともブログに綴…

2021.05.13.

think

2021年4月の活動報告。4月はこんなデザイン制作をしていました

ただいまGW中ですが、緊急事態宣言中でもあるため、外出が思うようにできず通常の一週間と同じような日々を送っています。 早く宣言を解除してもらい…

2021.05.05.

private

長居公園の近くにある「cafe glue」でおしゃれプレートランチを食す

先週の金曜日は相方とランチ。 いつもは駒川商店街にあるお店で食べることが多いのですが、この日は天気も良かったので自転車で長居の方面へ行ってみ…

2021.05.03.

think

フリーランスになるならマイナンバーカードは絶対取得しておきましょう

昨年、コロナの影響で国民全員に特別定額給付金10万円が支給されることになり、今まで以上に脚光を浴びたのは「マイナンバー」ではないでしょうか? …

2021.04.29.

favorite

ちゃんとoisixの14周目の夕食フォトギャラリーまとめ

相方が昨年ふるさと納税で選んだ熊本の米(2袋)がついに昨日なくなってしまい、少し寂しさがあるブロキです。あの米めちゃくちゃ美味しかったのに・…

2021.04.27.

private

100万株の青を体験。ネモフィラ祭りを見にシーサイドパークへ行ってきた

最近は春というか、初夏のような陽気が続きますね。 相方がいつも通っている整骨院で「ネモフィラ祭り」という催し物の招待チケットをもらってきまし…

2021.04.25.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル