00:02
ManaのWebクリエイターカフェからのお知らせです。現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ。WebデザイナーでWebクリエイターボックスを運営しているManaです。
Web製作を勉強中のかけがしちゃんです。
この番組では、Webコンテンツ製作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、オリジナルWebサイトのレイアウト考察です。
私は個人的に製作に取り掛かる前の段階である企画やワイヤフレームを考えるときが一番好きなんですね。
いろんなサイトを調査したり、実際に形になったらどんな感じかなと想像しながら詰めていくところがとても好きです。
かけがしちゃんがどうやらその段階に来たようなので、今日はそんな話をしていきたいと思います。
オリジナルサイト製作の進捗についてなんですが、かけがしちゃんいかがでしょうか。
やっと楽しいポイントに来れたなと思いまして、何を載せようどう並べようと楽しく考えております。
ただ、この後のデザインコーディングのことを考えるとちょっと辛くなったりもするんですけれども、その時はその時でマナさんにいっぱい頼って完成を目指します。
先のことはちょっと置いておいて、今楽しいことに集中していきましょう。
それではまず今やっているワイヤーフレームですね。かけがしちゃん、今実際に製作を始めてみてワイヤーフレームを考える段階でどんなでしょうか。
昔のランディングページデザイナー、仮だった時はワイヤーフレームを作ったことがなかったんですけれども、これはチームで制作するなら必須なのかなと思いました。
作っていく中でレイアウトやコンテンツが整理されていく感じがあります。
だいぶ前のポッドキャストでお話ししたかもしれないんですが、ランディングページデザイナー、仮時代にワイヤーフレームに近いもの、コンテンツやレイアウトだけ配置してクライアントさんにこんな感じでいいですかって確認を依頼したら、
イメージが湧かない、もっと完成形が見えるくらいにしてからこういうのは出してほしいと言われたことがあったんですが、今思うと中途半端にいただいた原稿を流し込んだり、画像を入れたりしたのが逆に良くなかった気がします。
シンプルなワイヤーフレームであれば、先方にも今は並びとかそういったところを決めている段階なのかなとわかっていただけたかもしれませんね。という思い出話でした。
03:01
そうですね。最初の方ではやりがちなんですね。ワイヤーフレームって基本モノクロで白バックに黒文字で、画像が入るとこだけちょっとグレーに塗りつぶしてとか、そういう本当にシンプルなものなんですが、最初の方はイメージ画像を入れてみたりとか、フォントをこだわってみたりとか、色つけてみたり、私もやったんですが、
そういうのがあると逆に邪魔になってしまって、この色じゃないんだけど、ちょっと見当違いなツッコミが入ることはあるんですね。見当違いっていうのはこっち側の意見であって、クライアント側からしたら、もうちゃんとこれデザインを考える段階なんだなって思えてしまうので、そうじゃないんだよっていうのをわかりやすくした方が親切ですよね。
今ワイヤーフレームをこんな感じで考えてますっていうのを出していただいてるんですが、モバイル版でこういう並びにしたいです、こういうコンテンツ入れたいですっていうのを考えてくださって、そんなよう手書きのものをですね、ちょっといただいてはいるんですが、掲載したいものはちょうど入っている形にはなってるんですかね。
そうですね、そのつもりです。
そうですね、パッと見て聞きたいことは山ほどあるんですが、これはやめた方がいいっていうのは特にないですね。これはダメ、これはこうしない方がいいっていうのは特になくて、これどういうことかなっていうのはちょこちょこあったりはしますね。
例えば載せたいものがたくさんあるんだなっていうのはわかるんですが、一番見せたいのは結局何なんだろうっていうのがパッと見た感じで思ったんですね。トップページでいろんな漫画だったりとか実績だったりプロフィールだったり、あれこれそれといろいろあるんですが、どれが一番なのかなっていうのがよく伝わらなくてですね、どうしたいっていうのはありました?
多分一番見てもらいたいのは百話漫画なのかなと思って結構上の方にファーストビューの下に持ってきたんですが。
そう、それなんですよ。なんでファーストビューじゃないのかなと。
なんだろう、ファーストビューってランディングページで言うと、副業セミナー開催みたいな。
はいはい、お知らせみたいなものですよね。
でもこのポートフォリオって何か一つのお知らせではなくて、駆け出しちゃんの存在なので。
分かりますよ。よくある形に落とし込んだなっていうのはすごく伝わっていて、最初の方ですね、お知らせの欄だったりとかくるくる回るカルーゼルのような状態ですかね。
いろんな情報があります。数秒たって違う情報に変わるっていう形にしたいのかなと思ったんですが、ポートフォリオの場合そんなにお知らせあるかなっていうのが一つあったりして、結構更新されたり、いろんなセミナーがあったりとか、伝えたいもの、制作物が結構すぐに変わるだとか、買ってほしいもの、商品がいろいろあるとか、そういうのであればお知らせ欄をドンと来てもいいと思うんですが、
06:05
ポートフォリオでそこまで果たしてお知らせたいことあるのかしらって思ったり。
参考で見てたイラストレーターさんだったり、エッセイ漫画家記さんのサイトがファーストビューでくるくる回して、連載している漫画の情報とか、こういった書籍が出てますとか、こういった絵が描けますといったものを回していたので、それを参考にしたかったです。
そういうふうにお知らせが今後も増えるであろうとか、更新頻度が高いであろうと言うのであれば、全然これで大丈夫です。
あんまり高くないかもしれない。
そうなんです。私も最初はそういうふうにですね、結構お知らせを最初の方に持ってきてたんですが、ポートフォリオって思ったほど更新しなくて。
私はブログが別であるので、そちらで告知する方が増えたので、ポートフォリオから外したっていう経緯もあるんですが、そのお知らせするものが頻度とか多さとか、そういうのによってつけるかつけないかは考えた方がいいですね。
特にそんなに頻繁にお知らせしないかなっていうんであれば、今言った100話漫画、一番見せたいものをファーストビューでドンでもいいかなと思いました。
ありがとうございます。
ちょっとここ要検討ですかね。ぐらいで、あとはちゃんとまとまっていますし、見えやすいような構成、ちゃんと縦並びでちゃんと見えるようになっているので、そこくらいですかね。
やっぱファーストビューってとても大切なので、そこはしっかり考えてもらってっていう形でいいかなと思います。
今ですね、かけだしちゃんにも手書きでいいんで、最初に思ったものをまとめてくださいっていうふうに言ったんですが、最初からいろんなね、フィグマだったりとか、ワイヤーフレームを作るためのツールを使うことが多いんですが、アイデアを考える段階だったらもう紙とペンでいいかなと私は思ってます。
私も実際常にノートとペンを持ち歩いていて、思ったものをすぐに書けるようにしていますので、思いつくままに書いていって、頭の中を整理して、提出するのであれば、正書としてツールを使って、テックアカデミーだったら書くっていうものを使うんですが、そういうものを使って丁寧に書き出してっていう流れにすると、ぐちゃぐちゃとならないですし、時間も効率よく使えるんじゃないかなと思いますので、
今は紙とペンでですね、書いていってもらって全然大丈夫です。
はい。どうなんですかね、紙で書いてみて、何か今までと違う感じですか?
そうですね、Twitterの埋め込みがあったり、そもそもPC版とスマホ版でフレックスを使いそうだなっていうところがあったり、あとはページ数が複数あることですかね。
そうですね。その辺が紙とペンだったらちょっとややこしくなりそうですね、逆に。確かにそういうのありますね。そういったところは正書するときとかツールを使って書くときに整理してもらってっていう形になればいいかなと思います。
09:08
はい。
はい。で、あとはですね、レイアウト組んでみて、何かこうレイアウト組みについて思ったこと、不安なこととかありますか?
なんか並べ方が普通すぎて、逆にこれでいいのかなって思ってます。最近は余白をグッと取ったり、動いたり、斜めの要素が入ったりで、おしゃれで目を引くサイトが多いように思いまして、もちろんそういった遊び要素のない綺麗に並んでいるサイトもたくさんありますし、
それを見ていて全然違和感はなかったり、変に思う気持ちもないんですけれども、いさ自分で作るとなると、こんなよくありそうなレイアウトで逆に大丈夫かなと不安になります。
なりますよね。すごくド派手な演出があったりとか、可愛いものでも綺麗に並んでたり、綺麗なんだけどちょっとずれてるところがあって、それはそれで可愛かったりとかそういうのありますよね。
はい。
はい。ただ、それは今考える段階ではないんですね。
はい。
実はですね、ちょっとかっこいいとか斜めになってるとか、画像の切り出し方が面白いとか、そういうのってデザインの段階であって、そういうかっこいいサイトとかもワイヤーフレームに直してみると、結局普通な感じになったりするんですね。
そうなんですか。
うん。意外と画像が、普通は四角形の画像が角丸になってるとか、まん丸になってるとか、ちょっとゆがんだ丸で切り抜いてるとか、それだけで印象は変わってきますし、文字が丸っこいのが民調体なのか、五色体なのか、こういうのでも印象が変わってくるので、それを全部ベーシックなフォントにして、白い背景、黒い文字、グレーの画像みたいな形にすると、だいたい同じなんですね。
そうなんですね。
だいたい一緒。改めてですね、かっこいいなって思ったサイトを白黒にして、トレースするような形ですね。ここに画像があって、ここにロゴがあって、ここに文章が入りますっていう、ダミーテキスト、ダミーステキストみたいな感じで書いてみると、意外と一緒なんですよ。
同じワイヤーフレームのものをどういう風に装飾するかによって、全然見え方が変わってきますので、今はそこまで考えなくて大丈夫です。
わかりました。
見せ方も同等にでもなるので、今は見せたいものがちゃんと入ってるか、見えやすいようになってるか、この辺を注意してもらったほうがいいですね。
特に今提出してもらってるのがモバイル版なので、モバイル版はどうしても縦並びにね、ポンポンポンとなっていきますので、この辺は今気にしなくて大丈夫です。
いい感じです。
転職アプリグリーンは、今話題のテック企業、プロダクト開発、DX案件など、グリーンだけの良質な求人を数多く揃えています。
12:07
正式応募前に企業の中の人とカジュアル面談ができるので、仕事内容やメンバーのことをしっかり理解した後に先行に進めます。
カジュアルに始める転職活動にグリーンをご活用ください。
あとはそうですね、今言ったみたいな感じで、あんまり見かけないような奇抜なレイアウトが果たして見えやすいのかっていうのも考えたほうがいいかなと思いますね。
やっぱりユーザーはいつも見てるような形が見えやすいとか、使いやすいという風に考えますので、スクロールしていったら上に飛びますみたいな。
動きをしていたら絶対使いにくいので、そういう奇抜な動きだったり奇抜なレイアウトをして本当にいいのかっていうのはちゃんと考えたほうがいいですね。
今はそこまでおかしなことは考えてないと思いましたので。
ないです。
大丈夫だと思います。
あとはコンテンツ内容ですね。整理して、だいぶ見せたいもの絞っていって、こういう並びにしたいなっていうのが見えてきたんじゃないかなと思うんですが、どんなでしょうか。
そうですね、先ほどマナさんにアドバイスしていただいたように、一番見せたいもの、100話の漫画なのかなと。
ただこれは一番上、特にメインに持ってきてしまうと、アニメのホームページのような、いっそヘッダーをストーリー、キャラクターとかにしたほうがいいのかなと、ちょっと脳内で飛躍しちゃいまして。
なるほど、そうですよね。漫画だけじゃないぜっていう、何を最終的にしたいかですよね。漫画の依頼が欲しいのか、ウェブサイトを作るっていうのを表現したいのか、どうしたいかですよね。
何でもできますよっていうのを見せたいんであれば、先ほど言ったみたいな形で、ファーストビューでいろいろ見せるっていうのもありですし、このウェブサイトを見た人にどうして欲しいかですよね。
そこが人によって変わってしまうかもしれなくて、100話はもうツイッターで読んでるからいいかな、でも仕事の募集かけてるかもしれないから見てみようかなって思われる方もいるかもしれないし、100話を読もうかなと来てくれる方もいるかもしれなくて。
そうですよね。ウェブサイトを作ってますよっていうのを漫画でファーストビューでバーンってあったらわかりやすいかもしれないですね。以前私が担当した生徒さんもイラストをメインで描いていて、そういう方がウェブサイト制作もしたいですって感じで受講されたんですが、最初のファーストビューですごい世界観のあるイラストでウェブサイトを作っている自分みたいなのを絵で描いてたんですね。
見てみたい。
そうですそうです。そういう方もいらっしゃったので、そういう複合していろんな要素を見せたいんであれば、いろんな要素を足したものを一気に見せてみるっていうのもありですよね。
15:07
なので考え方一つで見せ方はいろいろ出てくると思うので、ここはちょっと一緒にねまた考えていこうかなと思います。
はいお願いします。
はいいいですねいいですね。今その多分想定しているのがよくある企業サイトとかである形ですかね。
はい。
あのくるくる回るカルーセルがあってっていうキャッチコピーがあってっていう形なので、その枠を超えてしまってもいいと思いますね。駆け出しちゃうならその枠は超えられると思います。
おーっと。
いけますいけます。はい大丈夫ですよ。
頑張ります。
はい頑張りましょう。でもこれも本当に初心者さん全般に言えるものであれもこれもと掲載したがっちゃうんですよね。
私も本当に最初作った時にグラフィックデザイン名刺作りますとかウェブサイト作ります絵も描けますとかいろいろ書いてたんですが、結局ねそんなに言いたいことないなと思ってあの突き詰めていくと海外でウェブ制作してますっていうのを一言で言いたかったっていうのがあったので、
そういうキャッチコピーとそういう画像を選んで掲載するようにしたんですが、やってみないとわからないものもあると思いますので、いろいろ試しながらっていうのもありですね。
あとはこれはやらないっていうのを決めるのもいいかもしれないです。
よくこういうサイトではこういうのを掲載してるけど自分はいらないかなとかいうのを見極めるっていうのも大切で、
例えば私だったらそうですね、その当時昔はJavaScriptとか苦手だったのでJavaScriptはもう使いませんと最初に決めて、あんまり動きとかなかったんですがそれでいいやってなりましたね。
というのもFlashっていうものが昔ありまして、アニメーションとか動かせるものですね。それをなんとなく専門学校の時に課題であったのでそれを掲載したんですが、するとこいつFlashできるなっていう感じでFlashの依頼が来たりしたんですね。そんなできないのに。
なので動きがあるFlashだとかJavaScriptとかそういうのはちょっと今の段階では受けられないので、ちょっと今は掲載するのやめとこうという感じで、掲載しないものを決めてできない、自信がないんだったら載せないほうがいいかなと思いますので、そういうものを決めておくっていうのも大事かなと思いますね。
はい。
では今回のテーマオリジナルウェブサイトのレイアウト考察でしたが、かけだしちゃんいかがでしたか。
はじめは王道のレイアウトでオッケーということで安心しました。ただ他ですね、今回は制作者とクライアントが同じ私自身ということで、制作者としての目線、これはあまりできてないかもしれないですね。
最初に見せたいものは何とか、そういった真面目な気持ちとクライアントとしてのエゴですかね。こんな面白いことがしたい、これも見せたい、こうだしたいっていうのが混ざってしまって大変です。
18:11
できるだけですね、かけだしちゃんらしさとは漫画の良いところはを客観的に考えていきながら進めていきたいです。これは最終目標なんですけれども、クライアントとしてのエゴとしてかけだしちゃんの服についているアヒルちゃんをいっぱい登場させたいです。
いいですねいいですね。
でもアヒルちゃん別にかけだしちゃんのメインコンテンツでもないと思うので、我慢した方がいいのかな、出したいなというのも詰めていきたいです。
難しいところなんですよ。世界観重視なものだったら、なんでこんなところにこんなものがっていうのがあったりするんですよね。
はい。
無駄じゃんっていうのが逆に良かったりするので、例えば今の話聞いてパッと思いついたのが、スパイファミリーっていうアニメとマイナンバーのコラボサイト見たことあります?
あります。
あれ無駄にキメラさんがですね、いろんなところフワフワ浮いてるんですよ。
あれ、そうでしたっけ。
そうなんです。ちょっと送りますね。
クリックして開けますか。
はい。開けました。
開いて、最初ファーストビュー普通なんですが。
めっちゃいる。
めっちゃいるんですよ。キメラさんがずっとついてくるし、フワフワ浮いてるし。
で、あとヘンダーソン先生かな。なんか途中で動いてるんですよ。ヘンダーソン先生がエレガント。
本当だ。
これいるかいらないかって言ったら別にいらないんですよ。
でも、こういう感じで世界観出してるっていうパターンもあるので、嫌いな人は嫌いだと思うんですけど、それがいいっていう方もいらっしゃると思うので、それをどの辺まで出すかってことですよね。
だから、中途半端に出さないほうがいい。アヒルちゃんを出すんだったら、ちょこっとだけアクセント出す。または、このキメラさんぐらい出す。うざいぐらい出してくる。
どっちかにしないと中途半端が一番嫌だと思いますので、どこまで吹っ切れるかですよね。
わかりました。
で、その辺も考えつつ、自分の見せたいものとユーザーが見たいもの、バランスをちょっと考えながらなんですが、そういうふうに考えながら作っていきましょう。
さて、この番組では感想や質問、リクエストなどをお待ちしております。番組詳細欄にあるリンクよりお気軽にご投稿ください。
Twitterではカタカナでハッシュタグウェブカフェをつけてツイートしてください。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech Academyはウェブデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
21:06
またお会いしましょう。Webクリエイターボックス、マナーと
かけだしちゃんでした。
