こんにちは！株式会社ジムでエンジニアをしているKです！
現在はフロントエンドエンジニアとしてWebサイトの実装をしていますが、実は過去にデザイナーとしての勤務経験があります。
コーダーとして働いていると、デザイナー時代には気付けなかった点がたくさん見えてくるようになりました。それは、実際にサイトに実装する場面になると、デザイナーとコーダーの意図がイマイチ噛み合っていないと感じることです。噛み合わないことで、業務中に何度も確認作業が入り、時間と手間をロスしています。
そして、コーダーとしてデザイナーにもっと情報共有してほしいと、今身に染みて感じています。
そこで今回は、デザイナーとコーダーの連携について、両方経験している私から、「もっとこうすると効率よく仕事を進められる」というポイントを紹介します。
デザイナーとコーダーでWebデザインの共通ルールを作るのが効果的
Webサイト制作をする上で、サイトのデザインを考えるデザイナーと、実際にシステムに実装していくコーダーは、仕事上繋がっているけれど、意図がイマイチ噛み合っていないことが多々あります。
それは、「デザイナーとコーダーとの共通ルールが存在しないからではないか」という考えに至りました。
デザイナーはWebサイト全体を、ユーザーに分かりやすく伝えるためにデザインをします。しかし、実際にシステムを構築していくと、実現が難しいことや修正が必要な場面が多いです。
同じWebの仕事でも、担うポジションによって認識の違いが発生することは珍しくありませんが、もう少しルールを共有して、時間や手間のロスを減らす努力が必要だと感じています。
そのため、お互いの確認作業の時間のロスをなくすためにも、最初からデザイナーとコーダーでWebデザインについて共通のルールを作っておくことが、一番効率的ではないかと考えています。
Webデザインはデバイスごとに変える必要がある
Webデザインでは、スマホ・タブレット・PCと画面サイズによってデザインを変える必要があります。
そのことはデザイナーもコーダーも理解していますが、ここでは基本的なデバイスごとの表示手法に関して解説します。
Webデザインの3つの表示手法
Webデザインの表示手法は、主に以下の3つがあります。
| 表示手法 | 特徴 |
| レスポンシブデザイン | 1つのCSSでコントロールしデバイスごとに自動的に表示幅を調整する |
| リキッドデザイン | ブラウザの幅に合わせて表示サイズを100％になるように可変する |
| アダプティブデザイン | デバイスごとにレイアウトする |
ユーザーが使うデバイスはPCだけではなく、スマホやタブレットも多くなっているため、ユーザーファーストを考えると、デザイン手法をカスタマイズする必要があります。
3つの表示手法のメリット・デメリット比較
Webデザインの主な表示手法は3つありますが、それぞれメリットとデメリットがあります。
| 表示手法 | メリット | デメリット |
| レスポンシブデザイン | 1つのHTML・CSSなので管理・更新がしやすい | 表示スピードが遅くなりやすい
調整に限界がある |
| リキッドデザイン | どのデバイスでも横幅100％なので、横スクロールする必要がない |
見づらくなることがある 不安定な表示になる可能性がある |
| アダプティブデザイン | 表示スピードが速い |
ブレークポイントごとにデザインが必要で手間がかかる ブレークポイントごとにファイルが分かれているため管理・更新が面倒 |
現在では、レスポンシブデザインとリキッドデザインを組み合わせる方法も用いられており、デザイン手法が多様化してきています。
どの手法が優れているということではなく、実装するWebサイトの特色に合わせて、使い分けることが大切です。
コーディングの基本はグリッド設計
実際のコーディングは、グリッド設計が基本になっています。そこでここでは、グリッド設計について簡単に解説し、役立つパターン例も紹介します。
グリッド設計とは
グリット設計とは、Webサイトの要素となるテキストや画像を、格子状（グリッド）に配置する方法です。画面上にボックスを並べるような感覚に近いでしょう。
グリッド設計の良いところは、正方形だけでなく長方形を混ぜて変化を付けることが可能な点です。
また、グリッド設計のメリットは、以下のいくつかが挙げられます。
- 情報を整理・更新しやすい
- レスポンシブデザインと相性が良い
- グリッド数を自由に変えられる
- 各ボックスの大きさを変更しやすい
こうした変更のしやすさなどから、コーディングではグリッド設計が基本となっています。
実務で役立つグリッド設計のパターン例
※以下のパターン例は新井 慎之介さんの「グリットレイアウトの基本と活用方法」を参考にしています。この設計例は一例であり、デバイスやデザイン方針に応じてカラム数や間隔は柔軟に調整してください。
グリット設計は、以下の3つの要素で構成されています。
- カラム
- ガター
- マージン
カラムとは、画面上に表示されるデザイン部分を縦に割った領域を表しています。カラム数はデバイスごとに変えるのが一般的で、デスクトップ表示は12カラム、タブレットは8カラム、モバイルは4カラムで設定します。
下の画像の青い部分で表している部分がカラムです。
ガターとは、カラムとカラムの間の余白部分です。ガター幅は表示するデバイスごとに適した幅に設定します。
マージンとは、コンテンツを表示する領域の左右の余白のことです。デスクトップ表示ではマージンの幅が大きく、モバイル表示では幅が小さくなるように設定します。
下の画像は、カラム幅、ガター幅、カラムの左右に表示されている余白部分がマージンです。
株式会社ジムのWebサイトの制作実績のページを見てみましょう。
PC表示では以下のように表示されます。マージン幅が広く、カラムは大きく4つの領域に分かれていることがわかります。
次はタブレット表示例を見てみましょう。カラム数が大きく分けると3つの領域になり、マージンも狭くなっています。
最後はスマホ表示です。小さな画面でも操作がしやすいようにカラムが1つの領域で構成されマージンも狭くなっています。
このように、表示するデバイスごとにカラムやマージンなどのデザイン要素を変更する必要があるため、柔軟性のあるグリッド設計を用います。
デザイナー・コーダー共通の“ルール”を作ろう！
デザイナーから上がってくるデザイン案を、いざコーディングして実装する段階になると、意外と迷ってしまうことがあります。その原因は、「デザイナーとコーダー双方に共通のルールがない」からだと考えています。
双方で共通のルールがないために、コーディング途中に出る疑問点を都度確認する必要があります。その間は作業が止まってしまうため、手間もかかるし時間のロスだと感じるようになりました。
そこで私が考えたのが、デザイナーとコーダーで共通ルールを作ろうというものです。
例えば、8倍ルールやデバイスごとの文字の折り返しなど、事前に打ち合わせをしておき、ルールを決めておくなどです。
制作するWebサイトによってデザイン手法を変えることもあるので、まずは共通のルールを決め、案件ごとの対応については、事前に取り決めておくと効率的でしょう。
共通ルールが認識されれば、各担当者の作業を中断せずにスムーズに業務が行えます。
デザイナー・コーダーで情報共有すべき3つのポイント
せっかくデザイナーが考えたWebデザインでも、サイトに実装すると崩れてしまうことがあります。ここでは、デザイナーがイメージした通りにWeb表示させるために、事前に情報共有しておくべきコーディングの困りやすいポイントを3つを紹介します。
【ポイント1】可変／固定パーツの切り分けを明確にする
Webサイトの各構成パーツが、可変か固定かを事前に取り決めておくとよいでしょう。
デバイスごとの表示で、各構成パーツの可変や固定などを明確にしておくと、コーディングの際に迷わずに実装できるからです。
例えば、以下の構成パーツを可変か固定かを決めるとよいです。
- 画像の可変・固定をどうするのか
- 文字数を変えるのか（1画面で表示する文字数の変更をどうするか）
- フォントサイズは変えないのか
パーツごとの可変・固定が明確になっていれば、スムーズにコーディング作業に入れます。また、デザイナーも理想とする画面表示のイメージを持っているので、それを崩さないためにも最初に共有すべきでしょう。
【ポイント2】余白やマージン・パディングの指定する
余白もWeb制作では大切な要素なので、デザイン時にイメージを共有することが大切です。
PC表示では余白が十分にありストレスなく画面表示がされても、スマホやタブレット表示の際に余白が多すぎてしまうことがあります。余白が多いと、のっぺりとした印象のサイトになってしまうため、余白の指定はデバイスごとに必要です。
デザイン以外の余白といっても、以下の2つの要素を特に意識して共有するとよいでしょう。
- マージン（外の余白）
- パディング（内の余白）
Webサイトの印象を崩さないためにも、余白にも気をつかいましょう。
【ポイント3】テキストの量・折り返しへの配慮をする
画面サイズが変わると表示できるサイズも変える必要があるため、文字の表示量や折り返しなどのイメージも共有しましょう。
PC・スマホ表示バージョンのデザインは考えていても、タブレット表示になった場合に崩れることがあるためです。
テキストの見え方はユーザーにとって大切な情報になるので、妥協したくないポイント。1画面に表示するテキストの量や折り返しへの配慮は、コーダーだけでなく、ユーザーへの気遣いにもなります。
初めにお互いが共有すれば手間が省けるチェックリスト
デザイナーとコーダー双方が初めに情報共有しておけば、お互いストレスなく作業をすすめられます。そのため、事前に情報共有するチェックリストを紹介します。
前提条件はどの案件でも共通しているので、初めに以下を共通認識として持っておきましょう。
- PC・スマホ表示のデザインだけでなく、タブレット表示のデザインも共有（イメージでも可）
タブレット表示の場合は画像の縦横が合わないことがあります。そのため、かっちりしたデザイン画ではなく、イメージだけでも共有するとコーダーが助かります。
他のチェックリストは、以下の項目を入れるとよいでしょう。
- 8倍ルールに則ったデザイン
- 画像サイズの可変・固定の指示
- 表示する文字数や折り返しの指示
- パーツごとの配置などの指示（ボタンなども忘れない）
- 横幅固定なのか、可変なのかの指示
8倍ルールは画面のサイズが8の倍数で作られているため、8倍ルールに則ったデザインにすることで汎用性が高くなります。
デザイナーとコーダーがお互いの手間を省くためにも、共通認識チェックリストを活用してみてください。
デザイナーとコーダーの負担を減らすために共通ルールを！
Web制作でデザイナーとコーダーの連携をもっとスムーズにできれば、確認などに使う手間や時間が節約できると考えています。
Webサイト制作では、デザインの手法を使い分けたり、実装時に基本となる考え方があったりなど、知っておくべき知識があります。
デザイナーとコーダーが事前に情報共有しておけば、スムーズな作業ができ、もっと仕事がしやすくなるでしょう。
より良いWebサイトにしたいと考えているのは、どの担当者も同じです。
今回紹介した事前に情報共有しておくべきチェックリストを活用してみてください。
今までとは違った効率化が図れると思います。
