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

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

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

掲載する内容を決める

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

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

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

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

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

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

プロフィール

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

スキル紹介

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

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

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

連絡手段

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

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

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

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

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

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