00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ
私はリスナーでWebクリエイターボックスを運営しているManaです。
Web制作を勉強中のかけだしちゃんです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、ポートフォリオサイトは自己表現のキャンバス、です。
かけだしちゃんがポートフォリオサイトを作っていて、だいぶデザインが進んでいるようです。
今日はその辺について聞いてみたいと思います。
かけだしちゃん、いかがでしょうか?
正直、コーディング課題、前回の課題が山場だと思っていたんですが、ここも山場でした。
やることがいろいろあって大変です。
山場はこの後もずっと続きます。
一つ一つ、焦らず見ていきましょう。
まずは、オリジナルサイトの新着デザインのところなんですが、だいぶ完成に近づいている感じかなと思うんですが、いかがでしょうか?
フォトショップでデザイン幹部を作っていまして、大きさや油箱を揃えるのがすでに大変です。
コーディングする前から大変ですね。
大きさというと、他にもフォトショップのアートボードのサイズだけ見てしまって、書くコンテンツや文字をとても大きく作ってしまったり、
ここはご指摘をいただいて作り直しているつもりなんですけども、まだまだ大きいかもしれないです。
一つサイズを直すと、一旦揃えたはずの余白がバラバラになって、一個ずつ詰め直したり、いろいろとてんやまんやしています。
あとは内容もですね、自分のポートフォリオサイトというと、自分を売るサイトですよね。
オリジナル漫画の紹介や、書かせていただいた漫画の紹介はできそうなんですけれども、他に何を書けばいいのかわからなくなっています。
私は一体何なんだってなってますね。
自分を見失ってる感じですか?
見失ってます。何か紹介できるとこあったっけ?ってなってます。
今まではですね、クライアントさんから原稿をもらっていたので、急にライティングやマーケティング、ブランディングもやってねって言われてるような気持ちです。やることが多いです。
クライアントワークだったら、ある程度の内容はクライアントの方からいただいたりとか、アイデアを出してもらったりとかいうこともあるので、全部一から自分で、一人でっていうことはないんですが、
03:11
ポートフォリオサイトは自分のサイトなので、自分がやっぱり主体になって動かないとっていうのはありますよね。
自分のいいところって自分ではわかりづらいですし、あと日本人はよく謙遜してしまうので、「いや、そんなことできないです。」みたいな感じで、すごい世界的に有名なプログラマーですら、
そういうふうにですね、「あ、そこまで大したことないんですよ。」みたいな。リナックスを作った方とかも、リナックスちょっとできるっていうTシャツを着て歩いてるような。
ちょっとできる。プログラマー界隈でちょっとできるっていうのは、ちょっとできるじゃないんですよね。
そうです。その言語を作ったような人がちょっとできるっていうレベルで。
ハードルが高い。
そうなんですよ。最初はね、完全に理解したから始まって、何もわからないようになって、最終的にはちょっとできる。
落ち着いちゃった。
そうなんですよ。そんな感じで謙遜してしまうと、何も掲載することはなくなってしまうので、ある程度自信を持って考えていってほしいかなと思います。
自分でちょっとわからないなっていう時は、身近な人とか一緒に掲載する内容を考えてみるっていうのもいいかもしれないですね。
得意なことをわかりづらい時に、そうやって人と話をしていると、
例えば私が過去の生徒さんにですね、制作はもちろんそうなんですが、それ以上に人が好きで、人の話を聞くのが好きっていう人がいて、
ポートフォリオサイトにも制作物の紹介よりも自己紹介欄で、人とのつながりのエピソードだったりとか、
ヒアリングに力を入れてるってことをメインに打ち出そうっていう話になったんですね。
とりあえずポートフォリオって聞くと、よくあるテンプレート風に自己紹介をちょっとあって、制作物並べてお問い合わせページがあってっていう形にやりがちなんですが、
自分のいいところを最大限に出せるような構成にしないとっていうのはありますね。
いいところ、いいところ。
そうですね、メンタリングでモナさんにいろいろと引き出してもらっています。
そうですよね。最初の原案からちょっと結構変わってきましたよね。
そうですね。たくさん増えまして、見ごたえがあるサイトになるはず。
素晴らしい、素晴らしい。そうなんですよね。
で、初心者さんあるあるで言うと、初心者の方、掲載できる制作物がそんなにないんですよね。
やっぱり最初に作る自分の制作物がそのポートフォリオだったりするので、制作物がない状態で他のデザイナーの方のポートフォリオサイトを見てみると、
制作物がバーっと並んでるから、じゃあ制作物の欄が必要だなっていう感じでデザインされる方も結構多いんですが、
あまり参考にならないかもしれないですね、そういった場合は。
06:01
掲載するものが違うので。
なので、そういう初心者さんだったら、制作物で勝負できない分、どんな勉強してきたのかとか、
これまでの経歴、今後どうなりたいか、どういうふうに課題に取り組むのかとか、
そういう人となりも含めた仕事に取り組む姿勢みたいなのが見たいかなと思いますね。
採用する側からしても、作ったものがあるんだったらそちらをもちろん見たいんですが、一緒に仕事できるかっていうのもすごく大切なんですね。
なんかもうオラオラ系の感じの、俺はこういうやつだぜみたいな、自分勝手な内容だったら、なんかあんまり仕事しづらいかもなーって思ったりするんですが、
そういうふうに人との関わり大事にしたいですとか、そういうのがよく伝わるような内容だったら、採用してみたいなっていうふうに思うかもしれないですし、
ちょっと内容は検討したほうがいいですね。
なので、ウェブサイト全体がキャンバスだと思って自己表現できるようにっていうふうには説明してます。
かけだしちゃんもね、そういう意味では今最初はよくある形になっていたんですが、今画面全体を使ってイラスト散りばめたりとか、吹き出しを使ったりとか、そういう感じで今考えてますもんね。
じゃああとはですね、ウェブサイト制作あるあるについて語ろうじゃないかというとこなんですが、あるあるといえばこういうのがありますか?
そうですね、あるあるをまだ語れるほど場数は含めてない気もするんですけれども、個人的にカルーセルなどを取り入れて動きが入ると、サイト自体がレベルアップ、ついでに自分もレベルアップした気分になります。
もちろん状況によってはカルーセルなどは取り入れない方が良い場合もあるってのはあると思うんですけれども、とりあえずそれは置いといて、動くと嬉しいっていうのはかけだしさんのあるあるかもしれません。
動くと楽しいし、他のページとは違う感じも出ますし、作ってても楽しいですもんね。ちょっと1行足したらぴょんと動いて、楽しいってなりますし、すごく気持ちはよくわかります。
今出てたカルーセルっていうのが画像とかがですね、くるくる動いたりとか、次の画像に数秒経ったら自動的に変わっていくというようなものですね。
これ制作側からするとすごく手っ取り早いんですね。今おっしゃったみたいに動きがあって、作り込んでる感も出ますし、後は見せたいものが多い時にすごく便利なんですが、本当に必要なのかっていうのは検討した方がいいかなと。
以前このポッドキャストでもですね、かけだしちゃんのポータフォリアサイトのワイヤーフレームの段階で、ちょっとこれ本当にいるのかなっていう話をして、結局作用しないんですよね。
そうですね。
それが本当に必要かどうかっていうのは検討した方がいいです。カルーセル自体は使い勝手が悪かったりとか、あとアクセシビリティっていって操作自体が難しいっていう場合もあったりするんですね。
09:09
なので本当に一番見せたい内容を強く打ち出した方が、いろんなものをクルクル動かすよりはいいかなとは思ってます。
あと私が思うあるあるで言うと、これ長年やってる方もそうかなと思うんですが、なんかやってみたけどなんか違うな、なんかしっくりこないなみたいな、理由はわからないけどよくない気がするっていう時は、やっぱり他人が見てもしっくりこないんですよね。
なんか違うなって思って作られたものはなんか違うなって思われるんですね。
なのでそうなった時に一旦履席するとか、一晩寝かせて時間を空けて改めて見直してみると、より良いアイディアが出てきたりとか、あれなんでこんな色にしたんだろう、こっちの方がいいじゃんみたいなのが出てくると思うので、
私も結構一晩寝かせて次の日にもう一回デザインを考えてみたりということはあるので、よかったらその辺も時間を空けて考えてみるといいと思います。
なんかそういうことありますかね、なんか違うなーっていう理由はわかんないけどどうしようかなーっていうそのまま放置したりとか、そういうことありました?
あります。
なんか違うなっていう時どう解決してました?
やっぱり時間は空けますね。なんか違うなーのなんかで頭がいっぱいになっちゃってると、それ以上何もできないなーっていう気がしまして。
ゲームとかではよくやってますね。時間を空けて考え直す。
ゲーム?
謎解きとか。
確かに。なんか今までずっとこれが正解だと思ってたやり方で全然できなくて一晩おいてやってみたら、こっちの角度からこのアイテム使えばいいじゃんみたいなのが見えてきたりしますもんね。
そうですね。私特にあの思い込みが結構激しくて、Aが犯人だって思うとそのAが犯人だっていうのをもう仮定してしまって、そこからAが犯人な理由を見つけるっていうことをやりがちなので、
ここで一晩置くと頭の中からAがちょっと薄れて、Bお前も怪しいやんっていう発想にやっと至れる感じなんですよ。
なるほど、それあれかもしれないですね。人間の悪いところですよね。なんか自分の思った通りにしないといけないみたいな感じで行動しちゃう。
そうですね。それ以外がすっぽり抜け落ちちゃうことも多いんですよね。
そうですね。これはでもどのジャンルでも新人でもベテランでもあると思いますね。
ですかね。
なんならベテランの方があるかもしれないですね。なんか若い子向けのサイトはこの色を使うべきみたいなのがもしかしたら固まってしまう方とかもいらっしゃるので、
そうじゃないんだよと、今ピンクじゃなくて水色の方が流行ってるよみたいなのがもしかしたらあるかもしれないので、
確かにそのベテランこそそういうところを立ち直って見直してみるとかいうのが必要かもしれないですね。
12:06
あとまあ初心者さんあるあるかなっていうのでよく思うのが、自分がよくわかってないものっていうのはデザインにも落とし込めないなっていうのは思っていて、
例えば自分が今まで知らないジャンルの制作に携わるんだったら、そのジャンルを知らないと何も動けないかなと思うんですね。
なんかよくあるテンプレートに内容を流し込んでもそのサイトの良さっていうのは伝わらないので、
例えばキャンプのサイトだったら、キャンプ行ったことないんだったら行ってみるとか、美容室のサイトだったらその美容室に実際行って切ってもらうとか、
男性の方でも可愛いものとかデザインが苦手っていう方いらっしゃるので、雑誌を買うとか、ネイルを買ってみるとかいう方もいらっしゃいましたね。
なのでその対象物をよく知るっていうところからスタートになると思います。
ポートフォリオサイトだったらですね、ポートフォリオサイトの話に戻ると自分のことなので自己分析はしっかりとしないといけないですね。
好きなことだったり大切にしていること、得意なこと、これまで経験したこととか、そういうのをしっかり自己分析してデザインに入るという感じが必要かなと思います。
そういったところうまく出せてますかね?いかがですか?
しっかりと向き合ってしまうと、雑なこと言ってお金無くてきりスクールやってる人たち小指ぶつけないかなっていうところがバーっと出てしまって、サイトの色が変わっちゃうので。
でもいいじゃないですか、どっかのボタンポチッとすると裏サイトみたいなのが見えて、画面がガラッと黒字に変わって、ドローンみたいな。ドロドロドローンみたいな。
まず明るく描き出しのサイトが完成してから考えます。
そういうのも大事ですよね。いつかそういうドロドロサイトが見れるんじゃないかなと期待して待ってます。
正式応募前に企業の中の人とカジュアル面談ができるので、仕事内容やメンバーのことをしっかり理解した後に先行に進めます。カジュアルに始める転職活動にグリーンをご活用ください。
今お話をした感じでも、性格とデザインって関係性あるんじゃないかなって私昔から思っていて、今言ったみたいに描き出しちゃん、今はキラキラした感じの可愛い感じのデザインで作っていってるんですが、ちょっと気を抜いたらドロドロな暗い感じのものが出来上がりそうなところが出てくるので、性格とかその時の気分とかいうのもちょっと反映するんじゃないかなって思うんですね。
15:15
もちろんクライアントのサイトだったら目的とか内容とかいうのが決まってるので、レイヤーとかデザインもそういった方向に向けてできるんですが、ポートフォリオサイトは自己表現なので、少なからず性格も関係してくると思います。
かけだしちゃんの性格とデザインの相関性みたいなのは何かありますかね? これはもうマナさんに教えていただいたことになっちゃうんですけども、前に夢いっぱいのサイトにしたいと言いながら、結局できたデザインはすごくコーディングのしやすそうな、大変シンプルなものになってしまってまして、アヒルもかなり少なめというか、いなかったでしたっけ最初は。
マナさん 最初いなかったですね。 レイヤー 口ではいろいろ言いつつ、実際にはなかなか前に踏み出せないタイプなのかもしれないと思うと、割とその通りだなーってなってます。
マナさん 今もですね、散りばめたアヒルや配色などでそれっぽく見せようと思ってるんですけども、まだデザインが弾けてるかっていうとそんなことはないので、もしかしたらいつかコーディングがバリバリできるようになったら、弾けたものが作れるのかもしれないです。
マナさん そうですよね。最初はそうだと思いますよ。自信がないときほど決まった形からはみ出すのが怖いので、最初はそういったよくある形からスタートして、ちょっとアヒルちゃんを散りばめるとか、ちょっとアクセントに派手な色を入れるとか、少しだけ自分というエッセンスを入れる、そういったところから始めるのもいいかと思います。
マナさん 私も最初は有名なデザイナーの方のサイトとすごくレイアウトが似た感じになっていて、あまりこう自分らしさっていうのは出てなかったと思うんですね。その根底には素敵な人と同じことをしてたら自分も素敵になれるんじゃないかっていう、多分そういうのが頭のどっかにあったんじゃないかなって思います。
マナさん 今の私のポートフォリオサイトもテキストが結構少なくて、本を書いているのになんなんですけど、ちょっと文章があまり得意ではないので、なるべく文字は少なく表現できるようにっていう形で作ってます。そういう自分の考えとか性格も出てきてると思いますね。
マナさん たまーにこうはっちゃけてる感じの人で言うと、たまーにやりすぎ、こうサイトのデザインもやりすぎてるっていう方もいらっしゃって、ただこうわちゃわちゃしてるとか派手とかいうだけだったらまだいいんですが、例えばこう思わぬ方向にスクロールされちゃうとか、操作してないのに勝手にこうスクロールしていくとか、キーを押したら星のイラストがくるくる回りますとか、なんか使い勝手が悪いんですね。
18:02
見た目だけじゃなくて、もう使えないようなウェブサイトだったら、ちょっと止めますね。これは本当に必要ですか、みたいな。これだったらキーボードを押すたびに星が動きますよね、みたいな感じで。
ちょっとこの遠回りに優しくね、これいらない、いらないとは言わないですけど、ちょっと使いづらいですよねっていう感じで促したりはするんですね。なのでこう本当に決まった形からじゃないとできないっていう方と、自分はこうだぜみたいな感じでド派手にいく方と結構変わってくるかなと思いますね。
あとは生徒さんのポートフォリオサイト見てても、例えばダンスとかイラスト描いてるとか、絵画をずっと描いてるとか、そういう自己表現してきた人の作品は、なんか一つ一つの画像だとか作品が大きくてダイナミックに打ち出そうっていう方が多い印象ですね。最初から自分はこうしたいっていうのが世界観が早い段階で明確になってると、そういう方は多かったかなって思います。
羨ましいです。
そういうのがちょっとまだね、難しいですかね。
はい。
コーディングをもししなくていいんであれば、こうしたい、愛したいっていうのもありますか?
そうですね。アヒロたくさん動かしたいです。おふくちゃんのサイトのように。
そうですよね。おふくちゃんのサイトっていうのがフェリシモさんから出てる。
フェリシモさん猫部の猫のおふくちゃん。
おふくちゃんのサイトですね。これ前回のポッドキャストでもお話ししてますので、よかったら見てみてください。イラストがいっぱいでマンガの形になってるウェブサイトですよね。
かわいいやつです。
うん、かわいいですよね。そういう世界観が出せるといいかなと思いますが、今はその前段階ですね。
はい。
どこまではっちゃけるかっていうのが見どころです。
はい、そしたら今回のテーマポートフォリオサイトは自己表現のキャンバスでしたが、かけだしちゃんいかがでしたか?
はい、最初の方にも言ったんですが、前回のコーディング課題が一番の山場だと思って疑ってなかったんですけども、全然そんなことはなかったです。
自分をどう伝えるかを考えて原稿を書いて、素材もマンガやイラストなので自分で書いて、いずれは自分でコーディングするっていうのは、実はポートフォリオサイトってかなりハードなお題だったのでは?と今更思ったんですけれども、もうやるしかないので。
やるしか。
はい、頑張ります。
はい。
ちょっと脱線するかもしれないんですが、サイトの内容を考える、デザインカンプまで起こすこの過程がですね、今のところ一番スクールに入っててよかったと思えるポイントだったかもしれなくて、もちろんコーディング課題でも非常にたくさんお世話になりました。
21:00
ただ、コーディングと違ってサイトの内容ですかね、どこをどうすればより良くなるかも全く見当がつかないし、頑張って客観的に見ようとしても、そもそものインプットが少ないのか、閃きが全然降りてこなくて。
なんですけども、制作途中のデザインカンプ、マナさんに見ていただいたら、気になった箇所やよりよくできそうなところ、参考サイトまでですね、次々と出していただきまして、この引き出しは独学だと短期間では身につかないものなんだろうなぁと思いました。
むしろここにしっかりと時間を割くために、コーディングはできるだけ独学で進めてからスクールに入ってもよかったのかなと思うくらいですね、内容についていっぱいマナさんとすり合わせして良いものを作りたいです。引き続き頑張っていきます。
そうですね、コーディングってやっぱり答えがありますし、正直独学でもなんとかなる部分はあるんですね。前回のお話でもありましたが、AIもコーディングのサポートもしてくれるようになってきてますし、ただデザインの部分ですね、今おっしゃったみたいにデザインってこうしたら収まりがいいよとか、こういう場合はこうしたらいいよという理論とか定石みたいなものはあるんですが、正解ってやっぱりないので、
そこだけでも相談できる人がいると完成度ががぜん変わってくるかと思います。この後もどういうふうに完成するのか見守っていきたいと思います。
よろしくお願いします。
さて、この番組では感想や質問、リクエストなどをお待ちしております。番組詳細欄にあるリンクよりお気軽にご投稿ください。
TwitterではカタカナでハッシュタグWebカフェをつけてツイートしてください。そしてAppleポッドキャストやSpotifyのポッドキャストではデビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。Tech AcademyはWebデザインやプログラミングをオンラインで学べるスクールです。現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。Webクリエイターボックス マナとかけだしちゃんでした。
