コーディング練習

のんこです。

くりのすけさんのコーディング練習をして、アレンジデザインも作成したので、その時の記録をまとめておきます。

デザインの言語化の練習になればいいな…

まず、こちらが今回取り組んだくりのすけさんのコーディング練習。

写経で進めたんですが、解説あり参考リンクありなので、進めながら確認でき、細かいところまで勉強ができたと思います。

そしてこちらが作成したコーポレートサイト。

フリー素材を自分で探してきて作成しました。

「ものづくりがすき」とあったので、建設系の会社のコーポレートサイトのイメージ。（現場監督？溶接？鉄骨？いろいろやってる会社かな…）

現場監督の写真の外仕事のイメージと採用情報の写真から、空色っぽい青を使用しました。

トップページの事業内容の背景だけグラデーションなのは、cssでグラデーションやってみたかったのでやってみた結果です。

やってみた結果、他の部分が四角や直線で結構かっちりしていて、写真も金属的で硬めなので、グラデーションつけると少し柔らかい印象が出るかなと思いそのままにしてみました。

あれ？でも全体を同じ印象にまとめるならグラデーションじゃない方が良かったかも…

そしてそしてこちらがさらにアレンジしたサイト。

ちょっとアレンジするつもりが、楽しくなってきていろいろ考えていると、コーポレートサイトなのか何なのかわからなくなってきたという…

ちなみに、こだわり部分の写真をみかん型にしたのと、お問い合わせをhoverするとハートが飛ぶようにしたのがお気に入りポイントです。

楽しかった…！

今回感じた課題点

①目的を考えれば良かった

→問い合わせてほしいのか、買ってほしいのか、知ってほしいのか

→どんなひとが何のために作ったサイトなのか

→もしかしてLP？

②ペルソナ設定すれば良かった

→誰に向けたサイトか考えると目的も見つかりそう

③レスポンシブ…

→今回はしなかったけど、脳内ではイメージできてたのでしても良かったかも

まとめ

楽しく勉強できて良かったです。

練習にはなかったけど、レスポンシブしやすいデザインになっていて、くりのすけさんすごいなと思いました。

レスポンシブ意識したデザインできるようになりたい。

デザインの言語化だけでなく、気持ちとか考えもうまく伝えられるようになりたい。

今回のnote、「見出し？」「強調？」あわあわ…はてはて…て感じで作成しました。

文章作ることにも慣れていきたい。

頑張ろう…