WEBサイトはさまざまな専門職が工程ごとに関わって制作が進んでいくことが多いです。そのパターンとして、複数の会社が連携していたり、制作会社様がWEBデザインやコーディングだけを外注したりということもよくあります。私たち、くまWEBも制作会社様に特化したコーディング代行をさせていただいているので、デザイナー様からデザインファイルをご提供いただいています。
デザインとコーディングを別の人が行うという制作環境の中で、WEB制作スタート前の段階で意識しておいたほうがよいポイントがいくつかあることに気づきました。意識して決めておくことで効率がよくなりコスト削減につながることもあるので、その分をデザインや機能の質の高さや、コンテンツの充実度など別の軸に使えるようになります。
今回はWEBデザイナーさんとコーダーさんが協働する際、事前に共有しておいたほうがよいポイントを（主なものだけとなりますが）、6つ挙げさせていただきます。デザイナーさんもグラフィック出身の方だとコーディング作業について知らないこともありますので、デザイナーさんに発注するタイミングで「ご存知とは思いますが…」と最初にお伝えしておくと全体がうまく回るのではないかと思います。
1.各端末で表示されるフォントは違うことをデザイナーさんに理解していただく
グラフィック（紙）とWEBデザインで大きく異なるのはフォント選びの作業だと思います。
グラフィックデザインではデザイナーさんがフォントファイルを持っていれば、そのフォントのまま印刷できます。ただWEBの場合は、Windows、Mac、iOS、Androidとさまざまな端末があり、それぞれに搭載されているフォントが異なるので、端末によって使えるフォントは変わるという前提があります。
WEBデザインではフォントをCSSファイルのfont-familyプロパティで指定しています。ブラウザでWEBページを表示するときには、各端末がその指示を読み取り「このフォントで表示すればいいんだな」と判断して、私たちに見せてくれています。ただ端末ごとにフォントが違うので、「このフォントで」と1つを指定しても、それが入っていなかったらそのフォントでは表示されません。
そのため、font-familyに複数のフォントを指定しておくという作業が発生します。
body {
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
}
前に書いたフォントから優先的に適用されます。もしユーザーの端末に、指定したフォントが入っていなければ、次のフォントが選ばれます。
このCSSの動きはグラフィックデザインをしているとわからないので、悪気なくWEBデザインでは一般的でない（表示できない）さまざまなフォントを使ってしまうこともあります。WEBフォントを使ってくれていたとしても、容量の問題やメンテナンスの問題などが出てくるのでコーダーさんとしては不安になることもあるかもしれません。
このようなことから事前にフォントについてどうするかを相談しておくとスムーズに進みやすいのではないかと思います。
2.文字の頭、余白の幅をそろえたデザインにする
演出のためのズレは何も問題がないのですが、しっかり揃っていれば発生しない作業が1px、2pxとズレていることによって出てしまうことがあります。コーダーさんは忠実に再現するのが前提ですので、「これはそろえていいですか」とデザイナーさんになかなか聞けないことも。
目ではそろっているように見えても数値が揃っていないと、それぞれに違う作業が発生するということを共通認識にしておきたいですね。
デザイン時には、例えばIllustratorでは↑のように座標が確認できるので、座標で揃えてもらえれば、目にも美しく、コーディング作業もスムーズになり、一石二鳥です。またコーディング時には小数点以下の表現ができなくなるので、揃えてもらうことで”切り上げ””切り下げ”を決める作業もなくなり、簡潔になりますね。
コードがシンプルになるとSEO対策にも価値が出てきます。検索エンジンが読みやすいコードを書くことで、評価アップにつながることがあるからです。これはかなりプログラムがわかる方でなければイメージができないので、「シンプルにできるところはしたい」というすり合わせをしておくとよりよいWEBサイトができます。
3.レイヤーの整理を意識する
IllustratorやPhotoshopでのデザインでは、レイヤーという透明の網のようなものを重ね合わせて最終形をつくっていきます。
このレイヤー1つひとつの中に、画像やテキストが格納され、グループになっています。レイヤーのパネルだけを見ても構造がわかるように、それぞれのレイヤーに意味がある名前を付けて整理していただいておくと、コーディング作業も迷うことなく進められます。
・header
・navi
・main
・contents
・footer
などパーツごとに分けてレイヤーをつくってもらうと、書き出したときにフォルダだけをみて作業を進められるので、作業の迷いや確認作業を減らせます。
レイヤー作成前＝デザイン着手前に、全員がわかりやすいような名前とグループ分けになるよう打ち合わせしておきたいですね。
4.改行やテキストボックスのルールを決めておく
これはリキッドレイアウトを採用する時、特に気をつけたい点です。
文章は各端末の表示幅に合わせて1行あたりの文字数が変わるので、デザイン時に任意の改行がたくさん入っていると、不自然に切れて見えることがあります。
ライターさんの原稿作成時、デザイナーさんのWEBデザイン作成時、まとまった文章のかたまりをつくるように意識しておくと、端末ごとに改行が出てきたとしても美しい見栄えができます。
端末によって1行に表示される最大文字数は違う、ということを共通認識化しておきたいですね。
5.ボタンの動きなどルールを決めておく
例えばWEBデザインの中に出てくるたくさんのボタンデザイン。マウスポインタを載せたときにデザインが自然に変わる”ホバー”という効果があります。
このような効果をどこまで実装するかは、デザイン作成前にすり合わせておくと作業がスムーズになります。必要なときはデザイナーさんにホバー時のボタンデザインもつくってもらうことになりますが、必要画像数が変わってきますので、多数あれば見積もり額も違ってくるかもしれません。
また、コーディング時もホバーデザインがあるのかないのか、はっきりしていると作業効率が上がります。
デザインで動きをどれくらい出すのかのトータルプランニングはブランディングにも関わり、デザイナーさんにすべて任せるのは難しい側面があるかもしれません。デザイン着手前に、プロジェクトに関わる方々で検討するとスムーズに進みます。
6.流動的なコンテンツがゼロのとき、増えたとき、減ったときの表示想定もしておく
WEBサイトのブログやお知らせ欄、ネットショップの商品点数など、WEBサイトはどんどん表示数が変わるコンテンツがたくさんあります。デザインもコーディングも終わり、担当者さまが更新を始めてから問題が浮き彫りになることもありますので注意したい点です。
・表示数がゼロ
・表示数が1
・表示数が100
例えばネットショップでこのようなカテゴリが混在するときに、どこでページを変えるのか、ゼロのときに何を表示させるのかなど事前に決めておけばデザインもコーディングもスムーズです。コンテンツゼロのときに表示させる画像などデザイナーさんにつくっていただかなければならないなら、早くお知らせしておきたいですね。
文字数も同じで、流動的です。商品名が5文字程度のものもあれば、30文字になることもあります。こういったときは”多め”に設定してデザインカンプをつくってもらうようお願いしておいたほうが、デザイナーさんのイメージがずっと崩れずにWEB上でも表現できます。
まとめ
全体的に【動き、アクション】が出るときに【どう動くか？】を、デザイナーさん、コーダーさん、ディレクターさん、クライアント様が集まって相談しておくと修正や追加を少なく進められます。
WEBサイトは動きがあって、その動きがどれだけ滑らかに見えるかも仕上がりの印象を左右します。それはデザインという範疇に収まらず、例えばコンテンツを追加するときに画像をアップした後は削除できる仕様にするのか、できないのか。できないなら「一度アップした画像は削除できません」と注意書きが必要かも…など、細かな想定が必要になります。
このようなすり合わせを事前にしておけばしておくほど、使いやすく読みやすいWEBサイトがスムーズに仕上げられると思います。