構築パートナーと質のよいサイトを作るために「デザインデータのクオリティ」を上げる【ILY,BootCamp #04レポート】
Hello, people.
「デザイン力を爆発的にアップさせよう！」という目標のもと、弊社では定期的に「ILY, Boot Camp」というオンライン勉強会を開催しています。
今回は「構築パートナーと質のよいサイトを作るために必要な考え方と知識」をテーマに、“ウェブサイトをともに作るエンジニアさんやパートナー企業＝構築パートナーに喜ばれるデザインの作り方”について考えてみました。
ILY,の場合、弊社のデザイナーだけでなく、実際にウェブサイトを組み上げる構築パートナーとともにサイトを制作する機会が多いです。
デザイナーと構築パートナー、そのどちらもがサイト制作に携わるので、“どのようなプロセスでウェブサイトを制作するのか”という点は非常に重要です。双方でサイト制作プロセスの認識がずれていたり、作業途中で共有すべき情報が不足してしまうと、余計な負担や工数が増え、ストレスがかかります。そして何より、サイトの品質が低下します。
デザイナーと構築パートナー双方が気持ちよく作業を進めるためには、「デザインを作るときにどのような考え方が必要なのか」「構築パートナーにどのようなデザインデータを渡せばよいのか」という視点が必要です。
今回はデザイナーの目線で、質のよいサイトを作るために必要な「構築指示書」と「考え方」について学んだ様子をレポートします。
「構築指示書」の重要性
さまざまな役割の人がウェブサイト制作に携わるときにカギとなるのが「構築指示書」です。「構築指示書」とは、ウェブサイトをどのように作るのか、という指示をまとめたデザインデータのこと。質のよいサイトを作るために、「構築指示書」は欠かせない存在です。
なぜ「構築指示書」が構築パートナーとウェブサイトを制作する際に重要なのか、それには4つの理由があります。
「構築指示書」が重要な4つの理由
①満足いくサイトにするため
②人件費をおさえるため
③キャッチボールを最小限にするため
④自分を守るため
①満足いくサイトにするため
ひとつめの理由は“満足いくサイトにするため”です。構築指示書がない場合、デザイナーと構築パートナーとは、デザインデータのみで情報をやり取りしなくてはいけません。データのみでは、構築パートナーがデザイナーの意図を十分に理解するのは難しく、デザイナーと構築パートナーとで認識の齟齬が起きてしまいます。
構築指示書にはデザイナーの意図が記されているので、構築パートナーに正しく仕様が伝わり、検討や確認作業といった余計な手間が省けます。また、デザイナーにとっても、構築フェーズに入る前に成果物のイメージを言語化することで、仕様の抜け漏れや考慮漏れを防ぐことができるというメリットがあります。
②人件費をおさえるため
ウェブサイト制作費用のうち、そのほとんどが人件費といっても過言ではありません。余計な工数はできるだけ減らし、制作する上でのリスクを未然に防ぐことも大切です。
構築指示書がないと、細かな仕様やデザイナーの意図が不明確なため、追加の検討事項が発生し、工数を圧迫してしまう可能性があります。構築指示書には仕様を明記しているので、追加対応や修正対応も不要。工数を上乗せすることもありません。
③キャッチボールを最小限にするため
構築指示書には、細かな仕様やデザインの意図、実際の動きのイメージなど、デザインデータだけでは分からない情報が盛り込まれています。構築指示書がないと、そういった細部の確認のたびにデザイナーと構築パートナーとの間でコミュニケーションが発生し、時間をロスしてしまいます。また、情報不足によるすれ違いや度重なる不必要なコミュニケーションは、デザイナーと構築パートナーとの間に不和を生じさせかねません。
集中して作業を進めるためにも、小さなストレスをためないためにも、構築指示書は大切なのです。
④自分を守るため
構築指示書の役割は、“ウェブサイトをどう作るかを明記する”だけではありません。デザインの意図や細かな仕様を記すことで、それらがエビデンスとして機能し、結果として自分を守ることにつながるのです。
もし何か問題が発生しても、構築指示書を確認することで、責任の所在は明確にできます。トラブルが起こったときにありがちな、責任の追及などのやりにくい会話も回避することができます。また、構築フェーズ前に、さまざまな要素を洗い出してまとめるので、実際に構築段階に入っても、想定外の対応を減らすという効果もあります。
データの質と大事な考え方
デザイナーと構築パートナーとの間に齟齬が生じないために必要な構築指示書。その指示書にはどのようなデータや情報を載せると、より質のよいウェブサイト作りにつながるのでしょうか。
データの質
デザインデータを3種類に分類してみます。どのデータが構築時には必要でしょうか？
レベル低：ただのデータ
→デザインのみを記載したような、ただのデータ
たとえば、ウェブサイトのキャプチャのみ、のようなデータだと、実装部分までは分からず、追加対応必須に……サイトを構築するには不十分です。
レベル中：ていねいなデータ
→ただのデータに、説明書きも加えられているデータ
ウェブサイトのキャプチャに、「ここもリンクです」などの説明書きも添えられているパターン。しかし、これだけだと「どのようにリンク先に遷移するのか」「ホバーするとどうなるのか」といった、実際のウェブサイトを使用するときに必要なイメージが欠けており、構築するには不十分です。
そこで求められるのが、
レベル高：助かるデータ
→全体の要素、実装部分や細かな動きのイメージ情報なども加えられたデータ
イメージの参考になる情報やページ遷移にかかる時間なども添えられていると、より完成したウェブサイトを想像しやすいですね。
ウェブサイトを作るうえで必要な情報は、想像以上に多いです。そのため、考慮しなければならないポイントも多岐にわたります。そうしたポイントをひとつずつ棚卸し、“構築パートナーにとって助かる”レベルのデータを作成することが重要です。
大事な考え方
構築指示書を作るうえで基本となる考え方は2つあります。
・実際のものを作るために、デザインデータや構築指示書を作っている
・実際にものを作るのはデザイナーではなく構築パートナー
デザイナーは完成品をしっかりイメージし、ウェブサイトを実際に構築する構築パートナーが作業しやすいようなデザインデータを準備する必要があります。タブレット端末の考慮も忘れずに。
分かりやすいデザインデータは構築パートナーへのラブレター。データの質と、データを作成する際の考え方は常に心にとめておきましょう。
データの質をよくするために
次に、デザインデータの質を上げるために必要な要素について考えてみます。
サイトデザインを作るうえで理解すべきポイント
デザインデータの質をよくするためには、ウェブの知識や構築者的着眼点が必要です。いくつかのポイントをまとめてみました。
◆ブラウザ
使用するブラウザが異なれば、表示も異なります。ウェブサイトを制作する際には、そのブラウザのどのバージョンを想定するのか、そのブラウザの一般的・業界的なシェア率なども考慮して、デザインデータや構築指示書に反映するようにしましょう。
◆レスポンシブ
ワンソースで各デバイスに最適な表示に切り替えることができるレスポンシブデザインですが、あらゆる表示に対応できるわけではありません。実用可能な範囲を構築パートナーとすり合わせておく必要があります。
◆ブレークポイント
ユーザーが使用するデバイスの種類は千差万別。CSSを切り替えるポイントはデザインによっても変わってきます。おおよその目安を確認しておきましょう。
＊CSS：ウェブページのスタイルを指示・指定する言語。
◆webフォント
ひとつのウェブサイト内で多くの種類のフォントを使用したり、ひとつのフォントで多種類の太さを指定すると、サイトの表示速度が落ちてしまうことがあります。デザインだけでなく、ウェブサイトの性能にも目を向ける必要があります。
◆画像の指定・トリミング
画像のサイズを変更する際に比率を固定するのかどうか、推奨サイズと異なる場合のトリミング指定など、画像まわりはデザイナーと構築パートナー間に認識の齟齬が起きやすいです。構築者目線で実装がイメージできる指示を心がけましょう。
＜実践＞”助かるデータ”はどれだ？
ここで実際に参考サイトを見て、“構築指示書に明記しておくとよいポイント”を考えてみます。
①株式会社ジンズホールディングス（https://jinsholdings.com/jp/ja/）
【構築指示書に明記しておくとよいポイント】参加者からの意見
・ヘッダーのホバーデザイン
・展開時デザイン
・矢印のアニメーション
・スライダーの画像が変わる速度、どのように変わるのか（フェードイン・アウト？右から左？）
・情報量の目安（ニュースなどのテキストが2行になった場合のデザイン、デザインがくずれない文字数の上限）
②Shibuya Media Pedia（https://www.media-pedia.com/）
【構築指示書に明記しておくとよいポイント】参加者からの意見
・アニメーションなどが多いので、参考サイトを引用
・ヘッダーの表示方法（上にスクロールしていくと上部固定表示？レイアウト変更？）
・ボックス内の要素（テキスト量による見え方）
・メディアサイトという特性上、情報量の増減による表示くずれが起きないかのチェック
デザインデータ上で気をつけるべきポイントやルール
最後に、構築指示書やデザインデータを作成する際に気をつけるべきポイントやルールについて確認します。（今回はXDでのデータ作成を前提としています。）
◆アートボードのサイズ
ブラウザで見たときのイメージや、レイアウトや余白がデザイン通りに仕上がっているか、ということを念頭に置き、デザイナーの中で基準を設けておくと便利です。プロジェクト単位でサイズをそろえておくと、効率アップも図れます。
◆文字間と行間
デザイン時に使用するツールにもよりますが、フォントサイズを変えると文字間隔・行間隔が変わってしまうことがあります。文字間・行間は指示書に明記しておくとよいでしょう。
また、フォント・文字サイズ・文字／行間隔は文字スタイルとして登録し、共有しておくと余計な手間も省けます。
◆小数点は極力なし
実際のウェブサイトを構築する際、サイズや余白、位置などを小数点を含む数値で指定すると、構築が難しくなってしまいます。小数点指定は極力避けて、工数の圧迫を防ぎましょう。
◆マージンやフォントサイズ
デザイン上同じ意味合いを持つマージンやフォントサイズなどはできるだけ合わせ、要素を統一しておきましょう。統一したものには共通のクラス名をつけておくと、構築もコーディングも効率が上がります。
”誰のための”デザインなのか
構築指示書やデザインデータの質をよくするための着眼点や考え方、気をつけるべきポイントを見てきました。
よいウェブサイトを作るための基本の考え方は“実際のサイトをイメージして、構築パートナーが助かるデザインデータを作成する”ということです。ウェブサイトを作り上げるのはデザイナーではなく構築パートナー。そのエンジニアたちが求めている情報やデータを網羅し、デザイナーの意図も伝えられる“助かるデザインデータ”をまとめることは、デザイナーの責任でもあります。
また、デザイナーと構築パートナー、お互いが効率よく、関係性よくプロジェクトを進めるためには何が必要なのか？という視点も忘れてはいけません。デザイナーもウェブサイト構築の知識や考え方を知っておく。場合によっては構築パートナーにも上流過程からデザイン設計に参加してもらい、最適な進め方を考える。など、手立てはたくさんありそうです。
デザイナーと構築パートナーは、ウェブサイトを作るための両輪です。デザイナーの考え・エンジニアの考えを改めて知ることができたのは、今回の勉強会の大きな気づきでした。
デザインを作る際は、「実際のものを作るために、デザインデータや構築指示書を作っている」「実際にものを作るのはデザイナーではなく構築パートナー」という考え方が基本です。基本に則り、プロジェクトやクライアントごとに最適な方法をカスタマイズしながら、よりよいデザインを実現していきたいと思います。
Thank you, we love you.
今回のプレゼンター
諫山 侑矢（いさやま ゆうや）
Designer - Coder
大手IT企業でシステムエンジニアとして活躍した後、Webデザイナー/コーダーに転向。デザイン制作やフロントコーディング、WordPress構築など幅広く担当。システムエンジニアの経験を生かし、Webシステムのデザイン案件にも対応。マクロ-ミクロな視点で考え、そつなく確実に進行していくことが強み。スマートなデザインが好き。趣味はバスケットボールで、ゴールを破壊した経験を持つ。
私たちILY,は、ロゴ制作やビジュアルデザインなどの”見た目のデザイン”にとどまらず、MVV策定や事業・サービスのコンセプト設計などの”コトのデザイン”もご提供しております。お気軽にご相談ください。
この記事が気に入ったらサポートをしてみませんか？