00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
今回のテーマは、世界が注目するポートフォリオサイトの作り方です。
というわけで、ゲストには前回に続いて、私の元生徒さんで、
Webデザイナー、そして振付師をしている増田幸男さんにお越しいただきました。よろしくお願いします。
新潟市の方でWebデザイナー兼振付師をしています。増田幸男と言います。よろしくお願いします。
はい、よろしくお願いします。
今日はですね、ポートフォリオについてお話をお伺いしたいなと思いました。
というのも、久しぶりにTwitterの方で増田さんから私に連絡をくださって、
それがですね、ポートフォリオサイトを見てくださいというような連絡でしたよね。
それがすごくかっこよかったのを覚えていたので、ちょっとこのポートフォリオサイトについて聞いてみようと思います。
マナのWebクリエイターカフェ
このポートフォリオサイト、結構時間をかけて作られたんですかね?
そうですね、時間は結構かけて作れましたね。
ポートフォリオサイトなんで、いつまでに完成させないといけないというのもないので、こだわるとここだわって作っていましたね。
でも逆に期限がないのって、なんかしんどくないですね。
そうですね、逆にそうですね。そういうところもやっぱりありますね。
逆に言うとだらけてしまうところはちょっとありますね。
なんとなくできたけど、あれもうちょっとこここうしようみたいな欲が出て、どんどんリリースが遅くなっちゃったり。
そうなんですよね。
期限を決めないとやっぱりちょっとだらけちゃうなっていうのがあって、自分の場合は誕生日にあげようっていう感じにして。
期限あるじゃないですか。
ただそれまでが結構長かったので、ある程度その期限を決めてやってましたね。
そうしないとそうですよね、だらけてしまいますもんね。
そうですね。
もう一つ目標としてあったのが、ギャラリーサイトとかのアワードに応募したいというのがあったんですよね。
これ応募しようって思ったのが、どういったサイトを見てそう思われたんですか?
海外のアワードの出してる個人だったりとか、製作会社のポートフォリオサイトを見て、それがすごい衝撃的で、こんなすごいの作れるんだっていうところがすごい衝撃的で、それが一つきっかけになったのはやっぱりでかかったですね。
03:07
なるほど。アワードに出してみよう、挑戦してみようっていうのが、一つのポートフォリオサイトを作るモチベーションにもなったんですかね。
そうですね。
実際に投稿してみたのが、CSSウィナーとアワーズと。
あと、CSSデザインアワードの3つですね。
これで実際に賞を取ったんですよね。
もっと声を張って言ってもいいんじゃないでしょうか。
CSSデザインアワードとアワーズでは特別賞みたいな感じののをいただいたんですけど、CSSウィナーの方ではサイトオブザデイっていう賞をいただきましたね。
それは驚きですよね。自分でやってみようってやったのはそうなんですけど、実際に取れたときはどんな気持ちでした?
やっぱり嬉しかったですね。
本当に海外のアワードに向けて作ったみたいな感じのサイトだったので、そこでちょっと認めてもらえた気がしたっていうのはやっぱりありましたね。
そうですよね。サイトを見てみるとわかるんですけど、やっぱり海外のものなので、英語のサイトだとか海外のウェブサイトばっかりで、なかなか日本人の方の応募をしてるのって見かけないですよね。
そうですね。
その中でウキを増すだと、ドンと出たんですね。
はい。
すごい、それは嬉しいですよね。
それも自分のポートフォリオっていうか、アワードのために作ったってなると、より達成感を得られた感じですよね、きっと。
そうですね。やっぱり達成感はやっぱりありましたね。
コンテストっていうものにそこまで抵抗がなかったっていうのがあって、っていうのも自分、ダンサーとしてはすごいコンテストっていっぱいできたんですよね。
そうですよね。
そうなんですよね。そこで結構経験としてちょっと出てみたかったっていうのが一つあるんですけど。
あるんだ。
一つ思ったのが、もっとスキルつけてから出ようかなってすごく思ったんですけど、それだといつまでも出せない気がしてというか。
ありますね。
今行っちゃえと思って出したみたいなところはちょっとありましたね。
すごい。その度胸はやっぱりダンサーとしてそういう活動をしてたっていうのもあるのかもしれないですね。
そうですね。一つあるかもしれないですね、ひょっとしたら。
そうですよね。私も出してみよう出してみようって思ってても、最初の頃、駆け出しの頃とか絶対に出せなかったかと思いますし、やっぱりこれができるようになったら、それができたら、今度はこれができるようになったらみたいな感じでずるずると出せないままで終わりそうですしね。
06:01
じゃあ、そのアワードに出す、アワードで受賞するっていうことを目標に作った上で、何か意識したことってありましたか?
そうですね。なんか外人受けしそうなと言ったらあれですけれども、っていうのはちょっと意識しましたね。
どれが受けるのかっていうのはちょっとわからないんですけれども、なんかトレンドをわりと意識した感じにはやっぱりしましたね。
技術的なところで言うと、マウスストーカーだったりとか、背景のノイズエフェクトとかだったり、あとちょっと音楽を聴けたりするような感じの構成にしてみたりっていうところは、そうですね、意識して作りましたね。
というのは、すでに受賞している作品だとかサイトとかを徹底的にリサーチしてっていう感じですか?
そうですね、そうですね。
大事ですよね、やっぱり。
どういうサイトが賞を取っているのかなっていうのをちょっと見ながらっていうのはやっぱりありましたね。
そこでやっぱり共通点とか見えてきました?
そうですね。共通点と言ったらあれなんですけれども、なんか必ずしもすごい技術を使ったサイトが受賞しているわけではないなっていうところにちょっと見ていくうちに気がついて、
技術的なところじゃなくて、例えばビジュアル的なところって言ったら言い方が合ってるかちょっとわかんないんですけれども、とかだったりとか、そこら辺をやっぱり見ながらというかやっていましたね。
そうですね、なんかパッと見てアワードを受賞しているようなのって、すごいWebGLゴリゴリ使ったりとか、そんなイメージはありましたけど、よくよく見るとそうじゃないんだよっていうのがわかってきたってことですかね。
そうですよね、あまりこう、そんな自分の手の届かないような技術のものばっかりだったら、あまり受賞できる気もしないでしょうし、やってみようという気もちょっとなくなるかもしれないですしね。
でも、うきおさんが作ったサイトを見てみると、結構JavaScriptゴリゴリ使ってる感じですよね。
はい。
これ、いちから手打ちしてって。
手打ちのところもあるんですけど、手打ちじゃないところもやっぱりありますね。
でも、この動きがやっぱり、なんていうんですかね、いやらしくないというか、たまに動きすぎて見づらいサイトとかあると思うんですけど、そこまででもないですし、かといって退屈な感じも全然ないですし、
で、あたし一番いいなって思ったのが、音楽が最初デフォルトではオフになってるんですよね。
はい。
で、聞きたかったら、クリックしたらオンになりますよっていう、この気遣い。
そうなんですよね、やっぱりいきなり音流れちゃうと、やっぱりちょっとよくないかなっていうのがやっぱりあったりして。
09:01
あと何回とか、もうすぐ閉じちゃったりするので。
で、これをじっくり見たいときに音楽オンにして、それに音楽聞きながら見てみるとまた違った感じで、すごいこのノイズ感と、このなめらかな動きとすごく合ってるなって思って、ここ一番おすすめポイントですね。
ありがとうございます。
素敵ポイント。
あとそうそう、デザインカンプを作ってコーディングに入るっていうのがよくある流れかなと思うんですけど、デザインカンプを特に作らず進めていったんですかね。
そうですね、自分もともとコーダーっていうのもありまして、デザインソフトがあまり使えなかったっていうのも一つ理由ではありますけれども。
例えばフォトショーとかエラレとか、今でいうフィグマとかXDとかっていうのも、そんなに当時はですけど使えなかったので、
そうですね、レコーディングしながら、あと技術的なところもやってみないと実装できるかわからないっていうところがやっぱりあったので、
ありますね。
実装しながら試しながら見た目を整えていったっていうやり方でやっていました。
そうなんですね。じゃあそのコーディングをしながら、色とかもそうしながら決めていった感じです?
そうですね。
そうなんですね。動きに合わせてこういう背景色にしようとか、そういう作り込みをされていたんですかね。
そうですね。
そうですよね。せっかくデザインカンプでこういうのにしたいってなっても、それが実装できなかったら、コーディングでね、今自分の持ってるスキルで実装ができなかったら意味ないですもんね。
そうなんですよね。
そういうやり方もあるよということですね。
あとは特にSEOとかにもこだわってないみたいなことをお聞きしたんですけど。
そうなんですよね。
アワードに振り切って。
そうですね。振り切りました。多分SEO意識、最初は日本語で作ろうかなっていうのもちょっと思っていたんですけれども、どうせやったらアワードに出すって決めてやってたので、SEOとかもあんまり気にはしてなかったですね。
まあいいのか悪いのかっていうのはちょっと微妙なところではあるんですけれども。
目的がアワードに合わせてるものなので、必ずしも検索で輸入を意識したものではないと思いますので、必ずしも悪いことではないかなと思いますね。
そっか、日本語は用意してない。すべて英語なんですね。
そうなんですよね。すべて英語で。
すべて英語。
英語は苦手なんですけれども。
これはご自身でちょっと翻訳しながら。
そうですね。ちょっと今怖くて見れないんですけど。
怖くて見れない。
やっとしたら間違ってるかもしれないんで。
なるほど。
12:00
結構前に作ってあげたんで、合ってるかどうかもちょっとわからないんで。
バーっと見たところそんなにね、おかしなことはなさそうですけど。
本当ですか。
海外に向けてってなったら、日本語ではなくて英語メインにしてっていう感じが、やっぱりそうですね。それがいいですよね。
その辺でもちょっと時間かかったんじゃないですか。
そうですね。
結構、アワードに出してから反応とかってありました?
そうですね。反応はありましたね。
やっぱりGoogleアナリティクスとかを入れて、データとかちょっと見てたりとかもしてたんですけど、
やっぱりアワードに出したことによって海外からのアクセスがすごい多くなったりとかして、っていうのもちょっと見ながらやってて。
で、お問い合わせとかもLINEとかから来たりとかもしたんですよね。
そうなんですね。どんな連絡が来ました?
その時は仕事の話とかではなかったんですけど、この音楽、なんて音楽みたいなのが結構よく来ましたね。
海外の方って本当に素敵なサイトだねっていう一文だけでメールが来たりするって。
そうなんですね。
来ます来ます。
そうなんですね。そういうのがすごく新鮮でしたね。やっぱり。
そうなんですね。私もたまに今でも来てて、もうその時はありがとうって言って、あなたのおかげでYou made my dayって言って、あなたのおかげで素敵な一日になったよって言って、一言で返す。
それだけなんですけど、すごい嬉しいですよね、やっぱり。
そうなんですね。
アニメーションについて語ったり、現場で感じる転職や中途採用のリアルについて話す音声番組です。
毎週月曜朝6時更新です。
通勤や休憩時間のお供にぜひお聞きください。
詳細はカタカナでグリテンラジオと検索してチェックしてください。
あとはローディングアニメーションとか、アニメーションに特にこだわっていたのかなと思うんですけど、
これっていろんなサイトを見て、この動き入れてみようとか、そういう感じで閃いてたんですかね。
そうですね。ローディングアニメーションもそうなんですけど、
あとページ繊維とかも、多分見てもらえばわかると思うんですけど、シュンって流れるようなというか、
流れますね。
してみたりとか、そういうアニメーション的なところは、ちょっとこだわって作りましたね。
なるほど。作っていくのは全部JavaScriptだと思うんですけど、やっぱりコンソール魔人になりますか。
15:07
コンソール魔人。
ひたすらコンソールで動きを確認して。
これ出てこない、エラーになった。
エラーとの戦いでしたね。
やりますよね。ひたすらコンソール。コンソールで書きすぎて、どのメッセージが出てるのかよくわかんない。
そうですね。
そうですよね。そうなりますよね。
ポートフォリオについてですね、私生徒さんからもよく質問されるんですけど、最初の最初って実績もないじゃないですか。
何を載せたらいいですかってすごく聞かれるんですよ。
そうですよね。
どうしましょう。
でもそうですね、難しいところではあるんですけれども、数よりも自分が全力を出し切ったこれみたいなものがあればすごくいいんじゃないかなっていうふうにはやっぱり思いますね。
確かにそれはありますね。
例えば、さっきもちょっとお話したかもしれないですけど、模写で何個も作って、それをたくさん載っけるよりは、これだっていうものを一つ作って、それがポートフォリオサイトじゃなくてもいいと思うんですよね。
それがあればまたちょっと違うのかなっていうふうにはやっぱり思いますね。
一つでも二つでもいいので、自分がけっこうがっつり携わったものを一つ用意して、それ詳しく説明できたらいいかなっていう感じですよね。
そうですね。
確かにそうなりますよね。
松田さんのポートフォリオサイト見ても、一つ一つけっこう画像をたくさん取り入れて、使ったツールだとか、どういうことをやったかとか、そういうのを書いてらっしゃいますよね。
そんな感じで、じゃあ一つ一つに思いを込めて、思いのこもったものを、模写で誰かが作ったのじゃなくて、自分の作った思いのこもったものを用意しましょうっていうのがポイントですかね。
そうですね。
なるほど、なるほど。
さて、ここでリスナーさんからのメッセージを紹介したいと思います。
ヒカルさんからいただきました。ありがとうございます。
マナさんはリアクトを始める際にVueと迷いませんでしたか?また、リアクトを選んだ理由を教えてください。
そうなんです。私Twitterでちょこちょこツイートしてるんですけど、現在リアクトを勉強中なんですね。
VueっていうのもJavaScriptのフレームワークで人気なものなんですけど、よくどっちかで迷うかなと思うんですが、私は今リアクトです。
で、Vueと迷ったというよりも最初はVueをやってました。
松田さんリアクト使ったことあります?
リアクトは使ったことはないですね。
18:01
やってみようっていう予定も特に?
そうですね。やってみたいなっていう気持ちはあるんですけれども、なかなかそこまでちょっと今手が付けられずにいますね。
じゃあもう素のJavaScriptを書いていってる感じ?
そうですね。だったりとか、JQueryだったりとかっていうのをちょっと使いながらっていう感じですかね。
そうですね。今質問にあったVueなんですけど、最初は私Vueをやっていて、これフレームワークってすごいバージョンが変わっていったりして、また覚え直したりとかいうのもすごく多いですね。
私今までやってたVueがバージョン2だったものが3に変わるときに、仕様がすごいリアクト寄りになってきてて、これならリアクトでいいんじゃないってなって、今リアクト、周りからのおすすめもすごくあったんですよね。
JavaScriptを使ってる方だったら、リアクトじゃないの?みたいな感じの謎の圧が最近よく感じるようになったので。
それでリアクト勉強し始めてっていうところですね。
リアクトというよりも最終目標としてはJAMstackでブログとかですね、そういうのをウェブサイトをリアクトベースのNext.jsとか使って構築していきたいなというのを目標にやってるところなんですけど、JAMstackとか聞いたことありますかね増田さん。
はい、ありますね。JAMstack開発っていうものが最近ちょっとトレンドであるので、やってみたいなっていう気持ちはそうですね、あるんですけれども。
そうですね、たぶん1年前の私が今の増田さんの心境だったと思いますね。聞いたことあるしやってみたいけど、ちょっと時間もないしな、みたいな感じでした。
で、私毎年1月1日にですね、今年は何をするぞっていうのを決めるんですけど、それを今回リアクト、JAMstackを目標に掲げて1月から勉強を始めたところです。
なので、質問のところに戻ると、JAMstackでウェブサイトを構築していくんだったら、やっぱりリアクトがベースになるサイトが世界的に見て多いっていうのと、使う人が多いとリソースも多いので、検索したときにすぐその答えが出てくるとか、そういうメリットも考えてリアクトを選んだって感じですかね。参考になれば幸いです。
ということで、増田さん2回にわたりありがとうございました。
ありがとうございました。
最後にお知らせなどあれば。
Twitter、たまに発信してるので、ぜひよかったらフォローしてください。
はい、皆さんフォローしてください。では、増田さんまたお待ちしています。今日はありがとうございました。
21:03
ありがとうございました。
ポートフォリオサイトって言ったら、就職活動とかそういうことによく使われるイメージはあるんですが、アワードに挑戦すると、コンテストに応募してみる、そういった目標を持ってみるっていうのも一つありかなと思います。
増田さんの場合は、ダンサーとしてコンテストにも挑戦してきたっていう経験があるので、意外と気軽に挑戦できたという話でしたね。
皆さんもどんどん海外でも国内でもコンテストに挑戦してみたらいいかなと思います。
増田さんとWebデザインスクール卒業後のキャリア形成についてお話しした前回のポッドキャストも聞いてみてください。
さて、この番組では感想や質問、リクエストなどお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
TwitterではカタカナでハッシュタグWebカフェをつけてツイートしてください。
そしてAppleポッドキャストやSpotifyのポッドキャストではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech AcademyはWebデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
学習した後に実案系に挑戦できるTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。Webクリエイターボックスマナでした。
