マーカーネット株式会社

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

WEB制作

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

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

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

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

Contents

画像形式

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

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

タイポグラフィの制限

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

デザインの範囲

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

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

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-WEB制作

関連記事

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

線画イラストの線画だけ抜き出したい!背景を透過したい!!・・・そんな時に役立つphotoshopの小技をご紹介します。   (1)まず、画像をphotoshopで開きます。 (2)メニューの …

商用利用OK!お洒落な無料フォント6選

WEB制作における商用利用OK!お洒落な無料フォント6選

こんにちは、デザイナーのAです。 今回は商用利用OKな無料フォントをご紹介します! 無料フォントとして紹介されているフォントでも、中には商用利用は不可とされているものもありますので、ライセンスをしっか …

デザインで役立つ!参考サイトまとめ

こんちには、デザイナーのHです。 今回は、自分自身が良く参考にしているwebサイト全体の参考サイトではなく、パーツのデザインにフォーカスを当て、いくつかご紹介します。 Contents Parts. …

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jQueryを利用して、 facebookの指定のアルバムから写真の一覧を取得する方法を紹介します。 ※ まず、facebookからアルバム一覧します。 var name = “markernet”; …

簡単レシピ!アメコミ風デザイン素材と活用法!!

今回はアメコミ風のデザインを作るときに役立つフリー素材と活用法をご紹介いたします。 まずは実際のアメコミを見て、簡単に特徴を分析してみます。 アメコミでgoogle画像検索をかけると、、、 とってもカ …