ポートフォリオ制作日記 #2

こんにちは。WEBデザイナー職への出戻りを目指す、なみたです。
めちゃくちゃ遅くなりましたが、前回の続きです！

10月中に作るといったのに、まだ完成できていないというペースなので、明日28日に完成を目指し、作業中です。

先週は、コンサルティング面談・職業訓練説明会・願書の記入と提出・色彩検定模擬問題と戦うなどしており、週が過ぎたんです……。（言い訳です）

作業に疲れたので、1回、状況を整理したくて、noteに来ました……。

前回掲げた目標の進捗

• ポートフォリオサイトのテンプレートをもう少し見てみる⇒【済】

• トップビジュアルを考える⇒未！考え中。

• プロフィール用画像をつくる⇒【済】

• スキル部分～フッターを構築する⇒【済】

進めた作業について

テンプレートサイトの微調整・アニメーションの設定

• テンプレートのテキスト修正・追記など

• デザインの見栄え調整（CSSの修正）

• スクロール時に、コンテンツがフェードインするアニメーション追加

• デザインリストのサムネイルにマウスオンで拡大するアニメーション追加

デザインリストのサムネ作り・掲載

載せられそうな過去のWEBサイトが３つあり、サムネを作って掲載しました。ただやはり古い……。
今回、自分の４年前のデザインと向き合いましたが、「デザインがださい」と思ってしまって、自信なくなってきました……。
でも、ポートフォリオサイトの一旦の完成が目的なので、このまま突き進む。時間できたらちゃんと作品まで作り直したい。

自分のスキル一覧を作成

言語の画像アイコンについてなのですが、「Devicon」で、フリーsvgアイコンを使わせて頂きました！超便利です。

Devicon

プロフィール部分・画像を作成

プロフィール画像は、自画像を手書きしようと思ってましたが、私がゆるイラスト下手なので、一緒に暮らしている犬の写真を使わせてもらいことにしました。
写真のままだとサイトで浮いてしまったので、Photoshopでアーティスティック加工をして簡単にイラスト風にしました。

ファビコンを作る

ファビコンとは、ブラウザのタブなどに表示される、そのサイトのアイコンみたいなやつです。
作成作業は難しくないので、プロフィールアイコンの画像と一緒に変えておきました。

残作業について

１．トップビジュアルを考える

写真でいこうと思っていたのですが、思ったよりいい感じの写真が撮れなかったので、シンプルに背景色を設定し、その上に簡単なアニメーションでも構築しようか、悩み中です……。
でも苦戦してるので、今回は写真素材を利用させてもらって、その上で文字のアニメーションだけ頑張ろうかと思っています。
この作業は一回寝てからやった方がいい気がします……。

２．デザインリストに載せる他のデザインを選定

WEBサイト３点は載せたのですが、どうにも少ないので、あとはデザイン案（実装はしていないけど、デザインだけあるもの）と、複数のバナーをまとめた画像の２点を載せたいと思います。

３．デザインリストのモーダルウィンドウ構築

WEBサイトはサムネをクリック⇒そのままサイトへリンクを飛ばしたのですが、画像のみのデザインや、バナーデザインを見せたいときはリンクがないです。
なので、さっとモーダルウィンドウで表示させたいと思っており、構築したいです。

４．スマホサイトのデザイン確認

テンプレートをお借りしているので大きな問題はないと思いますが、まだPC版しか細かく見れていないので、スマホのレイアウト崩れなどがないかの確認。

５．作成が終わったらコードの整理

いらなくなったコードや、試しに追加したコードがあり残っているので、不要なものはちゃんと消しておきたいと思います。

６．最後にサーバーを借りてアップする

就職活動に使うには、ネットに載せるためのサーバーが必要です。
完成したらサーバーレンタルしたいと思ってます。お金かかるのでギリギリにレンタルしたい。

ということで、重たい作業を残してしまいましたが、形はできてきたので……これが終われば完成できそうです。
眠くなるまでは残作業を順番に引き続き頑張っていきたいと思います。