未経験から転職を目指すための
ポートフォリオサイトの作り方

作成のポイント

ポートフォリオサイトを作るときの大切にしたいこと

レスポンシブ対応

パソコンとスマートフォンのどちらでも見栄えよく見れるレイアウトにしましょう。

自分らしさの演出

サイトのデザインや色、テキストなど、自分らしい内容のサイトにしましょう。

サイトの公開

作ったサイトは公開することで、就職・転職活動で見てもらえるようにしましょう。

ポートフォリオサイトの作成の流れ

ポートフォリオサイトを作る大きな流れを理解しよう

  • ステップ1

    ステップ1

    サイト作成の目的の明確化

    ポートフォリオサイトを作る目的は何でしょうか。 就職・転職のためのアピールなのか、自分の学習ようなのか。 まずは、その点を明確にしましょう。

  • ステップ2

    ステップ2

    サイトのデザイン決め

    ポートフォリオサイトのデザインを決めましょう。 色々なサイトをみて、自分が作るサイトのデザインの参考にしましょう。

  • ステップ3

    ステップ3

    サイトの作成

    どのようなポートフォリオサイトにするか決まったら、 実際にポートフォリオサイトをHTMLとCSSを使って作っていきましょう。

    【参考】Web基本のまとめ
  • ステップ4

    ステップ4

    サイトの公開

    ポートフォリオサイトを作ったら、せっかくなので公開しましょう。 サイトの公開は、レンタルサーバを使うのが一番簡単。 そんな中でもロリポップサーバをオススメします。

  • ポートフォリオ
    サイトの
    公開完了!

ポートフォリオサイトを作るための初心者向けWeb入門

初心者向けの入門記事やWeb入門(HTML/CSS/javaScript)をまとめています。

サイトをチェック
学ぶパンダ
初心者向けの記事
サイトをチェック
初心者のためのWeb入門2
初心者向けのHTML/CSS/javaScriptの解説

ポートフォリオサイトのデザイン

ポートフォリオとして参考にできるサイトを紹介します

サイトをチェック
参考レイアウト1
シンプルな縦スクロール
サイトをチェック
参考レイアウト2
サイドメニューレイアウト
サイトをチェック
参考レイアウト3
1ページのファーストビュー

ポートフォリオサイトの公開方法

公開したポートフォリオサイトは、

転職サイトなどの自分のプロフィールの欄にサイトのURLを記載しておきましょう。

この3つのレンタルサーバがオススメです

ロリポップ

初心者に優しいので初めてのレンタルサーバとしてオススメ

ロリポップをチェック

ConoHa WING

サイトの表示スピードや安定性も欲しい人にオススメ

ConoHa WINGをチェック

お名前.com

サイトに独自のドメインを使いたい人にオススメ

お名前.com をチェック

参考記事

ポートフォリオサイトの作成、公開に関する参考記事を紹介

ロリポップレンタルサーバーの契約の方法

初心者の方に、オススメしている、 ロリポップレンタルサーバ オススメの「ロリポッ...

ロリポップをチェック
作成したWebデザインをロリポップレンタルサーバにアップロードしよう

初心者の方の中で、Webデザインを作って、 アップロードするサーバを探しているな...

ロリポップをチェック
Webデザインやフロントエンドのポートフォリオは公開してアピール

プログラミングやWebデザインの初心者が、 Photoshopなどで作った画像、...

ロリポップをチェック