LP・HP
03自身のポートフォリオサイトオリジナル
| 使用ソフト |     |
|---|---|
| 制作時間 | 7 日 |
figmaでワイヤーフレーム、デザインカンプを作成後ドリームウィーバーでコーディング、レスポンシブ化、jQueryの実装を行なった。
コンセプト
web関連会社、デザイン関連会社の採用担当者に向けてのポートフォリオサイト
-----------
時間のない採用担当者にいかに効率よく、ストレスなく作品を見てもらえるかを念頭に作成した。
まず初めのファーストビューでは自身のオリジナル作品をモックアップで並べることにより、自身の作品に興味を持ってもらえるように意識して作成。
また作品には模写のものが多かったため、一目で模写かオリジナルかわかるように、「works」一覧では作品ごとに「模写・オリジナル」の項目を表示した。また業界ごとに必要な作品も変わってくるため、「works」下の項目リストから、各制作物を種類別に見えるよう工夫した。
学んだこと、使用したライブラリなど
・「modaal.js」を用いてworksの作品をモーダルで出現
・レスポンシブ時のハンバーガーメニュー
・スクロールすると、メニュー部分が固定され左上にロゴが出現する
・profile-history部分のタイムラインの縦棒がスクロールすると合わせて伸びるよう実装
・works部分のフィルタリング
感想
ポートフォリオということで、今まで職業訓練で学んだことや、いろんなサイトで使われていていいなと思う部分を全て詰め込もうとして、とても時間がかかってしまった。特にjQueryは思ったように動かないことも多く、苦戦した。
今回figmaで初めてデザインをしたが、HP作成に特化して便利なアイテムがたくさんあった。まだ使いこなせてはいないが、使いこなせるようになればもっと効率的に、美しく作成が可能であると感じたため、引き続きfigmaも使用して使いこなせるように勉強したい。