Webサイトを作成するうえではかかせないコーディング。
最近ではWebデザイナーがデザインとコーディングをまとめて行うことも多くなってきて、Webデザイナーとコーダーの境が曖昧になっていることも。
デザインがやりたくてWeb業界に来た方からすると、コーディングって覚えるの大変で面倒ですし、できればデザインのみに勉強の時間を割きたいという気持ちはよくわかります。
しかし、良いWebデザインを作りたい場合には、コーディングを理解することが必要不可欠なのです。
本質を理解することが大事
まずはデザインの本質を理解する必要があります。では、意味の本質を理解しやすくするためにデザインを日本語に訳してみましょう。
「Design」は日本語で『設計』という意味です。つまり、デザイナーというのは「設計士」。
designとは
引用:英語「design」の意味・使い方・読み方 | Weblio英和辞書
意味・対訳
下図を作る、デザインする、設計する、(…を)計画する、立案する、企てる、つもりである、(…を)予定する
designerとは
引用:デザイナー、意匠図案家、設計者
意味・対訳
デザイナー、意匠図案家、設計者
なんとなくおしゃれでかっこいいイメージのデザイナーですが、設計士と言われると途端に真面目なお堅い職業に聞こえてきますよね。ちなみに、よく初心者にデザインと混同されやすいアートは日本語で「芸術」という意味。目的からして全くの別物なのです。
このように一見難しく見える物事も、少し視点を変えてみるとわかりやすくなるものです。
さて、それではさらに理解してもらいやすくするため、デザインする内容をWebではなく建築物に変えてみるとどうなるのか考えてみましょう。デザイナーとコーダーの関係性を「建築士と大工」に置き換え、建築士が設計の意味を全く理解していない状態でシミレーションした結果がこちらです。
もしも建築士が設計の意味を知らなかったら
私はとにかくセンスが良いから、建築デザイン初めてだったけど他にはないすっごくおしゃれなお家をデザインできちゃった♪
デザインはできてるからあとはお願いします!
その。。。申し訳ないのですが、
この設計ですと工期や予算的にかなり厳しく。。。
それはあなたの仕事が遅いだけじゃないの?
気合い入れてなんとかしてよ。
それにこの部分はこの設計ですと、
耐久性に問題が・・・
ごちゃごちゃうるさいな!
お客様がもう私のデザインを気に入っちゃったから今から変更はできないよ。
大工なんだから言われたとおりに家を建てるのが仕事でしょ。
それじゃあ。あとはよろしくね~♪
設計士の場合こんなに酷い方はいないですが、Web業界ではデザイナーになるために必要な国家資格などがない問題もあり、こういった「なんちゃってWebデザイナー」が多く潜んでしまっているのが現状です。
例えば印刷媒体を扱うDTPデザイナーは印刷物を扱いますが、実際の印刷は印刷所へ依頼することが多いです。それであればDTPデザイナーに印刷の知識はいらないのかと言われれば全くそんなことないですよね?
もし印刷のルールを完全無視したデータで印刷所へ送れば、印刷所から突き返されて作り直しになるか、指摘されることなくそのまま印刷されてしまい不良品続出の大惨事となります。「四色ベタって何ですか?」なんて言っている方には怖くて印刷の仕事まかせられません。
Webデザインも同じ通りです。コーディングで実装不可能のデザインを作ってしまいデザインを一からやり直す羽目になったり、最悪納期に間に合わず違約金問題になりかねません。そして、作り直す作業が間に合ったとしてもタダ働きとなり、利益率が無駄に下がります。
フリーではなく会社員デザイナーの場合は、デザイナーにそのようなトラブルの責任追及が直接回ってくることはあまりないかもしれませんが、会社は被害を受けます。昇給にも影響及ぼすかもしれないので気を付けましょう。
Webデザイナーがコーディングを知らないことで起きる失敗例
実装不可能
実装お願いしまーす♪
無理です
デザインによっては予算や納期がいくらあったとしても実装不可能なものが存在します。
当然ながら実装不可能なものは何をどう言おうが実装できないので、デザインを修正する羽目になるか、実装時にこいつWebのこと何も知らないなと裏で馬鹿にされながら修正されることに・・・
無駄な工数が増えるうえ馬鹿にされてしまうためすごくもったいないです。
Webのフォントサイズは最低10pxまで
Webでは最低の文字サイズは10pxまでのため、9px以下を指定しても10pxとなってしまいます。
どうしてもやりたい場合には画像化すればできますが、文字変更がある場所ではエンジニアの方で文字変更がしにくくなってしまうため運用性があまり良くないです。
一応力業ですが、要素の大きさを拡大縮小できるtransform:scaleというプロパティを使用し、無理やり10pxよりも小さい文字サイズにする裏技も存在することには存在するのですが、位置調整などコーディングにかかる工数が大幅に増加する上に、分量が増減しやすい箇所ではその手法も使いにくいです。
また、Webで9px以下の文字サイズは小さくて何書いてあるのか読みくくユーザビリティ的にもよろしくないため、よほどの理由がない限りやりません。
ちなみに私の場合、Webのことをあまりわかっていない代理店から上がってくるスマホデザインには、今のところ100%の確率で9pxの文字サイズがどこかしらで使われているので、ディレクターの方も委託する際には注意しましょう。
スマホ時はフォーム内のフォントサイズは最低16pxまで
スマホデザインにて、入力フォーム内のフォントサイズを15px以下に設定すると、iPhoneで入力しようとしたときにズームされてしまうバグ(iOSが読みやすいよう良かれと思って行うありがた迷惑な仕様)が発生します。
また、テキストがユーザーの入力によって変化する箇所なため、画像化や前述した最低フォントサイズを無視する力業も使えません。
「技術的に実装可能」と「案件で実装可能」はイコールとは限らない
少しコーディングの知識をかじった方によく起きがちな失敗例として、コーディングで技術上実装可能だったとしても、自身が携わっている案件で実装できるとは限らないことに気づいていないという点が挙げられます。
まずWebサイトを制作するために必要なものは、デザインではありません。
Webサイトを作るために必要なものは「お金」です。
デザインを作る目的として、直近のCVよりもブランディング重視でビジュアル先行のカッコいいものを作るといった案件もありますが、一般的にはサイトによっていかに収益を増やせるかを重視します。
そのため、案件の内容に応じた予算や納期に合わせて制作していくことになるのですが、もし予算や納期の少ない案件で「実装しようと思えば実装できるがコーディングに異常な時間がかかるデザイン」を作成してしまうとどうなるでしょうか?
コーダーに渡す段階でデザインの作り直しが発生してしまったり、エンジニアを多く用意しなくてはならなくなったり、みんな仲良く徹夜作業で乗り切るという地獄絵図が起こりえます。どの選択肢も利益率を大幅に下げてしまう最悪の事態です。
特にデザインの作り直しは、実装のことを考えずにビジュアルのことだけ考えたことによりお客様の期待値が上がった状態で、実装可能なデザインをエンジニアと相談しながら、納期もない中に修正せねばいけなくなります。当然ながらそのような制作側の失態によるケースでお客様へ追加の費用請求も難しく、制作側がただただ損するだけです。
ディレクター側にしっかりと知識があれば、デザイナーへ指示してくれるかもしれないのですが、恐ろしいことにWeb業界にはWebについて何も知らないのにディレクターとして仕事を回している方が多くいるため、他力本願で仕事をしていると痛い目をみます。
自分の身は自分で守りましょう。
レスポンシブに対応できない
印刷出身のデザイナーによく見られるケースがこちらです。
Webデザインというのは画面幅に応じてサイズが変化していきます。そのため、Webデザインをする際にそのことを考慮していないとデザインしたサイズよりも画面が広くなったり、小さくなったりした時にバランスが崩れてしまうことがあるのです。
ビジュアルを重視したLPやディザーサイトなどでは、よく画面が狭まった時にどうやっても崩れてしまうものは幅が縮まった時に見切れて横スクロールにするといった対処法が取られることもありますが、そのような対処は予め要件定義の段階で行っておかないとトラブルの元です。
例えば、アクセス解析で小さめの幅でも見ているユーザーが多いという状態で、デザインをカッコよくしたいからレスポンシブできないデザインにしましたなどと言えばマーケターから怒られてしまいます。
この辺りはディレクターがやる仕事かもしれませんが、ディレクターには様々なパターンがいるため、現在の案件を回しているディレクターが必ずしもデザインやコードのことを理解しているとは限りません。デザインするために渡された指示や仕様がふわっとしている場合はきちんとヒアリングすることが大切です。
2回目となりますが、自分の身は自分で守りましょう。
画面が広がる場合のトラブルは幅に上限を持たせれば防げることが多いですが、断ち切りやブロークングリッドのデザインを使用していた場合は何かしらの対策を取らねばなりません。「縦横比を維持して広がるのか」「高さはそのままに見切れた状態で広がるのか」「横の広がりが一定以上で止まるようにする」など様々な選択肢があります。しかし、デザインによってはどの選択肢を選んでもおかしな見た目になってしまうものがあるのです。
時間さえあれば実装可能だったとしても、それには予算と納期が必要となることが多いです。そのため、コーディングの工数が増えてまでそのデザインをやる意味があるのかということも考えねばなりません。
フォント選びに注意
OSにデフォルトで入っているフォントはWindows、mac、iOS、Androidとそれぞれ異なります。
もちろんOSごとにフォントがない場合には別のデフォルトフォントに切り替えられるのですが、フォントが変わりデザインが崩れてしまうケースも存在するのです。例えば文字をセクションの境や別要素とくっつけて一体化させている雰囲気を出したい場合などにフォントが変わることで隙間ができてしまったりします。
また、同じフォントがあってもOSによって用意されている太さの種類が異なるといったこともあるため注意が必要。例として游ゴシックの場合、Windowsとmacの両方にありますが、収録されている太さの数が異なります。
Windows 游ゴシック
mac 游ゴシック
こういった事象を避けるために便利な方法としてWebフォントを使用するといった手法があります。
Webフォントを利用すると、サイト表示時にフォントが読み込まれるため、どのOSで見た場合にも統一した見た目にすることができます。また、Androidにはデフォルトで明朝体が存在していないため、明朝体を使用する場合にはWebフォントの実装は必須となります。
ただし、Webフォントにもデメリットがあります。
前述したとおり、ユーザー側にそのフォントが入っていないときには、サイト表示時にフォントを読み込む処理が必要です。実装コストはたいしたことないのですが、問題はユーザーのページ読み込み速度の低下です。
Googleは、以下の図のように、読み込み時間が長ければ長いほど離脱率が上昇することを報告しています。読み込み時間が1~3秒の場合、離脱率は32%、1~5秒の場合は90%、1~6秒の場合は106%、1~10秒の場合は123%上昇することが報告されています。
引用:離脱率とは?離脱率の平均値や原因と改善方法を解説
上記のようにページの読み込み速度が低下するとユーザーが離脱しやすくなってしまうため、なるべく読み込むデータを少なくするのが望ましいのです。ビジュアル重視してそもそも見てもらえなくなったら本末転倒なので。
また、Webで使用する場合は、サブセット化という普段使用しない文字をなくしてファイル容量を削減する処理を行うのですが、それでも日本語フォントの場合は収録されている文字数が多く、容量が重くなりやすいです。また、注意点として太さごとに1フォントファイル読み込まれるため、細部にこだわり4種類の太さを使用したフォントを使用するとフォントの読み込みが4倍増加することとなります。
そのため、ケースにもよりますがWebでのフォント指定の際には、太さの指定を2種類ほどに留めておくと良いでしょう。
そして、モリサワやフォントワークスなどをWebフォントとして本文に使用する場合には、埋め込み用ライセンスで別費用が発生してしまうため、クライアント側のサイト維持費が増加してしまいます。
こういった問題の対処法として、使用箇所の限られたタイトルだけであれば画像化するという手法も取れますが、文字の変更や追加があるたびに画像を書き出す必要が出てしまって運用コストが増加したり、SEOを重視する場合にはあまり望ましくないなどのデメリットが存在します。
現在担当している案件では、見た目以外の部分で何を重要視しているのかをしっかり理解したうえで、何が最適なのか選ぶようにしましょう。
Webデザイナーがコーディングを理解していることのメリット
制作コストを減らし攻めたデザインが行える
Webサイトを作る際にデザイナーとコーダーが分業して作業を行う場合、コーダーの方はデザインを見てデザイナーの意図を読んで実装していくことになりますが、見た目だけでなくコンポーネント構造やフォルダ分けなどコーディングのことを考えたデザインデータを作っていたり、一定で決まっているデザインルールの中にあえてずらしている部分がある場合はそのことをメモするといったことを行っているとコーダーとの意思疎通がスムーズになりやすくなります。
また、トンマナからあえてずらしているところを記述しておくことで、もしもデザイナーのミスでずれてしまった部分があった際に、コーダー側であえてなのかミスなのか判断しやすく、逐一確認する手間を減らせます。
制作で発生する無駄な手間が減るということは、制作コストが減り利益率が上がることを意味します。何年も修行して物理的な制作スピードを上げていくよりも手っ取り早く行えるので、無駄はなるべく排除しましょう。
そして、何がコーディングで実装可能で何が実装できないのか分からない状態ですと、攻めたブロークングリッドなどのデザインなどが行いにくくなりますが、コーディングを理解していれば実装コストの増加を最小限に、攻めたデザインが行いやすいです。
実装のことを理解せず、グラフィックデザインのノリで攻めたデザインを作成すると、十中八九レスポンシブには耐えられませんが、レスポンシブのことを考えられたデザインであればその問題も払拭しやすくなります。
そして、働くうえで最も重要といっても過言ではない給料の面でも、デザインは良いが実装コストの高いデザイナーと、デザインも良くて実装が楽なデザイナーがいたとして、どちらの方が単価を上げたいかで考えてみると答えが出やすいかもしれませんね。
仕事やキャリアの幅が広がる
デザインのみしかできない場合、今後のWeb業界のキャリアプランとしては大きく分けて「アートディレクター」か「デザイン一筋の職人になる」の二通りが考えられますが、Webのすべてをまとめるポジションには付きにくくなります。
実装事態はエンジニアに任せるとしても、案件の規模が大きくなればなるほど、実装面がコストを算出する上で非常に重要な項目となっていきやすいため、実装の概念だけでも理解しておかないと案件を回すのが難しくなるのです。
また、フリーランスとして活動する場合、案件の規模があまり大きくなければ、自分で営業・ディレクション・デザイン・実装まで一人で行ってしまうという選択肢も取れるようになります。情報伝達の工数が排除されるため、スピードに関してはこの方法が最速となりやすいです。
もちろん、デザインのみで活動していきたいという方も多いと思います。その場合は、Webデザインだけですと他との差別化が難しくなるため、Web以外の強みを持つことをおすすめします。
近年、クラウドソーシングによってデザインを副業で行うということが多くなってきていますが、クリエイティブ領域は好きだからやっているという方が多いということもあり、安い単価でも動いてしまう方も多くいます。
もちろんそのような方はデザインのクオリティが低いことも多いのですが、中には現役のフリーランスで活動している方の食いつなぎや元デザイナー主婦のパート代わりなど、技術力はあるのに安く受けてしまうパターンもあり、ただWebデザインができるだけですと一定ラインで単価が上がりにくくなっていきます。
イラストが描ける、映像が作れるなど、デザインに関連した武器を持つことで、受けられる案件の幅が広がります。
将来的に自分がどの分野に進みたいのか考えてスキル構成を行っていくと良いでしょう。
コメント