初心者がテンプレートを使用しポートフォリオを作成した方法

いきなりですがあなたはポートフォリオを作成したことがありますか?

・ポートフォリオ制作は今の自分にはできない…。
・ポートフォリオを制作したいけどまず何から始めよう…。
・ポートフォリオはまだ制作する必要がないのではないか。

おそらく多くの方が上記のように
ポートフォリオ制作に大きな壁を感じていると思います。
この記事ではその壁を壊すことができるように、
ポートフォリオ作成のメリットや手順、
参考となるサイトを紹介できればと思っています。

初心者でも解かり易いポートフォリオとは?前回記事も見て下さい。

こちらのポートフォリオ制作は、
「模写を終えた後のワンランク上のアウトプット」という気持ちで、
実際に使うポートフォリオを作る練習として制作しました。
制作を進めるうちにだんだん楽しくなってくるので、
皆さんも「練習で作ってみよう」や「どこまでアウトプットできるのかな」などあまり身構えず挑戦してください。

最初は誰でも一歩目を踏み出すのは難しいです。
しかし、その一歩目を踏み出した先に、
踏み出した人しか感じることができない楽しさがあります。
是非その楽しさを感じてもらいたいので、
私にその後押しをさせてください!
前置きが長いと読むのが疲れてしまうと思うので
さっさと本題に入りたいと思います。
それでは行きましょう!

1.ポートフォリオ制作のメリット

1-1.アウトプットになる

よくアウトプットは大事だということを耳にしませんか?
この言葉は紛れもなく事実です。

アウトプットすることのメリットとは

✅インプットしたものが定着する。
✅自分が今どれくらいできるのかがわかる。
✅自分が今何ができないのかがわかり、
どこに学習の重きをおくか判断できる。

ようは知識やスキルが定着し、
客観的に自分をみることができるので
学習効率を上げることができます。

1-2.フォロワーが増える

twitterで発信してる人限定になってしまいますが、
制作物を公開するとフォロワーがほんとに増えます。
4日間で400人フォロワーが増えました。

なんて人もいると聞いております。
私もこれからtwitterを始めようと考えております。

1-3.楽しい

おそらく多くの方は自分なりの制作物を作ることに興味を持って
プログラミング学習を開始したと思います。
それを実際にできるのがポートフォリオ制作です。
自分の好きなように配置やデザインを決められると考えると、
ワクワクしてきませんか?
私はその楽しさを知ってからはアウトプット中毒になってしまったので、
ぜひアウトプット中毒仲間になってほしいと願っています!

1-4.自分の自信と力になる

ポートフォリオを完成させると、
自分でも一からここまで作り上げることができたという
自信につながります。
自信があるかないかは学習を継続させる上で大きな違いとなります。
「自分は全然ダメでできないやつ。」
「何も作れない。」
というネガティブな気持ちでいたら
プログラミングを嫌いになりそうじゃないですか?
嫌いにならなくても気持ち的には辛いはずです。

一方自信があると、
「自分にはできる!」
「あの時ポートフォリオを完成させることができたのだから
今回もできるに決まってる!」
というようにポジティブに捉えることができます。
こちらの方が学習を楽しんでいて継続できそうですよね?
そのきっかけを作ってくれるもののひとつとして、
ポートフォリオ制作は有効な手段です。
難しいですが挫折しないためにも是非取り組んでみてください!

1-5.最低限必要なスキルが少ない

私はHTML/CSS/BOOTSTRAPを学習して、模写を2個ほどやってから取り組んだので、初学者の段階でも制作することは可能です。
また後々紹介しますが、CSSで多くのアニメーションを実装できるため、JavaScript学習前でも動きはたくさんつけられます。

スキルが未熟でも全然制作できるので、
是非自分の成長のためにも挑戦していきましょう!

2.ポートフォリオ作成の手順(テンプレート編)

ここではテンプレートを用いた
ポートフォリオ制作についての手順を説明します。
「最初から白紙の状態で作るのはできない!」
といった人にわかりやすく手順を説明していきます。
それではいってみましょう!

2-1.テンプレートを探す

まずテンプレートを探すところから始めます。
はじめに謝っておきますが、今回紹介するテンプレートは有料のものです。
「お金を払ってまで作りたくはない」という人はいると思います。
しかし無料のものよりクオリティが高いものばかりなので、
実際に使うことを考えるとカッコ良いものにしたくありませんか?
(あくまで練習の場合は無料のものでも良いです)

Themeforest」というサイトに多くのテンプレートがあります。
そこから自分の気にいるテンプレートを探すのも良いのですが、
時間がかかってしまうと思うので、
いくつか厳選したので、是非そちらから選んでください!

※画像をクリックするとリンクへ飛びます。

1.パターンが多く、白と黒をメインとしたシンプルなテンプレート。

情報

2.黒をメインとしたダークなテンプレート。

情報

3.白と淡い色で構成された明るいテンプレート。

情報

4.おしゃれなアニメーションとシンプルな色合いのテンプレート。

情報

5.サイドバーがある白を基調としたテンプレート。

情報

6.個人的にすごいおしゃれで気に入ったテンプレート。

情報

7.他のテンプレート
他にもたくさんのテンプレートがあるので、
上記意外で探したい場合下記のサイトを是非ご覧ください。

イメージ

8.無料のテンプレート

無料のテンプレートは使用したことがないので詳しいことはわかりませんが、以下のサイトは参考になると思ったので載せておきます。

イメージ

テンプレートのダウンロード方法

まず購入したいテンプレートをクリックすると下の画面になるので、
「Buy Now」をクリックして購入手続きを進めていきます。

情報

「Buy Now」を押すと下の画面になるので
名前とメールアドレスを登録します。

情報

詳細を記入していきます。

情報

支払い方法を設定していきます。

情報

左下の「Checkout with PayPal」を押すと購入が完了します。
登録したメールアドレスに下記のようなメールが届くので「Confirm your email」を押すと、ダウンロード画面に飛びます。

情報

下のようなダウンロード画面に飛ぶので、緑の「Dawnload」ボタンを押すとダウンロードされます。

情報

ダウンロードされると下のzipファイルが表示されるので、ダブルクリックで解凍してください。
そうすると上のフォルダが表示されるのでそれをデスクトップなどに移動させてください。

情報

移動したフォルダを開くとだいたい下のように2つフォルダが表示されているので、下の方の「html」フォルダを開いてください。

情報

そうすると下のようフォルダやファイルが表示されるので、「html」と表示されているファイルをブラウザにドラックアンドドロップして、中身を確認してください。

情報

そしてエディタにも同じようにドラックアンドドロップしておきましょう。

2-2.公開されているポートフォリオをみる

ネットで検索すると公開されているポートフォリオがたくさんあります。
目をこやすという意味でもいろいろみておくのは大切ですので、
是非以下のサイトのポートフォリオをみてください!

※画像をクリックするとリンクへ飛びます。

情報
イケてるWebデザインで作られたポートフォリオサイト21選まとめ
情報
おしゃれなWebデザインのポートフォリオサイト37選。現役デザイナーが厳選!
情報
参考にしたい日本人デザイナー・エンジニアのポートフォリオサイトまとめ
情報
Webサイト制作の参考になる国内のWebデザインリンク集

2-3.参考にするポートフォリオをいくつか決める

「2-2」で公開されているポートフォリオをみていただいたと思います。
次はその中から自分の気に入ったものをいくつか選んでください。
その選んだポートフォリオを参考にしながら制作を進めていきます。

ちなみにですが私は他の方のポートフォリオを参考にして、
ポートフォリオを制作しました。
「全然似てないじゃん!」と思う方もいらっしゃると思います。
ですが私は他の方のポートフォリオをみたことで
アイデアがどんどんわいてきたので、
是非皆さんもアイデアがわいてくるような
ポートフォリオを参考にしてください。
参考にするというのは発想を活性化させてくれるので
是非気に入ったポートフォリオを手元においてください。

2-4.画像や写真を差し替える

元から入っている画像などは自分とは関係のないものなので、
自分が選んだ画像や写真に差しかえます。
画像のおすすめサイトを下記にのせておきます。

1.「Pixabay」

https://pixabay.com/ja/

一部の写真はライセンスが異なります。ダウンロードページの右側に「Pixabay License」とあれば著作権表記不要の無料写真素材です。

2.「O-DAN」

情報

3.「Unsplash」

https://unsplash.com/

4.「BURST」

情報

5.「Gratisography」

イメージ

6.「写真AC」

https://www.photo-ac.com/

下記のサイトを参考にました。

イメージ

2-5.アイコンをいれる

自分の好きなアイコンを使ってみるとよいです。
代表的なところで言うと「Font Awesome」などがあります。
自分のスキルを紹介する部分で、HTMLだったらHTMLのアイコンを使うと
一目見てわかるのでみやすくまります。

※画像をクリックするとリンクへ飛びます。

情報
Font Awesome
情報
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

2-6.テキストを編集する

文章も自分とは関係がないと思うので、自分なりの文章に書き換えてください。
文章を考えるのも時間がかかると思うので、思いつかない場合は後回しにして良いです。

2-7.自分なりにアレンジを加える

ここがこの章で一番難しい部分だと思いますが、
是非挑戦してください。

どのようなアレンジを加えるかと言うと、

色の変更
参考にしているポートフォリオを元に、
自分の好きな色を背景色や文字色などに取り入れると、
一からポートフォリオを制作する練習になるのでおすすめです。
グラデーションカラーをつけるのもおすすめです。

必要部分の削除
自分のポートフォリオには必要ない部分があると思います。
その部分を削除してください。

アニメーションの追加
ググってみるとCSSで様々な動きをつけることが可能です。
気に入ったアニメーションを取り込んでみるのも良いと思います。

以上のことをメインで進めるといいです。
また、他のアレンジを思いついた場合どんどん実行していきましょう。

2-8.完成

以上でテンプレートを使用したポートフォリオ制作は完了です。
ある程度のアウトプットができて自分の実力がわかってきたと思います。

是非次は完全オリジナルを目指してみて下さい。

私のポートフォリオサイトは下記です。 ※画像をクリックするとリンクへ飛びます。

自己紹介

今回はこの辺でさようなら。

最新情報をチェックしよう!
>本当の自由を求めて「WEBサバイバー terayamaya」

本当の自由を求めて「WEBサバイバー terayamaya」

本当の自由とはなんだ?答えを求めてサバイブし続ける!お金より大事な事は沢山あるけどお金じゃないと解決できない事もある。

CTR IMG