# 「紙」と「Web」の違い

「伝える」という本質は全く一緒、アプローチ方法が違う。

# 紙デザイン

DTP(Desktop Publishing)は「机上出版」や「卓上出版」とも呼ばれ、雑誌やパンフレットなどの紙媒体の原稿作成、編集、デザイン、レイアウトなどをPC上で行うことを指します。
出版物の発行は各工程(原稿、編集、デザイン、製版、校正、下版など)に分業されていて、制作に多くの時間を要しましたが、DTPの導入によって、従来アナログで行っていた業務を短時間で行えるようになりました。

## 引き算思考(カスタマイズ)
決められた枠(用紙サイズ)の中で、情報(文字・写真・図表など)をどのようなバランスで配置するかが厳密に定められています。
そのため、文字数に関する制限は特に厳しく、字数オーバーや字数不足、が許されない場合がほとんどです。
同様に、写真や図表なども掲載できるスペースや種類が限られているため、厳選したものしか用いることができません。
膨大な情報のうち、要点をいかに無駄なく伝えられるかという“余計な部分を削る”ための職人的なスキルが要求されることになります。

# Webデザイン

Webデザインとは、PCやSPで閲覧するWebサイトのデザインのことです。
Webサイトの全体的なレイアウトを決めてから、配色やロゴ・アイコンの配置、コーディングを行います。
見た目の美しさだけではなく、サイトの使いやすさなども考慮し、クライアントの売り上げや問い合わせ増加につなげることが求められます。

## 足し算思考(アップデート)
あまり厳密な制限は存在しませんが、目安となる字数や画像の大きさは定められています。
情報量に物理的制限のかかる紙と違い、画面を下に伸ばすことでいくらでもできるため、情報量を増やすことが可能です。
伝えづらいような情報は、文章+画像+グラフや図表+箇条書きリストなどを用いて、意図を伝えやすい方法が選択できたり、「詳細はこちら」や「関連情報についてはこちら」とリンク先に飛ばすことで、解説や要約について、その先のページで説明できるため、1ページ当たりの情報量を省略することが出来ます。

# 2つの世界の違い

| | Web | 紙 |
| -------- | -------- | -------- |
| 売り方 | プロダクト型 | プロジェクト型 |
| 情報の取り扱い | インタラクション必須 | 配置・余白・ジャンプ率…などで構成 |
| レイアウト | 制約が多い | 自由 |
| タイポグラフィ | 制約が(まだ)多い | 制限なし |
| 色 | RGB | CMYK |
| 描写方法 | ラスタ形式 | ベクタ形式 |
| 視線移動 | Z視点 | F視点 |
| サイズ | 画面サイズ | 用紙サイズ |
| UI | あり | なし |
| その他 | SNSで拡散できる<br>アニメーションをつけられる<br>メンテナンスが必要<br>様々なデバイスへの対応が必要 | 一度、印刷すれば終わり<br>特殊印刷や加工などもある |

# 売り方

「顧客に対してどのような形で価値を提供しているか」の違いです。

## 紙はプロジェクト型
プロジェクト型は終わりがあります。
プロジェクトが終われば、その仕事の全てが終わります。
最終的に印刷して配布しますが、クライアントに印刷物を納品した時点で仕事が終了します。

## Webはプロダクト型
プロダクト型は、基本的に終わりがありません。
プロダクトを作ってからはメンテンナンス・サービス改良など、プロダクトが使われなくなるまで、価値を提供し続けます。
つまり当社でいうとeatの販売です。

# 情報の取り扱い方

紙のデザインとWebのデザインでは、情報の取扱方が根本的に異なります。

## 紙における情報の取り扱い方
1画面の中で必要な情報をすべて得ることが可能。
配置・大きさ・ジャンプ率などを駆使して、情報をまとめるため、レイアウトやデザインが情報設計に直結します。

## Webにおける情報の取り扱い方
1画面の中で必要な情報をすべて得るのは不可能。
情報を見せるための要素(パンくず・ナビゲーション…)を用意して、情報をまとめるため、必ずスクロールやリンクをたどるなどのインタラクションが必要なので、導線の構築が情報設計に直結します。
どこに、どんな情報があり、どうしたらたどり着けるのか、という適切な導線配置をしなければなりません。

# レイアウト

## 紙での配置
レイアウトは自由です。
豪華絢爛(ごうかけんらん)な効果をつけても、近年の印刷技術であれば、だいたいの表現は可能ですが、その分のコストはかかります。
印刷すれば”動かない”ため、レイアウトを組んだ後の事は気にしなくてOKです。

## Webでの配置
かなり制約が存在し、レイアウトを組んだ後からが本番と言ってもいいです。
それがWeb制作者、技術者を苦しめるデバイス対応や検証作業です…。
お客様からはよく「Webってやろうと思えば、いろんな事が出来て自由でいいよね！」という言葉を聞きますが、これは半分正解で半分不正解です。
iPhoneで正しく表示できても、Androidでは崩れて表示されてしまう。
chromeで正しく表示できても、IEではガタガタ、なんてことはザラにあります。
各デバイス別(パソコン、スマホ、タブレット)、各OS別、各ブラウザ別で全てテストします。
※eatではchromeブラウザ、各OSバージョン最新を推奨しています。
より多くのデバイスで統一されたレイアウトを表現するために、最大公約数的なデザイン・レイアウトを構築するのが主流です。
やろうと思えばイケイケなサイトを作れますが、それがちゃんと表示されるかはまた別問題です。
デザンナーとプログラマーの「このデザインに動きを付けたい／付けられない」戦争が開戦する元凶です。

# タイポグラフィ

## 紙での表現
色彩・効果・書体を自由に使用することができます。
さらに折加工や表面加工で変わった魅せ方を表現することはできますが、動かすことはできません。

## Webでの表現
各OSやブラウザの環境に依存しますが、文字を画像にして、紙のタイポグラフィのようなデザインをつくることは可能。
レスポンシブデザインが主流の現代において、LPを除いては、SEOの関係で文字は画像ではなくテキストで作成していく事が多くなり、何を画像で表現するかの見極めが必要です。

# 色

## 紙上の色
CMYK(減法混色／シアン、マゼンタ、イエロー、ブラック)で構成されており、発色は紙質や印刷機に依存します。
CMYKの黒は三つ存在していて「スミベタ：k100%」「リッチブラック：CMY100%」「４色ベタ：CMYK100%」の３つの表現があり、用途によって使いわけられます。

## Web上の色
RGB(加法混色／レッド、グリーン、ブルー)で構成されており、PCやモニタの性能に依存します。
RGBは色味の幅が広く、16進数(#000000など)のカラーコードで表現することができるので、彩度の幅が広いです。

# 描写方法

「ラスタ形式」と「ベクタ形式」、表現の異なる2種類の形式があります。
この2つの違いを理解しておくと、デザイナーに依頼するときに認識ズレによる作り直しなどを防ぐことができます。
また、これからAdobeソフトの使い方を勉強される方は、必ず理解しておきたい基礎知識です。

## 紙での描写
### ベクタ形式
複数の点(アンカー)の位置とそれを繋いだ線、色、カーブなどを数値データとして記憶し、描写する形式をベクタ形式といいます。
数値で管理しているので、描いたグラフィック自体はデータ量も小さく、変形しやすいです。
ロゴ・地図・単純なイラストなど図形的な表現はこのベクタ形式が用いられることが一般的です。
写真以外の印刷物に用いられるデータは主にベクタ形式で、EPS(PostScript)・PDF・ SVG などの拡張子が使用されます。

#### 拡大縮小に適している(メリット)
数学的な計算から算出された線とカーブから、拡大縮小するたびに書き直されるため、サイズ変更してもクオリティを維持させることが出来る

#### 複雑な画像表現に適さない(デメリット)
数値で表現されているので細かい描写の画像などは表現するのが難しい

## Webでの描写
### ラスタ形式
1pixelの点が縦横と格子状に並び構成されたデータをラスタ形式といいます。
この形式は「ビットマップ画像」とも呼ばれます。
濃度が違う点や様々な色の点を多く並べることで複雑な画像を表現することが可能ですが、点が増えるとその分データサイズが大きくなってしまいます。
皆さんにも馴染みのあるスマホのカメラ・デジカメで撮影した写真のデータはこのラスタ形式です。
Webサイトで使用するデータは主にラスタ形式で、bmp・gif・jpg・png・tiff などの拡張子が使用されます。

#### 写真など描写が複雑なデータの表示(メリット)
点のみで構成されているので、写真などの複雑な画像の表示に適しています。

#### 拡大縮小に適していない(デメリット)
サイズ変更すると点の配置にずれやゆがみが生じてジャギー(エッジに現れるギザギザ)が発生し画像の品質が落ちます。
※画像が粗いとはこのことです。

# UI

ユーザーインターフェイス(User Interface)の略です。
インターフェイスには種類がありますが、UIとはサービスやシステムを使用する際、人とデバイスの間を仲介する役割をしています。

## 紙におけるUI
前述した通り、紙にはデバイスという概念もなければUIという概念も存在しません。

## WebにおけるUI
DTPにはないボタンのデザインや、それを押してもらえないと成立しないWebデザイン。
クリックしても目的のページにいかない、遅いなどといった事が少しでもあると人はストレスを感じてしまいます。
UIデザイナーという職種が存在する程、Web媒体特有の役割であり、紙媒体では必要とされない知識や経験、設計力が求められます。

# 視線移動

## 紙での視線
見開きでユーザー目線をつかむため、Z視点で誘導します。
これが「横軸の捉え方」です。

## Webでの視線
スクロールで視線が移動するためF視点の捉え方でレイアウトを組んでいきます。
これが「縦軸の捉え方」です。

# サイズ

## 用紙サイズ

| | A版サイズ(mm) | B版サイズ(mm) |
| -------- | -------- | -------- |
| 0 | 841×1189 | 1030×1456 |
| 1 | 594×841 | 728×1030 |
| 2 | 420×594 | 515×728 |
| 3 | 297×420 | 364×515 |
| 4 | 210×297 | 257×364 |
| 5 | 148×210 | 182×257 |
| 6 | 105×148 | 128×182 |

| | 名刺 | ポストカード | 往復はがき | 長3封筒 | 角2封筒 |
| -------- | -------- | -------- | -------- | -------- | -------- |
| サイズ(mm) | 55×91 | 100×148 | 148×200 | 120×235 | 240×332 |

## 画面サイズ

| 画面比率(アスペクト比) | 横×縦(px) | 画素数(dpi) | 採用例 |
| -------- | -------- | -------- | -------- |
| 4:3(NTSC) | 720×483 | 347,760 | アナログテレビ |
| 16:9HDTV(720p) | 1280×720 | 921,600 | 動画 |
| 16:9HDTV(フルHD) | 1920×1080 | 2,073,600 |HD テレビ |
| 16:10WXGA | 1280×800 | 1,024,000 | PC画面 |

### 画面比率(〇：〇)

画面比率(アスペクト比)とは映像(映画、テレビ、動画)などにおける縦横比のことで、ワイド(16:9)とスタンダード(4:3)の２つを基本と考えることが多いです。
※画面の比率が変わるとインチ数が同じでも、全体のサイズが変わります。

### インチ(inch)

テレビやスクリーンの大きさは液晶の対角線の長さで、「インチ」であらわされています。
※1inch=25.4mm

### ピクセル(px)

デジタル画像の最小単位のことで、デジタル画像(ラスター画像)を限界まで拡大すると、点で構成されています。
点(ドット)に色情報を追加したものがピクセルで、カメラなどの性能で使用される「画素」がいわゆる「ピクセル」です。
画素数が高い＝ピクセルがたくさん集まっている、ということになり、より緻密で画像の質が高いということです。

### 解像度(dpi)

ピクセルを物理的な長さで表現したいときに用いられるのが、dpiです。
dpiとはdots per inchの略で1インチ内にどれだけのドットが含まれているかを表す単位です。
dpiの数値が大きいほど解像度が高くなります。
このことからピクセルをセンチメートルに変換することができます。
例えば、解像度300dpiの100px×100pxの画像をセンチメートルに以下のように計算して変換すると、約0.85cm×約0.85cmの画像となります。
300dpiの場合の1ピクセル = 2.54cm ÷ 300ピクセル = 約0.0085cm
100ピクセルの画像の大きさ = 約0.0085 cm × 100ピクセル = 約0.085cm

#### 紙の解像度
規格のサイズに対して300dpi〜350dpiが一般的な解像度で、それを下回るとぼやけた状態で印刷されてしまいます。

#### Webの解像度
デバイスがピクセル(光の点の集まり)で表現されていて、規格サイズに対して72dpiでも鮮明に表現する事が可能です。

# 表現の違いによる役目

自分の好きなものを表現するのがアーティスト＝自分の表現への共感を得る
相手の好きなものを表現するのがデザイナー＝相手の求める表現を具現化して満足を得る
相手の指示通りのものを表現するのがオペレーター＝相手の求める表現を精製して保証を得る

| | 目線 | 表現 | 獲得 |
| -------- | -------- | -------- | -------- |
| アーティスト | 自分 | アート | 共感度合 |
| デザイナー | 相手 | デザイン | 満足度合 |
| オペレーター | 相手 | オペレーション | 保証度合 |

# 番外編
## 動画の情報量

なぜ、今Webサイトに動画コンテンツが必要なのか。
動画は時間も手間もお金もかかるため、お客様の中には制作するのに気が引けるという方も多いと思います。
ネット閲覧環境が整ってきた昨今、動画の有無により競合他社に勝てるかどうかが左右してきています。

### 3Vの法則

「Verbal(言語)」「Vocal(聴覚)」「Visual(視覚)」のことで、人の記憶に影響を与える要素です。
それぞれの「V」が与える影響の割合は、Verbal＝7%、Vocal＝38%、Visual＝55%と言われています。
動画には3Vの法則の要素が全て入っており、単純にテキスト、写真だけの場合の5,000倍ともいわれています。
短時間で多くの情報を伝達でき、動画のある、なしで比べると記憶に残りやすく、人の心を動かせる可能性が高いです。

# ディレクションについて

## ヒアリング内容

### 基本情報
所在地
電話番号／FAX
営業時間
定休日
対応エリア
SNS有無

### サイト全体について
サイト制作目的
伝えたいこと、PRしたいこと
現状の課題
会社のビジョン
どんな人にどのような印象で見てもらいたいか

### 求人関連
求人募集の有無(給与、福利厚生(社会保険、厚生年金、賞与など))
求めている人材(未経験可否、年齢制限、資格・能力)
協力会社募集の有無

### 根拠に基づく情報

#### 強みやこだわり
仕事を依頼するメリット(コストが下がる、早く対応できる、など)
他の会社と比べて特にこだわっている点、強みとしている点

#### 仕事について
事業内容(施工内容・修理内容などとその割合や比率)
得意とする施工
仕事をするうえで心がけていること
依頼が入るフロー
月の施工件数
対応物件
1件あたりの工事期間や時間
多く寄せられる問い合わせ、相談や悩み
保証の有無(アフターメンテナンスなど)
お客様から寄せられる感想
仕事の魅力・やりがい
仕事・事業を始めたきっかけ
業務上で必要な資格や免許の有無

### デザインについて
会社のイメージカラー
会社のロゴ
チラシや広告、パンフレットの有無
制作予定のツール(名刺やチラシ)の有無
写真の有無
好きなサイト、よく見るサイト
希望サイトテイスト

# 事前資料について

ディレクション時にすぐに回答できそうにない内容は、事前に聞いていただくか「このようなことをお聞きすると思いますので、用意しておいてください」と、ご案内しておいていただけるとそのあとの打ち合わせ準備や制作がスムーズに進めやすいため、ご協力をお願いします。

## 事前資料で欲しい事項
代表イメージ(考え方、話し方、リテラシーなど)
制作の進め方(提案ベースの進め方、こだわりが強そうなのでヒアリングベースの進め方など)
会社の特徴
仕事のやりがい
仕事のこだわり、気を付けている点
ビジョン