こんにちは、kraftの岡田です。
Web制作を始めてまもない初学者の方は、デザインカンプからのコーディング練習をすることが多いと思います。
私としてもデザインカンプからのコーディングは非常に有効的なものだと考えておりますが、しっかりと意識すべきところをおさえていないと数をこなしても成長できません。
今回は、意識すべきポイントをご紹介していきます。
私が作成したスキルアップにつながる無料デザインカンプ(ポートフォリオ掲載可)を受け取る方法についても記載していますので、最後まで是非ご覧ください。

意識すべきポイント

以下に記述していきますが、最初から全て意識できる必要はありません。
回数を重ねる毎に1つ1つ意識できるようになればよいでしょう。
焦らずに行うことも大事です。

デザインと構築の見た目を揃える

これが最も大切です。
デザインの見た目を再現できないと案件をこなす事はできません。
最初から1pxもずれる事なくする必要はありませんので、まずはパッと見大きい違いがないようにしましょう。

1. パソコン版のデザインを再現する
2. スマートフォン版のデザインを再現する
3. パソコン版とスマートフォン版の切り替えまでの間を崩れないようにする

このくらい分割して最初は行うと良いでしょう。

コンポーネント意識を持つ

コンポーネント = 共通パーツ
共通パーツの意識を持つ練習もしていきましょう。
例えば、

• ヘッダー
• フッター
• カードスタイル
• ボタンスタイル...など

サイト内に繰り返し使われている要素があります。

• どのようにCSSを当てると使いまわしやすいのか？
• マークアップはどのようにしておいた方がよいのか？...など

このような意識を持ちながら行うだけでも大きく変わってくるでしょう。

短い記述でデザインを再現する意識を持つ

コードは出来るだけ少ない・短い方が記述量が増えた時に見通しがよくなる傾向にあります。
非常に手間はかかりますが、1つの見た目を再現することに対して色々なパターンのCSSなど当て方を考えてみましょう。

時間を測る

記録をとっておくことによって以下の効果があります。

• 自分のコーディング速度向上が視覚的にわかる
• ボリューム対しての作業時間が把握できる

１つ目の項目については、モチベーション維持の側面で効果的でしょう。
コーディングを学習を途中で辞めてしまう方の大半は、モチベーション低下が原因と言われています。

2つ目の項目は、案件の話をもらった時に役立ちます。
よくこのような質問をいただきます。

「このボリュームであれば大体どのくらいでできそうですか？」

自分の速度やボリューム対しての作業時間が把握できていないとこの質問に対して返答が難しくなるでしょう。
したがって、最初のうちから記録をするようにしていきましょう。

実践を意識したコードにする

これは実践で行うような完璧なコードを書けということではありません。
例えば、

• 無駄な記述は省く
• コメントアウトは最小限かつ必要なところだけに使う
• 命名規則を決めて書く...など

「実案件を想定したコーディングをしましょう」ということです。

スポーツでいうところの、「練習は本番のように、本番は練習のように」と一緒です。

無料デザインカンプ配布について

デザインカンプの詳細

このデザインカンプは、ポートフォリオ掲載可能です。ご自由にご利用ください。
中級者→上級者へとステップアップしていく事を目的とした内容になっています。

デザイン画像

練習できる内容

• JavaScript(jQuery)を使用したメニュー作成、アコーディオン作成
• スライダーの作成
• タブ切り替え
• スクロールに合わせた処理
• 要素の横並び
• リキッドレイアウト
• ホバーアニメーション
• Figmaでのコーディング

注意事項

• 無断配布は禁止とします
• サーバーへアップロードする際は、必ずBasic認証などのパスワード保護をかけた上で公開してください
• あくまで練習用サンプルとしてご利用ください

受け取り方法

1. 公式ラインを追加
2. メッセージに送られてくるテンプレートに記入をして送信
3. メッセージで特典が受け取れるURLをお送りいたします。

公式ラインでは、Web制作に役立つ知識なども定期的に発信しています。