こんにちは。
お久しぶりです。

今回は1つのサイトを自分でデザインしてコーディングするまでを練習として行ったのでそこで学んだことについてまとめていこうと思います。今回のサイトは「若者が働きたくなる建設会社」を題材として制作しました。

制作したサイト

XDを使ってpcとsp画面サイズをそれぞれ作成しました。
デザイン完成後はこのサイトをコーディングにて制作しました。

学んだこと・ポイント（デザイン）

デザインは題材に合うようひと目見て、ここの会社がどのような会社なのかが分かるようなサイトを心がけました。ポイントとして会社のコンセプトが分かる、施工実績で会社がどのようなものを作っているかが分かる、また会社の応募に繋がるように採用情報を大きくとるなど工夫しました。使用した画像もできるだけイメージが湧きやすいように具体的でクオリティの高い画像を使用しました。私がデザインで一番大事かつ難しいなと思うところは余白感で今回もかなり修正しながら完成しました。サイトなので見栄えとしてのデザインではなく実際にどのような意味・意図でこのデザインなのかということを考えながら余白感含めデザインしていきました。

学んだこと・ポイント（コーディング）

1.使いまわしを意識する

このサイトでは全体を通して同じようなデザインをした箇所が複数あります。「Our MissionとBusiness」やボタンなどです。そういった同じデザインのところは一つのクラスで括って使い回すことでコーディングの量も減るし楽になりました。

2.余計なclassは使用しない、class名について

これは以前からですが、細かくデザインできるようについつい余計なclassをつけがちなのでいらないところはなくす、統一できるところは統一するなどして無駄な記述を減らせるように心がけることです。またclass名に伸ばし棒（〇〇__〇〇）をつけることで（〇〇の中の〇〇）という意味になるので中にclass付するときはそういった書き方をしていきます。

3.ボタンの作り方

①最初にwidthでボタンの長さを決める。
②paddingで縦横比を決める。
③text-align:centerでセンター揃え。
④矢印などのアイコンはpositionで指定する。
⑤hoverでアクションをつける。

4.余白のつけ方、位置の取り方

「採用情報」では画像の上にテキストが載ったデザインになっています。ここでのテキストの位置どりとしてpositionを使うのではなくpaddingでとります。positionは要素が宙に浮いた状態になるのでこういったデザインの位置決めに向いていません。paddingで幅をとることでそれに合わせて背景画像も広がってくれます。

５．画像の書き出し

XDで制作したデザイン画像をコーディングでしようするために書き出す必要があります。画像の書き出しは「Command＋E」で書き出せます。

まとめ

今回はXDでのデザインからコーディングまで自分で行ったのでかなり時間がかかりました。とくに最近はコーディング練習ばかりしていて、デザインは久しぶりだったのでところどころ忘れていたりして、感覚を取り戻しながらの作業になりました。デザインでは余白感やデザインの意味合い。コーディングでは使い回しや幅の取り方。など基本的なことですがまだまだできていないくて気づけたことが沢山ありました。またXDでのデザインとコーディングでのデザインで違いが生まれそれを統一するのに苦労しました。こうやって自分が作ったサイトをコーディングすることでコーディングしやすいデザインとしにくいデザインというのが少し分かったように思います。今回学んだことが今度からのデザイン制作で活かして行けそうだなと思いました。

引き続き学んだことがあった際にはnoteにまとめていくので次の更新をお楽しみに！