紙からWebのデザインを始めるデザイナーさんに知っておいて欲しいこと
今までたくさんのWebデザイナーさんと一緒に仕事をしてきましたが、中には紙のデザインしか経験が無い・Webデザインの経験が薄い方もいました。 その経験をもとに、ノンデザイナーの私が偉そうに書いてみますね！
- Webは紙と違い、デバイスが複数あることを認識する
- Webはクリックされて始めて見られる
- コーダーの仕事、HTML・CSSを理解する
- Webは更新できる
- 広告のサイズを頭に入れておく
- 納品物がいろいろある
- 見る・読むのは人間だけではない
- Webはすぐ参考にできる、マネできる
- Webは計測できる！
- Web業界、IT業界のコミュニケーションを理解する
- 最後に
Webは紙と違い、デバイスが複数あることを認識する
WebはPC、スマートフォン、タブレットという形で複数のデバイスで表示することが前提です。 なので紙で言う台割にあたるワイヤーフレームもPC、スマートフォンで2種類作るケースが多いわけです。 これはたぶん頭ではわかっているとは思いますが、実際にどんなところに影響してくるかというと、
- 各デバイスのデザインで画像の縦横比はなるべく揃える
これをやっておかないと、画像の加工の手間が半端なく増えます。 もちろんクリエイティブに拘るサイトは手間をかても良いと思いますが、 どんどんコンテンツを増やしていくようなサイトだと運用の手間も増えてしまいます。
- 今の時代の主流はスマホ、「スマホファースト」
BtoBのサイトは除外しますが、スマートフォンの流入の方が多いサイトが主流となっています。 Googleの検索数も2015年にはスマートフォンがPCを上回っています。
Yahoo Japanは「スマホファースト」を数年前にうたい、今では業界の常識となっています。 でも我々は普段PCで仕事をしますから、この常識を忘れてしまうことが多々あります。 実際、PCのワイヤーフレームから書き始めてそれをスマートフォンにした際に、要素が多くなりすぎて入りきらない、ゴミゴミしてしまうことがまだ見受けられますよね。
Webはクリックされて始めて見られる
書店に置いてある雑誌はお客さんが手に取って見てくれますし、電車の中吊り広告もたくさんの通勤者に見てもらえますし、会社案内のパンフレットは営業が配ってくれます。
ただしWebの場合は
Googleの検索をクリックする。
Facebook、Twitterのシェアをクリックする。
広告文、バナーをクリックする。
だいたいこのクリックを経由して始めてサイトが見られるわけです。
また紙であれば、その紙媒体を買った人はページをめくってくれることを期待できますが、サイトに来た人にいろんなページを見てもらうには、やはりクリックしてもらわなければいけません。
何が言いたいかというと、クリエイティブのこだわりがこのクリックと喧嘩しちゃダメってことです。 「格好良い！」けど「わかりにくい」ナビゲーションやUIを作ってしまうとクリックを促がせない、サイトを回遊させられません。
コーダーの仕事、HTML・CSSを理解する
まさかIllustratorでデザインを渡しているデザイナーはいませんよね！？ まさかレイヤーがぐちゃぐちゃなまま渡してないですよね！？ これはどんな仕事でもそうですが、チームの他メンバーの仕事を理解していないと良い仕事は出来ません。
そしてデザイナーのデザインをWebの形にするのがコーダーです。デザインを構造化してコードにするとも言い換えられます。
これは見出しなのか、小見出しなのか、ナビゲーションなのか、コーダーが一目でわからないデザインはユーザにとっても優しくありませんし。 私がデザイナーさんを探すときにも、これかなり重要視しています。
Webは更新できる
これは本当大きいですよね。 コンテンツの量も無限大に足すことができますし。 更新出来るメリットとして他には、例えば納期がもし厳しい場合、フェーズ１のデザイン、フェーズ２のデザインみたいな形で分割して納品することも可能です。
あとサイトを作ったら終わりではなく、むしろ始まりという考え方なんですよね。 デザインも更新出来る前提が求められます。
広告のサイズを頭に入れておく
サイトによっては広告エリアを設けるサイトがあると思います。また広告を出稿してサイトに集客する場合もあると思います。 どちらの場合でもこの広告のサイズにならってサイトをデザインしておくと運用が楽になります。 広告はたくさんのクリエイティブを作ってパフォーマンスを上げていくものですからね。
あと、この広告のサイズには名前が付いていて「レクタングル」とか「スカイクレイパー」とか言えるようになると、ちょっと格好良くなれます。 ぜひ「おれ、わかってる感」を演出してください。
納品物がいろいろある
どんなものがあるかというと、
サイトのデザインデータはpsd形式で。
ピクトグラムなどはsvg形式で。
PCサイトのfavicon、スマホのアイコン
FacebookやTwitterのアイコン、カバー写真。
などなど。これ、頼んでもないのに納品してくれるデザイナーさんは惚れちゃいます。
見る・読むのは人間だけではない
紙媒体を見るのはほぼ人間ですが、Webの場合はクローラもサイトを見ます。Googleで検索したときに該当するページを結果として返すことが出来るのはこのクローラがサイトを巡回しているからです。
そしてこのクローラと人間の大きな違いは画像に対する認識です。クローラは画像を理解する力がどうしても人間よりも弱いわけです。 SEO対策という言葉を聞いたことがあると思いますが、言い換えるとクローラにサイトを理解しやすくするということです。
例えばファッション雑誌の場合はタイトルと写真だけで成立するものが、Webの場合はクローラが画像の認識が弱いため、説明するための文章が必要になります。
誰かの言葉を借りて私はよく「Webは紙より説明的に」という話をしますが、その理由のひとつにこのクローラの存在があります。 SEO対策的にクリエイティブがNGということもありますので、そのときはディレクターやマーケッターと相談してデザインを作ると良いと思います。 クリエイティブのためにSEOを捨てて良いというサイトはほとんどないですからね。
私もSEOの仕事をしていて、たまに意見が割れることがあるので「デザインとSEO」については深堀したいなーと思うところです。 アンカーリンクのテキストは英語の方が格好良いけど、SEO的には日本語の方が良いことが多いよーとか、h1はなるべく上にもっていきたいよーとか、デザインに絡むことって結構あるんですよね。
Webはすぐ参考にできる、マネできる
もちろん紙でもマネが出来ると思いますが、Webはこのコストがすごく低いです。 競合のチェック、デザインの方向性の詰め、サイトの構成、すぐ参考に出来ます。
「僕らのターゲットはこんな属性だけど、競合がこんなテイストだから、我々はこのテイストでいこうか。」
みたいな伝えるのが難しいことが、PCでいろんなWebサイト見ながら会話が成立します。 これ、当たり前みたいに聞こえるかもしれませんが、デザインのディレクションで出来ている人は意外と少ないです。
Webは計測できる！
Webの良いところとしてWebは計測出来るという大きなメリットがあります。
やはり結果が数字として出てくるのはモチベーションんにつながります。
Webのアクセス解析と言えばGoogle Analyticsがデファクトスタンダードですが、ぜひ基本的な使い方を覚えていただきたいです。
例えばどんなシチュエーションがあるかと言うと、
- 直帰率の高いページがデザインの力で低くなった！
- バナーのCTRが倍になって広告の流入が増えた！
これ、感動しますよ！「より多くのターゲットの心が掴めた」ってことですから。
Web業界、IT業界のコミュニケーションを理解する
それなりの規模のサイトを作るとなると、スキルの異なるメンバー間でコミュニケーションが多数発生します。そしてこのコミュニケーションはコストという考え方をします。
コミュニケーションコストについては当記事でも書いています。
そのコストをなるべく減らすためにBacklogやRedmineなどのタスク管理ツールや、チャットワークやSlackなどのチャットツールが存在し、チームの中でルールを決めてそのツールを使います。 それも効率的に良い成果物をアウトプットするためです
会議の考え方も異なります。会議も成果物をOutputする場として考え、無意味な定例会議みたいなものを嫌います。 意思決定、成果物の定義、設計のFixなどなど、これらは非常に大事な成果物です。 そのせいか、他の業界と比べてIT業界は会議の技術であるファシリテーションやロジカルシンキングを理解している人が多いと思います。
あと心に留めた方がよいことは、
会議中の内職、チャットが結構許される。
電話嫌いが多い。
メールの件名がわかりにくい、メールが検索しにくい人はキレられる。
「さん」付けが結構許される。お客様に対しても。
こんなところでしょうか。礼儀よりも合理性を重視する文化だと思えば理解しやすいと思います。
最後に
ここまで読んでて、もしかしたら「Webは表現の制約が多いなー」とか「ルールが多くて覚えるのが面倒だなー」と感じたかもしれません。
ただ一方でインターネットがなぜここまで普及したかというと、情報を流通するコストがすごく低い、伝えやすいわけでです。
デザインも人に見られてナンボです。 ぜひこの制約を武器に変えていただけたらと思います。
あとこの文章を書いていて思ったのは、これはデザインをレビューしてもらう際にレビュアーにも知っておいて欲しいことだなと思いました。レビューアーは経営陣だったり、営業さんだったりWebを知らない人も多いですからね。
編集さん向けにも書きました！
