ポートフォリオサイト制作①

こんにちは、UGOK-5thメンバーのゆりあです。

今回は、現在制作中のポートフォリオサイトを紹介します。

初めて作るポートフォリオサイトなので、とにかくシンプルで分かりやすくすることを目標にしました！

デザインカンプ

Figmaを使ってデザインカンプを制作しました。

メイン画面の方は、「こう作りたい！」と結構はっきり浮かんでいたのでサクサク作成したのですが、作品詳細画面の方は、あまり浮かんでいなくて、「実際に作り始めてから変更するかも…」という思いで軽く作成しました。

そして、「作品詳細を別ページにするか」も非常に迷ったのですが、一画面に収めるコンパクトさを優先したかったので、ポップアップとして表示することにしました。

ポートフォリオサイト

現在制作中のポートフォリオサイトは以下の通りです。

まだメイン画面しか制作していないのですが、ほぼデザインカンプ通りにできました。変更点は、作品の上部に制作年月を付けたことくらいです。

また、ホバーエフェクトを付けて、より使いやすくしました。

ホバーエフェクトは、すべてフェードイン・フェードアウトします。

その他工夫した点は、「ページ内リンク」と「PAGE TOPボタン」を押したときに、画面がスライドして動くようにしたことです。

今後の展開

ポップアップ部分を作るのはもちろん、「シンプルながらこだわりも見せられたら」と思うので、エフェクトを付け足せる部分も（付けすぎないように気をつけながら）考えていきたいと思います。同時にロゴやファビコンも作っていきたいです。

また報告できる状態になったらブログ更新します！ありがとうございました☺