2021年4月

こんにちは、檸檬書房です。これまでSNS（主にTwitter）の使い方や注意事項についてお話してきました。今回はWEBデザインの話をしようと思います。というのも筆者は以前制作会社にてコーダーとして勤めており、その会社はデザインラフをDTPデザイナーからもらうことがほとんどという所でした。そのデザインラフに訂正を要求すると「何を言っているこれが我がデザインの仕様だ」といわんばかりに突き返されることが多々ありました。間違った仕様のままコーダーにデザインを渡すと結果的に無駄な工数が増えます（実体験）。 外出規制が強まっている昨今、DTPだけでは事業が成り立たずWEBに進出する制作会社が増加しています。今までDTPしかやって来なかったからWEBデザインの仕様が分からないといったお悩みに少しでも助けになれるよう、DTPデザイナーがWEBデザインをするときの注意点について筆者の実体験を交えながら共有したいと思います。 1.単位 WEBデザインで使用する単位は、デザインの時点では原則１つだけ「px(ピクセル)」のみです。コーディングになればremや%などの単位も使用しますが、その話はここでは割愛します。DTPの場合は用紙サイズの「mm(ミリメートル)」や主にフォントサイズを指定する「pt(ポイント)」が使用されていますが、WEBではどれも使いません。電子端末の画面上では全てピクセルで済みますし、ミリメートルやポイントを指定しても画面上には反映されません。実際単位がピクセル以外で上がって来たデザインに着手する場合には、まずその単位をピクセルに変換するところから始めます。１カ所だけならまだしも、デザイン内の全ての指定単位が違う場合には変換作業でかなりの工数を費やすことになります。 http://spell.vincent.in/upload/pt-to-px-and-px-to-pt.php 2.数値 WEBデザインの場合、原則として「px(ピクセル)」に指定する数値は「整数」を使用します。最小値が1pxなので小数点を指定したとしても反映されないからです。ただ、「%(パーセント)」や「rem(レム)」の場合には小数点を使うこともあります。しかしこれはあくまでコーディング上の話なので今回は割愛します。デザイン上で「24.615px」なんて数値が来た場合、コーダーは「24px」を指定するか「25px」を指定するかで悩みます。1pxの違いは仕上がりにもだいぶ影響するからです。デザイナーからは「目測のサイズで決めたからどっちでもいい」という回答が返ってきます。そしてどちらを指定しても「やっぱり別の方で」と修正が入ることもありました。目測でサイズを指定した際は必ず数値が整数になっているか確認しましょう。また数値における「最小値」をちゃんと知っておくことが必要で、Google Chromeでのフォントの最小表示値は「10px」です。最近は他のブラウザでもChromeに倣って同じように指定するところが増えているようです。それ以上に視認性も良くないので出来ればフォントは10px以上で指定する方が良いです。注釈などで小さい文字を使用する際、たまに「8px」を指定され「Chromeだと自動的に10pxに変換されるので10pxで指定していいですか」と聞きに行くと「え、どうにか出来ないの？」と返答されました。どうにかするにはGoogleに問い合わせてください。コーダーにはどうにもできません。 3.サイズやデザインの統一 WEBデザインにとってサイズやデザインはある程度の統一が必要です。例としては「見出しのデザイン」「サムネイルの画像サイズ」「コンテンツごとの余白のサイズ」などが挙げられます。デザイン面において統一感がないことは面白みはあるかもしれませんが、それぞれのコンテンツの重要度やコンテンツのまとまりが統一されず閲覧者に混乱を招きます。またコーディングではデザインを指定するコンテンツには名前を付け、同じ名前を付けたコンテンツは全く同じ見え方で表示されるといった極めて効率重視の作業をします。デザインが少しでも異なる場合、また別の名前を付けて指定していかなければいけません。理由があってサイズやデザインを変えるのはまったく問題ありませんが「何となく見た目が良さそうだから」という理由だけで指定するとその「何となく」に工数を割くことになります。デザインには理由が必要です。 4.フォント選択 昨今、無料でも有料でもたくさんの日本語フォントが世に出回っています。特にAdobe製品を用いてデザインを行う場合は「Adobe Fonts」から多数のフォントを入手し、使用することが出来ます。WEBサイトを表示する際にフォントを何も指定しない場合、「標準フォント」と呼ばれるものが端末のOSに準じて表示されます(下記リンク参照)。 https://saruwakakun.com/font-family 他にも指定が簡単なものもありますが、標準フォントはOSによって少しずつ形が違う、WindowsではMacの標準フォント「ヒラギノ角ゴシック」が指定できない、Androidでは標準フォント内の「明朝体」が反映されず「ゴシック体」になるという細かな条件もあります。WEBデザインで特殊なフォントを使用するには、様々な方法でサーバーに「このフォント使いますよ」と指定する必要があります。自分の作業環境にフォントをダウンロードしたからといってWEBに反映されるわけではありません。標準フォント以外でWEBで使用できるフォントのことを「WEBフォント」と呼びます。日本語のWEBフォントは容量が大きく、サーバーに直にフォントファイルを置くとページの読み込み速度が一気に下がります。従って「Google Fonts」などの他サーバーのWEBフォントを引っ張って来る手法が現在は一般的です。WEBフォントにはないが絶対に使いたい！という場合にはデザイン上のテキストを画像化して「画像として貼り付ける」という方法もあります。Adobe Fontsも最近はWEBフォントとして使用できるようになっていますが、Adobeはそもそも有料サービス。フォントの使用料は？制作会社を変更するときは？など様々な懸念事項がありますので、本来はクライアントにAdobeCCを契約してもらい、クライアントのアカウントでWEBフォントを指定する必要があります。以前いた会社は慈善事業のように「会社のアカウントでどんどんAdobe Fontsを使おう！」と言っておりました。何度説明しても耳を傾けてもらえなかったのでコーダーやSEは最終的に閉口しました。 5.画像解像度 WEBデザインにおける画像解像度は「72ppi」が基本です。通常のディスプレイであればその解像度で綺麗に画像を表示させることが出来ます。そしてWEBにおいて昨今一番優先されるのは高画質の画像よりも「ページの表示速度」です。ブラウザで検索して開いたサイトがなかなか表示されないとき、大半の方が「表示されないから別のサイトを見よう」とそのサイトを閉じてしまいます。その時間は平均1～3秒とかなり早い結果出ているほど。したがって適切な画像解像度、サイズを指定しユーザーが快適に閲覧できるよう配慮する必要があります。またデザインラフの画像サイズが大きいと、作業時間にロスが発生します。一度1GB近くにもなるPhotoshopのデザインラフをMacの「AirDrop」で送られ、受け取りに時間を要した後、Photoshopが開くのにも数分、更に何かをクリックするたびに30秒～1分ほどPhotoshopが固まり何の作業も進まない、といった案件がありました。原因を探るとラフの中には画像が20枚ほど、すべて解像度が350dpiでした。72ppiに変換すると「6000×4350」という恐ろしいサイズが表示され、解像度とサイズを全て変換する作業で２時間食われるという事態がありました。なんせ固まるのです。画像は色んな意味でWEBサイトを左右します。 6.表示端末ごとに見え方が違うということ 現在WEBサイトが閲覧できるのはPC、スマートフォンやタブレット、インターネットさえ繋げばテレビでも可能です。そしてそれには様々なサイズがあります。PCの場合ではディスプレイサイズは様々ですし、ブラウザウィンドウも各々見やすいサイズに調整して閲覧しています。スマートフォンはコンパクト重視のものから画面の大きさ重視のものまで様々です。したがって、デザインしたWEBサイトがデザインしたままの形で見えることはほぼないと思っていただいた方が良いです。特にテキストは可変的であることが前提ですので、よほどの理由がない限り「ここで折り返したい」というこだわりは持たない方がスムーズに制作が進みます。デザインをする際は各々のテキスト量に応じれるよう１行の場合と複数行の場合の最低２パターンを用意するとデザイナーとコーダー両方の認識が合いやすくなります。また「ある幅より小さくなるとコンテンツの配置が変わるデザイン(レスポンシブデザイン)」か「絶対に横スクロールを発生させないような流動的なデザイン(リキッドデザイン)」かを先に決めておく必要があります。それが決まっているかによってコーディングの基盤が全て変わって来るからです。これは今後別の記事でご紹介しましょう。 いかがでしたでしょうか。上記したものはデザイナーとコーダーのコミュニケーションによって解決できることがほとんどです。「せっかくデザインしたのにコーダーがケチをつける…」「デザイナーが全然WEBの知識を持ってくれない…」と愚痴るよりは、しっかりお互いの意見に耳を傾けて一緒に進んでいってください。