ポートフォリオサイト化しました!

公開日:2021/2/17 最終更新日:2021/7/2

こんにちは!ナガタロックです!

2020年の6月よりRaiseTechの学習記録を中心に

運営してきた当サイトをオリジナルテーマにより

ポートフォリオ兼ブログサイト化しました!

R3.7月に改修アップデートを行いました!

詳しい内容はコチラ

今回の記事で、このポートフォリオに

  • 何故
  • どのようにして
  • どういう想いで

作っていったかを記していきます。

どうしてポートフォリオ化したのか

昨年のコロナ禍において、

プログラミングの学習をしよう!と決めた時に

習慣化するための環境づくりの一貫として、

またRaiseTechの

「WordPress副業コース」

を受講するということで、

WordPressによるブログサイトを5月より開設しました。

有料テーマ「JIN」について

ブログ開設当初より有料テーマの

JINテーマ

を使用していました。

JINテーマのサイト

有料テーマを使用していた理由としては

・柔らかい雰囲気のレイアウト

・ブログを書く上で多彩なエディタデザイン

・オリジナルテーマを作るうえで、参考になる高機能

・お金をかける事で自分へのプレッシャーをかける

というのが主な理由でした!

オリジナルテーマを作った今だからこそわかる

細かい部分にまで行き渡った心遣いに感動していますw


RaiseTech受講を終えて・・・

6月〜より始まった4ヶ月に及ぶRaiseTechの講義記録を

毎週欠かす事なく継続する事が出来ました!

RaiseTechの課題は約5ヶ月半かかって

完成させることが出来ました!

課題まとめ記事→【RaiseTech】超初心者が1から学ぶプログラミング記〜課題まとめの巻〜

そして、学習することを念頭に置いていたRaiseTechの

受講期間が終わった後は

制作物に着手しようということで

「ポートフォリオサイトを作ろう!!」

というマインドになりました。

そして、せっかくブログ記事を積み上げてきたのだから、

それも活かそう!

ということで、

当サイトのポートフォリオ計画がスタートしました・・・!




ポートフォリオ化におけるルール

RaiseTechで学んだスキルを活かす!

RaiseTechの課題を通じて学ぶ事が出来るスキル

  • html&css
  • sass
  • FLOCSS設計
  • WordPress(PHP)
  • jQuery
  • Github

を駆使します!

課題とは違う物を作るので、

当然課題とは異なる問題が多々出てきます。

実践を通じて

Web制作に必要なスキルを

さらに高めようという意図です。

制作過程を発信する!

プログラミング学習スタートから

Twitterを運用しています。

このポートフォリオの制作過程も

Twitterを利用して発信する事にしました。

発信の意図としては

・他人を意識することで自分にプレッシャーをかける

・積み上げを可視化出来るようにする

・見知らぬ誰かの目にとまるかも!?

です。

1番は日々の積み上げが可視化出来るというのが

モチベーションにもなって

制作に当たることが出来ました!

挑戦をする!

以前RaiseTech代表のエナミさんとの

面談にて受けたアドバイスに

1ランク難しい事へ挑戦する!

という事を意識しました。

RaiseTechの最終課題の「ハンバーガーサイト」は

1からコーディングをしてWordPress化してアップロード

(ザックリですいませんw)

これに自分でやっていない要素として

  • XDにてデザインカンプ作成
  • 既存サイトをカスタマイズ

の2点です。

XDにてワイヤーフレーム作成

RaiseTechの課題ではこの部分は

資料として提供されました。

XDの操作自体はこのタイミングが

ほぼほぼ初めて!

Illustratorはよく利用しているので

操作感覚はなんとなくわかったのですが

「Webサイトをデザインする」

という点においての機能面を

使いこなすのはまだまだだと感じました。

ただコーディングを始めて気づいたんです・・・

「ワイヤーフレームがきっちりしていればしているほど

コーディングがしやすい!!」

ことに・・・っ!

コーディングしている途中に

「もっとこうしたほうがいいな〜」

とか

「あれ?ここどうしよう?」

とか色々出てきました!

RaiseTechの課題では思わなかった感情です!

既存サイトをカスタマイズ

冒頭でお話したように

このサイトは有料テーマの「JIN」で

ブログ記事を書き続けていました。

積み上げていった記事も

自分のポートフォリオだ!

ということでブログ記事も取り込んだサイトを作る事に

①当サイトを一旦ローカル環境に移し

②ローカル環境にて1からテーマを作成してカスタマイズ

③再度本番環境へアップロード!!

の流れを汲んで行きました!


サイトデザインについて

サイトイメージ

デザインをするうえで

堅苦しい雰囲気にはしたくなかったので、

余白を多めで爽やかなイメージにするため

メインカラーは「ホワイト」に。

アクセントカラーには「淡めのブルー」にしました。

「淡めのブルー」は

僕が住む岡山県は瀬戸内海に面しており

育ちは日本海に面した鳥取県

趣味は誰がなんと言おうと釣り!

体内の半分は海水で出来ております!

から来ています!

TOPの写真も海や川を撮った物をランダムで表示させています!

固定ページ

「PROFILE」「PORTFOLIO」「BLOG」

をそれぞれ固定ページにて実装しました。

投稿記事一覧をトップページではなく、

「BLOG」ページに表示させた点が

工夫したポイントです!

カテゴリ別の一覧は「archive.php」で実装しました!

ページ送りは

プラグイン「WP-PageNavi」で実装しました!

投稿ページ

1番コーディングに手間取ったのが

投稿ページです!

元々有料テーマで投稿記事を書いていたので

見栄えを整えるのに時間がかかりました。

どのくらいのサイズ感が読みやすいか?

スマフォだとどうか?

パソコンだとどうか?

考えることがやまほどあります。

これは今現在も調整中のポイントですね。。

前後記事へのリンクは

RaiseTech課題で実装したコードを

そのまま利用しました!

CONTACTページ

「CONTACT」ページも固定ページにて実装

プラグイン「MW WP Form」で実装!

デプロイ後自分で試しましたが

無事にメールが届いた時は軽く感動しましたw

サーバーへのアップロード

コーディングの学習を中心におこなってきたので、

サーバー関係には苦手意識が・・・

このあたりを本質的に理解するのは

かなりの知識が必要なので

しっかり数をこなして慣れていくことが

必要だと感じました!

コーディングデータのアップロード

こちらはハンバーガーサイトと同じく

「Filezilla」を使用しました。

半年前に契約したサーバー情報を

探し出すのに1番苦労しましたw

今回を機にしっかり管理!

データベースのアップロード

MySQLのアップロードですね!

こちらも解説サイトがたくさんあるので、

すんなり実装!

URLの書き換え

ローカル環境から本番環境に移すにあたり

URL部分の書き換えをおこないます。

この対応するのに日本語ページが少ないので

かなり時間くいました(;・∀・)

実装においては最終的に

こちらのサイト

を参考にさせていただきました!

困った点

本番環境へ移行するにあたり

苦労した点です。備忘録がわりですねw

アップロード完了!!

でページにアクセスした瞬間

画像が表示されない・・・

いきってランダム表示にした自慢の

トップページの画像が表示されません・・・

色々駆使した結果「jpg」だったのが問題だったよう

「png」ファイルに変換したら無事に表示されました

レイアウト崩れ

1番苦しんだのはこの問題・・・

ローカル環境でコーディングしている間は

常にChromeのデベロッパーツールを用いて

監視しておりました。

しかし、いざスマフォでサイトを見てみると・・・

ガッツリレイアウト崩れている〜!!

いわゆるブラウザ間の表示の違いですね。。

コーディングにおいてはあるあるなんでしょうが、

リセットCSSしてるし、大丈夫でしょう〜

と思い込んでおりました・・・

RaiseTech内slackにてアドバイスをもらい・・・

safari用のデベロッパーツールともいえる

「Webインスペクタ」機能を用いて

レイアウト崩れを修正しました!

その他にもローカル環境では問題なかった事が

本番環境では不具合が出る

ということがいくつもあり、

少しずつ修正を加えていっている最中です。

終わりに…

RaiseTech受講開始から

基本的に書籍で学習したり

課題を通してコーディングしたり

Udemyで動画学習したり

「誰かが作った物」を作るという学習方法で

進めてきました。

今回はデザインからコーディング

サーバーへのアップロードと

より実践的にWeb制作をすることで

見えてきた不具合がたくさんあったり

ものづくりをする楽しさを味わうことが出来たり

体感的にもすごく成長を感じることが出来ました。

自信にもつながり

案件獲得に向けた行動を起こす原動力となっております!!

そして実際に案件の話もいくつかいただくことが出来ています\(^o^)/

また1からテーマ作成をするにあたり

必要な事をたっくさん調べながら制作しました。

この調べた事というのをよくよく見直すと

かなりの確率で講義で抑えていたポイントだったのです!!

講義中には気づかなかったことですが、

実践に沿った講義だったことが今更ながらわかりました!

RaiseTechが公言している

実践を意識したスキルやマインド

改めて感じることが出来ました!!!

この時点でのこのポートフォリオは

まったく完結はしておらず、

PORTFOLIOページのさらなる充実と

レイアウトの調整

ブログ記事の更新

を今後も継続しておこなっていきたいと思います。

最後まで読んでいただきありがとうございました!


ABOUT US

この記事を書いた人

ナガタロック

このサイト作成者の写真

アパレルメーカーに勤める30代男
2020年より「RaiseTech」にてプログラミング学習を開始
講義内容の学習記録
副業に関する情報を発信しています

  • カテゴリー