ウェブカツdeプログラミング学習3ヶ月目:ポートフォリオ制作秘話

2020 1/15
ウェブカツdeプログラミング学習3ヶ月目:ポートフォリオ制作秘話
目次

はじめに

みなさまこんにちは、もえかです。ウェブカツにおける二週間に一度のプログラミング学習記録ご報告ブログでーす!いぇーーーい!

ウェブカツってなあに?という方へ

オンラインで学習できるプログラミング学習サービスです。条件はありますが女性割引や学生割引などもありますよ!プログラミングはやってみたいけど難しそうだなーとか、プログラミングって敷居が高いよなーって方は、無料受講もできますのでぜひ一度調べてみてください。

画像

ウェブカツdeプログラミング学習0ヶ月目:ウェブカツって一体なぁに?

2019年7月29日
画像

ウェブカツdeプログラミング学習0.5ヶ月目:プログラミングが楽しくて仕方ない!

2019年8月15日
画像

ウェブカツdeプログラミング学習1ヶ月目:目&肩の疲れにお悩みの方へ

2019年8月31日
画像

ウェブカツdeプログラミング学習1.5ヶ月目:WEBサービス部のすヽめ

2019年9月15日
画像

ウェブカツdeプログラミング学習2ヶ月目:PHPエラーとの戦い方

2019年9月29日
画像

ウェブカツdeプログラミング学習2.5ヶ月目:あめあつめ2019制作秘話

2019年10月14日

ポートフォリオ完成しました!

このポートフォリオですが、ほんと予想していた以上に反響をいただきまして……見たことないくらいリプいただきました、ありがとうございます!

制作手順

「なんでそんな早くできんの?」って質問を結構いただいたので、こっからはざっくり製作手順紹介。参考になるかわかりませんが、思い出せる限り思い出して書いてみます。

1.デザインをふんわり考える

今回もいきなりコーディングではなく、デザインを決めるところからはじめました。まずはここから。

パソコンに向かう前にある程度固めておく
すぐに手を動かせるよう、それ以外の時間にぼんやり考えています。私は通勤時間か入浴中に考えることが多いです。

2.Photoshopでデザインカンプ作成(1.5時間)

やあやあここで登場するはPhotoshop!AdobeXDでもいいんですが、早いうちに慣れておいた方がいいと思ったので、Photoshopを使っていきます。
ただし、今回使ったのは四角ツールと文字ツールだけ。感覚的に、ちょっと難しいPowerPointって感じでした。もっと使いこなせるようになりたい……。
ちなみに、誰に見せるわけでもないのでレイヤーはぐちゃぐちゃです。時は長方形戦国時代。

20191031 02

今後はこういうところもちゃんとします。反省。

配色

メインカラーやサブカラー、文字の色を決めます。また、色の与える印象を参考にしつつ、作るものから大きく相違のないようにしています。今回だと「転職時に使えるポートフォリオ」を作りたかったので、「清潔感」「女性らしさ」といった印象のある色を選びました。で、出来上がったのがこんな感じの配色です。

画像

グラデーション
今回どうしても使いたかったのがグラデーション!印象に残りやすいよう、随所に使うことにしました。

大体の配置

「ポートフォリオ まとめ」などで検索し、どういった項目が配置されているのかを参考にします。
20〜30ほど見た感じ、こういうのが多かったです。

  1. メインビジュアル(顔出ししている方はここでどーん)
  2. 自己紹介
  3. スキル
  4. 実績
  5. 問い合わせフォーム

ここでざっくり頭の中で組み立て、順番をある程度決めます。

ガイドラインめっちゃ便利

20191031 03

ガイドラインを引いて、それに沿って作りました。めっちゃ便利です。

ふんわりセクションを考えておく

デザイン時、コーディングのときにどういうセクションでまとまりを作るかはふんわり考えてます。

mv→profile→point……みたいな感じです。

ふんわりレスポンシブも考えておく

例えば、この私の長所を書いた部分なんですが。パソコンだと横並びになっています。

画像

これをレスポンシブにするときはこんな感じで縦並びにしようとか、そういうことをふんわり考えておきます。

画像

本当にふんわり考えてます。あとであれこれ悩みたくないので、構造としては単純なものにしました。

できたデザインカンプがこちら

画像

ふんわりだけでここまで来たようなものですが、なんとか形として完成です。

削ったもの

当初、ヘッダーにメニューを作ってスマホだとハンバーガーメニューを出そうかなと思ってたんですが、ぶっちゃけほとんどそこから飛ぶことないよね?と思い、今回は機能を削除。というより頑張って作ったから最初から全部見てよ!って気持ちでした。もしかしたら今後修正するかもしれません。

3.HTML/CSSコーディング(2.5時間)

長方形と文字だけで作ったデザインカンプを参考に、コーディングしていきます。ざーっと流れでやるので一気にやっちゃいます。

レスポンシブ

多分Twitterからの流入が多いだろうなーと思っていたので、もちろんレスポンシブ対応。Sassを使ってメディアクエリを設定しているので@includeで手早く終わらせます。あいらぶSass。

4.jQuery(4時間)

一番時間がかかった部分です。まずどんなものがあるか探すのが楽しい。ページに実装するのも楽しい。沼ですよ沼。4時間のうち、ほとんどが探してた時間だと思います。

あと、やっぱりJavaScript(jQuery)を触ってると「今私プログラミングしてる……!」感がすごい。めっちゃ楽しい。

そんなこんなで色々と探した結果、スキルバーが伸びるやつページがしゅっとするやつを導入することにしました。

結局外しました
ページがしゅっとするやつ(PagePiling)ですが、Android版Google Chromeで見ると表示がおかしくなっていたようです。色々頑張ったんですが修正できなかったので泣く泣く外しました。いつか絶対使いたいです!

5.微調整(1時間)

ブラウザやOSを変えて確認し、表示がおかしいところを修正します。

あとはGoogleのPageSpeed Insightsで表示スピードも確認します。画像のサイズが大きすぎたりしないかとか、そのあたりを調整します。

6.アップロードとかその他諸々(1時間)

サーバーにアップロードするディレクトリ階層考えたり、リンク切れがないかの確認をします。

7.完成!

これで完成です!製作期間は3日、10時間です。

さいごに

参考になるのかならねぇのかよくわからない記事でしたが、少しでも誰かの参考になったのなら嬉しいです。

それでは、ここまでお読みいただいてありがとうございました!

この記事が気に入ったら
フォローしてね!

関連記事

目次