紙出身デザイナーが教える！失敗しないWebデザインの始め方
公開日 : 最終更新日 :
- デザイン
こんにちは、デザイナーのシュウジロウです。
10年以上グラフィックデザイン、パッケージデザインを専門にやってきた私。
今の会社でwebデザインに軸を移してからもなかなかの時間が経ちました。
どちらもそれなりに積み重ねていると、作られたデータを見るだけで
「あ〜この人はグラフィック出身だ」とか
「web中心にやってきた人だ」とか
わかってくるものでして。
今回はその経験を生かしまして
グラフィックデザイン出身者がやりがちなコーダーに突っ込まれるwebデザインの特徴
をご紹介していきましょう！
この記事を読めば明日からあなたも少し今より自信を持てるweb担当者に！
目次
フォントサイズがやたらと小さい
本当に多いんです。
恐怖の8pxデータ
気持ちはわかります。ええ、めちゃくちゃわかりますとも！
グラフィックといえば8ptルールですよね。
Webデザインのフォントサイズは？
ですが舞台はweb。
webデザインでは基本的に読みやすい文字は16px、最小でも12pxと言われます！
（そもそもpxとptで使う単位も違いますからね）
読める最低ラインは10pxでそれ以下は潰れてしまい
ブラウザによっては正しく表示できません。
よって作る際に8pxでカッコよくオシャレに見えていても
ユーザーは読みにくすぎてすぐにページから離脱してしまうわけですね！
参考サイトはこちら↓
使用フォントの種類が独特
グラフィックとwebの大きな違いの一つにフォントの自由度があります。
webの世界では全てのフォントが全ての画面で同じようには表示が出来ません！
カッコいいスタイリッシュなゴシックを選んでも、見る人の環境によっては明朝体に見えているかもなのです。
泣きますよね。
見出しなどではアウトラインをかけて画像にする事で解決も出来ますが
webフォントとして何を使えるかはしっかり確認してから組みましょう！
（それでも徐々に使えるフォントが増えてきているのが嬉しい）
代表的なwebフォント一例
- ゴシック体 ー Noto Sans. 、ヒラギノ角ゴシック、游ゴシック、筑紫ゴシック
- 明朝体 ー Noto Serif. 、ヒラギノ明朝、游明朝体、筑紫明朝、さわらび明朝
この辺りを使うのは間違い無いでしょう！
参考サイトはこちら↓
【迷ったらコレ！】Webデザインでよく使う定番おすすめフォント 13選（日本語９フォント欧文4フォント） – 東京のホームページ制作 / WEB制作会社 BRISK@22年新卒採用中
字詰めでデザインを調整
グラフィックデザインをやっていると
とにかく改行位置やマージンが気になりますよね。
わかります。
ですがwebの世界ではユーザーのデバイスによって
画面のサイズはどんどん変わります！
本文の改行位置なんてもうぐるんぐるん変わります！
なんて恐ろしい。
よって字詰めや部分的な長体処理などは邪魔なだけです。
どんな環境でもイメージの変わらないデザインを心がけてテキストを置きましょう！
基本Illustratorで作ってある
多くのグラフィックデザイナーのメイン環境はAdobeのIllustratorでしょう。
私もそうでした。これがあれば何でもできると思ってました！次にPhotoshop。
その二つを使うことは別に間違いではありません！
ですが技術が進化するにつれてwebデザインでは
複雑なアニメーションや3Dを避けては通れなくなりました。
社内や自己完結で公開までやるなら問題ないですが
想定している動きを伝えることが大変困難になっているのです。
Webデザインは何のソフトを使って作る？
webデザインをするのであればXDやFigmaが代表的でしょうか。私はXDがメイン。
XDはUIデザインに大変特化していてかなりの動きを再現できます。
デザインの段階で本番さながらのイメージを伝えられます！
その上で細かい素材を作るのにIllustrator、Photoshopという感じですね。
デザインを数年もやっていればXDの操作もすぐに慣れると思うので
是非挑戦してみてくださいね。
参考サイトはこちら↓
2021年こそWebデザインはAdobe XDで行ったほうが良い理由
レイヤー分けが少ない
グラフィックデザインではおそらくレイヤー分けは
みなさんかなり少ないのではないでしょうか？
- トリムマーク
- テキスト
- イメージ
- 背景
せいぜいこんなものでしょう。
webデザインではこうはいきません！
（厳密にはグラフィックでもレイヤー名はしっかりつけたほうがいいですが）
コーディングの際に階層がわかりやすくなっていることは大変重要です！
- header
- mv
∟txt
∟btn
∟slider
∟img01
∟img02 - news
- company
- blog
- contact
- footer
かなりざっくりと書いても最低これくらい分けていかないと
素材にたどり着くのが大変で、探すだけで工数がムダになってしまいます。
webは複数人が作業に関わることも珍しくないので尚更です。
デザイン全般に言えることですが
デザインデータは開いたすべての人がどこに何があるかわかることを目指して作りましょう！
参考サイトはこちら↓
【Webデザイナー必読！】 Photoshopレイヤー整理整頓術|ホームページ制作、Webマーケティング｜株式会社SPC
サイズぴったりの背景
グラフィックデザインでは基本サイズは固定されているので
A版、B版とそのサイズの中でベストな配置をしていきます。
対して前段に書いてきた通りWebデザインは
ユーザーの環境によってデザインサイズがどんどん変わります。
「この背景は広がった時どうなりますか？」
なんて質問されて困っていませんか？厄介ですよね〜。
背景のデザインはサイズが広がった場合、縮んだ場合を想定して作りましょう！
また、コーディングはコンテンツごとに組まれていくので
背景につらつらと模様が続き、サイズが変わったことで柄がずれてしまうと
デザインが崩れるような作り方もやめましょう！
無駄に画像が重い
印刷のルールとして使用する画像はCMYK、
解像度は原寸で350dpiというものがありますね。
最大拡大率も120%までなどなど頭に刷り込まれていると思います。
しかしwebではこのままではとても使えません！
webデザインではモニター解像度というものが存在するので
解像度は基本72ppiまで落としてコーディングされます。
カラーはRGBです。
Retinaディスプレイの登場
ただし最近は高精細ディスプレイも増えて
画像を二倍で書き出す必要が出てきているので
そもそもを使用サイズの二倍、もしくは144ppiの解像度で
準備することを想定しておく必要があります！
書き出しまで頼まれている場合は十分に気をつけましょうね。
参考サイトはこちら↓
動きの想定をまったくしていない
最後にグラフィック出身のデザイナーさんに最もハードルが高いのが
アニメーションなどによる時間軸のデザイン想定です。
もちろん静的なデザインでも綺麗なページはたくさんあります。
…ありますが、トレンドが目まぐるしく変化するWeb業界では
それで十分な効果を発揮するには大変厳しい状況と言わざるを得ません。
ローディング、ボタン、画像の視差効果など意識する動きは山ほどあります。
どうやってアニメーションを提案すればいい？
まずはとにかくたくさんサイトを見ましょう！
その中で使いたい動き、気になる動きはブックマークをしておきましょう！
とんでもない奇抜なアイディアを求められる案件なんて
最初はそうそう来るものではないでしょう。
全ての動きは知識の組み合わせ！蓄積蓄積！
あとはデザインデータと一緒に参考サイトとしてつけてあげれば基本大丈夫です！
参考サイトはこちら↓
Webデザインの参考になるギャラリーサイト20選＆2020年のトレンド解説
終わりに
今回の内容を当たり前過ぎて馬鹿にしてるのか！と思う人もいるかもしれません。
だからこそ人には聞けずドキッとしていた人もいるかもしれません。
まだまだ細かく言えば引っかかることはあると思います。
この記事がデザイナー格差を埋めて優しい業界に成長していく助けになれば幸いですね！
