00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ
WebデザイナーでWebクリエイターボックスを運営しているManaです。
Web制作を勉強中のかけだしちゃんです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、Webサイト制作のコンセプト設計です。
新規のWebサイトを作るときは、とにかく目的を明確にしないと次に進めないんですね。
事前にしっかりと時間をとって考えていきましょう。
作りたいWebサイトの方向性についての回ですが、かけだしちゃんいかがですか?
ついにここまで来てしまいましたね。何も決まってないことはないんですけれども、
何を求めているのか自分でもよくわからなくて、どうしようかなっていう回ですね。
自分で求めているものが自分でよくわかっていない、そういうことですね。
はい、その辺を整理しながら考えていきましょう。
まずはサイトの概要についてですね。かけだしちゃんは今のところどんなサイトを作ろうというのを考えてますか?
そうですね。ちょっと前に自分で作ろうとして止まったままになっている私のポートフォリオサイトを作りたいなと考えてます。
ツイッターのモメントも使えなくなってしまいましたし、今まで公開した漫画の保管庫だったり、むしろお仕事をお受けするためのサイトの方がいいのかなといろいろ考えています。
ちょっと前に自分で作っていたやつはですね、コードもぐちゃぐちゃになってしまいまして、
手がつけられなくなってどうしようかなという時にテックアカデミーさん、マナさんからお声掛けいただいたので、今度こそは完成させたいと思っています。
なるほど、なるほど。かけだしちゃんはツイッターの方で漫画を公開していて、それをモーメントという機能でまとめていたんですが、そのモーメント自体がツイッターが無くしますよという、もう無くなったんでしたっけ?
そうですね、確かもう新しくモーメントに追加はできないはずです。
そうなんですね。それをまとめて読みたい人はどうすればいいかなということになったので、そういったのをまとめて見れるサイトを作りたいなと、まずそういうふうに考えていらっしゃるんですね。
03:00
そのサイトを見た人がお仕事を頼めるように紹介とかもしていきたいなと、そういう感じですかね。
はい。
なので、いろんな目的があるんですが、一つのまず絶対にこういう目的を達成してほしいとか、こういうふうにユーザーに見てもらいたいとか、そういうのがあったらそこを明確にして、ついでにこれもあれもというのは後から出てくると思うんですが、一番大切な目的だけをまずは明確にしておくことが大切ですね。
なぜサイトを作るかっていう目的ですよね。
はい、そうですね。そういう話になってきます。その前にですね、ここが今のところ心配だなっていうのはありますか?
コンセプトではないんですけれども、一番心配なのは正直完成まで持っていけるのかなっていう一点でして、やはりコーディングがまだまだ慣れていないので、
完成できないものを考えるくらいならば、だいぶシンプルにして、一旦は完成させてしまった方がいいのかなとも考えたりしてます。
なるほど、そうですね。どっちを取るかなんですが、一旦もう8割くらいの出来かなっていう段階でも完成して、後から更新することはいくらでもできるので、まずは公開するっていうのが第一ステップかなと思いますね。
本当に初心者あるあるでもそうなんですけど、自分のできる範囲でこういうの作りたいけど、今の自分にはできないかもしれないってなったら、挑戦しなくなっちゃうんですね。
なので最初は夢いっぱいに考えてもらって、独学だったらちょっとそこまでできないかもしれないんですが、私が今メンターでついている状態なので、夢いっぱいに考えてもらって、
私がそれをチェックしてですね、これはできる、すぐできるからやっちゃいましょうっていうのとか、これはちょっと難しいから一旦置いておきましょうとか、そういう初心者選択は私の方でできるので、安心して夢いっぱいに語ってもらって大丈夫ですよ。
そういう風に考えないと、これはできないかもしれないからやらないとか、これは時間かかりそうだからやりたくないとか、そうなっていくと本当に真っ白な背景に黒い文字が真ん中にありますっていう飾り気のない、面白くない感じになっちゃったりするので、その辺は安心して今のうちにですね、しっかり考えていきましょう。
私がそういえば最初に作ったサイトどんなのがあったかなって、この話になったときにちょっと思い返してたんですが、
どんなんですか?
すごい最初の最初は中学校の頃に、私ディルアングレーっていうバンドが好きで、今もファンなんですけど、そのファンサイトをそういえば作ったなと思い出しました。
そのバンドが結構、ザビジュアル系みたいな感じだったので、黒い背景に白い文字、白い文字じゃないかもしれないな、もう本当に見えないようなグレーみたいな感じで、なんか血の背景画像とか作ってみちゃったりしたりして、そんな感じのサイトだった気がするんですよね。
06:11
で、今思えば肖像権とか著作権とか全く無視してたような気がして、ちょっとその辺はですね、反省点ではありますかね。今絶対そんなサイト作れないですね。
中学校の頃だったので、今もう消してますので、ちょっと許していただけたらと思います。
中学生、中二病と言いますか、私もきっとそういう雰囲気のイラストを描いたかもしれないなと思うんですけども、そこでサイトを作ってしまうのがマナさんだなと思いました。
そうですね、中二病のサイトでしたね。そういえばそうだ。そうなんでしたね。で、その後は作り続けてたわけではなくて、高校生の頃はちょっとギャルっぽかったので、あまりそういうところはしなかったんですが、時は流れて専門学校でウェブサイト制作を習って、その時にポートフォリオサイトとかを課題で作ったのかなと思いますね。
で、それがちょっと漁ってみたらですね、まだその当時の画像が残ってたので、ブログの方で紹介してまして、そこよかったら見ていただければという感じですかね。
今思えばちょっとなんか雑だなあっていう、その時の一生懸命最大限を尽くした感じはあるので、まあ余白を取りましょうとか、画像の見せ方もうちょっとどうにかならなかったかなとか、いろいろ思うところはあるんですが、まあまあ頑張りましたねっていう感じですかね。
後で見てみようと思います。
はい、ぜひ見てみてください。
で、冒頭でお話しした目的設定のことですね、この辺もちょっと深く考えていきましょう。
これまでは、なんかこうコンセプトを決めてサイトを作ったっていうことはあったんでしたっけ?
サイトというよりはご依頼いただいて、ランディングページを作っていたことはあるんですけれども、私が決めるというよりは、クライアントさんからこのサービス売りたいからよろしくみたいに、先方から連行と一緒にもらっていたような感じなので、私が決めたことないかもしれません。
なるほど。その時に何か質問とかはしなかったですか?世界観について聞いてみたりとか。
ヒアリングですよね。ほとんどなかった記憶があります。
デザインするにあたって必要なこと、どういうふうに見せたいかでしたり、何歳ぐらいの、どういった方を想定としてますかっていう、情報があらかじめもらえなかった場合は、こちらから聞いていたんですけれども、深掘りとかは全然やってなかったですね。
09:01
その時に説明がクライアントの方からあったのが、目的についてとかも最初にあったんですかね。最終的にこれをしてほしいっていう。
このセミナーに申し込んでほしいでしたり、この商品を売りたいぐらいですね。
そうですね。それが本当に大切なところで、ウェブサイトを見たい人にどんな行動をとってほしいか、例えば今おっしゃったみたいにセミナーに申し込んでほしいとか、登録してほしい、商品を購入してほしいとか、そういう何かしら目的があるはずなので、その辺はしっかりと聞いておいて、そこからターゲットユーザーはこういう行動をとるかもしれないから、こういう風な流れでデザインしていこうとか、そういう形になっていくんですね。
たまにですね、目的特にないけどウェブサイト作ってほしいっていうクライアントもいらっしゃいます。そういった方には出会ったことないですかね。
ないですね。
これがよく企業のサイトとかであって、とりあえずサイトがいるみたいな風潮だから作っといてよとか、それもなくもないですね。あるあるかなとは思うんですけど、そういった方でも、じゃあなんで欲しいのかって言ったら一応ライバル社が持ってるからとか、そういうことがあって、
ライバル社との差別化を意識しましょうとか、採用についての情報を載せておきましょうとか、深掘りしておくと何かしらの目的があるはずなので、その辺は一緒に考えていけたらいいかなと思いますね。
この深掘りのご提案が全然出てこないので、今マナさんがサラッとこうしましょう、採用を強化しましょう、サラッとご提案が出てきたのがやっぱりすごいなぁと思いました。
全く見当もつかないというのは、クライアントの方が多分そういう何も出てこないという状態になっていると思いますので、これまで見てきたウェブサイトの数っていうのはクライアントよりも我々作る側の方が圧倒的に多いはずなんですね。なのでそれを踏まえて提案ができたら一番いいかもしれないですね。
テック企業、プロダクト開発、DX案件など、グリーンだけの良質な求人を数多く揃えています。正式応募前に企業の中の人とカジュアル面談ができるので、仕事内容やメンバーのことをしっかり理解した後に先行に進めます。カジュアルに始める転職活動にグリーンをご活用ください。
説明することで言うと、コンセプト自体を説明できたらいいかなと思います。これがプレゼン能力にもなってくるんですが、コンセプトの説明とかもじゃあ今まではしたことはない感じですかね。
12:04
はい、ありません。
報告デザインだったりとか、紙面のものでも何でもいいんですが、これを作ったのは自分ですと、ちょっとなりきってみまして、なんでこういう書体にしたんですかとか、なんでここに画像を配置したんですかとか聞かれたときに、そのデザイナー風に答えてみると。
そうすることで、じゃあこのウェブサイトの目的は何なのかっていうのが、自分でも深掘りできますし、それを説明する能力にもなりますし、他の人が作ったデザインを見る力も養っていけますので、これは結構おすすめですね。
ありがとうございます。ちょっと勇気がいりますが。
そうですね。今ちょっとなんかやってみます?
えー。ご勘弁を。
はい、じゃあまたいつかのメンタリングでこんなのがぶっこまれますので、用意しておいてくださいね。
はい。
はい、という感じですね。じゃあ、そうですね、予告しておきましょうか。私のポートフォリオサイトを自分が作った風にプレゼンしてみましょう。
えー。
これかけ出しちゃんだけじゃなくてですね、このポートキャストを聞いている方もですね、私のポートフォリオサイト、webcreatormana.comっていうのがあるので、それを見てどうデザインしたかっていうのを、その人なりにですね、自分なりにちょっと解釈をしてプレゼンをしてみるっていう練習を、勇気のある方は聞かせてください。
いつかかけ出しちゃんのが聞けるかも。
ちょっとこんな感じだと難しいかな。
ちょっと心に余裕が出てきてから、コーディング課題終わってからでいいですか。
そうですね。時間のあるときに、メンタリングのときでもお話をしてみましょうか。
はい。
はい、楽しみですね。
はい、ではちょっと制作のお話に戻りまして、作る前にですね、考えておくことのもう一つ、必要な機能をまとめておきましょうっていうのもあります。
はい。
オリジナルサイトでは、こういう機能をつけましょうとか、ああいうのはやめましょうとか、そういう機能の取捨選択っていうのも大切なので、その話もしていこうと思います。
かけ出しちゃん的には、作ろうと思っているオリジナルサイト、どんな機能を盛り込みたいかっていうのはもう決まってますか。
決まってなくてですね、今まで書いた漫画が読める機能を欲しいんですけれども、クリックやスワイプでスイスイ読めるようにした方がいいのか、それとも画像を縦に並べていくだけでいいのかとか、何話ごとにまとめればいいのかなど考えることがちょっと多いですね、漫画については。
15:13
あとはお問い合わせフォームを入れたいです。
そうですね、お問い合わせフォームは一から作るのは本当にセキュリティ的にも大変だったりするので、外部のサービスを使うのが一番楽ですね。ここはすぐできると思います。
機能なんですけど、どんな機能にしようかっていうのを迷ったときに、よく私がやるのが、とにかく同じような機能のついているサイトを見まくって、どういうふうにしているのが一番多いかとか、ユーザーがよく使っている漫画の読み方、どういうので読んでいるのかっていうのを自分なりにリサーチしてみると、結構傾向が見えてくるんですね。
縦でダーッと並べているだけの方が多いなとか、スワイプ機能ついているのが最近増えてきたなとか、漫画をよく読むのであれば見たことはあると思うので、そういったサイトを確認してみるっていうのもありですね。
今のところ見てきたサイトとかで、どういう機能が多かったっていうのは、発見はありました?
そうですね。自分の漫画を自分のサイトに載せる方が、最近ちょっと減ってきたみたいでして、
Kindleで出したり、ブログでちょっとずつ公開していったりなんですけれども、もうそのどちらかに習ってしまった方がいいのかなと、選択肢が増えてしまって悩んでます。
そうですね。その辺は数値が出てないものとか特に難しいですよね。
誰かがすごく親切な方がですね、アンケートを取ってくれて、もうKindle読んでる人が圧倒的に多いんだったらそっちに行けるんですが、その辺が見えてこないんだったら、両方やってみてもいいかもしれないですね。
それである程度自分で、全ての話数じゃなくてもいいので、前半だけとか試してみて、人数が多い方を採用していくとか。
そういう感じで、ウェブサイトのいいところって、どんどん変えていける、アップグレードしていけるので、最初はとりあえずやってみる、試してみる、改善していく、この流れを作っていくのが大事ですね。
Kindleは自分で公開できるんでしたっけ?
公開できるらしいです。
そうなんですね。
ちょっと頑張れば無料でも公開できるらしいので。
なるほど、なるほど。それだったらKindleを使わない層にはリーチできるのかなとか。
ダウンロードする手間を考える方もいるかなとか、ウェブサイトでサクッと見せたいのかなとか、その辺も考える余地があると思うので、全話じゃなくても、本当に2,3話ぐらいからでもいいので、ちょっとずつ試してみるっていうのもありですね。
どんな機能を使えばいいかっていうのは、やっぱり目的に見合った機能を優先するっていうのが大事なので、かけだしちゃんの場合は漫画を読んでほしいっていうのが一つあるんですよね。
18:00
はい。
漫画を読んだ後はどうしてほしいとかってあります?
漫画を読んだ後。
漫画を読んでそれをツイッターで拡散してほしいのか、何か買ってほしいものがあるのかとか、漫画の依頼を受けたいのかとか。
漫画は多分読んで終わりじゃないはずなんですね。その後のこととかって考えてますかね?
あんまり考えてなかったですね。もともとが、むしゃくしゃしたから書きますって生まれた漫画なので、それを読んで、あ、こんな、模写と営業で月5万取るスクールがあるんや。怖っ。気をつけとこって思ってもらえればそれでいいかなって思ってたので、その先のことを考えたことあんまりなかったですね。
今のマナさんにお話いただいて、できれば拡散してもらえれば嬉しいですし、お仕事いただければわーいってなりますし。
そうですね。それが見えてきたんだったら、漫画を読んだ後に最後のページのところにツイッターのリンクを貼るとか、お問い合わせのリンクを貼るとか、何かしらのアクションを促すためのボタンを設置する、そういうのも見えてきますね。
そういう感じで、見た人の行動の流れを考えるっていうのも大切です。
はい、そこからまた機能を考える、デザインを考える、こういう流れになってきますので、サイトを新規で作るという場合は、何をしてどうしてほしいか、最終的にどうなりたいか、この辺を明確にするといいかと思います。
はい。
それでは今日のテーマ、ウェブサイト制作のコンセプト設計でしたが、かけらしちゃんいかがでしたか。
大変学びの多い回でした。
前作っていた時は、デザインや機能もすごくふんわりさせたまま、なんとかなるやろうと思ってコーディングに入ってしまったことが、結果的にコードをごちゃごちゃにしてしまった一因だと思っているので、
今回は機能やデザインもきちんと目的を決めた上で、しっかりと詰めていってですね、コーディングで困らないようにしたいです。
ただ、まなさんがついてくれているんですけれども、やりたいこととできることは分けて考えないと、後々大変そうだなという気持ちはまだありますし、
実装できそうかどうかを重点に置いているのは、成長につながらないという、いっぱい夢を見るべきか見ないべきかで、ちょっとまだ葛藤もしているんですけれども、
せっかくテックアカデミーさんに入らせてもらっているので、やっぱり使い倒すつもりでですね、夢いっぱいのポートフォリオサイトを作れればいいかなと、そこを目指して頑張っていきたいと思います。
やることが多いですね。
そうですね。やること多い時は、とにかくやること全部書き出すとか、やりたいこと書き出しておいて、そこから選択というのは後からいくらでもできるので、最初は夢いっぱいにやりたいこといっぱいに考えていきましょう。
21:11
さて、この番組では感想や質問、リクエストなどをお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
Twitterではカタカナでハッシュタグウェブカフェをつけてツイートしてください。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているテックアカデミーについてのご紹介です。
テックアカデミーはウェブデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するテックアカデミーワークスもあるので、ぜひテックアカデミーと検索してチェックしてみてください。
またお会いしましょう。
Webクリエイターボックスまなと
かけだしちゃんでした。