b[a]=b[a]||function(){arguments.currentScript=c.currentScript (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js","msmaflink"); (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js","msmaflink"); ||c.scripts1;(b[a].q=b[a].q||[]).push(arguments)}; 新卒就活. 当記事では、Webデザインを職業訓練で学ぶのはアリなのかどうかということについて解説いたします。現役WEBデザイナー兼採用担当者が記事を執筆しているので、採用目線や現場目線で正直に思ったことをお伝えいたします。 ||c.scripts1;(b[a].q=b[a].q||[]).push(arguments)}; ポートフォリオ作成に苦心し、日々頭を悩まされている学生の皆様。お待たせいたしました。2020年度にクリエイティブセンターに新卒入社したuiデザイナー3名のそれぞれがポートフォリオ作成において留意した点を語ってもらうと同時にポートフォリオの一部公開してもらえることになりました。 こちらは 「ポートフォリオ」 と呼ばれる作品集。 デザイナー が自分の作品をファイルし、就職先に「私はこういう作品を作っていました」「こんなこともできます」とアピールするための作品集です。 デザイン系の職種の場合、企業はこのポートフォリオを見て学生の力量を判断します。つ� msmaflink({"n":"デザイン・クリエイティブ業界を目指す人のための ポートフォリオ見本帳","b":"","t":"","d":"https:\/\/images-fe.ssl-images-amazon.com","c_p":"\/images\/I","p":["\/41Ty11xI2-L.jpg","\/514lZ5HvvdL.jpg","\/514iPmXH1kL.jpg","\/51KCHjakvhL.jpg","\/41JuktL8MdL.jpg","\/51sN-zWuo5L.jpg","\/51VcIv7MhVL.jpg","\/51BrBt0sqjL.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E6%A5%AD%E7%95%8C%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE-%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA%E8%A6%8B%E6%9C%AC%E5%B8%B3-MdN%E7%B7%A8%E9%9B%86%E9%83%A8\/dp\/484436829X","t":"amazon","r_v":""},"aid":{"amazon":"1325886"}}); 自分が今までに作成したきたものを一度、作ったものをリスト化して整理してみましょう。ポートフォリオに入れる、入れない問わず、リストアップしましょう。 紙などに適当に書きながら整理していってもいいので自分がわかりやすいようにまとめていきます。自分が過去になにを作ったか、どんなものを作ったものをリスト化すると、後々楽になります。, Step 1.でリストにした作品の中からポートフォリオに載せる（載せたい）作品を選定しましょう。, リスト化した作品が揃ったら、実際にレイアウトしていきましょう。まずはラフ段階なので、簡単に紙などに手描きなどで軽く書いていければいいかと思います。, Webデザインのポートフォリオの場合は、PCサイト（またはスマホサイト）やバナー、イラスト、などがメインになってくるかと思いますので、極力大きく見せることができるレイアウトにしたいですね。ごちゃごちゃさせずに、一つ一つの作品を目立たせ、作品をよく見てもらえるように。 「ここはこんな風にしたい。こんなコメントを入れたい。」などの情報もメモしておくといいかもしれませんね！, ラフ段階でレイアウトが決まったら、ポートフォリオの全体的のデザインしていきましょう。, 色々なデザインなどを参考にして世界でただ１つのオリジナルポートフォリオを作っていきましょう！, カテゴリがわかるように、ページの右上などにアイコンなどを入れて、カテゴリ分けしてあげたりすればわかりやすいかも。いろいろ方法はあると思います！, 私は今までに２冊、新卒活動時にポートフォリオを作りましたが、最初の１冊目のポートフォリオは今、見返すと恥ずかしいほどの出来映えなのです、適当さ加減がでており破り捨てたいところではありますが、思い出としてとってあります。（恥ずかしくて見せれませんが＞＜；）, 私もやってしまいましたが、レイアウトがバラバラだったり、コンセプトの説明が少なかったり、これでは折角作った作品なのに、伝えたいことが伝えられずにデザイナーを目指している人のポートフォリオとしては失格です。, なので揃えた方がいいところは揃えて、レイアウトを考えて配置して、きちんとコンセプトと説明を記入しましょう。私のポートフォリオも最初はこのぐらい酷かったです。, デザインが終わったら印刷し、ファイリングしていきましょう。 おすすめはファイルは30穴のリングファイルです。, リングファイルだと作品が増えた時などに随時追加することができます。かつ30穴だとかっちりとファイリングできます。 書店などにいくと、リングファイルは沢山種類があるので、実際に見て、触って色々見てみるといいかもしれませんね。ちなみに私は、家電屋のカメラコーナーにあった写真用？のポートフォリオのリングファイルを購入しました。, 作品が沢山あったり、少なかったりとどちらにしても色々迷いそうですが、Webデザイナー志望ならやっぱり自分でデザインしたwebデザインを入れたいですね。応募するのがWebの会社なので力量を判断できるWebデザインの作品は見たいと面接官は思います。, 「あんまり作品ないし！なんか適当に作ったやつでも入れておけばいいか！」 なんてことはしてはいけないませんよ！制作途中だったり、クオリティが著しく低いと思うものはいれてはいけません。ポートフォリオ全体にクオリティに響いてきます。, 全然作品がないよー、という方もいるはずです。私もそうでした。 そういう方は今からでも作りましょう。作品がなかったら評価もされることもありません。, 今から作るとすればおすすめは、架空の企業サイトや、ECサイトなどのWebサイトをデザインすることをおすすめします。企業サイトやECサイトは、利用者や観覧者が多かったり万人に見られたりするので、UIやデザインなどいろいろ考えられています。かつ架空の企業サイト、ECサイトを作れば、ロゴ、バナーも作ることができます。, もしくはラインサーズなどのアウトソーシングサービスを利用して、架空のサイトのデザインではなく実際の案件コンペなどに参加してデザインを提案みても面白いかもしれませんね！, 【目的】なんのために作ったか。なにに使用するのか。 などの項目は入れておきたいですね。ここは、リスト化する時に考えておけばいいかもしれませんね！, 全体的の流れは （作品がなかったら制作する）→　作ったものをリスト化する　→　レイアウトを決める　→　デザインしていく　→　印刷する　→　ファイリングする. c.getElementById(a)||(d=c.createElement(f),d.src=g, はじめまして！10月より都内の制作会社にてwebデザイナーとして働き始めた黒井です。ありがたいことに最近、webデザイン勉強中という方にTwitterの方でフォローされることが多くなったので、何か役に立ちたい！と思いnoteに登録しました。今回は未経験どころか異業種からの転職だった … 未経験でWebデザイナーを目指すためのポートフォリオの作り方 ポートフォリオを作り始める前に. 未経験でもWebデザイナーになれる最短の方法と実際の現場で使われているテクニックやノウハウ、そしてWeb業界の真実を惜しみなく紹介します！無料のポートフォリオテンプレートやデザインデータも … msmaflink({"n":"デザイン・クリエイティブ業界を目指す人のための ポートフォリオ見本帳","b":"","t":"","d":"https:\/\/images-fe.ssl-images-amazon.com","c_p":"\/images\/I","p":["\/41Ty11xI2-L.jpg","\/514lZ5HvvdL.jpg","\/514iPmXH1kL.jpg","\/51KCHjakvhL.jpg","\/41JuktL8MdL.jpg","\/51sN-zWuo5L.jpg","\/51VcIv7MhVL.jpg","\/51BrBt0sqjL.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E6%A5%AD%E7%95%8C%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE-%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA%E8%A6%8B%E6%9C%AC%E5%B8%B3-MdN%E7%B7%A8%E9%9B%86%E9%83%A8\/dp\/484436829X","t":"amazon","r_v":""},"aid":{"amazon":"1325886"}}); c.getElementById(a)||(d=c.createElement(f),d.src=g, 「他人と違うような印象的なポートフォリオを作りたい」という人におすすめのデザインです。, Webやグラフィック、ゲームのインターフェースデザインを手掛ける勘村洋和さんのポートフォリオサイト。「Portfolio」「About」「Contact」の項目が1ページで全て見れるデザイン設計です。, 仕事実績のページでは、Webサイトのデザインはパソコンのかたちのアイコン、スマホゲームデザインはスマホのかたちのアイコンというように、どのような媒体でどんなものを作ったのかが一目で分かるようになっています。, 三角や丸、棒線などのシンプルな図形を、色を変えて散りばめることで、見ててわくわくする背景デザインが出来あがっています。, デザイナーであるえともじさんのポートフォリオサイト。グラフィックデザインだけでなく、スマホカバー、小さな置物、時計など、自身のデザインをもとに制作した雑貨も掲載しています。, 「PRICE」の項目にはWebデザインや名刺デザイン、個人のロゴ制作にかかる費用を細かく記載しています。こうした配慮は仕事を依頼する側にありがたいですね。, 企業や団体の依頼は基本的にNGで、個人の制作活動をサポートする活動のみをおこなっています。, グラフィックデザイナーの酒井博子さんのポートフォリオサイト。パッケージデザインやポスターの制作、グラフィックデザインを手掛けています。トップページに90以上の作品がすっきりとした配置で並んでいるので、仕事内容がひとめでわかります。, 作品に色味が多く使われているため、背景はシンプルなグレーとなっています。左のカテゴリーボタンを押すと、そのカテゴリー以外の作品がグレーアウトし、作品が浮かび上がるようにデザインされているので見やすいです。, また、気になる作品をクリックするとその作品のポイントがわかりやすく写真で紹介されるので、数が多くてもストレス無く見ることができます。, 『Progate』のWebデザインを担当しているWebデザイナーである、Kuon Yagiさんのポートフォリオサイト。ネイビーを基調とした少ない色味でデザイントーンがまとまっているところが印象的です。, アニメーションがスルスル動いてユーザーにとって使い心地もよく、シンプルかつおしゃれなサイトです。自分のスキルセットを棒グラフで表しているのは視覚的にもわかりやすく、面白い表現方法ですね。, 作品はどんな媒体で、どんなものを作成したのかわかるように掲載されているので、クライアントは完成形がどのようなものになるか想像しやすいです。, できることを短い文章にシンプルにまとめて書いているので、初めて見た人がわかりやすいポートフォリオになっています。, スクロールすると内容が先に出てきて、背景が後からついてくるという斬新なアイデアを用いています。デザイナーの独自性をサイトにデザインとして組み込むと、作品集を見なくてもデザイナーの強みがわかりますね。, Webデザイナー兼エンジニアである、Ken Toshikuraさんのポートフォリオサイト。黒を基調としたシンプルなデザインは作品の良さを際立たせています。, 一定時間経つと作品が自動的にスライドするところが特徴的。美術館に来たような気分で作品をついつい見入ってしまいます。, 作品をクリックすると、「パソコンから見たデザイン」「タブレットから見たデザイン」「スマホから見たデザイン」など詳しく見れるので、デザイナーのこだわりや強みを把握することができます。シンプルなデザインにこだわりたい方にはおすすめのポートフォリオサイトです。, デザインとアニメーションを制作しているDOMASOさんのポートフォリオサイト。サイトに訪れた際の可愛らしいキャラクターのアニメーションが印象的です。, 鮮やかな青を使った背景はDOMASOさん特有の可愛らしい作品をより一層魅力的なものにしています。ポートフォリオサイト全体が可愛らしく、デザイナーとしてのセルフブランディングが確立していることがわかりますね。, エンジニア兼テクニカルディレクターのハセガワタクミさんのポートフォリオサイト。ファーストビューは、四角形や円形の物体が、集まったり離れたり波うったりして、ハセガワさんのWebサイトのロゴの形になったり、不思議な四角形になったりします。, ハセガワさんへ簡単に依頼できるように「About」にはメールアドレスやInstagram、TwitterなどのSNSアカウントが記載されています。「Works」のページではハセガワさんの仕事内容をもちろん見ることができますが、このファーストビューを見ただけで圧倒されるくらいのスキルをお持ちのようです。, ソースコードがnoteで公開されているので、フロントエンドエンジニア色の強いポートフォリオサイトを制作したい方は一度訪れてみてください。, 東京を拠点に活動するデザイナーである、平尾誠さんのポートフォリオサイト。黒を基調としたスタイリッシュなトップページと斬新な自己紹介が、ユニークで才気溢れる平尾さんの人柄を感じさせます。, 「キャッチコピーは”戦うフロントエンド”」など実際に会って詳しく話を聞きたくなるようなフレーズが散りばめられています。強烈な個性をシンプルに文章であらわす、というのはストレートでとても伝わりやすいですね。, エンジニアとして活躍しているYoichi Kobayashiさんのポートフォリオサイト。頭蓋骨と花のアニメーションが鮮明で印象的です。, Kobayashiさんはこのサイトをただのポートフォリオにするのではなく、自身の内面性、世代、身体性などのアイデンティティを表現したものと語っています。ただの作品集にするのではなく、自身の心情を取り込むことでユーザーに作成者のことを知ってもらうきっかけになります。, また、作品は旗にかたどったアニメーションで掲載されていて、技術の高さがうかがえます。スライドする際に旗が燃え上がる演出も魅力的です。, アートディレクター・WebデザイナーのTAKAAKI ISHIKAWAさんのポートフォリオ。スクロールすると、これまでの代表的な仕事や連絡先が分かるようになっています。黒を貴重とし、余分な要素を削ぎ落としたようなデザイン。人柄を含め、成果物のイメージもつかみやすいですね。, ページ遷移もとてもオシャレ。こういった細かい部分にも手を抜かない姿勢は、仕事にも表れているといえるのではないでしょうか。, TAKAAKI ISHIKAWAさんは個人プロジェクト「design studio drop.」も担っており、精力的に制作の幅を広げる姿勢に好感が持てます。, トップページの、淡いパステルカラーの配色が印象的なOTANIJYUNさんのポートフォリオ。イラストレーター、アートディレクター、グラフィックアーティストとして活躍されており、それぞれの仕事はトップページにあるメニュー「DESIGN」「ILLUSTRATION」から見られます。, ポスターやCDジャケット、アートブックなどを中心に手がけられている様子。原色を大胆に使ったデザインから、イラスト貴重のもの、モデルや商品に焦点を当てたものなど仕事の幅が広いのが見て取れます。依頼の方向性がまだ定まっていないユーザーでも、具体的な成果物のイメージがわきやすいのではないでしょうか。, トップページの中央で自分の撮影した写真がアニメーションでスクロールしています。1番下までいったらもう1度上へ戻る仕組みです。「BLOG」も枠を設けずに中央揃えになっており、サイトデザインへの強いこだわりを感じます。, 自分のポートフォリオサイトを訪れた人に、まず撮影した写真を一通り見せるデザインがフォトグラファーらしいですね。食べ物の写真から人物の写真、広告までも手掛けていることが最初の画面でわかります。, 女性フォトグラファーであるヨシダナギさんのポートフォリオサイトです。ヨシダさんは主にアフリカをはじめとする世界の少数民族や先住民を撮影しています。, サイトのトップページには撮影した少数民族の動画が次々と表示されているので、ヨシダさんの仕事内容がひとめでわかりますね。, 作品ページでは写真が民族ごとにカテゴリ分けされており、さまざまな国を渡り歩いたヨシダさんの経歴がうかがえます。海外に馴染みがあり、インパクトのあるポートフォリオサイトを制作したい人は参考にしてみてください。, 国内外で多数の受賞経歴を誇るフォトグラファー、MIKIYA TAKIMOTOのポートフォリオサイト。写真をメインで見せるために不要な要素を削って作成されたシンプルかつ美しいサイトです。, 背景を白にしたシンプルなポートフォリオサイトは写真そのものの美しさで勝負するというTAKIMOTOさんの強い意志が伝わってきます。, また、文字にカーソルを合わせると音がなるという遊び心のある演出があり、ユーザーを飽きさせない配慮も垣間見えます。, DJやプロデューサーとして多方面に活動を広げるアーティスト、MIDORI AOYAMAさんのポートフォリオサイトです。トップページの顔写真はポリゴン加工が施されており、SFの要素を感じるデザインになっています。, またファーストビューだけでなく、今までの実績が一目でわかるデザイン設計にしたり、サウンドクラウドのウィジェットにも影をつけるなど細かい部分にも工夫が凝らされています。, 映像作家TAO TAJIMAさんのポートフォリオ。トップページから目を引く映像の数々に、思わず手を止め見入ってしまいます。どの映像も印象的で、ページ遷移も芸術的です。, 画面下部に配置されているボタンで、見る映像を自由に選べます。「About」や「Creative」などのページへわざわざ移ることなく見られるため、ストレスフリーになっているのも大きな特徴でしょう。, TAO TAJIMAさんは映像・デザインの企画制作会社「TANGRAM」に所属しており、前衛的な表現をする映像作家・デザイナーとして注目されています。, 以上で現役デザイナーおすすめの、参考にすべきポートフォリオサイトをご紹介しました。, では実際に転職に向けたポートフォリオサイトを作成する際に気をつけるべきポイントは何でしょうか。自分の魅力を最大限伝えられるポートフォリオサイトを作成するには、以下の5つのポイントに注目しましょう。, ポートフォリオサイトの目的は閲覧したユーザーに自分のことを知ってもらうことです。そのため自分の経歴や作品、スキルを整理して適切にサイト内に盛り込むことが必要になってきます。, とくに実績や受賞経歴などの「自分の強み」や「興味があるもの」をサイト内に掲載することは、転職時の採用担当者へのアピールに繋がります。, たとえWebデザインの技術が高かったとしても、ページが煩雑としていてユーザーが使いにくいものであると、採用担当者から高い評価は受けにくいです。, 常に「見るのは他人である」ということを意識して、よりユーザー目線に立ったWebデザインを心がけましょう。, ポートフォリオサイトに自分の個性を出すことは非常に重要です。ポートフォリオサイトのセルフブランディングがよくできていると、自分が他者とは違う魅力を持っていることが一目で分かります。, たとえば自分の得意なスキルを使ったアニメーションなどを埋め込むと、自分の強みをアピールするポイントになるため効果的です。, より多くのユーザーに自分のポートフォリオサイトを見てもらうためにはSNSやnote、ブログの活用は欠かせません。SNSなどで普段から発信したり、noteで充実したコンテンツを作成したりすることにより、新しい仕事を得るきっかけになる可能性もあります。, 人材としての価値を高められる上に、ポートフォリオサイトへの新たな流入をはかれる有効な手段です。, プロフィールの項目にはなるべく自分の顔写真を入れましょう。相手の顔がわかるだけで、ユーザーからの信頼感は高まります。, 今回ご紹介した中には、ポートフォリオサイトのトップページに自身の顔写真を入れている方もいます。魅力的な表現方法のひとつとして、ぜひご参考にしてください。, ポートフォリオを充実させることは、「あなた指名の仕事をもらいやすくなる」というメリットもあります。ポートフォリオに記載した成果をもとに、フリーランスとして独立する人も多いです。, フリーランスのためのお仕事マッチングサービス『Workship』では、ポートフォリオ登録機能を完備。掲載されたポートフォリオをみた企業から、直接アプローチが来ることも！, 個人が持っているスキルやセンスによって、ポートフォリオのデザインはさまざまです。見ているだけで面白いですね。, この記事が、読んでくださるみなさまのポートフォリオサイト作成の参考になれば幸いです。, （執筆：Emily　編集：Shinohara Kyohei　取材協力：株式会社GIG）, 「フリーランスとして、もっと大きな仕事にかかわりたいな……」 転職活動中のWebデザイナーやWebディレクター、フリーランスの人は、ポートフォリオの提出を必ずと言っていいほど求められます。デザインはどの程度こだわるか、Wordpressで作成すべきか、など迷う人も少なくないでしょう。Web業界の人向けのポートフォリオサイトの作り方をご紹介します。 Webデザイナーとして働く際、自分をアピールするのに最も大切なのがポートフォリオWebサイト。今まで作った作品や自分がどんな人間なのか、何ができるのかを紹介するサイトを作っておけば、就職活動にも大変役立ちます。ここではポ […] 「キラリと光るポートフォリオサイトを知りたい！」というあなたに向けた記事です。Webデザイナー、映像作家、フォトグラファー、CGクリエイターなどのおすすめポートフォリオサイトをギッシリとまとめました。コツコツまとめたので、よかったら見てください…！ Webデザイナーが持っておくべきポートフォリオとは何なのか詳しく解説しています。著名な方のポートフォリオも紹介しているので、これから作成しようと考えている方はぜひ参考にしてみてください。転職やフリーランスとして働く上で役に立つはずです。 WebデザイナーはWebサイトの制作やデザインをする職業です。Webデザイナーになるために資格は必要ありませんが、Webデザインに関する知識やスキルが必要です。Webデザイナーになるには、大きく分けて3つの方法があります。 (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js","msmaflink"); 『第二新卒』が未経験でwebデザイナーに転職するのは可能かどうかのお話。 第二新卒の人は同じ過ちを繰り返さない様に次の職業は慎重に選んで転職活動している人も少なくないのではないでしょうか？ 『webデザイナー』は若者に人 紙のポートフォリオを持っていれば、その場で見てもらい、質問されたり、説明できたりします。なので紙のポートフォリオはないより、あった方が絶対にいいと思います。 c.getElementById(a)||(d=c.createElement(f),d.src=g, d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) 新卒採用でwebデザイナーになりたくて就活でやったこと。の記事を書いた時に、少しだけ紙のポートフォリオの事について触れましたがあまり詳しく書かなかったので、今回はその紙のポートフォリオの作り方をまとめてみましたので、参考になればと思います。 2021デザイナー新卒採用; 2022デザイナー新卒採用; ポートフォリオの作り方; プロダクトデザインのインターンシップ; 就活失敗した話; 就活失敗したあと絶対すべきこと; 内定から入社までにやるべき事リスト; 既卒・第二新卒. (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; Webデザイナーを目指す新卒の人の中には、Webデザイン関連の学校に在学中でない人もいるはずです。 もちろん、Webデザイン関連の学校を卒業しなければ、Webデザイナーになれないわけではありませんが、活動の際にポートフォリオは必要となってきます。 基礎スキルを学べば、文系新卒でも、未経験でもwebデザイナーになれます。私は文系の大学を卒業し未経験の新卒webデザイナーとして就職しました。当時の経験をもとに、必要なスキルを詳しく解説していきます。 Webデザイナーになりたいけれど、未経験や新卒でも就職できるか不安を感じていませんか？この記事では、未経験・新卒からWebデザイナーを目指す上で知っておきたいポイントについて解 … ポートフォリオは主にプロフィールや制作実績などを載せて、面接の際に企業に提出する履歴書よりも大事なものです。 Webデザイナーにとってポートフォリオは、どんなスキルがあるのかアピール出来るツールなので就職や転職の際に必ず用意しなければなりません。 転職活動のためにポートフォリオサイトを作りたい。そのために、有名なWebデザイナーのポートフォリオをたくさん見て勉強したい！という人へ。現役デザイナーおすすめのおしゃれなポートフォリオサイトを35個集めました。Webデザイナーの作品だけでなく、フォトグラファーやエンジ … 「そのために、有名なWebデザイナーのポートフォリオサイトをたくさん見て参考にしたい！」, 複数の現役デザイナーへのヒアリングのもと厳選した、Webデザイナー、フロントエンドエンジニア、フォトグラファー、アーティストのおしゃれなポートフォリオサイトをご紹介します。, アートディレクターでフロントエンドエンジニア、Webデザイナーの田渕将吾さんのポートフォリオサイト。画像にエフェクトをかけたり、シームレスにページが遷移したり、サウンドに合わせてビジュアライズしたり、これらのコーディングも田渕さん自身で手掛けています。, マウスの動きに合わせて背景が動いたり、マウスオンで画像の色が繊細に変化したり、遊び心が満載のサイトです。一部の画像だけでなく、ポートフォリオサイト全体にアニメーションが駆使されているので、どこにカーソルを動かしても楽しめます。, 過去の仕事実績をただ並べるよりも、自分の時間と能力をフル活用してポートフォリオサイトのクオリティにこだわれば、もっともシンプルで分かりやすいポートフィリオができますね。, 東京を拠点に、主にインタラクションデザイナーとして活動する代島昌幸さんのポートフォリオサイト。, アクセスした瞬間に登場する、人の顔を模したモジュールに注目してください。マウスの動きや方向に合わせて向きを変えたり、色やテクスチャまで変化します。音楽もスタイリッシュで格好よく、ページ遷移の動きまで各所に魅せる表現が満載です。, 関連SNSは分かりやすくアイコンにし、右上にまとめて配列。分かりやすさとシンプルさ、デザイン性を兼ね備えた代表例といえるでしょう。, アートディレクター、グラフィックデザイナーであるHIROKA HASEGAWAさんのポートフォリオサイト。手掛けた広告ビジュアルが画面全体に表示されるデザインで、見やすくインパクトもありますね。白をベースカラーに据え、シンプルであるにも関わらず印象的です。, 「hotel koe tokyo」のサイトデザインをはじめ「AGILE COSMETICS PROJECT」の全面プロデュースを手掛けるなどマルチに活躍されています。, コスメやファッションなど、第一印象で勝負するデザインが得意なデザイナーさんにおすすめの配置ですね。, デザイナーでアートディレクターのオオタタカヤさんのポートフォリオサイトです。オオタさんがディレクションしたWebサイトやロゴなど、18の作品がすぐに見られます。, サイトのメインカラーは白と明度が高いブルーの2色。作品にマウスを当てると、それぞれのメインカラーが背景に表示されるデザイン設計が特徴的です。, またそれぞれの作品をクリックすると、統一されたレイアウトで写真と説明文があらわれるため、オオタさんが「いつ」「どのような仕事に」「どんな立場で」関わったのかわかるようになっています。同ページには作品の制作過程も公開。デザイナーの制作理念やポリシーを理解してもらいやすくなりますね。, デザイン、ディレクション、コーディングを手掛けるトクダユウイチさんのポートフォリオサイト。, トップページにはご本人の写真とものづくりの信念を掲載していて、人との繋がりを大切にしていることが真っ先に伝わるデザインです。トップページにご自分の写真を載せていると、信頼感が増して今後のお仕事に繋げやすくなりますね。白を基調としたデザインは見る人が安心した気持ちになるだけでなく、「Works」で紹介している自身の作品そのものの良さを最大限に引き出しています。, またトクダさんは「About」と「Works」で自分と自分の実績を紹介してるのに加えて、「Blog」で普段やっていることを発信しています。「Blog」には、トクダさんが撮影した写真がメインで載っています。トクダさんの人柄が伝わってくるようなあたたかい内容のブログです。, 仕事内容だけでなく、ご自身のことも知ってほしい方はトクダさんのポートフォリオサイトを参考にしてみてください。, Webデザイナー、フロントエンドエンジニアTakeshi Oideのポートフォリオサイト。グラフィカルなトップページが印象的です。, メニューは「WORK」「ABOUT」のみとシンプルながら、思わずいろいろなところをクリックしたくなったり、ずっと眺めていたりしたくなる意匠がいたるところに施されています。遊び心満載のデザインからは成果物のイメージもわきやすいため、依頼する側としてもメリットだらけですね。, こちらのポートフォリオサイトを訪れたら、ぜひさまざまなところをクリックしたり、ページ遷移したりしてみましょう。, インタラクティブデザイナーであるオカモトジュンイチさんのポートフォリオサイト。Webサイトの企画と制作を行いながら、インタラクティブアートの制作もしています。, ランダムに動く無数の赤い丸と、グレーの線が印象的なポートフォリオサイトです。過去実績も円形にトリミングされていて、統一感のあるデザインに仕上がっています。, 「About」「Works」「Art & Design」「Contact」という項目のほか、一番上には「Message」という項目があります。, 「The great human revolution in a one human being changes the fate in the world soon」がオカモトさんのメッセージ。自分が大切にしている言葉や信念、座右の銘などをこうしてポートフィリオサイトに表示すると、自分がどんな人間なのか深く知ってもらうきっかけになるかもしれませんね。, 東京を拠点にフリーランスデザイナーとして活動する、フクシマナオキさんのポートフォリオサイト。クライアントとしっかりコミュニケーションをとり、クライアントの望むWebサイトかつユーザーが操作しやすいWebサイトを作ることを大切にしていらっしゃいます。, 「Concept」という項目で、フクシマさんの仕事への姿勢や信念が伝わってくる文章が掲載されています。顔の見えない相手に自分自身をきちんと知ってもらう手段として、文章はとても良いツールですね。, 他のポートフォリオサイトと異なって文章の割合が多いですが、余白を多く使ったり1ページ内でサイトを完結させる工夫をすることで、ストレスなく読み進められるようにデザインされています。, イギリスを拠点に活動するWebデザイナーでフロントエンドエンジニアである、Mike Inghamさんのポートフォリオサイト。世界中のクライアントに、シンプルで使いやすいインターフェースを設計しています。, 黒い背景に写真を配置したシンプルなデザイン。どんな仕事をしているかイメージがつかみやすく、すぐ下に連絡先フォームもあるためコンタクトも取りやすいのが特徴です。, メニューは「ABOUT」「CONTACT」の2つのみ。項目の内容はとてもシンプルで無駄がありません。一方で仕事ごとにメインカラーが異なっておりオレンジや水色など明るい色が使われています。シンプルながら鮮やかさも兼ね備えているデザインです。, カナダのバンクーバーを拠点に活動するWebデザイナーでエンジニアの、KurodaManatoさんのポートフォリオサイト。自らのスキルを、フロントエンドとバックエンドに分けグラフで表しているのが面白いですね。, 背景の水玉がランダムに動き、大小の大きさがバラバラなので、サイトに奥行きを感じます。, また、「About」という項目では自分の好きなもののイラストをスライド式で紹介しています。ポップなデザインが魅力的な上に、自分のことを知ってもらうきっかけにもなるいい手段です。, スクロールするとサイトの全体カラーが変化するという遊び心も、見ている人を楽しくさせる粋な演出ですね。, 「サービス内容」や「ご依頼方法」のなかに、事前にできることとできないことやデザイン依頼前に準備してほしいもの、対応できるデザインの範囲などが詳しく記載されています。ユーザー目線に立ち、使いやすいWebサイト制作にこだわっていますね。, Webデザインを依頼するのが初めて、という人を対象にポートフォリオサイトを作りたい場合は、とても参考になります。, 東京を拠点に活動するグラフィックデザイナーでWebデザインも手掛ける、尾花大輔さんのポートフォリオサイト。白を基調としたサイトはとてもシンプルで、無駄な情報はありません。, 作成したWebサイトや作品は、線画や棒線、丸型の図形が散りばめられていて、シンプルながらも遊び心を感じさせます。, すべての作品に統一された「らしさ」があると、作風がより明確になり、クライアントが完成形を想像しやすくなりますね。, デザイナー・エンジニア・フォトグラファーのフリーランスとして活躍するYUTO TAKAHASHIさんのポートフォリオサイト。海外のアワードで多数受賞しているTAKAHASHIさんの作成するサイトは他を圧倒するアニメーションで独自の世界観を演出しています。, 作品の見せ方まで徹底的にこだわっていて、見れば見るほどTAKAHASHIさんの世界へと引き込まれます。, 最新の技術を駆使した世界レベルのポートフォリオサイトを参考にしたい方にはおすすめです。, Webデザイナーである加藤俊司さんのポートフォリオサイト。株式会社クライマークスの取締役でアートディレクターである加藤さんの自社サイトや制作したサイトを掲載しています。作品をデスクトップの形で掲載しているので、どのような完成形なのかクライアントは把握しやすいですね。, 「Blog」をクリックするとレスポンシブWebデザインに関するまとめ記事が多くみられます。, 記事というかたちで自分の強みを外にアピールするというのは、「〇〇ができます！」とただ書くよりも説得力がありますね。, Webデザインやディレクション、アプリデザインを手掛けるImakitaMaiさんのポートフォリオサイト。, ImakitaさんがデザインしたWebサイトが白を基調としてシンプルに並んでいるので、ポートフォリオとしてはとてもわかりやすいサイトです。, ページは1ページのみなので、わかりやすいポートフォリオの基本形として参考にしてみてはいかがでしょうか。, グラフィックデザイナーでWebデザインも手掛ける北尾知大さんのポートフォリオサイト。, 「Work」「About」「News」などの項目にそれぞれついている、シンプルなイラストアイコンがおしゃれです。, シンプルでありながらも独特な世界観を表現しているポートフォリオサイトは見ていて面白いですね。, プランニング・ディレクターで、デザイナーとしても活動する宇都宮勝晃さんのポートフォリオサイト。, トップページに過去にデザインした作品の名前が掲載されており、カーソルを合わせると、背景にアニメーションが流れる細かいこだわりもあります。, 自身が作成したWebサイトの概要をわかりやすく写真で説明し、PCの他にスマートフォンやタブレットで見たときのデザインも掲載しています。, 大阪を拠点に、フリーランスのWebデザイナーとして活動するMatsumotoRumikoさんのポートフォリオサイト。ファーストビューは、スカートを履いた少女が画面上をくるくるまわる姿で、インパクトがありますね。スクロールすると背景がグラデーションになっていくのもとても美しいです。, 以前Matsumotoさんは壁紙を作る「Parallel Wallpaper」というプロジェクトを手掛けており、その経験がご自身のポートフォリオサイトにしっかりと反映されています。厚みのある背景デザインと、淡い色合いが、Matsumotoさんの作風を表していますね。, Matsumotoさんが制作した素敵な壁紙は、ポートフォリオサイトからPCやスマホ用にダウンロードできるようになっています。壁紙のデザインにこだわりたい方におすすめです。, 東京を拠点にデザイナー、アートディレクターとして活動する加藤タイキさんのポートフォリオサイト。Webデザインをはじめ、ロゴやブックカバー、ポスターのデザインを手掛けています。, 加藤タイキさんのポートフォリオサイトはグリットデザインを採用しています。全画面の3カラムをベースとしながら、画面幅を狭めていくごとに2カラム、そして最終的に1カラムのデザインです。, また仕事実績がすぐにわかるよう、ホームページに代表的な作品が並べられているので、クリックするとすぐに作品を見られるようになっています。クリックしなくてもカーソルを当てるだけで、作品のタイトルとポスターやロゴなどの作品カテゴリーがアニメーション表示されます。サイトを訪れたユーザーがストレスを感じないように、ページ遍移をなくす工夫がなされているのです。, グラフィックデザイナーでコンセプターの、カワセタケヒロさんのポートフォリオサイト。作品サンプル、プロフィール、連絡先、そしてカワセさんの哲学を1ページにまとめています。, カワセさんのポートフォリオサイトは縦書きの文字で構成されているのが大きな特徴。通常のWebサイトは横書きのイメージが強いため、サイトを見る人にインパクトを与えます。また文字を縦書きにすることで日本語の良さが際立ち、ひとつひとつの言葉に強さを感じます。, 「Philosofy」という項目で綴られているのは、カワセさん自身が仕事に向き合う姿勢や信念。これらをシンプルに文章にまとめることで、読む人にストレートな思いを伝えられます。 (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; 第二新卒が未経験からwebデザイナーになる方法が知りたい人は多いですよね。そこで本記事ではwebデザイナーへの転職方法を第二新卒向けに徹底解説します。webデザイナー求人の探し方から必要な基礎知識まで網羅的に解説したので、ぜひ参考にして転職を成功させてください。 b[a]=b[a]||function(){arguments.currentScript=c.currentScript (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; Indeed.com で東京都の新卒採用 Web デザイナーの1,171件の検索結果: 新卒採用、アートディレクター、オープンポジションなどの求人を見る。 msmaflink({"n":"クリエイティブ業界に就職するためのポートフォリオの教科書","b":"","t":"","d":"https:\/\/images-fe.ssl-images-amazon.com","c_p":"\/images\/I","p":["\/61no6D8FGkL.jpg","\/4125GsI-cWL.jpg","\/51dLEclnFDL.jpg","\/51v7J6ACuDL.jpg","\/51IL3k3KylL.jpg","\/41jJ%2BQwzaNL.jpg","\/51vNx7zvGiL.jpg","\/51WSs0roCTL.jpg","\/51rQ0SI1y7L.jpg","\/51kC-TJZT%2BL.jpg","\/41-jm88P5nL.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E6%A5%AD%E7%95%8C%E3%81%AB%E5%B0%B1%E8%81%B7%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%9D%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%88%A5%E5%86%8A%E6%9B%B8%E7%B1%8D%E7%B7%A8%E9%9B%86%E9%83%A8\/dp\/4862670504","t":"amazon","r_v":""},"aid":{"amazon":"1325886"}}); https://nh-lab.com/wp/wp-content/uploads/2019/02/logo.png. 新卒で未経験からWebデザイナーになるための最適ルートについて詳しく解説しています。20代・大学生・専門学校生の方でWebデザイナーを検討している方はぜひ参考にしてみて下さいね。経験談としてなかなか大切なことにも触れています。 b[a]=b[a]||function(){arguments.currentScript=c.currentScript 「転職活動のためにポートフォリオサイトを作りたい！」 Webデザイナーの就職や転職ではポートフォリオを使用とすることが多いですが、実際にはポートフォリオなしで面接を受けるWebデザイナーも実際にいます。そこで今回はポートフォリオなしで面接を受ける方がどうなるのかについて細かく書いていきます。 WEBデザイナーなら誰もが見たことのある『Webクリエイターボックス』のオーナーであり、海外でも活躍するマナさんのポートフォリオサイトです。 作品だけでなく、マナさんご自身の趣味や経歴もサイト内に盛り込まれており、マナさんの人柄や個性を感じ取ることができます。 ||c.scripts1;(b[a].q=b[a].q||[]).push(arguments)}; Webデザイナーとして活躍するために必須となるポートフォリオ。当記事では、現役のWebデザイナーが作成した「参考にするべきポートフォリオサイト10選」をご紹介します。プロのスゴ腕デザイナーのポートフォリオは、どれもセンス溢れるものばかり! 私達マイナビクリエイターは、ポートフォリオのページ数は「15～25ページ」、作品数は「10～20点」を推奨しています。このページでは、これまでに沢山の企業人事部や採用担当者、面接官と直接取引をさせていただく中で培ってきた私達なりの見解をご紹介します。 新卒でwebデザイナーを目指したい！会社説明会などのイベントで、そういった相談を受けることが増えてきました。そこで今回の記事では、新卒採用でwebデザイナーを目指す方に向けて、就職を目指すためにできることを紹介します。 Indeed.com で新卒 Web デザイナーの6,027件の検索結果: Webデザイナー、新卒採用 システムエンジニア、新卒採用などの求人を見る。 未経験でWebデザイナーを目指す場合、大前提として 「デザインが好きだからWebデザイナーになりたい。 でもまだ何も作ったことがありません」 では選考の土俵にもあがれません。 Webデザイナーを目指すきっかけはさまざまですが、「Webが好き」「デザインが好き」という2つの軸をもって目指すようになる人が多いです。 また、志望動機などで表現する必要はないものの、Webの先進的で華やかなイメージも若い人に好まれています。 Webデザイナーの志望動機の考え方. Web上でポートフォリオを作る場合、自分でドメインを取得してサイトをゼロから構築し、コツコツ運用していくという方法もありますが、Webデザイナーならともかく、ふだんコーディングやCMSに触れる機会の少ないタイプの職種の人にとっては、なかなか構築も更新もハードルが高いです。 実際にポートフォリオを見てみたいという方は、カッコいいポートフォリオが載っている書籍がでているので見てみるのもいいかもしれませんね。色々見て最高のポートフォリオを作りたいですね！ わからないことやご質問などあればお答えします！コメントか@pocktlabへ！ 新卒採用でwebデザイナーになりたくて就活でやったこと。の記事を書いた時に、少しだけ紙のポートフォリオの事について触れましたがあまり詳しく書かなかったので、今回はその紙のポートフォリオの作り方をまとめてみましたので、参考になればと思います。, webのポートフォリオは作ったけど、なんで紙ポートフォリオも必要なの？というところ。 面接時に、パソコンが必ず用意されているとは限りません。面接官がパソコンを持っていて、ネットが見れる状態ならWeb上のポートフォリオを見てもらえるので紙ポートフォリオはいらないかもしれませんが、パソコンがない状況の面接では、Webのポートフォリオではあまり意味がありません。 パソコンがない面接で、「事前にWebのポートフォリオは見せてもらったよ」なんて言われた事もありましたが、他の面接時には全然触れてもらえないことも多々ありました。. !これからWebデザイナーを目指す方 … d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) 「企業で働いてるけど、副業でキャリアを広げていきたいな……」, 新しい働き方が加速するいまこそ、キャリアの選択肢を広げるフリーランス・複業・副業向けお仕事マッチングサービス『Workship（ワークシップ）』がおすすめです。, Workship MAGAZINE編集部員。ITビジネス系、フリーランス系の記事を担当。, Workship MAGAZINE（ワークシップマガジン）は、日本最大級のフリーランス向けウェブメディアです。エンジニア、デザイナー、マーケターなどデジタル系専門職のフリーランスにとって役立ち、刺激になる情報をお届け。 海外最新情報やフリーランスノウハウ＆ツール、著名人インタビューなど、さまざまなコンテンツを発信中です。. d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))})