【エンジニア・デザイナー向け】無料Webポートフォリオの作り方


このような疑問に答える記事を用意しました.

この記事の内容

  1. ポートフォリオとは?
    1. ポートフォリオとは?
    2. ポートフォリオ を作るメリット2つ
  2. ポートフォリオ を作成するステップ3つ
    1. ①テンプレートをダウンロードする
    2. ②サーバー,ドメインを用意する
    3. ③サーバーにWebページをアップロードする
  3. まとめ

こんにちわ,最近なぜか納豆嫌いが治ってきた,藤田修平です.

味覚は子供の頃が敏感とはいうけど,そのせいなのかな.

さて今回は,Webポートフォリオの作り方の紹介をします!

まずこちらのツイートをご覧ください.

実績がない状態から仕事をもらうにはポートフォリオを作ることが大切ということを言っていました.

ポートフォリオがあることが一つ自分が挑戦権を掴める確率をあげることが出来ると僕は思いました.

ポートフォリオは,自分が次の挑戦をするために持つべき手段です.

ではポートフォリオの簡単な作り方を紹介します!

1.ポートフォリオとは?

ポートフォリオとは?

まずポートフォリオとは,エンジニア・デザイナーが過去に作った成果物をまとめたものをいます.

日本語に直訳すると「紙ばさみ」「折りかばん」「書類入れ」という意味です。

また,以下のイメージのようにWebサイトに自己紹介のように作るのが主流です.

ポートフォリオイメージ「藤田修平のポートフォリオ」:http://syuheifujita.com

参考「ポートフォリオとは」:https://mynavi-creator.jp/knowhow/article/what-is-a-portfolio

ポートフォリオ を作るメリット2つ

  • 仕事,挑戦権をもらえる確率が上がる
  • 自分の成果物をわかりやすく相手に伝えられる

2.ポートフォリオ を作成するステップ3つ

前提条件

  1. HTML/CSSの知識が必要です
  2. テキストエディタを使える(VSCode,Atomなど)
  3. MacOS

①テンプレートをダウンロード

今回はポートフォリオを公開することを目的とするため,テンプレートはダウンロードすることにします.

僕はこのサイトのテンプレートをダウンロードしました.

参考サイト:https://webdesigner-go.com/template/portfolio-02/

また,自分好みのデザインのテンプレートを探すには,

「ポートフォリオ テンプレート」などと検索すると良いと思います.

②サーバー,ドメインを用意する

ポートフォリオをネットで公開するには,2つの方法があります

  1. サーバー,ドメインを用意する(有料)
  2. Firebaseというサービスを使う(無料)

ですが,サーバーを契約していない方は「Firebase」という,無料でWebサイトをネットに公開できるサービスがあるので大丈夫です.

Firebaseを使ってWebサイトを無料で公開する方法は,この記事で紹介しているので参考にしてみてください.

ちなみにFirebaseで無料でWebサイトを公開する場合はここでステップは終了なので,③は無視して大丈夫です.

僕はサーバードメイン取得をしているのと,ドメイン名を「syuheifujita.com」にしたかったので,自分でサーバー,ドメインを用意する方法でやりました.

サーバー,ドメインを用意する方法は,以下の記事を参考にしてみてください.

サーバー,ドメインを用意できた方は③へ進みます.

③サーバーにWebページをアップロードする

※このステップはサーバー,ドメインを用意する方法で使います.

次にサーバーにWebページをアップロードする必要があります.

FTPクライアントの「Cyberduck」というフリーソフトを使ってサーバーにファイルをアップロードしてみてください.

Cyberduck」の使い方に関しては,以下の記事で紹介されているので参考にしてみてください.

サーバーにアップロードできたら,ポートフォリをのURLにアクセスしてみてください.

デモサイトのように表示されれば成功です.

あとは,HTMLファイルの部分のテキスト,画像を編集して自分好みにカスタマイズしてみてください!

いかがだったでしょうか?

今回はいろんな知識が必要で,多分つまずくことがあるかもしれません.

少しでも疑問に思うことがあれば,コメント欄やSNSのメッセージで気軽に質問してきてくださいね!

ではまた!BYE!

関連記事:【アウトプットのコツ】①ファクト→②気づき→③アクション


SNSでもご購読できます。

コメントを残す

*