DTPデザイナーが陥りがちな残念なWebデザイン (後編)

前回に続いて、

Webデザインをする時に気をつけるポイントについて書いていきたいと思います。

前回は基礎の設定の部分でしたが、今回は前回に比べて少し難しい内容かもしれません。

 

▼前回の記事はこちら
DTPデザイナーが陥りがちな残念なWebデザイン(前編)

 

1.アートボードの横幅は大丈夫?

 

「さあ、Webのデザインを始めよう」と思ったとき、悩むのが横幅の設定ではないでしょうか?

 

Webデザインの場合、基本的に印刷物とは違い、A4サイズ、B5サイズ、など規定のサイズが決まっているわけではありません。

どのサイズにするのはデザイナーの自由です。

 

だからといって、極端に大きかったり小さすぎるのはデザイナーにとってもコーダーにとってもユーザーにとってもよくありません。

 

ではどの幅にすれば良いかというと、現在は以下の幅がよいと思います。

 

PC : 1366px / 1920px

スマホ : 360px / 375px

 

なぜ「現在」とつけたかというと、この幅というのは変化し続けているからです。

アクセス解析のサービス「statcounter」で最新のブラウザ幅のシェア率が見れるので、参考にしてみてください。

 

 

2.コンテンツ幅にガイドをつけよう

 

アートボードの横幅が決まったら、次はコンテンツの幅を決めます。

 

コンテンツの横幅というのは、デザインを入れる横幅のことです。

なぜこの幅を決めるかというと、アートボードは表示しているパソコンorスマホの画面の幅であり、その画面いっぱいに作ると、窮屈なデザインになって見にくかったり、デザインにまとまりがでなくなったりするからです。

 

コンテンツ幅の目安は 1000px前後(900〜1200px)くらいがいいかなと思います。(2020年3月現在)

※目安なので、デザインによっては幅を変えても問題ありません。

 

ただ、全部この幅に収めると、インパクトが薄いデザインになりがちです。

この幅は、絶対に見せたい項目を入れる幅と思った方がいいでしょう。

 

例えば、写真や背景色などはコンテンツ幅ぴったりにせずに、横幅を画面幅に合わせて%で変わることを意識してデザインするなど、メリハリをつけるのがお勧めです。

 

このコンテンツ幅ですが、決めたときに必ずガイドを引くようにしましょう。

そうしないと、コンテンツ幅がバラバラでまとまりのないデザインになってしまいます。

またコーダーも幅がバラバラだと、その分コーディングに時間がかかることに。

 

ちなみにこちらの幅も、ブラウザの横幅と比例して変わってきており、今後も変わると思います。

なので、今はこのくらいがいい、というおおよその指標はありますが、3年後もこの幅にしておけば絶対OKというわけではないです。

 

定期的にシェア率を確認するか、最新のデザインを見て、情報をアップデートすることをおすすめします。

 

 

3.使用フォントは問題ない?

 

前回の記事で、フォントサイズについては記載しましたが、Webの場合はフォントの種類にも気をつけないといけません。

無料で使用できるフォントには限りがあるからです。

 

また印刷物とは違い、Webはユーザーの環境に依存するため、デザイナーが持っていても、ユーザーが所持していないフォントは表示されません。

 

例えば、小塚ゴシックをベースにデザインをする方がいると思いますが、Web上で小塚ゴシックは基本的に使用できないので、デザインをする時はフォントを変えてください。

(游ゴシック/ヒラギノ角ゴ/メイリオあたりが無難です)

 

また、WindowsとMacでは表示できるフォントが違います。

日本語フォントの場合、Windowsで確認できる、MSゴシックやメイリオは、Macでは基本的に確認できません。逆にMacで使用できるヒラギノ角ゴはwindowsでは見れません。

(これはほんの一例で、スマホでもまた変わってきます)

 

ちなみに、どちらも標準で見れるフォントだと游ゴシックが挙げられます。

そういったベーシックなフォントではなく、特殊なフォントを画像にせずテキストとして、表示させたい場合は、Webフォントを使用する必要があります。

 

有名なところだと、以下のようなサイトのWebフォントを活用します。

GoogleFonts

FONTPLUS

TypeSquare

Adobe Fonts

 

この中で、GoogleFontsは無料で使用できるので、比較的気軽に取り入れやすいフォントです。

有料フォントの場合は、サイトに訪れるPV数によっても金額が変わってくるので、契約内容はしっかり確認しましょう。

※M＋などのフリーフォントは、規約によっては無料でWebフォントとして設置することも可能です。(日本語フォントは重いのでサブセット化をしましょう)

 

ちなみに、有料フォントをWebフォントとして使用するお金はないので、画像としてサイトに表示させたい場合は、アウトラインを取ったデータをコーダーに渡すことを忘れないでください。そうしないと文字が変わってしまいます。

 

 

4.データの中に大量のアートボードを作っていない?

 

アートボードを複数作ることができるツールでデザインをしている場合に、注意して欲しいことがあります。

 

DTPのデザインを行うパソコンは、容量の重いデータを取り扱うことが多いため、高いスペックの場合が多いです。

そのため、1つのファイルの中にいくつもページのデザインを入れることが多くあります。

 

しかし、コーダーが使用するパソコンの場合、基本的にデザインを行わないため、各ツールは入っていたとしても、重いデータをスムーズに動かすスペックはない場合が多いです。

 

結果、ファイルを開くのに数十分、データを見ようとスクロールするだけで数分間、砂時計or虹色が回り続け、何もできずに待たさせられる…ということが考えられます。

作業の効率が悪くなり、納期通りに進まなくなる原因にもなります。

 

そのため、1つのファイルの容量はあまり大きくならないように注意しましょう。

大きな画像をたくさん埋め込んでいる場合などは、特に気をつけてください。

 

例えば、イラストレーターを使ってWebデザインを行う場合は、多くても1つのファイルのに2つのアートボードにする、くらいを目安にすると丁度よいのかなと思います。

これは、デザインの長さや入れている画像のサイズにもよるので状況次第です。

 

ただし、XDやsketchなど最近のUIツールの場合は、複数のアートボードで作ること前提で想定されているので、イラストレーターなどに比べてアートボードの数は気にしなくても大丈夫です。(それでも何十個とアートボードを作ると、開いたり保存するのは遅くなります)

 

 

5.状況によって変わるデザインの罠

 

Webの場合、1つのページに対して、「デザインを1パターン作ればOK」ではなかったりします。

Webというのは、DTPとは違い完成データから変化があり、要所要所で動作が求められます。

Webはできた後が始まり。そこからどんどん変わっていくものです。

変わることを前提に考えなければなりません。

 

例えば、

• ボタンを押した時、押したことがわかるような動作
• フォームを入力した時の挙動、エラーメッセージの表示方法
• セレクトボックスを押した時の表示
• ダミーテキストよりも文字量が多い時を想定した、2行の場合の行間
• スクロールした時の動作

 

など、ユーザーが起こしたアクションに対して、どういう動きをするのかを考える必要があります。

▼こちらの記事がとてもわかりやすく、まとめられているのでおすすめです。

フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと

 

 

6.スマホのデザインを忘れないで

 

レスポンシブサイトの場合、PCのデザインを作ったからOK！

スマホの時はコーダーに任せれば、デザインしなくても大丈夫！

 

…とはいきません。

 

コーダーはデザイナーではありません。

デザイナーが無意識のうちに「こうなるだろう」と思っていることは、そうはならない、と思った方がいいでしょう。

 

レイアウトや、行間などを見て、「なんでこんな風にしたの !」と思われても、コーダーに正解がわかりません。

結局、何度も何度も修正を繰り替えし、デザイナーもコーダーもお互いに納期に追われ、ボロボロになることも。。

そんなことを防ぐためにも、スマホのデザインは忘れずにしっかり準備しましょう。

 

また、業界にもよりますが、基本的にBtoCの場合は、スマホの方がPCよりも多くのユーザーに見られる傾向にあります。

PCの情報をそのままスマホに移すと、文章が長くなったり、見にくいサイトになることはよくあります。

スマホで最適な見せ方を考えることが、PV数の増加やCV数の増加に影響することは多々あるので、スマホのデザインはしっかりと考えましょう。

 

 

7.見る環境でデザインが変わるんです

 

DTPは完成したら、その形のまま終わりです。

修正して新たに印刷をかけない限り、変わることはないでしょう。

 

しかし、Webでは見る環境で形が変わってしまいます。

 

使っているデバイスの種類(PC/スマホ/タブレット)、使用している機種(Windows/Mac/iPhone/Android)や、使っているブラウザの種類(Chrome/Firefox/Safari/IEなどなど)で、多種多様に変化します。

 

わかりやすい変化だと、表示されるフォントは環境によってバラバラになることが多いです。

たとえ、文字間、行間の設定が同じ数値でも、環境よっては違う間隔に感じる場合もあります。

改行の位置も統一するのは、かなり難しいです。

 

表現できるスクリプトにもブラウザによって変わってくるため、AさんのパソコンではWebGLを使用したサイトが表示されるのに、Bさんのスマホでは何も表示されない、という現象が起きることはあります。

 

自分が見ている画面が、他の人も全く同じ画面で表示されるということは、基本的にはあまりないと思った方がいいでしょう。

 

以上が気をつけるポイントです。

細かく出せばもっとたくさんあると思いますが、ひとまず基本的なことを書きました。

 

 

おすすめデザインツール

 

今までは、Webデザインを行う場合、業界的にはphotoshopが主流でした。

しかし現在はWeb専用のツール(SketchやFigmaなど)が増えてきており、その中でもXDがアライブ的におすすめです。

Adobe XD

 

弊社は、今までずっとillustratorを使用しWebデザインを行っていましたが、近年ではXDを主流で使用しています。

XDが出始めた頃は、使い勝手に物足りないところがあり、悩んでいましたが、毎月ユーザーの声を元にアップデートを重ねており、現在は痒いところに手が届く、すばらしいツールになったと思います。

 

XDであれば、RGBで解像度も統一されていますし、機種ごとにアートボードサイズも決められていて、サイズに迷うことなく作ることができるので、もしWebデザインを行う機会があれば、XDで作ることをオススメします。

(ショートカットキーが他のAdobe製品と違うことがあるので、最初は慣れるまで時間がかかるかもしれませんが、慣れれば大丈夫です)