初心者プログラマーとバレてしまう理由３選｜仕上がり編

Webレスキューと申します。

私は普段、webサイトの制作や修正を制作会社さんから承っています。

初心者ってことはバレる？

そんな私のところにはコーディング経験の少ない方に任せてしまい、

デザインと全く違うwebサイトが納品されてしまった。

修正して欲しい。

という依頼が割と飛び込んできます。

確かにデザインと明らかに違う。

いや、もはやCSSを見る限りアレンジしている！？

日本人だけど「oh my God!」でしか表現できない。

本当にそんな状態なんです。

初心者ということはバレてしまいます。

それはなぜか？注意するべき場所がわかっていないからです。

大枠のデザインを実現することで頭がいっぱいです。

細部のwebサイトの印象を決定づける場所に

全く力を振り向けられていません。

自分はそんなことあり得ないと思うあなたに

今日はどんなところで初心者とバレてしまうかを手始めに3つお伝えします。

初心者とバレてしまうポイント3選

①要素間の余白が異なる

②フォントが異なる

③ウィンドウの伸び縮みを考えてない

この3つは初心者が最もミスをする点と言っても過言ではありません。

この3点がかなり大事であると言うことに気づいていないのです。

一つずつ解説させてください。

①要素間の余白が異なる

デザインの基本４原則に近接と言う考え方があります。

人間は近くに置かれた情報をグループとして認識する傾向にあります。これを利用して要素の間隔から情報を伝えやすくデザイナーの人は考えています。

また、要素同士を揃えることはレイアウトの基本です。揃えることでまとまりが生まれ、秩序あるデザインとなります。デザインに唯一の正解はありませんが、秩序が保たれてこそ美しいデザインになります。

つまり、デザインにおいて余白は基本であり命なのです。

余白の持たせ方によって、にぎやかな印象、ゆとりのある上品な印象などwebサイト自体の印象を左右してきます。

なので要素間の余白が異なったり、無くなっていたりすると

必ず修正として返ってくるでしょう。

figmaやXDなどのデザインデータ上でoptionボタンを押したり、

場合によっては線を引くことによって要素の間隔を確認しましょう。

特にテキストに高さが設定されている場合はどこからの距離なのか

注意しましょう。

②フォントが異なる

フォントはタイポグラフィ講座としてそれだけで全何回もの講座が成り立ってしまうほど奥深いものです。デザインデータをパッとみただけでは意外と気づかないけどデザイナーさんは非常にこだわっています。

特に注意して欲しいのが

タイトル・数字・英字・CTAなどです。

タイトルや大きい文字はフォントが違うことが多いですが

フォント自体の違いは多くの方がきちんと気づきます。

しかし、盲点なのがフォントの太さです。

デフォルトの設定がfont-weight:400です。

boldは太さで言えば700です。これが500であることが割とあったり、

600や800以上が使われていることが稀にあります。

大きな文字は特に太さに注意してください。

数字や英字はきちんとしたデザイナーさんがデザインした場合

フォントが異なっているケースが多いです。

例えば営業時間のフォントやフォントサイズ、

リスト形式で出てくる「01」「02」などの数字、

タイトルに使われる英字などとにかく数字や英字を見たら

注意を向けたほうが良いです。

CTA（シーティーエー）は「Call To Action（コール トゥ アクション）」の略で、ユーザーに行動を促すためのボタンやリンクなどのことを指すとざっくり捉えてください。

お客様は最終的に問い合わせや売上を上げることがサイト制作の目的であることがほとんどです。だからこそCTAには力を入れています。

それを踏まえてデザイナーさんもCTAには特にアイデアを駆使しています。

それゆえ、デザイン通りにきちんと再現されているか必ずチェックされます。

その意図を汲み取り、フォントや余白には当然のように注意を払って実装するようにしましょう。

③ウィンドウの伸び縮みを考えてない

初心者の方はデザインデータをもらうと

「ふむふむPCの時はこれでモバイルの時はこれか」

「ここが○○pxでここは○○pxで」

と考えてしまいます。

足りていない視点はPCデザインとモバイルのデザインの間です。

もっと言えばそのPCサイズ以上の画面幅の時は？という視点です。

どのサイズのウィンドウでも綺麗に見えるようにすることを考えれば

例えば全てに固定のpx数を入れてしまうなんてことはあり得ません。

画面が縮んだ時に切れてしますからです。

ウィンドウを伸び縮みさせたりchromのディベロッパーツールを駆使して

必ずいろんなサイズのウィンドウをチェックすることを忘れないでください。

widthやheightを決めるときに重要なのは固定するべきところと伸び縮みさせるところを決めること。%やmax・minなどをうまく使って伸び縮みに対応するように設定しましょう。

まとめ

以上、初心者であると気づかないうちにバレてしまうポイント３選でした。

余白・フォント・フレキシブルといったポイントは

初心者が重要さを理解できていない可能性が高いポイントです。

完成したと思っていたら修正の嵐でクライアントから「納期に間に合わない」と怒られる。そんなことを避けるために細部のこだわりを感じとるようにしましょう。

「美は細部に宿る」のです。

私も新卒の時は営業でしたが「バカも細部に宿る」と何度も叱られました。

まだまだ初心者の方にお伝えしたいポイントは山ほどあります。

ぜひフォローしていただけるとありがたいです。

初心者の方へのお守り

私はスクールに通わずいきなりフリーから始めました。

それができたのは「ダメだった時は巻き取るから」と言ってくれる

コワーキングスペースで出会った方の言葉でした。

作成途中にどうにもならなくなってしまった。

という方がおられましたらこちらのサービスもご検討ください。

評価を下げてしまうよりも有益です。

また、案件を巻き取ってもらいつつ、フィードバックや案件を通して色々教えて欲しいという方はこちらをご検討ください。