» 超!個人的「紙デザイン」と「Webデザイン」の違い|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

超!個人的「紙デザイン」と「Webデザイン」の違い

スタッフブログ

  • 2019.05.13

    超!個人的「紙デザイン」と「Webデザイン」の違い

    顔アイコン

    こんにちは!そしてお久しぶりです。デザイナーのたっきーでございます。

    私事ですが、アババイに入社する前は、ウェディング雑誌の編集者として働いておりました。(^J^)

    ワケあって、1年前にアババイへお世話になることになったのですが、

    最初のころは(今もかな…)これまでやってきた紙媒体のデザインとは違い、Webデザインの作り方にかなり難儀しておりました…!!!(;´∀`)

    そこで!超個人目線ですが、紙デザイン出身の自分がWebデザインをすることで、感じた「違い」をご紹介します!!

    もし、これからWebデザインにチャレンジされる方は、少しでも参考になればと思います。

    ※何度も言いますが、超個人的な感想ですので、全ての方に当てはまるわけでは

    ございません…m(__)m

     

    pixta_17457543_M

     

    その1 メインで使うデザインソフトがフォトショップ

    はい。いきなり初歩的なポイントですが…笑

    編集時代は、デザインをするときは、基本的にIn DesignかIllustratorを使っていました。もちろんPhotoshopも使用していましたが、画像を補正する程度で加工技術もそこまで詳しくありませんでした…。

    Webデザインでは、基本的にPhotoshopで制作します。

    なので、どれだけPhotoshopを使いこなせるかは、かなり重要になってきます…((+_+))

     

    その2 ピクセル単位での調整・使用フォント

    印刷物とは違い、デザインしたら入稿して終わりではありません!

    コーディングという、いわゆるWeb上に表示させるための作業があります。

    そのため、webに適性なサイズがあります。

    正直…紙デザイン時代は、ガイドを使わず、目視だけで幅感やバランスを調整していたこともありました。※ダメですね…。。

    しかし、webデザインになると、見た目では分からない1pxのズレがきちんとWeb上で表示されるために、大きく関わってきます!

    実際、私もコーダーさんにめちゃ怒られてます(*´ω`*)笑

    また、Web上で適性なフォントもあります。今はとても多くのフォントの種類がありますが、特殊なフォントはコーディング上で修正できないものも…。

    紙でも一緒ですが、web上で可読性が下がらないフォント選びも大切なようです。

    個人的には、上記の2つはWebデザインのほうが、かなりシビアな気がします。

     

    その3 画面幅によるサイズ感の調整

    最大の違いといっていいかもしれません。

    A4・B4などもサイズが決まっている紙デザインに対して、

    Webデザインでは、PC・スマホ・タブレット種類もさることながら、

    それぞれの画面幅も機種によって異なってきます。

     

    基本的には、デスクトップPCとノートPCどちらにも対応できる画面幅で作成していますが、最初なれなかったのが、画面の高さ。

    PCの画面内にまず表示される「ファーストビュー」内に、見せたい必要な情報がすべて入っているのか?

    ここは、ちょうどいい感覚を掴むのに、時間がかかった気がします。

    また、スクロールする度に表示される間隔やフォントの大きさも

    画面幅によって左右されるので、頭を悩ませます…((+_+))

     

    そして、スマホ版のデザインは完全に作り直す「レスポンシブ化」をしています。

    こちらもPCとはまったく違い、

    ・ちゃんと文字が読める大きさになっているか

    ・ボタンはタップしやすい大きさになっているか

    ・押しやすい位置にボタンがデザインされているか

    などなど…

    考えるポイントはたくさんあります。

     

    細かく考えると、紙デザインとWebデザインの違いはまだまだあります!!!

    が、長くなりそうなので、次回またお伝えできればと思います。( ̄▽ ̄)

     

    興味がありましたら、また読んでくださいね~~♪

     

     

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

資料請求 リンクボタン

カレンダー

2019年5月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  

MENU

求人情報本社・広島オフィス

お問い合わせ

資料請求

ページの先頭へ

お問い合わせ

  • メールでのお問合せ リンクボタン
  • 資料請求 リンクボタン

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス