模写コーディング①簡単なデザインでコーディングのやり方を知る
2625 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
ProgateでHTML&CSSコースを勉強した後にサイト模写を初めてする時すごく不安なはずです。
私が始めて模写をした時は「自分にできるかな？挫折しないかな？」って思いました。
すごく短い内容のデザインカンプを長時間(多分1週間位)をかけて模写はできたのですがまあ酷いものでした(笑)
そんな時の思いがあってまずこれでコーディングを始めるとコーディングがやりやすいと思うデザインカンプを作りました。
凄くシンプルにしてありますが多分完璧にはコーディングできません、全く問題ないですが。
理由はProgateではデザインを学ぶことができないので見た目が美しいコーディングができる状態ではないからです。
私が実務を始めた時はそんなの知らないので当然できるわけがありません 笑
でもあなたは大丈夫ですよ、私がこれからばっちりできるように解説しますから！
私が知る限りの実務で必要なコーディングスキルを身につけさせてあなたが実務未経験から始めるのを有利にしますので頑張ってください。
目次
XDは実務で使うから使えるようにしよう
XDのデザインカンプを使うのでXDをまだインストールしてない人はインストールしてください。
スターターキットは無料で使うことができます。
色んな機能をいきなり使いこなすのではなく徐々に使えればいいです、コーディングをするために必要な内容はそうないのでご安心を！
XDの使い方はここで詳しくしていてXDのダウンロードのリンクもあると思います。
実務はillustrator、photoshopを使う所がまだまだ多い印象ですが有料なので最初から使う必要はないです。
XDに慣れていればillustrator、photoshopも操作が似ている部分があるので慣れるのが早いと思います。
私が働いている会社は大体の社員がillustratorを使えますがphotoshopを使えるのは2人だけでした、だからXD以外も使うならphotoshopよりillustratorを先に使えるようにした方がいいです。
ポートフォリオに掲載OK
私が作ったデザインカンプですがコーディングした内容のポートフォリオへの掲載を許可します。
ただしポートフォリオに「練習用」と記載するのが条件です。
デザインカンプのリンクはここから
それでは↓にデザインカンプのリンクがありますのでコーディングして下さい。
模写コーディング1 (425 ダウンロード )コーディングが終わったら内容に関しての解説もしていますのでぜひご覧ください。
コーディングに関しての解説
今回解説する内容ですがいきなり全てできなくていいです。
少しづつできるようになればいいです。
実務を始めた時の私はコーディングに関してデザイン的な内容は一切知りません 笑
ハンバーガーメニューがない理由
デザインカンプにハンバーガーメニューがないですよね、ハンバーガーメニューはサイトの画面に右上にあるやつです。
ハンバーガーメニューは色んなサイトで使われますがショッピングサイトにおいてはクリック率が低いです。
わざわざクリックしてまで見る人はそういないです。
求人サイトみたいな探さないといけないサイトの場合は違いますが。
だから私もハンバーガーメニューはサイトを作る時は実装しますがそんなに重要とは考えていません。
だから第一弾のデザインカンプにはハンバーガーメニューは入れてません。
アートボードのタブレットサイズがない理由
それとデザインカンプのアートボードですがタブレットサイズがないです。
この理由ですがサイトを閲覧する人はスマホが70%位でパソコンが20%ちょっとでタブレットはほとんどいないです。
だからタブレットとパソコンの画面は私がコーディングをする時は基本的に同じにで文字の大きさをちょっと変えていてタブレットのアートボードは必要ないと思っているからです。
だからコーディングする時はスマホの画面を綺麗に見せるのをがんばりましょう。
モバイルファーストと言われる位ですから。
レスポンシブデザインのブレイクポイントは働く会社によって変わると思いますが私がコーダーをしている会社はスマホが375px(iphone8、SE2)でタブレットが768px(ipad)でパソコンが1920pxですが私と同じにしなくても大丈夫です。
私が働いている会社はブレイクポイントに関して特に指定がありませんでした。
横幅を揃える
デザインカンプの左右に青線がありますが「何のためにあるんだろう」と思うかもしれませんが意味があります。
青色の線の意味は「全体的に左右の青色の線の枠内に収まるように並べましょう」という意味です。
そうすれば全体的の見た目がよくなります。
左右の幅をどれくらい取るかですが私はpadding-leftとpadding-rightを30px位取ります。
値は均等にしましょう。
どれくらいの幅を取るかは働く会社で変わります。
万が一横幅を画面いっぱいに広げるとサイト閲覧者にとって見にくく離脱する可能性が出てきます。
↓は説明の部分が画面いっぱいに広がっていますがこういうのは窮屈感が強くてダメです。
また説明文の横の長さですが全部揃えた方が見た目がよくなります。
↓の赤枠ですが横幅を全て揃えましょう、今回は青線ギリギリまで横幅を広げていますがギリギリにしなくてもいいです。
ただ赤枠全部の横幅はそろえてください。
段落が切り替わりを出すために余白を思いっきり開ける
「1、まずはProgate」の上の行と「2、次はサイトの模写だけど、、」の上の行と「最後に」の上の行までの余白ですが60pxで余白を取っています。
段落が変わっているのですがサイト閲覧者が段落が変わったことが分かるようにするために余白を思いっきり取らないといけないです。
↓の緑色の矢印の部分です。
余白を取らないと段落の切り替わりが分からないのでダメだし20px位の小さい値では段落の切り替わりが分からないのでダメです。
複数行ある時の文章の行間を広げる
文章が複数行ある時は行間を広げて文章を読みやすくしましょう。
例えば商品を売るサイトの場合はline-heightを2em位にした方がサイト閲覧者には読みやすくなります。
line-heightの値ですが商品を売るサイトでない場合は狭くなる場合もあるので何を見せるかで変わります。
凄く細かく言うとまだあるのですが今回解説した内容ができるようになるとコーディング内容がかなり良くなると思います。
詳しい余白の取り方の解説
実務をしている会社で細かい余白の取り方を知りましたので記事にしました。
気になる方は読んでください。
最後に一言
一般企業でコーダーとして働くなら凄く難しいコーディングができる必要は一切ないです。
ざっくり言ってフレックスボックスが使えればどうにでもなります。
実務を始める前は「自分にコーダーができるのかな？」と思っていましたができたので「自分にコーディングができるのか？」と不安にならず努力しましょう。