HUMOR in DESIGN and CREATIVE.

BUROKI


top

BUROKI 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月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います。(笑)

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

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

ご依頼・お問い合わせ

ご依頼・お問い合わせ

Latest results

最新の制作実績

blog list

ブログ一覧

private

new

ダービーウィークは毎年のお楽しみ。スポーツ雑誌Numberの特集号を買う

ダービーウィークは毎年のお楽しみ。スポーツ雑誌Numberの特集号を買う

今週末はいよいよ日本ダービー。競馬シミュレーションゲームの「ダビスタ96」にハマりまくって、99年度版が発売されたにもかかわらず96年版を2000年…

2019.05.25.

private

new

長居公園の近くにある気になっていた肉バルBoo Boo Kitchenで晩ごはん

長居公園の近くにある気になっていた肉バルBoo Boo Kitchenで晩ごはん

クーラーを買いに行った2日前の夜に現在長居公園で開催しているビールイベント・オクトーバーフェストで飲んで踊って楽しんだあと、もう少し飲みたく…

2019.05.24.

private

new

大阪一豪華な朝ごはん!?飯炊き仙人のいるお店「ゲコ亭」にて銀シャリを食す

大阪一豪華な朝ごはん!?飯炊き仙人のいるお店「ゲコ亭」にて銀シャリを食す

実は新居にはまだクーラーがありません・・しかも今週末からまだ5月だというのにかなり暑くなるということで。これは早く設置しといたほうがいいよね…

2019.05.23.

design_thing

new

2012年から現在までのBUROKIロゴデザインの移り変わり

2012年から現在までのBUROKIロゴデザインの移り変わり

インハウスデザイナーを本業としながら「BUROKI design」として個人でもデザイン活動を開始したのが2012年。いまこのwebサイトの左上に掲げているボ…

2019.05.22.

private

new

送別会の夜にもらった「WATERMAN」のボールペンとは?

送別会の夜にもらった「WATERMAN」のボールペンとは?

もう2ヶ月くらい前の話で申し訳ないのですが、前職を退職したときに送別会を開いてもらったんですね。そのときに実は元同僚でありボクのYouTubeチャ…

2019.05.21.

private

webサイトに載せる写真がないなら一眼レフカメラで自分で撮ればいい

webサイトに載せる写真がないなら一眼レフカメラで自分で撮ればいい

昨日は昼すぎから近鉄の八戸ノ里駅へ・・もう5月の半ばということもあって暑くなりましたね。 前職から仲良くしてくださっていて、名刺や封筒なども…

2019.05.17.

all blog list

Latest contents

最新コンテンツ一覧

Do you like "B"?

最後まで見てくださって、本当にありがとうございます。

最後まで見てくださって、
本当にありがとうございます。

topトップページ

aboutブロキについて

designデザイン

blogブログ

films制作動画

cassetteカセットテープ

contactお問い合わせ

snsソーシャル