コーディングから学ぶWEBデザイン

WEBデザイナーで入社したのにコーダーになってしまった

WEBデザイナーで採用されたのにコーダーのポディションに配置されることはしばしばあります。
特に未経験だったり、日の浅いデザイナーに多いです。

WEBデザインの知識を一日も早く吸収してWEBデザイナーとして一人前になりたい！そう思われることだと思います。
しかし！コーディングからもWEBデザインの知識を得ることは沢山なります。

コーダーだった私がWEBデザイナーに転身した経験を踏まえてコーディングでWEBデザインの知識を蓄える方法を書いていきます。

デザインの意図深く考える

コーディングする際にこのデザインはどういう意図でデザインされているかを深く考える事が重要です。

配色、隙間、配置、大きさ、線の太さなど・・・
これらの全ては、コーディングする際には全て確認していることかと思いますので『なぜこうなっているのか？』を考えましょう。

コンテンツの区切りを意識して見てみる

コンテンツの区切りとして余白、線、色などで区切られたりしています。
あーコンテンツの区切りだから・・・と流してコーディングするのではなく、なぜそうなっているのかを考えてみましょう。

余白を一つとっても、ただ区切りとして入れるだけではばらついた印象になりかねないので、綺麗に見えるルールの中でコンテンツ間の区切りを表現します。
そんなことをしていると徐々にデザイナーさんが手を抜いた所とかがわかるようになってきます。
それこそが成長の証です！

なぜ、この配色になっているか考える

ヒアリングなどで大まかな色は決められますが具体的にカラーコードで指定されることは少ないです。
なのにデザイナーは、細かなカラーコードの色を使って配色をします。

サブカラーに関しては決まっていない時もあるのでそういう時はデザイナーが完全に配色を決めます。
そこにはヒアリングシートなどに書かれている事をヒントにどういうサイトにしたいのかを汲み取った上で考えられた配色があります。

配色にもルールがあり、よく言われるものを幾つか紹介いたします。

カラー・ホイールで配色

配色を決めるときは、どういう印象を与えたいかなど場合によって違います。
ここではカラー・ホイールを使った代表的な配色パターンをいくつか紹介いたします。

■ 隣接色相

カラー・ホイールで隣り合った色で作る配色。やわらかい印象になりやすく、失敗しにくい配色です。

■ 中差色相

カラー・ホイールで90度の位置にある色同士を使った配色。
色相に中程度のコントラストがあり、バランスよく安定感がある配色です。

■ 隣接補色色相

補色の両隣りの色を使った3色配色。
調和させやすい配色です。

■ オポーネント

派手すぎず、調和させやすい配色です。

■ ドミナントトーン

明度と彩度を統一して、色相を変化させた配色です。
明度差の小さいベターく配色。

色数と割合

色数は3～5色以内。
配色の割合は、ベースカラー70％、メインカラー25%、アクセントカラー5％。
ベースカラーは薄い色がベター。

書体をじっくり見る

特に注目ポイントは、バナーやメインビジュアルです。
打ち込みのフォントとは違い、いろんなフォントが使えるのでデザイナーはこだわってフォントを選んでいます。

なぜ、このフォントを使ったのか？
なぜ、こことここのフォントが違うのか？
など、様々な疑問が湧いてきます。

文章、文字間、行間にも注目する

書体の話と少しかぶるのですが、ゴシック、明朝を使い分けたりします。
タイトルがゴシック、明朝が本文になっていることが多いのではないでしょうか？

ゴシックはインパクトが有り短めの文章に向いている書体、明朝は読みやすく長い文章でも苦にならない書体だからです。

他に文字間や行間を見やすく取るためには文字に対して1.6～1.9の間隔を空ければいいと言われていますし、あまり行が長い文章はセンター寄せにすると見づらいなどあります。
例えば、レスポンシブ対応する時にデザインがPC版のみのときがあります。PCでは行が少なくて読みやすいけどスマホにすると読みづらいので、左寄せにしておくと少しデザインがわかってるやつと思われるかもしれません。

その他にも色々なルールや仕組みの中でデザインがされてることが多いのでチェックしてみましょう。

デザインデータを観察してツールの使い方を学ぶ

PSDなどでどうやってデザインされるかよく観察しましょう
どのような機能を使ってデザインが作られているかをよく見てツールの使い方を学びましょう。

情報設計を意識する

情報設計とは、利用者にとってわかりやすく、使いやすいサイト設計をしていくことです。
デザイナーに聞いてみると配置やボタンの色など全て理由づけされていて、なぜそうなっているのか説明してくれます。

情報設計の戦略を考える

デザインをすることはゴールではありません。
その先には売上アップなど本当のゴールがあります。

そのゴールに向かって競合他社との比較、差別化、ペルソナの設定など様々を準備する必要があります。
デザインデータには、そのような戦略や情報が沢山もこめられています。

コンテンツの意味を考える

競合サイトやリニューアル案件なら現行サイトを見て、どのようにコンテンツが変わっているかを意識してみましょう。
デザインデータにはゴールに向うために必要なコンテンツの洗い出しや順番が綺麗に設計されています。

わからない所はとにかく勉強

考えるだけでも力が付きますが、疑問も沢山浮かんでくるのでそこは調べたりして答えを持つようにしましょう。
勉強していくと次コーディングする時に新たな疑問点が出てきたりするので勉強することがつきません。

めげないで続けることが大切です。
だって、それって成長してるってことですから

デザインしたデザイナーに質問する

デザインの意図深く考え、ツールの使い方を観察した上でデザインをしたデザイナーに質問してみましょう。
「この余白、色はなんで使ったんですか？」「この機能の使い方を教えて下さい！」

こう聞かれると質問が明確になり、答える側も答えやすくなります。
あと、結構勉強熱心な印象もつきますのでデザイナーへ配置換えに近づくかもしれません。