デザインカンプからのコーディング

こま

こんにちは。こまです。

毎日少しずつコーディングに取り組んでいます。デザインカンプからのコーディングを現在行っていますが、今回はその感想を書いていきます。

デザインカンプって何？

デザインカンプとはデザインの完成見本のことです。
クライアントとの完成イメージをすり合わせるために使用されます。

私が勉強しているCode＋ではAdobe XDのデザインカンプをみて実際のコーディングを行います。
実際の案件でもデザインカンプを見てコーディングすることがあるようです。

こま

初心者の私でも簡単に操作が行えて使いやすいです。

こちらを無料インストールして使用しています。

Adobe XDは１月で新規申し込みができなくなりました。
かわりに今後はFigmaが採用されるようです。
Code＋ではFigmaに関する講義の制作を予定されています。

忘れないよう操作方法をまとめます。

・V → 選択
・ｔ → テキスト
・ａ → アートボード
・ｒ → 四角形
・画像の書き出し → Ctrl＋E
・距離を測る → Vでオブジェクトを選択→alt押しながら別のオブジェクトをホバー
・1つ戻る → Ctrl＋Z

『V』を押して選択ツールにして文字をダブルクリックして、コピーができます。

・font-family
・font-weight
・font-size
・line-height　（文字の高さ÷文字サイズ）
・letter-spacing　（文字サイズ÷AV）
・color

・width
・height
・border
・border-radius
・background-color　（RGBに値の変更もできる）
・opacity
・box-shadow

Vでオブジェクトを選択→ alt押しながら別のオブジェクトをホバーでオブジェクト間の距離が測れます。
Adobe XDで図った値でコーディングしたものを、パソコンに出すとデザインと何だか違う感じがする、、？ということが多いんですよね。ちゃんとできてないのかな？

コーディングをする前にノートに大まかなデザインの枠を書きます。
HTMLやCSSをどうやって書くといいか何となく考えます。

・クラス名
・画像の名前（クラス名に絡めて決める）
・余白の値
（ネットで見ましたが、余白がどのくらいの大きさか事前にメモしておくと便利なようです。次回からやってみます。）
・ここはdisplay flexを使うのかな？positionかな？など何となく考えておく

準備が終わったらやっとコーディング作業が始まります。
私は以下のように作業を進めています。

①1つのセクションごとにHTMLを書く→CSSを当てる
②レスポンシブ対応にする
③ハンバーガーメニュー、アコーディオン、モーダル、スワイパー等の実装をしていく
④最終確認

基礎編で基本的なHTMLやCSSについて学んできました。手取り足取り教えてもらっていましたが、1から自分でコードを書くのは次元が違いますね。
特に③のjQueryの実装に苦手意識が強く、やたらと時間がかかります。

『あれ？どうやるの（全く見当がつかない）？』『あれれ？なんで思うようにならないの（悲鳴）』ということが続出です。

分からないところは今までのオンライン学習の動画を見返したり、ネットで調べて作業を行います。時間がとてもかかります。

どうしても分からないところは、先生にチャットで質問です。何度かチャットでやり取りをしても解決しないと、申し訳なくて気持ちがしぼみます。解決した時はとってもすっきりします！思わず家族に『見て！見て！』と声をかけてしまいます（笑）

こま

どうしても解決しないときは無理をせず、いったんパソコンから離れるようにしています。

デザインカンプからのコーディングについて実際に取り組んでいます。
かなり苦戦していて、全然進まずめげそうになることもありますが、毎日コツコツ少しずつ進んでいきたいと思います。

こま

こんなに躓いていて本当にできるようになるのかな？

不安はありますが、やらないとできるようにならないですよね。
今の頑張りが、後々の自分のためになると信じて頑張ります！

Code＋で勉強しています。