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

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

5月になりましたね。 サムネイル画像は僕が前からずっと行きたかった十三にある人気ラーメン店「桐麺 本店」の桐玉です。麺と卵と出汁のみのシンプル…

2023.06.04.

private

ブロキの日本ダービー予想2023。今年の1着はあの馬で間違いなし!?

5月28日の日曜日は、我々にとって一大イベントが開催されますね。 その一大イベントとは・・そう、正解です。 「日本ダービー」ですね。 コロナ禍も…

2023.05.27.

think

本日5月13日、BUROKI design開業4周年を迎えることができました

2023年5月13日。 本日でBUROKI designは開業4周年を迎えることができました。 2019年の4月末に会社を退職して今の新居に引っ越し、4年前の今日、税務…

2023.05.13.

think

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

ゴールデンウィークはいかがでしたか? 僕はぼちぼち仕事しながらのんびりしていました。 しかし、ゴールデンウィーク中の4月末に人生の大きな決断を…

2023.05.11.

private

【天皇賞・春】リニューアルオープンした京都競馬場へ行ってきました

2020年秋より改修工事に入っていた京都競馬場が、約3年の時を経て4月22日にリニューアルオープンしましたね。 コロナも落ち着いて入場制限も緩和され…

2023.05.04.

private

大阪天満宮にある「鉄板焼 GUMP」で二度目の結婚記念日を祝う

4月22日は相方との結婚記念日。 今年で二度目の結婚記念日を無事迎えることができました。皆さまのおかげです。ありがとうございます。 昨年のこの日…

2023.04.29.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル