ポートフォリオ 作り方 web 6

Workship様（転職活動に！Webデザイナーのおしゃれなポートフォリオサイトまとめ30選）, ferret様（ポートフォリオをもっとカッコよく！上手なポートフォリオサイト20選）. コトバンクには、こんな感じで載っていました。, ペルソナとは仮製品やサービスのユーザー像を仮想の人物として定義したものをいう。実際のユーザーにはさまざまな人が含まれるが、ペルソナではその中で最も重要な人物像に焦点を当てることによって、具体的なユーザー像をイメージしやすくなるメリットがある。, ペルソナは、私の中では、「現実にいそうなターゲット」と定めています。仮想サイトをどんな人が見そうなのか・どんな人に見てもらいたいのか、属性・生活・行動などを考えます。, また、ペルソナを考えるにあたって、「なんとなくこんな感じ」より、「こういう理由でこう定めている」の方が、説得力があります。, 私の場合は、データを用いてロジックを組み立てることが好きだったこともあり、定量的なアプローチでペルソナを導きました。, データ量がかなり多く、書いたらすごい量になってしまったため、具体的なアプローチについては今回は割愛させていただきます(´・ω・｀), それによって、アプリ・スマホファースト・PCファーストなどどういったサイトにするか、コンテンツやデザインの必要な要素や優先すべき要素は何かなどの参考になります。, 美容院サイトの場合は、30代の女性が「通勤電車の中でスマートフォンにて通いたい美容院をなんとなく探す」ことを利用シーンとし、サイトに流入するまでの流れを考えました。, ペルソナや利用シーンが見えたら、ペルソナにとって必要な情報を洗い出していきます。ペルソナにとって必要な情報が洗い出せたら、ペルソナのニーズを満たせるコンテンツを考えます。, たとえば、美容院サイトの場合、ペルソナが「居心地の良い空間を求めている(=ペルソナにとって必要な情報)」のであれば、「お店が提供しているサービス、内装、スタッフの雰囲気（=ペルソナのニーズを満たせるコンテンツ）」を記載します。, まず、上で定めた各コンテンツの優先順位に沿って、「ヘッダー→コンセプト→特徴→……」など全体の流れを決めていきます。そのあと、ヘッダーの中には何のコンテンツを入れるのかなど、詳細を詰めると良いでしょう。, このときそれぞれの項目ごとに、ユーザーにどういった感情を抱いてほしいか、ユーザーの感情の流れを考えると良いでしょう。ユーザーの感情の流れを考えてみることで、「写真か文字どちらで見せるべきか」「どういった表現が良いか」などをユーザー目線で考えることができると思います。, 美容院サイトの場合は、ユーザーがサイトに訪れてから予約するまでの感情の流れを考え、美容院側が伝えたい情報の優先順位と照らし合わせてコンテンツを組み立てました。, 今までは、左脳を使ってゴリゴリ言語化していましたが、ここではいかに妄想するかが大切です。, 「設定したペルソナ像」「対象物の世界観」の2軸より、理想のイメージをできる限り妄想し、思いつく写真やイラストなどを1つのボードに集めます。, 美容院サイトの場合は、こんな感じで写真を集めていました。 @websae2012さんをフォロー 特に「デザインのここが得意」「コーディングのここが得意」といった得意分野があればそれが強みになるので、ポートフォリオに必ず載せるべきです。, 最初から自分で作ろうと思うと、Webデザイナー未経験の人では難しくて作成が進まない可能性があるからです。 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); ④ポートフォリオ-セレクションの略。, ここでいうポートフォリオは、「②写真家やデザイナーなどが自分の作品をまとめたもの」ですね。自分が作ったサイトなどの制作物をまとめたもの。, まとめ方は、ポートフォリオサイトとしてサイトにまとめる方法、WordやPowerPointにまとめてPDFで出力する方法、画像にしてフォルダにまとめる方法などさまざまです。, デザイナーは専門性が必要となる職業のため、就職や転職をする際、履歴書や職務経歴書に加えてポートフォリオが必要になるケースがほとんどかと思います。ポートフォリオ制作はかなり大変なことですが、裏を返すと、ポートフォリオを作れば、実務未経験でもデザイナーとして転職できる企業さんの幅は広がります。, というのも近年、UXデザインなどデザイナーに求められる領域が広がったこともあり、デザインの価値が高まっている一方、デザイナー不足の企業さんは多い状況です。デザインの実務経験がなかったり、大学・専門学校でデザインを学んでいなかったりしても、デザインスキルが企業さんの求めるレベルに達していれば、採用される可能性も高まっているように思います。, またポートフォリオは、作品自体のデザインスキルだけでなく、作品やポートフォリオ自体の企画力・見せ方などさまざまなスキルをアピールすることも可能です。, 「分析が得意」「企画力がある」「キャッチコピーやライティングができる」など、自身の得意なことをポートフォリオに盛り込むことで、「この人はデザインスキルさえ身につけば即戦力になってくれそう」と企業さんに思ってもらえるのです。, 今回は【載せる作品づくり編】として、「①ポートフォリオに載せる作品をつくる」ことを、私が実際に作った作品の事例とともにお話しします(＾ω＾), 「いや、作品ってなんだよ、デザイナーやなかったし……」 「2」は求められているスキルや作品性が決まっているような状況。 これを勘違いして、ただ作品を載せるだけのポートフォリオを作ってしまうと、相手にはWebデザイナーとしてのスキルがあることしか伝えることができない可能性があります。, 特に就職や転職の際は、あなたがどういう人なのか、知りたいというのが面接の担当者の気持ちでしょう。 すでにPhotoshopやIllustratorを使用している人は、無料で使うことが可能です。, ポートフォリオはなるべく多くのものを見て参考にする必要があります。 ではそれぞれのページの作り方を、役割や盛り込むべき要素、作り込む際のポイントと共に解説していきます。, ポートフォリオサイトのトップページは、あなたの第一印象を決める大切な要素です。採用担当者や、検索結果画面から流入した潜在顧客がポートフォリオサイト全体に目を通すか否かの判断材料となるので、アイキャッチなデザインにしつつもわかりやすいページとなるように工夫しましょう。, ポートフォリオサイトのトップページは、あなたの才能やスキルをアピールするための恰好な場所です。ぜひあなたの代表的な作品や力作を厳選して掲載しましょう。作品を 1 つに限って大きく掲載する王道スタイルから、近年の Web デザイントレンドに習いグリッドレイアウトを使って複数の作品を掲載する方法など、トップページの見せ方は様々です。迷ってしまったらポートフォリオサイトのテンプレートなどを参考に、あなたの好みにしっくりくるレイアウトを見つけましょう。, 作品を魅せることに注力しすぎるあまり、氏名やビジネス名が小さすぎてわかりにくいポートフォリオサイトをよく見かけます。これでは「なんだかすごい」けれど「よくわからない」サイトになってしまいます。ポートフォリオサイトの主役は、あくまで「あなた」です。誰かの作品集ではなく、「あなたの作品集」であることが一瞬でわかるように、個人名もしくは屋号名などのビジネス名は、明確に記載しましょう。, 個人名やビジネス名は明記しても、職種や肩書きを表記しないのもよくあるミスの一つです。ポートフォリオサイトのトップページは、見た人が「一瞬でわかる」ことが重要です。掲載作品から職種や肩書きを察してもらうことを期待すしているのでは、取れる案件も逃してしまいかねません。例えば「山田花子/インテリアデザイナー」や「山田太郎｜クリエイティブディレクター」などのように、名前の後に「 / 」「 | 」を入れたり、名前の後に改行したりすることですっきりとわかりやすく記載することができます。, 掲載している作品にフォーカスを当てたいあまりに、サイトのナビゲーションメニューのサイズが小さすぎたり、サイトの隅っこにさりげなく設置しているポートフォリオポートも多いものです。もっと詳細を知りたいと思った閲覧者が、すぐに他のページへ移動しやすいように、ナビゲーションメニューをわかりやすい場所に設置しましょう。ここでナビゲーションがわかりにくいと、サイトから離脱してしまう確率を高めてしまいます。, プロフィールページ（もしくは「 About 」ページ）では、学歴や活動履歴だけでなく、あなたの仕事におけるモットーや情熱を簡潔にサイト訪問者に伝えましょう。採用担当者や案件の発注者は、デザインスキルや能力だけではなく、人間性や個性も同様に重視していることが多いからです。例えば、あなたが案件の発注側だとしたら、スキルが同等の候補者が 2 名いた場合、人物像がより伝わってくるポートフォリオを持っている候補者に先にコンタクトするでしょう。, プロフィールページに最低限必要な項目は下記の通りです。まずは思いつく限りメモに書き出してみて、その後プライオリティ付けをしながらサイトに載せるべきものを絞っていきましょう。, (8) Facebook ページや Twitter 、LinkedIn などの SNS アカウントへのリンク, プロフィールページのコンテンツはテキストが中心になりますが、ページのビジュアルにも力を入れ、デザインと文字コンテンツの両方で個性を表現することを意識しましょう。プロフィールに載せる画像は、自身の顔写真を含めて 2 〜 3 点を目安に掲載すると良いでしょう。, 実積ページ（「もしくは「 Works 」や「ポートフォリオ」）はポートフォリオサイトのメインコンテンツです。実績集を作る上での留意したいポイントは、各作品がどのように生まれたかというプロセスも併せて表現することです。こうすることでデザインスキルのみではなく、企画力や調整力なども伝えることができ、採用率や受注率を高めることができるでしょう。下記の 2 点を参考にし、実績ページを準備しましょう。, たくさんアピールしたいあまり、これまで手掛けてきた作品やプロジェクトを全て掲載したくなってしまうのが、ポートフォリオ作成時の心理です。しかし、ポートフォリオは量よりも質が重要です。最大でも 10 〜 20 を上限として、厳選した作品のみに絞って掲載しましょう。特に就職活動のためのポートフォリオ作成時には、応募する企業や、仕事内容に関連する実績を選ぶことも重要です。, 単に作品を羅列して掲載しているポートフォリオサイトをよく見かけますがこれはNGです。説明文がないと、あなたの価値や個性を最大限に伝えることができないからです。具体的には下記の項目を網羅するようにしましょう。ただし情報の盛り込み過ぎは禁物です。各項目につき多くても 2 〜 3 行までとし、簡潔に表現することを心がけましょう。, フリーランス案件を受注することが目的のポートフォリオサイトの場合、サービス概要のページを設けるようにしましょう。受注することができるタスクやプロジェクト内容を明記しておくことで、コンタクトする側の心理的障壁が低くなり、コンタクトを貰える確率がグンと上がるからです。, なお、サービス概要に料金を載せるべきか否かという点は、業界やビジネスの戦略によるので、一つの正しい答えはありません。料金を表示するにもさまざまな方法があり、最低料金のみを表示したり、だいたいの価格帯を表示したりすることで、全く予算に見合わない顧客を見切ることができるなど、サイト上に料金を提示する利点もさまざまです。逆に、各クライアントと相談しながら料金を決めたい場合は、問合せフォームを細かくカスタマイズして、出来るだけ多くのニーズを汲み取る工夫をしましょう。, サイトを見て興味を持った人がコンタクトできるように、「問い合わせフォーム」の設置や連絡先の明記は必ず行いましょう。特にフリーランス案件を受注することが目的のポートフォリオサイトの場合、お問い合わせページはとても重要な要素です。コンタクト率を上げるために、お問い合わせフォームへのリンクはサイト内の全てのページにわかりやすく配置するようにしましょう。また、「 3 営業日以内に返信します。」など、返信の目安を記載しておくと親切です。, ファビコンは PC のブラウザのタブの部分に小さく表示されるアイコンです。デザインスキルを伝えることが目的のポートフォリオサイトでは、このような小さな部分でも気を抜かないことが大切です。, すでに自分のビジネスのロゴを持っている場合は、ロゴをファビコンとして設定しましょう。まだロゴを持っていなくて、イラストレーターやグラフィックデザイナーなど絵を描くのが本業ではない場合は、ロゴ作成サービスなどを利用して、ファビコンを作ってみましょう。, ポートフォリオサイトと SNS アカウントは必ず連携するようにしましょう。サイト上には限定した数の作品や実績しか掲載できませんが、SNS アカウントでその他の多くの作品を見てもらうことがでできるからです。あなたへの評価をさらに上げることに繋げれるかもしれません。SNS アカウントへのリンク先は、サイトのヘッダー部分に含めるなどして、全てのページ上に表示することで、クリック率をあげる工夫もしましょう。もちろん SNS のアカウントには、あなたのポートフォリオサイトの URL を載せることを忘れずに。, ポートフォリオサイトはあなたのキャリアを左右する、とても重要なツールです。必ず独自ドメインを取得して運営しましょう。ドメイン名を選ぶ際には、自身のブランドを表現したり、ビジネスの認知度を向上したりといった利点があるからです。, ポートフォリオサイトの独自ドメインは、覚えてもらいやすいように、また一目見ただけであなたが誰なのかわかるように、戦略的に選びましょう。例えばあなたが Hanako Yamada という名の写真家であれば、氏名だけをドメイン名に入れた「hanakoyamada .com」より、氏名と専門分野をドメイン名に入れた「hanakoyamada-photography.com」としましょう。より詳細なドメイン名の選び方は過去の記事「あなたのホームぺージへ適切なドメイン名の選び方」を参考に、ドメイン名を考えてみましょう。, ここからは、 Wix を使って作成されたポートフォリオサイトの例を6つ紹介するので上記のポートフォリオの作り方のポイントと照らし合わせてみましょう。お手本となるような要素がたくさん詰まっています。効果的なポートフォリオサイトを作成するための参考として、各サイトを見てみましょう。, 美しい植物やかわいらしい動物、美味しそうな食べ物をモチーフに、柔らかなイラスト作品を手掛けるイラストレーターのむらもと ちひろさん。トップページでは、ゆっくりなスピードのスライドショー機能を使って、複数の作品を1点づつ見せることに成功しています。複数の作品をじっくり見てもらいたい場合に、真似したいテクニックです。, 数々のイラストレーションコンテストで受賞歴のあるノナカ正視さん。サイト中のギャラリーでは、作品にマウスオーバーすると作品タイトルが表示されるデザインになっています。また、自己紹介の「About Me」ページと「Contact」ページに挿絵を入れることで、イラストレーターのポートフォリオらしいサイトに仕上がっています。, ライブペイント活動など音楽にも携わっているイラストレーターのツチヤヒトミさん。作品集である「ILLUSTRATION」のページは、作品によって表示サイズを変え、見せ方に工夫を施しています。また、手書き風の署名ロゴ「ht」を配置することで、オリジナリティと暖かみさを表現し、ブランドイメージを視覚的に認識するための上手な使い方をしています。さらに、「WORKS」に過去の実績を掲載することで、クライアントにとってイメージの湧きやすいサイトとなっています。, 劇作家、演出家、パフォーマー、​映像作家、そしてグラフィックデザイナーと、多方面で活躍する​​大串 潤也さん。「ABOUT」ページではご自身の写真と共に、活動内容と自己紹介文、仕事に対する姿勢などが簡潔にまとめられていて、大串さんの人間性がよくわかるポートフォリオとなっています。, 国内外で多くの個展開催や受賞歴を誇る実力派アーティスト、森洋史さん。トップページでは、作品そのものではなく自身の個展の一角を掲載することで、実力を上手くアピールしています。コンタクトフォームのページには背景に拡大されたイラスト作品を使うことでユニークでインパクトのある仕上がりとなっています。また、こうした遊び心から、森さんというアーティストの人物像がよく伝わってくる点にも注目です。, 数々のフォトコンテストで受賞歴のあるフォトグラファーの Yasutomo Kato さん。ウェルカムページでは、息を呑むような美しい風景写真を、画面全体にスライドショーを用いて表示しています。また、「Gallery」ページで季節やジャンルごとの高画質な画像をスライドショーで見せることで、シンプルなサイト構造だからこそ作品のクオリティを前面に押し出したポートフォリオサイトとなっています。Yaコンタクトフォームのページの背景にも写真を使い、サイトの隅々まで写真家らしさを発揮するデザインとなっています。, いかがでしたでしょうか。Wix ならポートフォリオサイトを簡単に作ることができます。まずは無料で試してみましょう！, Wix.com は世界中で1億6,000万人以上に選ばれている無料ホームページ作成サービスです。難しい知識は必要なし。デザインと機能性に優れた本格ホームページを誰でも簡単に作成できます。, ビジネスを宣伝したり、作品を公開したり、ネットショップを開設したり、または新しいアイデアを試したり。 顧客や就職先に自分の価値をアピールすることを目的として、実績やスキルなどをまとめた作品集である「ポートフォリオ」。アートやデザインなどのクリエイティブな分野で活躍するプロには欠かせない仕事道具の一つです。しかしその必要性は理解していても、ポートフォリオの構成や作り方がわからないという悩みは以外と多いのではないでしょうか。, この記事では、ポートフォリオサイトの作り方のポイントを、効率的に仕事を取るための観点から解説しています。記事の最後には６つの事例も掲載していますので、ポートフォリオサイト作りの参考にしてみてください。この記事を読み終わる頃には、効果的なポートフォリオサイトを作成する準備ができているはずです。, まず最初に、作ろうとしているポートフォリオサイトの目的を明確にしましょう。目的によってサイトの構成はもちろん、強調すべきアピールポイント、掲載する作品の選び方や、数、順番が異なるからです。, 例えば就職活動時に企業に提示することを目的としたポートフォリオの場合。応募する企業のことや求人内容はもちろん、業界についても事前によく調べましょう。求められている人物像やスキルに応えるように自己紹介文を書いたり実績をアピールすることが、採用確率を上げるためには大切です。また、ポートフォリオサイトも送付する企業ごとにコンテンツを最適化しましょう。応募する企業ごとにサイトを更新したり、場合によっては異なる URL のポートフォリオサイトを作成することも必要です。, 一方で、オンライン上で広く集客してフリーランス案件を受注することを目的とするポートフォリオサイトでは、サイト訪問者に「この人への発注を検討したい」と思わせ、コンタクトしてもらうことがゴールです。この場合、サービス紹介ページを充実させたり、コンタクトフォームへのリンクをサイト内の分かりやすい箇所に配置したりなどの工夫も重要です。加えてポートフォリオサイトの SEO 対策も意識する必要があり、サイト内にブログを併設するのも効果的です。多くの検索ワードで上位表示させ、サイト訪問者を増やせるほど、案件の受注につながるからです。, このように「何のために作成するのか」「誰に見て欲しいのか」「見てもらった後にどのようなアクションを取って欲しいのか」をしっかり決めてから作成に取り掛かることで、仕事を獲得できるポートフォリオサイトを作ることができます。, ポートフォリオサイト作成の目的を明確にしたら、実際にサイトの構成を考えていきましょう。構成には唯一の正解はありませんが、最低限含めたいページは下記の５つです。ポートフォリオサイトの目的によっては他にも必要なページがあるかもしれません。その場合は、この ５ つに縛られずに、必要に応じてページを加えるようにしましょう。, 下記 03.〜07.