ポートフォリオサイトの作り方

  • URLをコピーしました!

ポートフォリオとは、自分をアピールするためのプロフィールや、今まで作成した制作実績や課題などを掲載したWEBサイトのことです。就活やフリーランスで活動する場合は必須のアイテムといえます。

「WEBサイトの作成ができます!」と言っても、相手はあなたが、どういったサイトを作れるのか?デザイン力があるのか?あなたの実力を測ることができません。
また「制作実績はありますか?」と言われた時に、待たせることなくデザインを掲載したウェブサイトのURLを相手に送ってすぐにその場で、制作実績を見せることができるようになります。

目次

ポートフォリオの制作行程

下記の行程を踏まえて早速作成してみましょう。

  1. 掲載する内容を決める(ワークスの準備)
  2. デザインカンプの作成
  3. HTMLのマークアップ(レスポンシブサイト用のコーディング)
  4. CSSを使ったデザイン指定(レスポンシブサイト用のコーディング)
  5. JavaScript を使った動的な表現
  6. サーバーにアップロード(公開)

掲載する内容を決める

ポートフォリオは、「紙ばさみ」「折りかばん」「書類入れ」といった意味で、元来、自分の作品を鞄に入れて、持ち回りながら営業をするといったイメージになります。ポートフォリオサイトでは、作成した作品をHTMLコードを使ってウェブサイトとして掲載していきます。主に、ポートフォリオサイトは、自分の作品を公開するサイトです。

また、営業の役割も持っているので、自己紹介・プロフィールを掲載すること。相手に自分のスキルを公開してアピールします。相手に興味を持ってもらったら、そのままにならないように、なにかしらの連絡手段が必要です。

  1. 作品
  2. プロフィール
  3. スキル紹介
  4. 連絡手段

何を掲載するのか?掲載する作品作り

作品点数は、多ければ多いほどアピールはできます。今まで作成したコンテンツがあれば、デザインカンプやコーディングしたサイト、コンセプトやメーケティングまでしっかりと掲載しましょう。ただし、お仕事で発生している場合はクライアントの許可は必ず必要です。

またお仕事として発生していない場合や、まだ今からお仕事を受託しようと考えている、就活のためのポートフォリオだ。という場合は、練習してきたコンテンツや、ポートフォリオ用に新しく考えたサイト・デザインカンプ・バナー・ロゴなどを掲載します。

掲載作品の制作が一番時間のかかるところです。今まで練習してきたデザインやサイトをブラッシュアップします。作品数が多い方がベストですが、闇雲に数だけこなすのはよくありません。1つ1つ丁寧に作品への思い入れを感じさせるものが必要です。

プロフィール

自分のプロフィールを掲載します。履歴書とは異なるWebサイトへの掲載のため、個人情報になることは極力さけてください。写真を掲載する場合も、家の近所で撮影や、正面を向いていない写真がベストです。またイラストでの掲載もおススメです。

スキル紹介

ウェブサイトを作成することができます・・・では、どんなスキルをお持ちなのか漠然としています。作品だけで汲み取って欲しいというのは多少酷なので、どういったジャンルの何ができるのかを明確にしましょう。

  • HTML5/CSS3・・・・コーディングはわりと得意
  • Photoshop・・・写真加工は20点・バナー10点以上は作ったことがある
  • Illustrator・・・ロゴマークや名刺を練習中
  • Adobe XD・・・ワイヤーフレームやデザインカンプが作れる
  • JavaScript/jQuery ・・・プログラミングは勉強中だが外部からのライブラリの設置はできる
  • WordPress/PHP・・・勉強中

スキル掲載では自信がないから少し控えめに掲載される傾向があります。それはスキルに「得意です!」と書いて、実際に仕事を振られた時に、期待された結果にならなかったらどうしよう〜といった思いがそこにあるからです。

これは自己判断になるので、自信を持ちましょう!と言いきれないところもありますが、あなたが思っているより、できている自分がそこにいますよ。大丈夫です。

連絡手段

メールアドレスの掲載や、メールのアイコンをクリックしてメールアドレスにメールが来るようにするは、
NGです

Webサイトにメールアドレスを掲載すると、迷惑メールが増える結果につながります。メールアドレスを収集するBOTというプログラムでアドレスは収集されていますので、気をつけましょう。

連絡手段を設けたい場合は、Twitter ・ Instagram などのSNSのメッセージ機能も便利です。

またGoogle Formなどを使ってお問い合わせフォームを、ポートフォリオサイトの、HTML部分に貼り付ける「埋め込みコード」などもおすすめです。

埋め込みコードだと、独特なGoogle のデザインになるので、自身のポートフォリオにはマッチしないな〜となる場合は、自作のHTM/CSSにGoogleFormを取り込むことができます。

次は、掲載する内容を具体的に、デザインカンプにしてみましょう。今回は、AdobeXDを使って作成してみます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次