ポートフォリオサイトをリニューアルしました。

こんにちは、びび(@vivilog_) です。

1月も早いものでもう半分が過ぎましたね。

個人的には年末年始にセブ島に友人が遊びに来てくれたので、それに合わせて今まで全くできなかった観光や海に行けたのがとてもリフレッシュできてよかったです。

さて、実は2019年11月に作った自身のポートフォリオサイトをリニューアルしていました。

制作期間は約8日。

デザインに2日、コーディングに1日、残りはほとんどWordpress化する作業や詰めが甘い箇所の訂正に追われてしまって、思ったよりも時間がかかってしまいました。

今回はこの今の感情や反省点など、忘れないうちに書き残しておきたいので、リニューアルに至った経緯や所感を合わせて書いていきたいと思います。

ポートフォリオサイト、リニューアルしました。

実はツイッターのweb用アカウントでこのブログを大々的に宣伝するのは初めてなので、初めての方向けに私が一体何者なのかを紹介します。

私は今セブ島で完全独学でweb制作を学んでおり、学習し始めて5ヶ月に差し掛るかな、というくらいになります。

現在求職中です、大阪or東京で実務未経験でもwebデザイナーもしくはUI/UXデザイナーとして働かせてくれるところを探しております!

どんな勉強をしてきたかなどは以下の記事にてまとめておりますので、同じ駆け出しの方はよければ参考にして頂けると嬉しいです。

WEB制作を学んで3ヶ月経った経過報告

【体験記】WORKROOM in セブ島でシェアハウスしてきました【口コミ】

話はそれましたが・・・・11月に作成したポートフォリオサイトを年明けてすぐにリニューアルしました。

旧サイト:https://viviviblog.work/

新サイト:https://demosite.viviviblog.work/

(PCで見て頂けるととっても嬉しいです)

新サイトで意識したことは3つ、動きがあって、シンプルで、更新しやすいこと。

リニューアルに至った経緯

前回のサイト作成が11月頭頃、web制作の学習を始めて2ヶ月目で作ったものです。

それから2ヶ月しか経ってないのに早々リニューアルに至った理由はいくつかあります。

1つは、デザインもままならないまま作ってしまったことです。

正直、このメインビジュアルのパイナップルの画像を使いたくて仕方なく、まともにデザインにおこさないでいきなり作り始めてしまったんですよね。

そのせいで、このメインビジュアル以下のデザインが、もう悲惨で。

デザインをきちんと作ってなかったせいでコーディングもめちゃくちゃ。

あとから修正修正で、デザインをきちんとすることの大切さを身を以て知りました・・・。

新サイト。少しだけおしゃれなコーポレートサイトっぽいのを意識しました。

背景の球はふよふよ動きます。

2つ目は、ペライチ構成だったこと。

ボリューム少なめのLPみたいな構成になっています。

旧サイトのポートフォリオ欄は、実はコード直書きでjQueryを使ってポップアップとして表示させているだけなので、追加するときにファイルごと書き換えないといけないのがめちゃくちゃ不便でした。

どれだけ雑に作っていたかがよく分かります。

一応Wordpress化はしているのですが、ペライチ構成なのでwordpress用のphpにちょこっと書き換えるだけで出来てしまったので、見る人が見たらその浅さに呆れられるレベルです。

3つ目は、とにかくなんか嫌だったからです。

冒頭で述べた通り、今求職中なのですが、ポートフォリオとして提出するのがまずこのサイトだったので、プロの方相手に見せるのは前述した2つの理由もあり、正直とても嫌でした。

自分で稚拙だと思っているから、嫌だったんですよね。

実際web制作会社の方などのお話させていただくと、正直そんなに反応がいいものではなかったので・・・

とにかく早く手直ししたくてたまらなかったのですが、12月に集中してデザインの学習に時間を使っていたのもあり、それがひと段落した段階で取り掛かろうと思っておりました。

以上がリニューアルに至った経緯です。

まとめると、色々至らない点しか見当たらなかったから早く作り直したかった!!てことです。

新サイトで意識したこと

では新しくサイトを作り直そう!ということで、まずデザインからどんな風にみせたいかをしっかり考えて作るようにしました。

意識したことは以下。

・写真に頼らないデザイン

・動きのあるサイトに

・従来よりかはまとまりつつも寂しさを感じさせない

・ポートフォリオサイトだから制作物を見てくれるようなもの

色々書き出してみたものの、難しいです。

何より、凝ったデザインにしすぎるといざコーディングの時に自分が実装できないので、そのバランスを考えるのも苦労しました。

このあたりはまだまだ実力不足を感じます・・・。

色々悩みましたが、結局シンプルが一番いいかなと思い、あまり装飾し過ぎないデザインで決定しました!

実装時の反省点

実装時に苦労した点を反省点も踏まえて残しておくと、

・モバイルファーストの意識

・JavaScriptのデモの大切さ

・WordPress化

上記の3点が非常に苦戦しました。

コーディングをする際、モバイルファーストでレスポンシブからコーディングするとその後楽だよ、というのは結構どこでも見かける声でもあるのですが、今回は特にそれを実感しました。

明らかに修正が楽です・・・!

JSの実装でうまくいかないところがあって、そこだけ先にpcの方をコーディングしたのですが、本当にレスポンシブにするのが面倒で、モバイルファーストの大切さを身を以て感じました。

CSS設計はSMACSSのベースのみ参考にしました。

とても分かりやすかったので、本格的に取り入れてみようと思います。

コーディングしている時にひしひしと思いましたが、エンジニアさんは本当にすごいですね・・・!

私はHTML/CSS、JavaScript、phpちょこっとでヒィヒィいってるので、本当に尊敬します。

そしてWordPressは今回一番時間がかかってしまった工程です。

前回はペライチ構成だったので他の下層ページを作らずにWordpress用のphpタグを書き換えるだけでよかったのですが、今回はテーマ自作だったのでわからないことだらけでめちゃくちゃ苦労しました。

ローカル環境ではきちんと動作するのに本番環境だと急にエラー起こして真っ白になったり。(別ドメインでwordpressインストールし直したらいけました)

急に記事ページがループされなくなったり。(変な半角スペースがループタグに入ってただけ)

なぜかアイキャッチ画像がローカル環境では表示されるのに本番環境では表示されなかったり。(キャッシュクリアでなぜか解決)

WordPress編集画面で画像追加ができなかったり。(テーマ切り替えたら直った)

本当に小さなことが原因なことばかりでしたが、それに何時間もかけてしまったという点が大きな反省です。

とにかくなにかわからないことが出てきたり、予期せぬことが起こると、調べて調べて調べて自分で解決するしかないのが独学の辛い点でもあります。

しかしシェアメイトが色々とアドバイスくれたりしたので、感謝しかないです・・・!

(別ドメインでインストールし直してみれば?もシェアメイトの助言でした・・・!ありがとう!)

この失敗は2度としないぞ、という学びにつながったことが大きな収穫だと思うしかないですね。

今後の改善点

個人的に期限を決めて、なんとか期限内には公開できる状況にはなったかなと思いホッとしている反面、あとから足りないところがポロポロ出てくるので要改善です・・・。

現時点で今後追加修正するものが決まっているものは、

・コンタクトフォームの別途追加

・記事ページのページ送りを追加

・制作物も順次追加

以上です。

上記は近いうちに追加予定ですー!

セブ島を離れるまで残り10日ほどしかないので、残りの時間を無駄にせずまだまだ追い込んでやっていきます!

そしてサイト制作が落ち着いたのでまたデザイン修行も再開予定です!

参考UIを勉強するために実践したことと便利なサイト10選!

それでは!