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

ブログ一覧

private

山田商店の生イカキムチを食べると、旨すぎて他のキムチが食べられなくなります

少し前に、webサイト制作の打ち合わせで久しぶりに大阪市内の生野区まで行ったので、帰りに桃谷にあるコリアンタウンに寄りました。何しに行ったのか…

2020.06.06.

think

【祝】2020年5月の月間PV数が20,000ページビューを突破しました

人生初の月間ページビュー数10,000を突破したのが今年の3月だったのですが・・。それから2ヶ月後の5月に、その倍となる月間20,000ページビューを突破…

2020.06.04.

design_thing

サーバーのレンタルとドメインの取得はここにしておけば間違いない!

ここ最近はwebサイト制作のご依頼がありがたいことに殺到しておりまして、順次対応させていただこうと思いながら徐々に進めております。 本当にあり…

2020.06.02.

design_thing

【2020年5月現在】BUROKI designのデザイン制作メニューまとめ

フリーランスになって1年が過ぎ、そういえば制作メニューのようなものをつくっていなかったことに気づいたので(今更)、このタイミングで一度BUROKI…

2020.05.29.

private

フリーランス開業1周年記念コースタープレゼント企画の抽選をしました

5月13日の開業1周年記念日の翌日からインスタにて開始したコースタープレゼント企画・・。応募の締め切りが24日の日曜日だったので、翌日25日に抽選…

2020.05.27.

think

ボクがブログ記事を書くときに最低限意識しているSEOのこと

このBUROKI designのwebサイトをちゃんと運用するようになったのが2018年の11月。2012年ごろからwebサイト自体は公開していましたがほぼ何もせず、20…

2020.05.23.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル