【プロフィールページ改修第4回】デザイン - スマレジエンジニアyushiのブログ

引き続き、プロフィールページを作成していきます。

技術スタックは下記の通りです。

今回はデザインを行なっています。

本職でもプライベートでもデザインの経験は一切ないのですが、今回はチャレンジしてみます。
家族にWeb制作でデザインもやっている人がいるので、教えてもらいながら挑戦しました。

デザインツールとしては、Figmaを採用しました。

現職ではAdobe系が使われているのですが、直近でFigmaの話を聞くことが多かったため、試してみました。

使い方の勉強は、こちらの動画を利用しました。

初心者向けで、Webページのデザインを行いながらFigmaの使い方を解説してくれる動画です。

僕もこの動画を見ながら同じようにFigmaで再現したのですが、動画がわかりやすく、それだけで簡単な使い方は把握することができました。

デザインするにあたって、まずは参考にすべく色々なWebページのデザインを見て回りました。

主には、下記のページを参考にしました。

Figmaを使って実際に製作したのがこちらです。

f:id:yushi0:20220110230400p:plain

f:id:yushi0:20220110230404p:plain

初めてのデザインの割にはそれなりに形にできたかなと思っています。

一度経験して以降、他のWebページの見え方も少し変わったような気がしていて、挑戦してよかったなと思っています。