表題のとおりですが現在WEB制作現場に在籍していて主な業務内容はバックエンド実装というデザインスキルが乏しい私が試行錯誤しながらポートフォリオサイトを作成、公開するまでの道のりをここに記させて頂きます。
Links
LINK
GitHub
※現在公開を停止しています。
Program
- HTML
- CSS
- JavaScript
Library&Framework
- itypedjs
- jQuery
- chartjs
- fakeloader
- jquery.matchheight
- SVG-Car-Drift-Loader
- materialize.css
Tools
事前準備
コーディングフレームワークの選定
1からコーディングするのは作業日数的な問題等があったのでまずフレームワークの選定から入りました。
色々探してみた結果Bootstrapかmaterialize.cssで迷いました。
どちらもシンプルな実装が可能でポートフォリオサイトに最適なので、かなり悩んだのですがBootstrapは過去に実装経験があったので今回はmaterialize.cssを選択しました。
公開方法の選定
ポートフォリオサイトなので外部に公開しなければ自己満足で終わってしまうと思い
- GitHubPages
- Netlify
- Heroku
- レンタルサーバー
- AWS
上記5つで考えた結果コード管理をGitHubで行う予定だったのでそのままGitHubPagesを採用しました。
(GitHubPagesでポートフォリオ公開しているエンジニア様が多かったってのもあります。)
公開方法に関しては下記の記事参考にさせて頂きました。
GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた
バージョン管理フローの選定
GitHubを普段から使用していたので大まかなフローは
ローカルで作業->リモートにpush
だったのですが
未経験がWeb系転職成功したいならgithubでissue管理して開発しよう
を読みましてどうせならbranch切ってissue管理しようと試みました。
正確には作業中盤からissue管理を行いましたが、Gitにおけるプルリクエストに関する理解が深まり大変良い経験が出来ました。
(諸々の事情でmasterに直接コミットしているログがあるのは内緒です。。。)
ワイヤーフレーム＆仕様書の作成
正直に言います………
作成してません
理由としては
- 大体のイメージがあった(シンプルかつ単ページのサイト)
- ページ内の動きは調べて勉強がてら実装しようという甘い試み
ですが振り返るとある程度の実装内容を決めておかないと「あれもしたいこれもしたい状態」になりサイト完成が異常に延期されます。
また主にCSS JavaScriptの構造が乱れる原因になります。
上記の理由でこれからポートフォリオ作ってみようという方はある程度の実装内容を定めた上で作業される事をおすすめします。
作業フロー
materializecssテンプレートを理解
フレームワークを使用する際にまずは独自の文章構造の理解から入ったほうが良いかと思いテンプレート内の記述を閲覧して慣れる事から始めました。
これによりmaterializecssに最初から搭載されているクラスの役割の理解やスムーズなレスポンシブコーディングが行えました。
大まかなレイアウトを決める
今回は大きく分けて
- TOP画面
- 自己紹介エリア
- スキルグラフエリア
- 制作物エリア
- コンタクトエリア で考えました。 あまりページの長さを長くしすぎるのは避けたかったので「お問い合わせフォーム」等は入れませんでした。
コーディング
各々のエリア内に入れる要素を考えながらコーディングを行いました。
特に気合を入れたのがTOP画面のタイプライターアニメーションです。
ローディングアニメーション
↓
タイプライターアニメーション
↓
ナビをフェードイン
は気に入ってる動きです。
不具合対応
実装しては検証して実装しては検証してと作業を行っていたのですがある程度作業が完了したあとにデバッグしてみると
レイアウトのズレやユーザビリティの低さが浮き出てきたのでGitHubでissue作成して１つずつマージしていきました。
公開作業
事前準備で選定していたGitHubPagesで公開して完了です。
公開方法の選定
振り返り
ポートフォリオ作成するに当たって「自分がどれくらいのスキルを有しているのか」や「今までの生き方」などの振り返りを行えました。
単純にポートフォリオという成果物、というだけではなく今後の課題や成長につながる経験が出来たと思います。
長々とご閲覧頂きありがとうございました。