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年間様々な媒体のデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います。(笑)

他にもいろんな作品の紹介やブログを書いてるのでぜひ見てみてください。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談くださいね。

ブログをご覧いただきどうもありがとうございます。他にもいろんな作品の紹介やブログを書いてるのでぜひ見てみてください。制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談くださいね。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

スポンサーリンク

blog list

ブログ一覧

private

お呼ばれしたので奈良で開催されたwebデザイナーの飲み会に参加してきました

12月7日(土)の18時ごろ、天王寺からJR大和路線で奈良駅へ向かう・・ ボクが所属しているコミュニティメンバーのデザイナーさんから奈良でwebデザイ…

2019.12.09.

design_thing

どれを選べばいい?名刺を発注するときの業者と用紙の選び方

「自分の名刺をつくりたい!」「上司に名刺の発注頼まれたけど、どこにお願いしたらいいのかわからない・・」 これはクリエイターやデザイナーでなく…

2019.12.05.

private

ホームベーカリーでつくった自家製パンの出来栄えに涙が止まらない

相方が数年前にもらったというこのホームベーカリー・・ 廣瀬というメーカー?がオリジナルでつくっているホームベーカリーだそうで、ブランド名は「…

2019.12.03.

private

遅めの盆休み。石川県加賀温泉旅行の2日目と最終日

今回のブログは前回の加賀温泉旅行初日ブログの続きということで・・書いていきたいと思います。 前回のブログを見逃している人は下記のリンクよりご…

2019.11.30.

private

遅めの盆休み。石川県の加賀温泉を旅行してます

いまこのブログを旅館の部屋から夜景を見ながら書いています。 フリーランスになってから連休らしい連休がなく、仕事がひと段落つきそうな11月末のこ…

2019.11.28.

private

京橋で開催されたクリエイター忘年会に参加してきました

日曜日の夜はちょっと早めのクリエイター忘年会にお呼ばれしていたので、地下鉄で京橋へ・・。 北側の商店街内にある「燻製イタリア酒場 京橋 ORA」…

2019.11.26.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル