マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEB制作

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

投稿日:2015年2月5日 更新日:

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

どうも、デザイナーのOです。
前回に続けて、Webとグラフィック制作との違いについて紹介していきたいと思います。

画像形式

大まかに分けると、ベクター形式のデータは紙媒体向け、Webの場合はラスター形式です。
0205_1
印刷物の最低解像度は350dpiで、webの72dpiと比べると解像度が5倍も高いので、
拡大しても画質が劣化しないベクターデータでデザイン要素を作ることが多いです。

一方、複雑なオブジェクトや写真の場合だと、ラスター形式のデータのほうが綺麗に見えますし軽いです。

タイポグラフィの制限

Webサイトには「画像」と「テキスト」2種類の文字が存在します。
0205_2
簡単に区別すると、マウスカーソルでコピーできるものがテキスト、できないものが画像です。
Webに比べてグラフィックデザインのほうは文字の制限が少ないです。文字詰めも自由に調整できますし、タイポグラフィ的な表現も可能です。
サイトの場合だと、文字を画像にしないとこういったような表現ができません。

デザインの範囲

Webサイトをデザインする際、まず意識すべきなのは「ファーストビュー」という範囲です。
環境によって変わりますが、ファーストビューとはページを開いてスクロールしなくても表示される範囲のことを指します。
紙と違って、Webは一目でページ全体を見ることができませんので、
如何にファーストビューの範囲内でインパクトの与えるデザインをするのが、Webデザインの課題です。

続きはまた次回ご説明いたします…

-WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【コーダーには常識!?】あなたのコーディングをチェック!

【コーダーには常識!?】あなたのコーディングをチェック!

コーディングをしたけど、エラーや間違いがないか不安に感じたりしませんか? リンク切れやソースの間違いなどを一つ一つ調べていくのは大変です。 そこで、コーディングエラー、リンク切れなどを調べてくれるお勧 …

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

近ごろのニュースで、訪日観光客の増加という記事をよく見かけるようになりました。東京の街を歩いても日本への訪日客が増えたことを実感できるほど外国語が飛び交ってますね。2015年は【多言語化元年】と言われ …

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(2)

こんにちは、デザイナーのAです! 前回、いいデザインと悪いデザインの見分け方・・・マージンの取り方についてご紹介しました。 デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(1) 今回 …

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材をご紹介。

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材をご紹介。 https://www.markernet.co.jp/blog/2015/08/19/post-6004/ Facebook

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

こんにちは。 今回はクリックするだけでゴールド&メタリックな質感のデザインが作れてしまうPhotoshopのレイヤースタイル素材と活用方法についてご紹介いたします。 このフレームを・・・ たっ …