独学でWEBデザイナーのポートフォリオを作成した記録
駆け出しデザイナー／コーダーのKAZUKIです。
5年以内に海外でのフロントエンドエンジニアを目指しています。
2020年1月からプログラミング独学を開始し、学習140日目にしてオリジナルポートフォリオを制作しました。
0.この記事について
この記事は30歳直前でプログラミング初心者の私が、ゼロからポートフォリオを制作した記録です。
【自己紹介とプログラミング歴】
・29歳。学習約５ヶ月。
・オーストラリア在住中の2019年、ITエンジニアへの転職を決意。
・日本へ帰国後、2020年1月から独学でプログラミング学習開始。
・独学のきっかけとヒントとなったのは、マナブログ。
・学習教材は、プロゲート／ドットインストール／デイトラ（無料の時）／YouTubeの教材動画等。
・学習言語はHTML／CSS／BootStrap／JavaScript／JQuery など。
【キャリアプラン】
・コーダー → フロントエンドエンジニア → 海外エンジニア
実務へ臨む前の集大成としてポートフォリオが完成した時は、学習を続けて良かったと思えました！
実務はこれからですが、新しいスキルで働く楽しさをイメージして、実務と並行して勉強を続けていきます。
新しい挑戦に年齢は関係なく、本気になれるかで未来が変わると信じています。
【ポートフォリオ制作記録】
1日目：デザイン／構成
2日目：デザイン／構成
3日目：画像選定／デザインカンプの作成
4日目：HTMLコーディング
5日目：HTMLコーディング
6日目：HTMLコード見直し／CSSコーディング
7日目：CSSコーディング
8日目：CSSコーディング／CSSコード見直し
9日目：レスポンシブコーディング
10日目：レスポンシブコーディング
11日目：レスポンシブ見直し／文章見直し／実績をGitHubへアップロード
12日目：JavaScript選定
13日目：JavaScript実装
14日目：JavaScript実装／各セクション見直し／コンタクトフォーム実装
15日目：最終確認／テスト／サーバーアップ
1.デザイン／構成
1a.何のために作るか？
もともと、私は学習１ヶ月ほどでテンプレートを購入してポートフォリオをとりあえず作成しました。
しかしコードを書く仕事でテンプレートってどうなんだろう？と考え、ゼロから制作することに決めました。
作る目的
・実務に臨む前の「学習総集編」としての制作物
・今まで学習してきたHTML/CSS/JSのスキルをすべてアウトプットする
・スキル／人間性を見える化して、就活やフリーランス活動の際より適切に評価してもらうため
見て欲しい人
・ITやWEB業界の人事の方々
・私に仕事の依頼を検討中の方々
1b.伝えたいこと
私なりにポートフォリオは自分を見える化して、WEB業界に自分を売り込む大切なツールであると考えました。
それが伝わるよう、デザインで意識したことは以下の通り。
スキル
・独学で学んだスキルを出し切りたい。
・実務を意識したデザインや機能などを実装して、
すぐに仕事ができることをアピールしたい。
人間性
・オーストラリア在住中にITエンジニアへを決意し、
将来的に海外エンジニアを目指している情熱を伝えたい。
・同じく本気で取り組んできた海のスポーツを取り入れることで、ポジティブで挑戦心に溢れていることを伝えたい。
1c.デザイン構成
そして伝えたいことを盛り込みつつも、ポートフォリオの目的を外れ過ぎないよう考え、以下の構成となりました。
- Header
- Main (First View) ←個性とポートフォリオの融合を意識
- Introduction ←ターゲットに向けた、サイトの説明
- Profile ←プログラミング独学に至ったことが伝わる経歴
- Skills ←自分への理解を深めてもらうため、２つのスキル項目を記載
- Service ←フリーランスとして、提供可能なサービスを記載
- Works ←学習での制作物をGitHub Pagesへ掲載
- Contact
- Footer
参考になった記事
2.デザイン作成
デザインとコーディングは全く別物で、同じくらい勉強の必要性を感じました。
2a.公開されているポートフォリオを見る
伝えたいことを、どんな方法で伝えられるか。
ヒントを得るためにいろんな方のポートフォリオを見ました。
いずれもレベルが高めなので、特に参考にしたことは
・ファーストビューの使い方
・全体のレイアウト
・色のバランス
・実装してみたいエフェクトやアニメーション
2b.ワイヤーフレーム／デザインカンプ作成
デザインツールはFigmaを使いました。
不慣れな方は紙の方が早いかもしれません。
初めて使う私は、イメージは出来ているのにFigmaでうまく表現できず苦戦しました。
デザインに割ける時間も限られていたため、Figmaでざっくりレイアウトしてから、構想を練り直す時は紙に手書きで構成を詰めました。。
2c.配色
配色によってサイトイメージが大きく変わるため、途中で何度も変更しました。
はじめはダークベースがかっこいい、と思い下記のデザインで作成。
しかしイメージがアピールポイントと合わず断念。
思い切ってシンプルで海を意識できる配色に変更しました。
2d.フォント
動きが重くならないよう、メインはノーマルフォント。
個性を出したいファーストビューやタイトルにWEBフォントを使いました。
2e.画像素材やロゴの準備
自分で持っていない画像はPixabayで検索したりしましたが、今回はオリジナルを意識したので結局使いませんでした。
ロゴもあえて用意しませんでしたが、Favicon作成に以下のサービスを利用しました。
2f.アニメーション
アニメーションはキリがなく、探しているうちに楽しいアニメーションがどんどん出てきます。私は全体のバランスを考え最低限にしました。
今後使ってみたいものはお気に入りに追加しました（笑）
考えるべき点
・伝えたいことを伝えるのに、そのアニメーションは必要か？
・自分の知識を大きく超えていないか？
・サイトが重くならないか？
3.コーディング
勉強してきた本業の部分なので、これまでの学習や模写経験を活かしてより実務を意識して作りました。
3a.HTML
・目的に応じて適切なタグを配置すること。
・第３者が見ても分かりやすいこと。
・拡張性が高いこと。
3b.CSS
新しく挑戦したのは、頻繁に使うプロパティをまとめたことです。
HTMLのクラス名に"blue"と追加するだけで、該当クラスが青くなるようなイメージで、同じプロパティを毎回使わずに済むように意識しました。
【使い回ししやすいプロパティ】
・Container／Inner要素
・各セクションのタイトルなど、毎回使うプロパティ
・ボタンのレイアウトなどのサイト内で統一するプロパティ
・h3~h5の共通プロパティ
//タイトル周りのレイアウトプロパティ例
.section-title {
text-align: center;
margin: 0 auto;
padding-top: 2rem;
}
.title {
color: $main;
margin: 0 auto 1rem;
font-size: 3.5rem;
font-family: $title;
background: -webkit-linear-gradient($base,#000);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.heading-underline {
width: 7rem;
height: .3rem;
background-color: $accent;
margin: 0 auto;
}プロパティをまとめておきクラス名を付けるだけで、全体のレイアウト変更も簡単に行えます。
【使い回し難しかったプロパティ】
・フレックス系の設定
セクションごとに微調整が必要なので、まとめるのは難しかったです。
CSSは参考にしたサイトが多すぎるので、困った時のリンクと新しく取り入れたスタイルを紹介します。
困った時
解決しない場合は、いくつものサイトをひたすらググる。
それでも何も進まず、自力での解決が困難な場合は
今回はギリギリ使いませんでしたが、過去2回の質問では1日以内に回答を頂きました。無料なので独学にとってはありがたいです。
新しく取り入れたCSS
3c.レスポンシブ
SP表示でのデザインを少し変えました。
自分の制作物を初めてスマホで見て、レスポンシブにしたつもりでも実際スマホで見づらかったです。
・すべての文字が大きすぎる
・左右の余白が多すぎる
・ボタンやボックスのサイズ感がおかしい
問題点がたくさんありました。（笑）
サーバーアップした後、スマホと検証ツールを確認しながらサイズを微調整しました。
次回以降はスマホサイズとしてBoostNoteに設定を保存しておき、テンプレートとして呼び出せば解決できそうです。
4.JavaScript実装した機能
なるべく動きを遅くしないよう、アニメーションは最低限に抑えました。
今回初実装の機能もありますが、日本語でも情報が多かったので実装出来ました。
5.コンタクトフォーム実装
自分でコーディングしたフォームに無料のformrunを実装しました。
6.最終確認、テスト、サーバーアップ
サーバーアップ前に行ったこと
・文章の誤字脱字チェック
・コードのミスチェック（W3Cバリデータでチェック）
・無駄なコードを削除／コメントアウト
・画像の圧縮
・リンクが機能するか確認
・サーバーアップ後：コンタクトフォームが機能しているかテスト
7.制作を終えて
悩んだことも多々ありましたが、イメージをなんとか形にすることが出来ました。
そしてそれぞれの過程でデザインの目的を考えた結果、想像以上の学びを得ることができました。
学んだこと
・自分ができる／できないことがよくわかる。
・デザイン／色はセンスだけではなく、勉強して上達させるスキル。
・実務はコーディングだけではないことを学ぶ。
・コーディング前後の流れが理解できる。
そして以前から行っている、実装したコードのテンプレート化も行いました。
次回以降似たようなレイアウトの際にすぐ実装できるので、作業時間も大きく短縮できるでしょう。
さいごに
ここまでお読み頂き、ありがとうございました。
読みにくい部分もあったかと思いますが、参考になれば嬉しいです。
スキルの面ではまだ未熟な部分ばかりなので、引き続き勉強あるのみです。
確実に成長出来ていることを信じつつ、
出来ていることは自信を持ってアピールする。
出来ていないことは素直に認めて、いち早く改善する。
慢心しても、自信を無くしても仕事は出来ないと思うので。
そしてこれからの実務では、高いプロ意識を持って臨みます。
私に興味を持っていただけたら、ポートフォリオまたはTwitterよりご連絡お願いいたします！
KAZUKI
この記事が気に入ったらサポートをしてみませんか？