2023年12月4日

こんにちは、ラフデザインのデザイナーのコバです。

私はラフデザインに入社したことで初めてWEBのデザインに携わることになりました。

大学ではグラフィックデザインとイラストの勉強をしており、そのままグラフィックデザイナーとして就職し働いてきたため、WEBデザインには全く触れてきませんでした。

そしていざWEBの世界に足を踏み入れた時に、印刷物とWEBのデザインでは気を付けるべきや考え方この違いが多くあり、始めはとても戸惑ったことを覚えています。

その中で試行錯誤と勉強を繰り返し、WEBデザインへの理解が深まってきた現在ですが、今だからこそ初心に帰ってつまづいたポイントをシェアしていければと思います。

見る環境によって変動する画面サイズ

当然ですが、印刷物は納品するサイズが決まっています。

冊子にするなら「ここに折り目がくるから少しスペースを設けよう」など形態によって細かい調整を加えて１つの完成物へ向かってクオリティを高めていくことが可能です。

一方WEBデザインでは、ユーザー毎の環境によりサイズが大きく変動する点があり、ここで私は難しさを感じた覚えがあります。デザインカンプ上ではしっかりデザイン出来ていたとしても、画面幅の変動によって改行位置が崩れてしまったり、場合によっては画像の配置や大きさ、比率も変動します。

そしてスマホ用のレスポンシブデザインも考慮に入れなければいけません。
PCの画面は横長なので、そこから縦長のスマホ用のデザインに直すときにも最初は難しさを感じました。

そのためWEBデザインではある程度「柔軟に変動させられる余裕を持ったデザイン」にすることが結構重要なポイントだと思います。

文字・ボタンサイズ

さきほどの画面サイズの話に近いものがあるかもしれませんが、文字サイズの調整にもとても戸惑いました。XD上でデザインをしたときに丁度いいサイズでデザインしたつもりが、いざテスト環境などにあがって実際の画面で見ると文字が大きすぎたり印象が変わってしまうことが多かったです。

XD上では全体の構成などを見ながら引きでデザインしてしまっていたので、実際に見える画面の領域で見るととても大きい文字サイズ・ボタンサイズになってしまっていることがありました。

そのため、世の中にある様々なサイトを参考にし、「この場合はこのくらいの文字サイズで見ても違和感がないな」などを分析することで少しずつギャップを埋めていきました。

コーディングしやすさの考慮

ここが一番といってもいいほどの印刷とWEBの違いだと思います。
場合にもよりますが、基本的にグラフィックデザインの作業～完成までは一人で行っていくものです。
WEBデザインの場合、デザインとコーディングをまるっと一括でする方もいますが、企業でWEB制作の仕事をする場合、デザイナーとコーダーで分業している場合が多いと思います。

その際に重要になってくるのが「コーディングのしやすいデザインにすること」でした。
ただ、最初の何も知識がない状態ではそもそもどのようなデザインがコーディングしやすいデザインなのかの判断をすることさえできなかったので、ある程度のコーディングの知識や要素の組み立て方を知る必要がありました。

そして規則性もとても重要で、見出しや本文などの仕様を統一する必要があるため、どんなところに差し込んでも変に見えないような柔軟なデザインにしておかないと後でコーディングの際にチームのメンバーに必要以上の労力を割いてもらわないといけなくなります。

しかしそこでガチガチに固めすぎたデザインをすると今度はサイト自体に面白みや魅力が無くなってしまうので丁度いいバランスを探らないといけません。そこがとても難しいポイントでした。

現在はデザインをしながら「この部分は少しコーディングで厳しいかな…」と思った時にコーダーの人に相談しつつ進めています。

UI・UXの重要性

PCとスマホで、それぞれボタンを押す場合は

・PCは矢印カーソルでクリックをする
・スマホは指でタップをする

という微妙な違いがあり、同じボタンの幅とサイズであっても
「クリックは容易にできる幅なのに指でタップするのは難しい…」
という現象が起きたりもします。

そこで、ユーザーが実際に使用しやすいか、アクションを起こしやすいかが非常に重要になってきます。

スクロールしたときの印象、一画面に収まる情報量の適切さ、たどり着きたいページへの導線の明確さなどもデザインしていく必要があります。

印刷物は見ている人の視線の動きでいきなり左上から右下に視点を移すことが可能ですが、ホームページではスクロールしたり、メニューをクリックしたり決まったアクションを起こしてページ内の順路をたどっていく必要があります。

ぱっと見でどのくらいの情報量があるかを判別しやすい印刷物とは違い、ホームページでは情報量の全貌が見えにくくなっており、適切な導線を設け、ユーザーをストレスなく誘導ですることができなければそのサイトからは離脱されてしまいます。

ここのUI・UXまでデザインで考慮していくことが初心者にはかなり難しく、勉強が必要なポイントでした。そのため、たくさんのWEBサイトを回遊し、使いやすさを検証してみることで学んでいきました。

今でも使いにくいUIに出会った際はメモして、気を付けるようにしています。

アニメーションを含めてデザインする

WEBサイトにおいて大きい魅力の一部分である「動き」。
もちろん印刷物を制作していたころには全く考えなくていいポイントでした。

デザインカンプ上でもある程度の動きをつけることはできますが、複雑なアニメーションは再現できず、ある程度想像で補完してデザインを進めていく必要があります。

そのため、動きを考慮してデザインしているけど、カンプ上ではシンプルすぎるように見えてしまう…という現象も起きがち。その逆もしかりで、デザインカンプ上ではちょうどいい密度のデザインなのに動きが入ってくるとしっちゃかめっちゃかで騒がしすぎる…ということもあります。

また、クライアントへの説明も難しいため、参考サイトなどを用意することでカンプと出来上がりのイメージを無くしていく努力は常に必要だと感じています。

以上大まかに大きく５つのポイントに分けて振り返ってみました。

印刷物におけるデザインは「完成品」のデザイン、
WEBにおけるデザインはこれからサイトを作る為の「設計図」としてのデザイン。

この認識が非常に大切なのではないかと思っています。

今後も気づいたことや改善していくべきことは文章に起こし、定期的に見直して実践していくことで技術向上に努めたいと思います。