コーディング未経験のデザイナーとか紙物出身のデザイナーが
Webデザインを始める時
コーディングの概念がわからなくて
実装できないとんでもデザインを作る事が結構多い。
ってか、僕もそんな一人だった。
「Webデザイナーもコーディング出来た方がいいのか？」
と言う質問をよく聞きますが
コーディング知らなくても、最低限これだけは知っておけば
なんとかなるんじゃないかと思うポイントをまとめました。
目次
レイアウトのパターンについて
以前働いていた会社で、
一緒に働いていたデザイナーの子が作ったWEBデザインを見たとき
「１枚の大きなイラストのようなデザイン」
が出てきて、びっくりした事がありました。
もちろん、意図してそういうデザインを選択する事もありますが
オードックスなレイアウトを知らずに仕上げるのとは
話は別のように思います。
WEBデザインでよく使われるオーソドックスなレイアウトと、それぞれのメリットをご紹介します。
１カラムレイアウト
レスポンシブが流行るに連れてよく見かけるようになった主１カラムレイアウト。
特設ページやアプリの紹介ページ
最近では、コーポレートサイトも１カラムを採用する事が多く
主なメリットは
・余計な情報が入らずコンテンツに集中してもらいやすい
・レスポンシブとの相性が良い
２カラムレイアウト
一昔前までは、1番多かったように思いますが
最近でも普通に見かけますよね。
特に、ECサイトやブログなんかで多い気がします。
主なメリットは
・情報量が多いページなどで回遊性や検索性を高められる
・キーワードのロングテール化できると一部で言われている
グリッドレイアウト
グリッドに基づいて配置された、整ったレイアウト。
これは、グラフィックデザインでもよく見かける気がします。
ポートフォリオサイトなんかで採用される事が多いですね
主なメリットは
並列な情報を一度にたくさん見せられる
ブロークングリッドレイアウト
前述のグリッドレイアウトをあえて崩す事で
個性や面白さ、インパクトを出しやすいレイアウト。
ここ数年でよく見かけるようになりました。
主なメリットは
リズム感が生まれるので、動きのあるサイトと連動させやすい
オシャレさ、今っぽさを出せる
フォントの扱いについて
これは、紙出身者だと特に戸惑う事が多いのではないでしょうか。
特にWEBには「デバイステキスト」というHTMLで記述したテキストがあり
概念を知らない人が結構いるかと思います。
フォントの扱いについて気をつけたい点をまとめました。
デバイステキストについて
WEBで使用されるテキストは主に「デバイステキスト」か「画像化したテキスト」が主です。
ですが、ベターとされているのは「デバイステキスト」なのです。
- デバイステキストが好まれる理由は？
-
・画像よりテキストを使った方が軽い
・サイトを更新、修正する時にデバイスの方が簡易
・表示が綺麗
といった理由があります。
「じゃあ、デバイステキスト使えば良いじゃん」
と思われるかもしれませんが、デバイステキストに対応しているフォントの種類には限りがあり
それ以外のフォントを使うとなると、画像化するしかないのです。
最近では「WEBフォント」という、いろんな種類のフォントをデバイステキストとして使用できる
サービスがあるのですが、使いすぎると重くもなってしまうので
見出しや重要な箇所に使うぐらいにとどめておきたい所でもありますね。
文字詰めについて
前述のデバイステキストを使う場合、文字詰めはCSSで行うのですが
イラレやフォトショなどで行うほど厳密には行えないので
画像化する時の文字詰めはしっかりするに越した事はないですが
デバイスで行う文字詰めは、あまり拘るのは難しいと思っておいた方が良いでしょう。
フォントサイズについて
紙媒体では、5pxや6pxのフォントサイズは普通に存在しましたが
WEBだとほぼ見えない（というかブラウザによっては指定できない）ので
WEBでのオーソドックスなサイズを把握しておいた方がいいでしょう。
最小10pxぐらいは欲しいかなと思います。
規則性を持ったデザイン
コーディングをする時、コーダーはよく
「モジュール」を考えてコーディングします。
- 「モジュール」とは
- ざっくり言うと、コードを書く量を減らし
管理をしやすくする方法です。
例えば、
WEBサイト内に、何度も登場する「ボタン」があるとして
ボタンのコードを、ページ毎にCSSへ記述していたら
あとあと変更があった時に管理がとても面倒。
なので、共通するCSSファイルに1つボタン用のコードを記述し
ボタンを使用する際は１つのコードを再利用して使う
と言う感じです。
同じようなパーツが繰り返し登場する場面で
フォントサイズやマージンなど
特に意図がなければ、統一したい。
更新性があるサイトを作る時
更新情報やブログ、ECサイトなど
管理者の入力によって内容が変化するサイトを作る時
「文字数がやたら長い時はどんな感じになるのか」
「新着記事は何件まで見せる想定か」
「ECサイトの商品画像がない時は、Noimgを入れるのか」
など、起こりうる可能性を考えてデザインしたい。
最初のうちはハードルが高い所でもあるので
コーダーと相談しながら進めるのが良いようにも思います。
マルチブラウザについて
WEBデザインをやり始めた頃
見るブラウザによって、表示が全然異なっていて
「せっかく作ったデザインが・・・・」
と落胆した記憶があります。 いや、今でもたまにあります。
ブラウザによって、見え方違うって概念がなければ
なかなか辛いですよね。
また、ブラウザのバージョンによっても見えかた変わってくるので
要注意です。
- ブラウザにはどんな種類があるのか
-
主にチェックされるブラウザはどんな物があるかというと
・GoogleChrome ・Firefox ・safari ・IE ・IE edge
結構ありますよね。
ですがまだ終わりません。
ここに、後述するスマホやタブレットが加わってくるのです。
どういう風に見え方が変わるのか？
一番泣かされるのが、レイアウト崩れです。
あと、ブラウザによってデバイステキストの表示が変わるものがあるので
Chromeで見たら希望通りに見えたけどIEで見たらやたら細く見えた
なんて事もよくあるので指定の仕方など覚えたいですね。
マルチデバイスについて
WEBデザインの場合、PCだけじゃなく
スマホやタブレット、さらにスマホの中でもiphone、Androidなど
様々なデバイスから閲覧される事が想定されるので
それぞれに対応したサイト作りが必要になります。
なのでデザインする時は
「PC」「スマホ」用のページは最低限デザインしておきたい。
- スマートフォンサイトをデザインする時に気をつけたいポイント
- スマートフォンからサイトを閲覧する時は 「Retinaディスプレイ」と言って、とても高解像度のディスプレイになるので そのままの画像サイズで作ってしまうと、画像が滲んでしまいます。
なので、横幅375pxのディスプレイサイズ（iphone６以降など）を想定してる際は
倍の750pxでデザインを起こすのが一般的です。
動きがあるデザインについて
WEBデザイナーとコーダーを分業している時
WEBデザイナーは、コーディングしてもらう時に
「どんな動きにしたいか」
「どんなアニメーションをつけたいか」
など、コーダーにイメージを伝える事が多いと思います。
そんな時に、指示があやふやだと
デザインと統一性のない動きのサイトが出来上がってしまう事があるので
できればデザインする時に、どんな動きにしようか
頭に入れながら制作をしたい。
注意したいのが
デザイナーが希望するアニメーションの難易度がわからないと
予算やコーダーのスキルを超えて
とんでもない無茶なアニメーションを提案してしまうこともあるので
もし、ハードルが高そうなアニメーションを想定しているのなら
デザインを始める前に、コーダーに相談しつつ始めたい。
階層構造を意識したデザイン
WEBサイトを見ていると、こんな構造になってる事が多いと思います。
＜h1＞大見出し＜/h1＞
テキストが入ります。テキストが入ります。テキストが入ります。
＜div＞
＜h2＞中見出し＜/h2＞
テキストが入ります。テキストが入ります。テキストが入ります。
＜h3＞小見出し＜/h3＞
テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。
＜/div＞
これはあくまでも一例なので
必ずしもこれに当てはまらなくても良いと思うのですが
ページのタイトルに当たる大見出しの数が、中見出し以上にあったり
中見出しがあるブロック、無いブロックがあるなど
デザインする時に、最低限のルールは持ってデザインしたい。
コーディング未経験のWebデザイナーが知っておきたいポイントまとめ
コーディングを知らずにデザインを始めると、最初は結構つまづく事があると思います。
コーディング未経験でもこれらを知っておけば、割とスムーズに作業できるんじゃないでしょうか。