マーカーネット株式会社

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

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

関連記事

ワードプレス導入時に入れておくと便利なプラグイン(セキュリティ編)

ワードプレス導入時に入れておくと便利なプラグイン(セキュリティ編)

ワードプレスはオープンソースのため、そのソースコードが公開されております。 誰でも無償で、誰でも改変して商用利用も可能であるというメリットもございますが、 デメリットとして悪意のある者から不正侵入を許 …

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンクチェックしていますか? マニュアルでチェックするとたいへんですよね。 WordPressには自動で定期的にリンク切れをチェックしてくれる 便利なプラグインがございます。 その名もズバリ、「Bro …

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

WEBデザイナー、WEBディレクター、WEBプログラマー、WEBプロデューサー、プランナー、ライター、営業さん、ときおりカメラマンANDクライアント。とまぁたったひとつのホームページが出来上がるまでに …

え、うそ、なんか今っぽい。

え、うそ、なんか今っぽい。Photoshopで写真をDuo Toneにする方法 http://www.markernet.co.jp/blog/2015/09/02/post-6033/ Facebo …

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …