Webデザイナーが知っておきたい！コーディングの5つの知識

こんにちは。デザイナーのよもやまです。

「Webデザイナーはコーディングを習得すべきか？」という議題が、SNSで頻繁に話題に上がります。
今回は、Webデザイナーのコーディング事情について私の考えをつらつらと書いていきます。

できなくてもいいけどコーディングできた方が楽

「向いてない」「苦手だ」と思う方は無理に覚えなくてもいいと思います。
しかし、経験上Webデザインをする上で、コーディングの知識はあった方が断然「楽」です。

・学習コストが高い
・HTML / CSS / JavaScript…いっぱいあるけど覚えられる気がしない
・コーディングに苦手意識が強い

上記のような方に向けて、Webデザイナーのコーディング事情をお話ししたいと思います。

コーディングの知識があるメリット

学習コストが高くても知っておいた方がいい、と明言される方が多いのにはいくつか理由があります。

・コーダーとのコミュニケーションが円滑になる
・デザインする際に「実装可能なのかな？」と迷わなくなる
・フォントやカラー、サイズの統一などデザインの美しさに繋がる

大きくは上記の３点です。
悩みながらデザインを作ったものの、コーダーに「これはどう実装するつもりなのか？」と聞かれても答えられなければお互い時間のロスになります。
チームで円滑に気持ちよくWebサイト制作をするため、またスピードアップとデザインの美しさのため、必要最低限コーディング関連で知っておいて良かったことを紹介していきます。

１．コンテンツ幅とブラウザ幅

Webサイトは、見る人の環境やデバイスによって見え方は異なります。
デザインを作って「完璧だ！」と思っても、実装してみると改行が変……スマホで見るとフォントが大きすぎる……なんてことも往々にしてあります。
まずは、デバイスの横幅の基本サイズを知るとわかりやすいです。

PC用のWebデザインでは、ブラウザ幅を広げても可変しない「コンテンツ幅」を決めます。
コンテンツ幅は「1000px〜1200px」くらいの数値が多く見られますが、デザインやデバイスの移り変わりによって今後も変動するでしょう。
最新のデバイス事情は検索すれば出てくるので、アンテナは常に張り巡らせておきましょう！
※デバイス幅の参考はこちらより

２．デバイスフォントとWebフォント

Webサイトに表示されるフォントには、大きく分けて２種類あります。
・OS搭載フォント（デバイスフォント）
・Webフォント
デバイスフォントは、WindowsとMacで異なります。

■デバイスフォント
Windows：メイリオ
Mac：ヒラギノ角ゴシック
Win / Mac共通：游ゴシック（見え方は少し異なる）

日本語フォントのゴシック体の場合、上記が主に使用されます。
主流なフォントの「小塚ゴシック」でWebデザインされている方をたまに見かけますが、小塚ゴシックはデバイスフォントではなくWebフォントになります。

「どのデバイスで見ても雰囲気がブレないようにしたい」「どうしてもデザインに合わない」という場合はWebフォントが使用可能です。
無料で使用できるWebフォントではGoogle Fontsが主流です。
ただし、Webフォントはページが重くなってしまう原因になります。使用する箇所や種類が多いと読み込みが遅くなるため注意が必要です。

３．サイズ・カラー・余白を統一する

デザインの基本でもありますが、コーディングをするにあたってカテゴリを意識して、余白やサイズ、カラーを統一するとデザインもコードも綺麗になります。
例えば、見出しに指定したい文字には「文字サイズ（font-size）」「文字色（color）」を指定して統一します。
また、コンテンツごとの上下の余白もバラバラだと、コーディングする際にCSSを書く量が増えてしまう上に、見栄えも統一感がなくなるため、「内側の余白（padding）」や「外側の余白（margin）」も意識してデザインします。

４．JavaScriptで出来ることを知る

JavaScriptやjQueryはコーディング に苦手意識のある方にとって避けたい分野かもしれませんが、書き方は覚えなくてもOKです。
Webデザインに関わる面で、JavaScriptで「何が出来るのか」を知ることが大事です。

Webサイト制作において、コンテンツのアニメーションを求めるクライアントは多いです。「ここはスライダーで」「ふわっとカッコイイ感じのアニメーションで」など曖昧なイメージで要望を受けることも多々あります。
それをそのままコーダーに伝えてしまっても「？？？」と齟齬が生まれてしまい、出来上がったサイトがクライアントのイメージと異なれば大きな修正もあり得ます。

「ハンバーガーメニュー　アニメーション」「スライダー　スタイリッシュ」のように検索すれば、先人たちの参考になるコードが沢山出てきます。「コレって可能なのかな？」と思ったらまず検索して見ると、クライアントへの提案の幅も広がってきます。

５．検証ツールを使いこなす

検証ツール（デベロッパーモード）は、ブラウザで表示しているページのHTMLやCSSなどを確認することが出来る開発者向けツールです。

Google Chromeではページ上で右クリックをして「検証」を選択すると検証ツールが開きます。
「このWebサイト素敵だな」と思ったら検証ツールで見てみると、上記で紹介したコンテンツ幅や文字サイズ、余白などの参考にもなると思います。
「この動きを参考にしたい」「このレイアウトを参考にしたい」と思った場合、URLをコーダーに共有して相談するのもコミュニケーションの方法のひとつだと思います。
検証ツールの詳しい使い方は、Progateさんのページがわかりやすいです！（Progateさんの回し者ではありません）

検証ツール（デベロッパーモード）の使い方

検証ツールではJavaScriptも見ることが出来ます。読んで理解するのはなかなか難しいですが、「このフレームワークを使っているんだな」と分かればアニメーション提案の幅も広がります。

結論：ググり力があれば大体何とかなる

HTML / CSSの基礎知識は最低限あった方がいいというのが私の持論ですが、コードを全部覚えなくても全然大丈夫です。

もちろん、コードを覚えていればスピードは断然上がりますが、一言一句覚えなくても「これは確か出来たはず」くらいの感覚で覚えておけば問題ありません。
※ただしWeb界隈は進化し続けるため、知識はアップデートしていくのをオススメします！

Webで自分のデザインがどのように表示されるのか？
コーダーがコーディングする時どのようなことを気を付けているのか？
IllustratorやPhotoshop といったデザインツールを使いこなしつつ、コーディングも勉強していくのは大変ですが、Webでの魅せ方やクライアントへの提案の幅を広げるためにもなるため、是非チャレンジしてみてください！