コーディングの練習

1、コーディングは見た目を整えないといけない

第一弾、最初にやるべきコーディング用のデザインカンプ

Progateでコーディングした後に模写をする時すごく不安なはずです。

「自分にできるかな?挫折しないかな?」って私は思いました。

一応長時間をかけて模写はできたのですがまあ酷いものでした(笑)

そんな時の思いがあってまずこれでコーディングを始めるとコーディングがやりやすいと思うデザインカンプを作りました。

凄くシンプルにしてありますが多分完璧にはコーディングできません、全く問題ないですが。

理由はProgateではデザインを学ぶことができないので見た目が美しいコーディングができる状態ではないからです。

私が実務を始めた時はそんなの知らないので当然できるわけがありません 笑

でもあなたは大丈夫ですよ、私がこれからばっちりできるように解説しますから!

私が知る限りの実務で必要なコーディングスキルを身につけさせてあなたが実務未経験から始めるのを有利にしますので頑張ってください。

今回はコーディングの練習の第一弾です。

レスポンシブデザインにしてあります。

XDのデザインカンプを使いのでXDをまだインストールしてない人はインストールしてください。

スターターキットは無料で使うことができます。

色んな機能をいきなり使いこなすのではなく徐々に使えればいいです、コーディングをするために必要な内容はそうないのでご安心を!

XDの使い方はここで詳しくしていてXDのダウンロードのリンクもあると思います。

実務はillustrator、photoshopを使う所がまだまだ多い印象ですが有料なので最初から使う必要はないです。

XDに慣れていればillustrator、photoshopも操作が似ている部分があるので慣れるのが早いと思います。

私が働いている会社は大体の社員がillustratorを使えますがillustratorを使えるのは2人だけでした、だからXD以外も使うならphotoshopよりillustratorを先に使えるようにした方がいいです。

それでは↓からデザインカンプをダウンロードしてコーディングして下さい。


コーディング用のデザインカンプ (14 ダウンロード)

コーディングが終わったら内容に関しての解説もしていますのでぜひご覧ください。

 

コーディングに関しての解説

今回解説する内容ですがいきなり全てできなくていいです。

少しづつできるようになればいいです。

実務を始めた時の私はコーディングに関してデザイン的な内容は一切知りません 笑

ハンバーガーメニューがない理由

デザインカンプにハンバーガーメニューがないですよね、ハンバーガーメニューはサイトの画面に右上にあるやつです。

赤枠の中をハンバーガーメニューと言います

 

ハンバーガーメニューは色んなサイトで使われますがショッピングサイトにおいてはクリック率が低いです。

わざわざクリックしてまで見る人はそういないです。

求人サイトみたいな探さないといけないサイトの場合は違いますが。

だから私もハンバーガーメニューはサイトを作る時は実装しますがそんなに重要とは考えていません。

だから第一弾のデザインカンプにはハンバーガーメニューは入れてません。

 

アートボードのタブレットサイズとパソコンサイズが一緒になっている理由

それとデザインカンプのアートボードですがタブレット、PCサイズが一緒になっています。

この理由ですがサイトを閲覧する人はスマホが70%位でパソコンが20%ちょっとでタブレットはほとんどいないです。

私が運営するあるサイトですがGoogleアナリティクスというツールを使っています。
タブレット使用者が極端に少ないですよね。

 

だからタブレットとパソコンの画面は私がコーディングをする時は基本的に同じにで文字の大きさをちょっと変えていてタブレットのアートボードは必要ないと思っているからです。

だからコーディングする時はスマホの画面を綺麗に見せるのをがんばりましょう。

モバイルファーストと言われる位ですから。

レスポンシブデザインのブレイクポイントは働く会社によって変わると思いますが私がコーダーをしている会社はスマホが375px(iphone8、SE2)でタブレットが768px(ipad)でパソコンが1920pxですが私と同じにしなくても大丈夫です。

私が働いている会社はブレイクポイントに関して特に指定がありませんでした。

 

横幅を揃える

デザインカンプの左右に青線がありますが「何のためにあるんだろう」と思うかもしれませんが意味があります。

左右に青色の線があります

 

青色の線の意味は「全体的に左右の青色の線の枠内に収まるように並べましょう」という意味です。

そうすれば全体的の見た目がよくなります。

左右の幅をどれくらい取るかですが私はpadding-leftとpadding-rightを30px位取ります。

値は均等にしましょう。

どれくらいの幅を取るかは働く会社で変わります。

万が一横幅を画面いっぱいに広げるとサイト閲覧者にとって見にくく離脱する可能性が出てきます。

↓は説明の部分が画面いっぱいに広がっていますがこういうのは窮屈感が強くてダメです。

説明文の横幅が画面いっぱいに広がっています

 

また説明文の横の長さですが全部揃えた方が見た目がよくなります。

↓の赤枠ですが横幅を全て揃えましょう、今回は青線ギリギリまで横幅を広げていますがギリギリにしなくてもいいです。

ただ赤枠全部の横幅はそろえてください。

まだまだ解説することはあります、シンプルだけど色々盛り込まれたデザインカンプになっています 笑

「もうこれでお腹いっぱい」と思ったらひとまずここまでできればいいです。

別の機会に続きを読んで今回の解説の全てがその内できるようになればいいです。

 

段落が切り替わりを出すために余白を思いっきり開ける

「1、まずはProgate」の上の行と「2、次はサイトの模写だけど、、」の上の行と「最後に」の上の行までの余白ですが60pxで余白を取っています。

段落が変わっているのですがサイト閲覧者が段落が変わったことが分かるようにするために余白を思いっきり取らないといけないです。

↓の緑色の矢印の部分です。

緑色の矢印に余白を取っています。
このデザインカンプは余白を60pxにしていますがもっと取ってもいいです

 

余白を取らないと段落の切り替わりが分からないのでダメだし20px位の小さい値では段落の切り替わりが分からないのでダメです。

 

複数行ある時の文章の行間を広げる

文章が複数行ある時は行間を広げて文章を読みやすくしましょう。

例えば商品を売るサイトの場合はline-heightを2em位にした方がサイト閲覧者には読みやすくなります。

line-heightの値ですが商品を売るサイトでない場合は狭くなる場合もあるので何を見せるかで変わります。

文章が複数行ある時は行間を広げましょう

 

凄く細かく言うとまだあるのですが今回解説した内容ができるようになるとコーディング内容がかなり良くなると思います。

 

最後に一言

一般企業でコーダーとして働くなら凄く難しいコーディングができる必要は一切ないです。

ざっくり言ってフレックスボックスが使えればどうにでもなります。

実務を始める前は「自分にコーダーができるのかな?」と思っていましたができたので「自分にコーディングができるのか?」と不安にならず努力しましょう。