ポートフォリオに作品を載せれば面接官はあなたの力量を判断できますが、作品を見た上で考える必要があるので瞬時には伝わりません。, それではポートフォリオの意味がないので、あなたのスキルをすぐに分かってもられるようにどのようなスキルがあるか記載をしましょう。 つまり、作品がなければ説得力に欠けるということです。, 作品についてのコメントを記載することも忘れてはいけません。 あなたの伝えたいことが伝えられるのであれば何も問題ありません。, ポートフォリオの作成に不安がある人のために、ポートフォリオを簡単に作ることが出来るサービスを3つご紹介します。, 基本は無料で使うことが出来ますが、サービスによっては機能を全て使うなら有料になるものもあります。 この記事ではポートフォリオサイトの作り方のポイントを、いかに仕事をとるかという観点から解説しています。6つの実例付き。この記事を読み終わる頃には、効果的なポートフォリオサイトを作成する準備ができているはずです。 作家/モデル/ライター/エンジニア/美容師・ヘアメイクアーティスト/グラフィックデザイナー/etc. コトバンクには、こんな感じで載っていました。, ペルソナとは仮製品やサービスのユーザー像を仮想の人物として定義したものをいう。実際のユーザーにはさまざまな人が含まれるが、ペルソナではその中で最も重要な人物像に焦点を当てることによって、具体的なユーザー像をイメージしやすくなるメリットがある。, ペルソナは、私の中では、「現実にいそうなターゲット」と定めています。仮想サイトをどんな人が見そうなのか・どんな人に見てもらいたいのか、属性・生活・行動などを考えます。, また、ペルソナを考えるにあたって、「なんとなくこんな感じ」より、「こういう理由でこう定めている」の方が、説得力があります。, 私の場合は、データを用いてロジックを組み立てることが好きだったこともあり、定量的なアプローチでペルソナを導きました。, データ量がかなり多く、書いたらすごい量になってしまったため、具体的なアプローチについては今回は割愛させていただきます(´・ω・`), それによって、アプリ・スマホファースト・PCファーストなどどういったサイトにするか、コンテンツやデザインの必要な要素や優先すべき要素は何かなどの参考になります。, 美容院サイトの場合は、30代の女性が「通勤電車の中でスマートフォンにて通いたい美容院をなんとなく探す」ことを利用シーンとし、サイトに流入するまでの流れを考えました。, ペルソナや利用シーンが見えたら、ペルソナにとって必要な情報を洗い出していきます。ペルソナにとって必要な情報が洗い出せたら、ペルソナのニーズを満たせるコンテンツを考えます。, たとえば、美容院サイトの場合、ペルソナが「居心地の良い空間を求めている(=ペルソナにとって必要な情報)」のであれば、「お店が提供しているサービス、内装、スタッフの雰囲気(=ペルソナのニーズを満たせるコンテンツ)」を記載します。, まず、上で定めた各コンテンツの優先順位に沿って、「ヘッダー→コンセプト→特徴→……」など全体の流れを決めていきます。そのあと、ヘッダーの中には何のコンテンツを入れるのかなど、詳細を詰めると良いでしょう。, このときそれぞれの項目ごとに、ユーザーにどういった感情を抱いてほしいか、ユーザーの感情の流れを考えると良いでしょう。ユーザーの感情の流れを考えてみることで、「写真か文字どちらで見せるべきか」「どういった表現が良いか」などをユーザー目線で考えることができると思います。, 美容院サイトの場合は、ユーザーがサイトに訪れてから予約するまでの感情の流れを考え、美容院側が伝えたい情報の優先順位と照らし合わせてコンテンツを組み立てました。, 今までは、左脳を使ってゴリゴリ言語化していましたが、ここではいかに妄想するかが大切です。, 「設定したペルソナ像」「対象物の世界観」の2軸より、理想のイメージをできる限り妄想し、思いつく写真やイラストなどを1つのボードに集めます。, 美容院サイトの場合は、こんな感じで写真を集めていました。 ②写真家やデザイナーなどが自分の作品をまとめたもの。 このことから、webポートフォリオを作成すれば間違いありません。, Webだけではなく紙でもポートフォリオを用意しておくと、面接の際にポートフォリオの解説がしやすいです。, 例えば、作品の比較をして面接官にその作品の良さや違いを伝えたい場合、Webポートフォリオだけではモニターの大きなパソコンが無い限り比較しにくいでしょう。, ですが、面接会場にそのような環境が用意されていることはほぼありません。 まずは自分が出来る範囲の技術を使って、この人と一緒に仕事がしたいと思ってもらえるポートフォリオを作るように心がけましょう。. 特に「デザインのここが得意」「コーディングのここが得意」といった得意分野があればそれが強みになるので、ポートフォリオに必ず載せるべきです。, 最初から自分で作ろうと思うと、Webデザイナー未経験の人では難しくて作成が進まない可能性があるからです。 これは特に正解はないのですが、なんとなく定めるより裏付けがあると良いかと思います。, デザイン制作にあたって、欠かせない存在となっているペルソナ。 「絵描くんかな……上手くないんやけど……」, 未経験デザイナーは、そもそもポートフォリオに載せる“作品”がないことが多いかと思うので、ここを乗り越えるのが大変です。むしろ、ここを乗り越えれば、視界がパアアアアアッと広がるでしょう( ´ ▽ ` )ノ, 周りでデザイン依頼をいただけないかアンテナをはり、なるべく多くの作品を作りましょう。友人や知人などからいただく些細な依頼も大事な作品になります。, 私の場合は、Webデザインのお仕事にあまりアンテナを張れていなかったので、実際にある店舗のサイトにおける仮想リニューアルを行いました。実際にある店舗であれば、想像しやすくより現実味を帯びた作品を作ることができるかなと考えたからです。, しかし実際に転職活動をしている際、担当者の方に「実際にクライアントさんがいる作品もあった方がより良かったかな。クライアントさんの目線が含まれるとデザインは変わってくるから、その方がより現実的なデザインになって、こちらとしても想像しやすい」と貴重なアドバイスをいただきました。, デザイン未経験者にとってお仕事を受けるということは難しいかと思うので、無償で何かデザインできるものはないかアンテナを張ってみると良いでしょう。, さあ、作るものが決まったら、その作品における目的・目標を決めましょう。 「2」は求められているスキルや作品性が決まっているような状況。 そこで、今回の記事ではWebデザイナーとしてポートフォリオを作成する際に、ポートフォリオを載せると良い項目をお伝えします。 特に初心者のうちは色々なデザインに触れて、ポートフォリオの参考にしましょう。, そのために、ポートフォリオがまとめてあるWebサイトをいくつかご紹介します。 基本は無料ですが、有料プランにすることで独自ドメインを設定したり広告を非表示にしたりすることも出来ます。 ポートフォリオは単なる作品集ではなく、あなたにどれだけWebデザイナーとしてのスキルがあるんだということを伝えられる履歴書以上に重要なものです。, このことがわかっていないと就職や転職の際に役立つポートフォリオは作れないでしょう。, ポートフォリオとは簡単にいうと作品集や画集のことです。 スマホにも対応(レスポンシブデザイン)しているので、コーディングが苦手な人にもおすすめのサービスです。 に適した作り方ということですね。, 作品をパッと見ただけでは、あなた独自の工夫やそのプロジェクトでクライアントへ提案したことまではわかりませんからね。, 頑張ったところほど個性やオリジナリティが溢れているはずです。そこが、伝わらないのはもったいない。しっかり言葉に変えて説明しましょう。, ひとつのプロジェクトをスキル別に共有することが多いフリーランス。どこを担当したかを伝えることで、正確に自分が持つスキルをわかってもらえます。, ブログを設置して、直近の活動報告に使ったり、職種に関連する有益な情報を発信したりしているフリーランスの方もいますよね。, 簡単に近況がわかるだけで、不思議と親近感が生まれますし、職業に関連する情報が多いと専門性の高さが伝わってきて信頼感を強めます。, 親しみを感じない、信じられない相手と仕事はできませんよね。仕事は、結局のところ人と人とのつながりで生まれるものです。, ポートフォリオを作るときの重要ポイントをおさえたところで、実際にポートフォリオサイトを作っていきましょう。, 難しいスキルは不要です。ネット経由で登録を済ませればブラウザから簡単に作っていけます。, プログラミングコード不要でブラウザから自由にレイアウトを組み、ダイナミックなアニメーション効果を利用した表現力の溢れるサイトを作成できます。, 本来は、デザイナーが思う存分、そのセンスを発揮できるサービスなのですが、ポートフォリオに適したテンプレートも用意されているので、非デザイナーでも今風でおしゃれなポートフォリオサイトを作ることが可能です。, そのファーストビューを最も自信のある作品で覆われたポートフォリオサイト。インパクトは十分。, メイン画像の下にはタイル状に敷き詰められた写真たち。クリックすると拡大表示します。, 先に見せた2枚のテンプレートと異なっているのが、スクロールの方向。横スクロールで作品を回覧できます。, サイトの配色も作品である写真もモノクロで統一。色味がないのに質感がリアルに伝わってきます。, MATCHBOXは、マイナビクリエイターへ登録すると無料で利用できるポートフォリオサービス。, 履歴書も同時に作れたり、プリントアウトして使ったりもできます。まさに就職活動のためのポートフォリオサービスです。, MATCHBOXでは、共通のレイアウトでポートフォリオページを作ります。共通のレイアウトだからこそ、作品の違いが目立つのかも。, 無料でマイナビクリエイターへ登録 Webデザイナーにとってポートフォリオは、どんなスキルがあるのかアピール出来るツールなので就職や転職の際に必ず用意しなければなりません。, ポートフォリオはあなたのWebデザイナーとしてのスキルを表すだけではなく、「あなたがどういった人間なのか」示すものでもあります。 しかも、作ったポートフォリオはスマートフォンやタブレットなど様々なデバイスへ自動的に調節してくれるので、レスポンシブ対応させる必要がありません。 ポートフォリオは「あなたがどういう人」で「どんなことが出来るのか」が相手に伝わって初めてポートフォリオと言えます。 Copyright © Acrovision All Rights Reserved. もしデザインやコーディングなどに得意分野があるなら、そこは詳細に記載することをおすすめします。, 最後に、あなたが今まで作成した作品を載せましょう。 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; (Matchboxはマイナビクリエイターへ登録後、無料で利用できます), 実はポートフォリオに限らずあらゆる種類のウェブサイトを制作できるサービスですが、名前が示すとおりクリエイター向けのサービスで、テンプレートにはユニークでアーティスティックなものが並びます。, まずはギャラリーっぽく一覧で見せておいて、気になる作品についてはクリックしてもらって詳細ページを見てもらう。そんなテンプレートです。, サービスサイトのトップページには、すでに作られたポートフォリオサイトが並んでいます。参考になりそうなものがたくさん。, 使い方はメチャクチャ簡単で、ポートフォリオに載せたい写真をブラウザへドラッグ&ドロップするだけ。, カラフルで親しみのあるイラストが、不規則な大きさで敷き詰められています。眺めていても飽きませんね。, 事例1とは異なり、今度は正確に並べられた写真たち。作品の性質に合わせたレイアウトにすることが重要です。, クリエイターのポートフォリオサイトに必要な機能が揃ってます。そのなかには、なんとEコマースの機能も。, Eコマースとは簡単にいえばネットショップの機能。作品をファンに直接買ってもらうことができます。, ブログの更新も可能です。情報発信がクリエイターにも求められている時代。待っているだけじゃなく自ら情報を積極的に発信することでお客さんをサイトへ集めましょう。, トップページが物語っているように、実績のページではメッセージ性の強い写真が並びます。, 以上が、ウェブ制作以外のフリーランスでも簡単にポートフォリオサイトを作ることができる方法でした。, 新米の頃からでも少しずつポートフォリオサイトを作っていけば、その途中でお仕事の依頼が舞い込んだり、ヘッドハンティングされたり、予期せぬ機会に恵まれる可能性も。, 今回紹介した方法なら難しいスキルは不要なので、非デザイナーの方々もぜひポートフォリオサイトを作ってみてください。, こんにちは! 株式会社ウェブさえの代表者です。 学生・就活生向けのポートフォリオの作り方についてゼロから解説します。ポートフォリオ制作の段取りや気を付ける点、その後の改善についての考え方などをサンプルを交えて分かりやすく解説します。デザイン業界には必須のポートフォリオを効率よく作成する秘訣を全て解説します。 世界観が近い美容院サイトから、対象美容院のイメージ、ペルソナが好きなもの……などさまざまです。, 質の高いクリエイティブがたくさん載っており、項目ごとにピンすることができるので、こんな感じでまとめておくと良いでしょう。, Webページの大まかなコンテンツやレイアウトを示した構成図。主にレイアウトの確認、メニュー構成の確認、要素の強弱の確認などを目的に作成する。, ここでは、コンテンツの順番や、想像したイメージをもとにレイアウトを作っていきます。, ワイヤーフレームは、白とグレーで示されているものが多いかと思います。手書きかデザインツールなど書き方については、やりやすさやそのときの状況によって変わってくるかと思うので、ワイヤーフレームのゴールを自分なりに定めておくと良いでしょう。, また、美容院サイトの場合は、サイトを作るのが初めてだったこともあり、大きさや余白感、フォントや文章などもなるべく正確に作成し、「あとは写真入れて色つけるだけ〜♪」ぐらいにしていました。, デザインは、「位置」「余白感」「大きさ」「フォント」「色」「写真」……などさまざまな要素で構成されています。, 数え出すと多すぎて大変ですが、「デザインの基礎」「らしさの表現」の2つの視点を意識すると良いかと思います。, デザインには、「近接」「整列」「強弱」「反復」と4つの基本原則があります。これは、簡単そうに見えて意外とできていない人も多い原則で、これらを意識して制作すると、非デザイナーでも見やすく綺麗なデザインができるでしょう。, デザインの基礎については、かなりの数の本を読んで勉強したのですが、中でもわかりやすかったおすすめの書籍を2冊載せておきます(^ω^), サイトのゴールにもよりますが、「ただ見やすいだけのデザイン」だと、個性のないデザインとなってしまいます。作成したイメージボードを参考にし、対象物らしさを引き出すデザインを考えましょう。, 集めたイメージの、ミクロな視点(色やフォント、カタチや写真の加工方法など)から、マクロな視点(全体のテイスト、余白感や大きさなど)までしっかり観察すると、「らしさ」のデザインのコツをなんとなく掴めると思います。, 美容院サイトの場合は、まずはデザインの基礎を重視してデザインを作り、あとから「らしさ」を加えていきました。, しかしながら、「考えてつくる」ということは、作品数が少ない未経験デザイナーにとって大事なことかなと思うので、ぜひチャレンジしてみてください。, 次回は②を【作品まとめ編】として、作品を言語化して、ポートフォリオをまとめるための適した媒体選びについて書きたいと思います!, 【2018年春版】デジタルハリウッドSTUDIO上野 by LIGの社会人学生が作成したWebサイトをご紹介します, 頂いたご意見への回答は行っておりません。

.

Band メッセージ 削除 5, 浜辺美波 中村倫也 Gif 4, Windows Update Event Id 6, 歯医者 保険証 毎回 9, ランニング バッグ 100均 20, Airz Seek 違い 9, ブラジリアンワックス 開業 儲かる 9, 4歳 ベッド 落ちる 16, 変圧器 インピーダンス 標準 15, 明治大学 編入 2021 8, アウトランダーphev 充電ケーブル 自作 9, テイ コウ ペンギン 夢 小説 4, Fifa19 ベスト版 違い 5,