「どうしてポートフォリオを作るのだろう」
「ポートフォリオの作り方を知りたい」
「どういうデザインにしたらいいだろう」
こういった悩みに答えます。
目次
- ポートフォリオを作ると良い理由
- ポートフォリオの作り方
ポートフォリオを作ると良い理由
- 就職、転職、案件受注を有利にする為
- 実績や力量を知ってもらう為
- 簡単な自己紹介で少し自分について知ってもらう為
ポートフォリオの作り方
- １：ワイヤーフレーム、大まかな設計図を作る
- ２：コーディング
- ３：インターネット上に公開
１：ワイヤーフレーム、大まかな設計図を作る
ワイヤーフレーム作成でオススメするツール
- Adobe XD（有料）
- Adobe Photshop（有料）
- Figma（無料）
就職、案件を行う場合はAdobe XD、Adobe Photshop、Adobe Illustratorのスキルが必要になってくるので今のうちに使えるようになっているのが良いと思います。
サイト構築の例
- ヘッダーメニュー
- ↓
- プロフィール（名前・年齢・出身・経歴・意気込みなど）
- ↓
- できる事・スキル（何ができて・何ができないかを明確化）
- ↓
- 作品・実績（模写でも全然良いと思います）
- ↓
- 問い合わせフォーム（なくてもいいのですがサーバーに公開するならphpで作って自己PR！）
デザインに悩んだら
マイナビクリエイターに真似したくなるポートフォリオサイトが沢山あるので、是非参考にしてみて下さい。
２：コーディング
ワイヤーフレームができたら、いよいよコーディングです。
使用する言語について
HTMLとCSSだけで作る静的なサイト or jsやjQueryも使った動的なサイト
もし静的なサイトにしてしまうと、見ている人が「本当にこの人はjsやjQueryを使えるのか？」と信頼されないので、導入できるアニメーションは積極的に使い自己PRしましょう！（多くて６つくらい）
最低限導入したほうが良いアニメーション
- ハンバーガーメニュー
- マウスホバー
- スムーススクロール
３：インターネット上に公開
コーディングが終わったら最後にインターネット上に公開します。
まずお名前.comでドメインを取得します。(これがドメイン→google.com)ドメイン名の末尾はなんでもいいのですが.comが無難だと思います。取得方法は難しくないので割愛します。
レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
次にエックスサーバーを契約します。
- 「お申し込みはこちら」
- ↓
- 「新規申し込み」
- ↓
- サーバーIDを設定してプランは一番安いX10プラン
- ↓
- 登録情報を入力して同意
- ↓
- SMS・電話承認を行う
- ↓
- 24時間以内に入力したメールアドレス宛に■重要■と書かれたメールが届くので情報をメモして保管
- ↓
- インフォパネルにログインして支払いを済ませて終了
最後にサーバーとドメインを紐付けしてアップロードします。
- 【お名前.com】会員情報変更 完了通知というメールにお名前IDをコピー
- ↓
- お名前.com Naviログイン にログイン後「TOP」に行き
- ↓
- 「ドメイン一覧」
- ↓
- ネームサーバーの「その他」
- ↓
- ネームサーバーの選択「その他」
- ↓
- 「その他のネームサーバーを使う」にクリックし、ネームサーバー1：ns1.xserver.jpからネームサーバー5：ns5.xserver.jpまで追加して「確認」（反映には最大72時間かかります。）
- ↓
- エックスサーバーのサーバーパネルにログイン
- ↓
- 「ドメイン設定」
- ↓
- 「ドメイン設定追加」
- ↓
- ドメイン名を入力し２つのチェックボックスにチェックし「確認画面へ進む」
- ↓
- 「ドメイン設定の追加(確定）」（反映には数時間かかります。）
- ↓
- インフォパネルにログインし、サーバーの「ファイル管理」
- ↓
- ドメイン名のファイルをクリックしpublic_htmlをクリック
- ↓
- ファイル内に作ったhtmlファイル、cssファイル、その他ファイルをアップします。（画像はimgフォルダを作りその中にアップします、この時htmlのコードをhref=”img/〇〇.〇〇〇”にするのを忘れずに）
- ↓
- これで全ての工程が終わったのでドメイン名を検索し、ちゃんと表示できてるか確認します
さいごに
今回、ポートフォリオを作ると良い理由、作り方についてご紹介しました。
この記事を観てくれた人が少しでも参考になれたらと思います。
