マーカーネット株式会社

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

WEB制作

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

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

約3週間に1回の登場になりますが、デザイナーのOです。
前回に続けて、Webとグラフィック制作との違いについて、続いて紹介していきたいと思います。
今回は最終回となりますので、最後まで読んでいただければ幸いです。

レイアウト

前回も少し話しましたが、webと紙は基本的に違う媒体なので、見せ方やデザインのレイアウトの仕方も変わってきます。
Webは紙と違ってデザインのみで完結できないので、デザインするときはコーディングのことも考えなければいけません。紙よりレイアウトに縛りが多いです。
紙の場合はイラストに沿ってレイアウトなど自由に配置できますが、webだと全部1枚の画像にする感じになります。

grey--column--psd-design-grid_54-5824
webデザインはグリッドを意識ながらデザインしていくことが多いです。

立体V.S.平面

デザイン的な表現も、webと紙媒体によって表現の仕方が異なります。
紙でもモニターでも平面的なものですが、webの場合、紙に比べて立体的な表現がよく見かけます。
例えばシャドウやグラデーションの使い方を見れば分かると思いますが、webはよくドロップシャドウやグラデーションを使いますが、紙の場合は逆に使わないほうがスッキリして、きれいに見えます。
0224

動き

個人的に一番わかりやすい例だと思います。
webと紙両方のデザインやって一番違いを感じたんのは、動きを意識するかどうかのことです。
サイトの場合は、ユーザーに見ってもらうだけではなく、ボタンなどをクリックさせるのが最終的な目的です。ですので双方向性が高いデザインや、動きの設定などは求められます。
flat-devices-with-hands-gesture_62147501001

更新

紙には更新という概念はなく、修正や情報を更新する場合は刷り直ししかないです。
一方情報をどんどん更新、調整していけるのがwebの特徴です。

グラフィックはデザインが完成したら終わりますが、
Webはデザインが完成したらそこから始まると言っても過言ではないですね。

以上はDTP出身の私から、webと紙媒体デザインの違いについての紹介でした。
最後宣伝になりますが、マーカーネットではWebだけではなく、グラフィックの分野においても経験豊富なデザイナーが在籍しておりますので、興味のある方は是非こちらのページよりお問い合わせしてみてください。

-WEB制作

執筆者:


comment

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

関連記事

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

ブロック要素の高さを揃えるJavaScriptはいくつかあります。 その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。 「fixHeight.js」の設置方法 ま …

背景に動画を取り入れたWEBデザイン

背景に動画を取り入れたWEBデザイン

動画を取り入れたWEBサイト。 大分主流となってきて、見かける頻度も一段と増えました。 動画 = 重い という概念もどこへやら。。 最近のWEB動画はとても軽い。 背景として動画を入れ、飽きさせること …

【Fireworks】Flashなしで簡単に作れるGifアニメーション

【Fireworks】Flashなしで簡単に作れるGifアニメーション

サイトにちょっとした動きがほしい時、Flashを使わず、Fireworksでも簡単にGifアニメーションを作成できます。 ここで画面読込中のローディングアニメーションを作る手順をご紹介したいと思います …

【デザインに一工夫】ちょっと変わったアイコン素材サイト3選

【デザインに一工夫】ちょっと変わったアイコン素材サイト3選

日頃WEBデザインの仕事に携わる関係上、素材サイト巡りをすることがよくあります。 その中で、最近面白いなと思ったサイトをご紹介したいと思います。   ヒューマンピクトグラム2.0 http: …

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

以前ご紹介しました面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!の応用編になります。 前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラ …