Webデザイン

ポートフォリオサイトの作り方と公開までの手順を解説

更新日:

このブログでは私自身がプログラミング、Web関係、生活していて経験した悩んだことを同じように悩んでいる人の手助けになるような情報を発信していきます。

ポートフォリオサイト作成から公開までの手順

  • 1:ワイヤーフレーム、大まかな設計図を作る
  • 2:コーディング
  • 3:インターネット上に公開

デザインに悩んだら

マイナビクリエイター

というサイトに真似したくなるポートフォリオサイトが沢山あるので、是非参考にしてみてください。

ポートフォリオサイト

私のポートフォリオサイトも載せておきます。

1:ワイヤーフレーム、大まかな設計図を作る

ワイヤーフレーム作成でオススメするツール

  • Adobe XD(有料)
  • Adobe Photshop(有料)
  • Figma(無料)

就職、案件を行う場合はAdobe XD、Adobe Photshop、Adobe Illustratorのスキルが必要になってくるので今のうちに使えるようになっているのが良いと思います。

サイト構築の例

  1. ヘッダーメニュー
  2. プロフィール(名前・年齢・出身・経歴・意気込みなど)
  3. できる事・スキル(何ができて・何ができないかを明確化)
  4. 作品・実績(模写でも全然良いと思います)
  5. 問い合わせフォーム(なくてもいいのですがサーバーに公開するならphpで作って自己PR!)

2:コーディング

ワイヤーフレームができたら、いよいよコーディングです。

使用する言語について

HTMLとCSSだけで作る静的なサイト or jsやjQueryも使った動的なサイト

もし静的なサイトにしてしまうと、見ている人が「本当にこの人はjsやjQueryを使えるのか?」と信頼されないので、導入できるアニメーションは積極的に使い自己PRしましょう!(多くて6つくらい)

最低限導入したほうが良いアニメーション

  • ハンバーガーメニュー
  • マウスホバー
  • スムーススクロール

3:インターネット上に公開

コーディングが終わったら最後にインターネット上に公開します。

お名前.com

まずお名前ドットコムでドメインを取得します。(これがドメイン→google.com)ドメイン名の末尾はなんでもいいのですが.comが無難だと思います。取得方法は難しくないので割愛します。

レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】

次にエックスサーバーを契約します

  1. 「お申し込みはこちら」
  2. 「新規申し込み」
  3. サーバーIDを設定してプランは一番安いX10プラン
  4. 登録情報を入力して同意
  5. SMS・電話承認を行う
  6. 24時間以内に入力したメールアドレス宛に■重要■と書かれたメールが届くので情報をメモして保管
  7. インフォパネルにログインして支払いを済ませて終了

最後にサーバーとドメインを紐付けしてアップロードします。

  1. 【お名前.com】会員情報変更 完了通知というメールにお名前IDをコピー
  2. お名前.com Naviログイン にログイン後「TOP」に行き
  3. 「ドメイン一覧」
  4. ネームサーバーの「その他」
  5. ネームサーバーの選択「その他」
  6. 「その他のネームサーバーを使う」にクリックし、ネームサーバー1:ns1.xserver.jpからネームサーバー5:ns5.xserver.jpまで追加して「確認」(反映には最大72時間かかります。)
  7. エックスサーバーのサーバーパネルにログイン
  8. 「ドメイン設定」
  9. 「ドメイン設定追加」
  10. ドメイン名を入力し2つのチェックボックスにチェックし「確認画面へ進む」
  11. 「ドメイン設定の追加(確定)」(反映には数時間かかります。)
  12. インフォパネルにログインし、サーバーの「ファイル管理」
  13. ドメイン名のファイルをクリックしpublic_htmlをクリック
  14. ファイル内に作ったhtmlファイル、cssファイル、その他ファイルをアップします。(画像はimgフォルダを作りその中にアップします、この時htmlのコードをhref=”img/〇〇.〇〇〇”にするのを忘れずに)
  15. これで全ての工程が終わったのでドメイン名を検索し、ちゃんと表示できてるか確認します

オススメしている本

他の投稿

-Webデザイン

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.