プログラミング学習日記

【プログラミング学習日記⑦】デイトラWeb制作コース初級DAY19までの学習記録。ポートフォリオが完成しました!

こんにちは。まつもとです(^^)/ (Twitter:@matsumoto_54111

前回から少し間が空いてしまいましたが、今日は久しぶりにプログラミング学習日記を書いていこうと思います。

先日、デイトラWeb制作コース初級編の課題である、HTMLテンプレ―トを使ったポートフォリオの制作が終了しました!
完成したポートフォリオはこちらです。(https://matsumoto-engineer.com/

 

この課題はテンプレートを選ぶことから始まり、画像素材探し、コーディング、インターネット上への公開までを行うというこれまでより実践的な内容になっており、多くのことを学ぶことができました。

そこで今回は、この課題を終えるまでに使ったテンプレートや便利なサイトをこの記事にまとめていこうと思います。

今回書いていく内容はこちら。

  • 使用したテンプレートと選ぶ際に重要視したこと / シンプルで見やすい&お洒落さもあり
  • 画像やアイコンを選ぶ際に使用したサイト
  • サーバー契約、ドメイン取得、FTPクライアントソフトなど使用したものを一通り公開

それでは、早速はじめます(*^^*)

 

使用したテンプレートと選ぶ際に重要視したこと / シンプルで見やすい&お洒落さもあり

今回私が選んだテンプレートは”Taso – Personal Portfolio Template“です。

https://themeforest.net/item/taso-personal-portfolio-template/22420342

 

選んだ理由は、シンプルで見やすい&お洒落さもあるサイトにしたかったからです。

この課題に取り組むにあたって、いろいろな方のポートフォリオを見てみました。
とてもかっこよくて複雑そうなアニメーションがついているものや、スタイリッシュなものなど、様々なものがありました。

そしてどんな方が私のポートフォリオを見てくださるかなと考えたのですが、
それはおそらく
・SNSで私を知ってくれた方が興味本位でポートフォリオを見てみる
・私が何かの仕事に応募した際にクライアントの方が見る
という感じかなと思います。

その方々が知りたいのは、
・私がどんな人間なのか
・私はどんなスキルを持っているのか

なのでデザイン性やかっこよさを重視するよりも、
上記2点について知れてシンプルにまとまっている & お洒落さも程よくある みたいなサイトが良いな
という考えに行きつきました。

 

画像やアイコンを選ぶ際に使用したサイト

今回私が画像やアイコンを選ぶ際に使用したサイトは以下の2つです。

O-DAN(オーダン)
海外のおしゃれな写真がたくさん載っています。日本語で検索できるので使いやすいです。
私はメインビジュアルに使用した花の画像をこのサイトからダウンロードしました。

Font Awsome
シンプルで使いやすいアイコンが無料で利用できます。ツイッターやインスタグラムなど、SNSのアイコンもあるので、自分のSNSへリンクを貼る際に使用しました。
有料のアイコンも沢山ありますが、私は無料のものだけで十分だと感じました。

 

サーバー契約、ドメイン取得、FTPクライアントソフトなど使用したものを一通り公開

ポートフォリオが出来上がったら、いよいよ公開の準備です。
サーバー契約やドメイン取得については、このブログを公開する際にも行ったのでサクサク進めることが出来ました。

今回はサーバー契約、ドメイン取得ともにエックスサーバー(https://www.xserver.ne.jp/を利用しました。

エックスサーバーでは頻繁に”ドメイン永久無料”というキャンペーンが行われていて、私が利用した際もちょうどキャンペーン中でした。
(ちなみにキャンペーン中じゃなかったとしても、他サイト(例えばお名前.comなど)と比較して高い印象はありません。取得するドメインにもよりますが…)

このブログを公開した際はエックスサーバーで上記キャンペーンは行われていなかったため、サーバー契約はエックスサーバーで、ドメイン取得はお名前.comでしました。
今思えばキャンペーン中じゃなくてもエックスサーバーでドメイン取得した方が、複数のサイトに会員登録する必要がなく管理が楽だったなと少しだけ後悔しています。

次にFTPクライアントソフトですが、Cyberduck(https://cyberduck.io/)を利用しました。こちらは初心者におすすめということでデイトラを運営者の一人であるショーへ―さんがブログで紹介されていたものです。

初めてのFTPクライアントソフトの利用だったので色々と調べながら行いましたが、日本語で解説されているブログなども多かったですし使い方はシンプルですぐに理解できました。
ポートフォリオサイト公開後に何度か手直しを行いましたが、再アップロードも簡単で良かったです。

 

おわりに

さて、今回はテンプレートを使ったポートフォリオ作成の際に使ったサイトなどを紹介していきました。
少しでも私と同じようにWeb制作を学習されている方の参考になれば幸いです。

今回の課題でも初めて行うことがいくつもありました。迷いながらも楽しんで制作できたので良かったなと思います。楽しいという気持ちがなくなってしまうと勉強の継続が辛くなってしまいますしね(^-^;

少し前までこんなにお洒落で実用的なテンプレートがあることすら知らなったので、その状態から比べればこの課題を通してまた一歩成長できたのではないかと思います。

これからもプログラミング学習の進捗状況をこのブログでシェアしようと思います。

最後まで読んでいただいて、ありがとうございました!(^^)/