こんにちは。こまです。
課題で初めてポートフォリオを作成しました。
ポートフォリオって何？どんな事を載せればいいの？と、とても悩みました。
今回は初めて作成したポートフォリオの紹介をしていきます。
ポートフォリオとは？
ポートフォリオとは、日本語にすると『携帯用の書類入れ』という意味です。
自分の作品を1つにまとめた作品集であったり、自分の実績や能力を評価してもらうための資料になります。どんな作品を作成してきたのか、どのようなこだわりを持って作成しているのかを知ってもらうことができます。
一般的には就職・転職に使用したり、営業資料として作成します。
未経験者の場合は実務経験がないため、
・0からどのくらいの作品がつくれるか
・コーディング技術があるか
を主軸にポートフォリオが見らます。誰が見てもわかりやすいコードで書くといいそうです。
ポートフォリオ紹介
レスポンシブ対応はしていますが、アニメーションの実装はありません。
お見苦しいところもあるかもしれませんが、超初心者が2週間でこの位作れるようになったんだなと見て頂ければ嬉しいです。 制作期間は1週間です。
ポートフォリオを作る過程
どんなcontentを載せるのか、構成を考える
ネットを見たのですが、実務経験のない初心者の方が載せているポートフォリオって少ないんですね。立派なものばかりであまり参考になりませんでした💦
授業の課題ということもあり、簡単なプロフィールを作ることにしました。
以下の内容を載せています。
・ヘッダー ・メイン画像 ・Concept（大切にしているもの） こんな気持ちでお仕事をしたいですという、自分の思いを文章にしています。 ありきたりですが、誠実に、丁寧にという気持ちが伝わったらうれしいです。 ・Works（制作したもの） 制作物はありませんが、今後作ったものをここに追加したいなと考えています。 これからの私に期待！頑張るぞ！ ・About（私について） 簡単な自己紹介。 顔写真を載せていましたがネットにアップするにあたりイラストに変更しています。 ・Contact（お問い合わせ） ・フッター
画像や色合いなどデザインを考える
ポートフォリオやLPをネットで検索して、自分が好みのものを見つけて参考にしました。
素敵なものが色々あって、見ているだけで楽しかったです。
『こうしたい』『こんなイラストをここに入れたい』など色々考えたのですが、複雑なことは現状では難しいと悟り、background-colorとborderのみを使ってデザインを考えました。
最後はノートに簡単なワイヤーフレームを書いてイメージを具体的にしています。
▼参考にしたサイトです。
色々なLPが見られます Pinterest → https://www.pinterest.jp/
画像は無料でインストールできるこちらから Photo AC → https://www.photo-ac.com/
優しい色合いで、シンプルに読みやすいようにを意識しました！
自分の好きな画像や色でデザインを考えるのが楽しかったです☆
目移りしてしまい、画像選びにやたらと時間がかかりました（笑）
コーディングする
授業で習ったことを参考に、コーディングしました。
演習で行ったLPコーディングを参考にしましたが、比較的簡単なコーディングだったため、順調に作業が進みました。
レスポンシブ対応までしたら、先生に添削してもらい、修正しました。
初めて見てもらう時はとても緊張しましたが、『2週間でこれはすごいよ！』とほめてもらいました。よかったー！
実際に作っての振り返り
良かったところ
1から自分で作業したので得られるものが多かったです。
箇条書きで良かったところをまとめます。
・色々なLPやサイトを見ることができ勉強になった。
・自分でデザインして、文章を考えて、コードを書くという一連の流れが経験できた。
・1から自分でコードを書くことで、知識のおさらいができた。
・習ってはいたけれど、自分でやるとできないことが多いということが分かった。
聞いているだけの授業と違い、自分で考えながら作業を行ったので理解が深まった。
・簡単なものではあったけれど、自分で1つ作品を作った！という自信になった。
次回からの課題
次回は今回よりもっと効率よくコードを書いて、もう少し複雑なデザインにも挑戦してみたいです。
・アニメーションの実装ができるようになりたい。
・Class付けを工夫する。
CSSで同じスタイルを当てるものは同じClassで管理ができるよう見通しをもってコードを書く。
・margin や padding、font-sizeなど 相対単位で表記するといいところを考えながらコードを書く。
レスポンシブ対応の記載が少なくていいように考慮する。
課題はたくさん思いつきますが、次に生かせるように頑張ります！
おわりに
ネットにはデザインがおしゃれで、アニメーションも実装されていて、かっこいいポートフォリオが溢れています。
今はシンプルで、コードも拙いかもしれませんが、いつか私も素敵なポートフォリオができるように頑張りたいなと思います。
Code＋で勉強しています。
コメント