見出し画像

ポートフォリオ制作日記 #4(参考サイトまとめ)

昨日の記事の通り、ポートフォリオサイト作りが終わりました。

作成にあたり、参考にしたサイト様を改めてまとめ(過去記事で紹介済のものも有り)させて頂きたいと思います。

準備・構築前

ミトラボ様の記事(ポートフォリオを2日で作る手順)

応募したい企業を見つけても、WEBデザイナーは大概がポートフォリオサイトが応募に必須です。
とにかく「いつでも応募できる状態にしておきたい!まずは短い時間で作成したい!」と思い、こちらの記事を参考にさせて頂きました。
過去、私はポートフォリオは紙媒体で作っており、1日~2日で作成できていました。しかし、現在はサイト構築が当然なので、「1ヵ月くらいは掛けないといけないかな……」と落ち込んでいたところ、こちらの記事を読んで「2日でもできる!?」と希望を持つことができました。
(私も、実質2日~3日で完成できました)

ポートフォリオサイト用テンプレート

先程記述した記事で「テンプレートをお借りしての作成もありなんだ!」と知り、テンプレートを探しました。
ねこポン様が配布されているHTMLテンプレートをお借りしています。
とにかくシンプルで使いやすい・カスタマイズもしやすい・自由度のあるテンプレートとなっています。

サイトデザイン

テンプレートは利用させて頂いたのですが、個性を出したいと思いデザイン調整を行いました。

SANKOU!

高クオリティなWEBサイトが集まっています。
現在のトレンドなど参考にしたくていろいろ見ていましたが、こちらを見ると「自分のポートフォリオサイトにはまだまだクオリティが足りないな……」と思ってしまうので、もっと改良していきたいです。

3色だけでセンスのいい色(本)

前の記事でも紹介しましたが、テンプレートサイトの色全体を変えたいと思っていたので、「自分が与えたい印象のイメージ」から参考にさせて頂きました。
目次が、印象やイメージ名から構成されているので、「こういうイメージにしたいときの色」という風に探すことができて、かなりオシャレな構成を作りやすいです。

Devicon(アイコンデータをお借りました)

前記事でも紹介しましたが、「HTML」とか「Javascript」とかのプログラミングアイコンが探せます。
スキル一覧紹介のときにとても重宝しました。

サイト構築

アニメーション背景8選

トップビジュアルに悩んでいて、インパクトのあるものにしたくて一部参考にさせてもらいました。

動くWebデザインアイデア帳

有名どころかもしれませんが、簡単なアニメーションなど参考にさせてもらっています。マウスオーバーの動きとか、良いモーションばかりです。
私のサイトにもっと動きをつけたいと思っているので、たくさん盛り込んでいきたいですね。

Progate(基礎の勉強)

直接的な参考ではありませんが、コーディングをするにあたり、Javascriptの基礎を現在勉強させてもらっています。
私はjsの知識がないのですが、jsファイルを触るにあたってこの基礎勉強がとても役に立ちました。
現在は無料で基礎を学べるサイトが豊富でいいですね。

選んだレンタルサーバー

前記事でも記述しましたが、ロリポップで進めていくことにしました。
Wordpress未使用など、HTML・CSSで作成したシンプルなポートフォリオサイトの場合、エコノミープラン(月額99円~)で十分だと思います。
※99円は36ヵ月契約の場合なので、1ヵ月契約だと132円くらいのようです。
プラン変更(グレードアップ)もできるようなので、迷ったら次のライトプラン(月額220円~)に変更するのが良いと思います。
ライトプランからはWordpressも使えるので、勉強・導入したいとき等におすすめです。
本来は月額+初期費用(通常1,650円)が掛かります。2022.10.18~12.31まではキャンペーン中で初期費用が掛からないみたいで、チャンスですね。

この記事が気に入ったらサポートをしてみませんか?