00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ。
WebデザイナーでWebクリエイターBOXを運営しているManaです。
Web製作を勉強中の駆け出しちゃんです。
この番組では、Webコンテンツ製作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、トレンドのサイトデザイン、です。
Webサイトっていろんな要素を組み合わせて完成しているんですが、
見た目だけではなく、製作方法や見せ方についても最近よく使われている手法というのが存在すると思います。
サイトのデザインのトレンドについて語る回ですが、駆け出しちゃんいかがですか?
トレンドはあるんだろうなぁと思いつつ、全然把握できてないですね。
ファッション雑誌のように、今年の夏はこれと発信してくれるような媒体もなさそうですし、
もしかして私が知らないだけで、そういったものも結構あるんでしょうか。気になります。
そうですね。結構毎年年末とか年始とかに、今年はこれが流行るんじゃないかみたいな記事があったりはするんですが、
ちょっとこの辺も深掘りしていこうと思います。
では駆け出しちゃん、今サイトデザインこんなのが流行ってるんじゃないかなっていうような予想とか感じてることはありますか?
私が思ってるだけなんですけれども、ベースはシンプルで背景も白かったりして、大きくてはっきりした文字に大きめな画像がバーンってついてるような感じですかね。
その画像の出し方にアニメーションがついていたりして、差別化を図っているのかなという印象があります。
そうですね。結構大きめな文字っていうのが、ここ数年前から流行ってきてるというか、よく見るような形にはなってきてますね。
わかりやすく目立たせたいとか、バーンと伝えたいというのがあるんじゃないかなと思います。
構成自体はすごくシンプルになってきていて、モバイルサイズに合わせて1カラムにするとか、横並びにせずに縦並びのみにするとか、そういうのも増えてきてるかなと思いますね。
なので、レイアウトがシンプルな分、他の要素を大きくして目立たせたいとか、動きをつけたいとか、そういうのはあるかもしれないですね。
あとは、よく思うのが、10年くらい前ですかね、にはスキューモフィズム、聞いたことありますかね。
なんか女性が好みそうなふわふわっとしたやつ?
03:03
そうですね、語源としてはそんなふわふわした感じが想像するかもしれないですが、スキューモフィズム、日本語で言っても写実的な感じで言われたりします。
10年くらい前のMacとかiPhoneって、すごいメールだったら、本当に手紙のそのまんまを写したいの3Dみたいな感じで作られてたんですね。
覚えてないですね。
覚えてない、そうですよね。10年前のことなんて覚えてないですよね。
聞いてる方もなんじゃそれって思ったら、スキューモフィズムって調べてみてください。
そういえばこんなのあったなっていうのが出てくるかなと思います。
それが徐々にフラットデザインって言ってすごくシンプルな、もう凹凸もなく一色でシンプルな感じのアイコンに変化していったんですね。
それは今はもうそんな感じかなと思うんですが、本当に色も少ないですし、立体感もないですしっていう形になってます。
その方が制作コースも減らせて作りやすいですし、ユーザーも直感的に操作できるとか、そういう感じになってるんじゃないかなという感じですね。
トレンドってやっぱり巡ったりするので、ファッションでもそうなんですが、また戻るんじゃないかなっていう話も出てますね。
3Dとかもまた流行ってきてますし、色の使い方で言うとネオンカラー、背景が黒くて差し色ですごく派手な色をちょっと入れるとか、そういうデザインが今増えてきてるのはありますね。
ただそれが流行ってるからかっこいいっていうのではなくて、そのサイトによってデザインは変わってくるとは思うので、
こういうのがあるんだなくらいでちょっと心のどこかに置いておくと、デザインの幅が広がるかなと思います。
でもネオンカラーがスマホのアイコンになる未来、ちょっと気になります。
ダークモードをデフォルトで設定してる人だったら、もうアイコンもネオンカラーとか、暗い感じのにちょっと差し色でっていうのがかっこいいっていう方はいらっしゃいますね。
あんまりダークモードとか使ってないですかね。
そうですね。
私は目が見づらかったりするので、ダークモードがデフォルトだったりするんですけど、
そういう自分のユーザーに合わせたテーマっていうのがあると思うので、これからもどんどん多様化してくるとは思いますね。
ユーザーがもう色を選べるような感じになるかもしれないですし、楽しみですよね。
あとは今年に入ってすごく話題になってるAIですね。
AIのウェブデザインとか聞いたことありますか。
デザインについてはすみません。あまり把握できていないんですが、コーディングはいろいろと教えてくれるっていうのをツイッターでよく見てます。
使ったことあります?
あるんですけれども、課金してない方のやつ。
ちょっと質問の仕方があまりうまくないのかなと思いまして、コーディングのことよりかは猫が飼えないので猫の代わりになってくださいとか言ってます。
06:07
猫にニャーニャー言ってくれたんですか?
真面目に答えてくれまして、はい私は今から猫になりますって言ってくれるんですけども、その後に私があなたは猫です。私はあなたを撫でます。リアクションしてくださいって言ったらですね、
AIはニャー気持ちいいニャーって答えてくれたんですけども、どっかでコンプラに引っかかったのかわかんないですがエルハが出てしまいまして、難しいなと思ってます。
撫で方が違ったんですかね?
ちょっとセンシティブな撫で方だったのかもしれないですね。
難しいですね、AIまだ。
そうなんですね、そんな面白い使い方をされてないですね。
なので全く使いこなせてないです。
まあそうですね、AIを使いこなすために人間がアップデートしなきゃいけないって不思議な状態になってるかなとは思いますよね。
確かに確かに。私は結構仕事でも使っていて、メールめんどくさいときに書いてもらったりとかですね。
あとテストも兼ねてコードを書いてもらったりとか、結構時短できるようなものもあったり。
あとは最近だったらですね、ロリポップさん、レンタルサーバーのですねロリポップさんの方でAIアシスタントというサービスが出たみたいなんですね。
ちょっとこれ見てみたんですが、こんな感じのサイト作ってねってふわっとした指示を出すと、それっぽいウェブサイトを作ってくれます。
ふわっとした指示。
コードがぶわーっと出てきて、それコピペしたらサイトできましたと。
すごい。
そうなんですよ。
サイトって言ってもやっぱりすごくシンプルなテンプレートのような形になるんですが、それを追加の指示でなんかどうのこうのしてたらいい感じに育っていくらしくて。
これ結構使ってる方のレビューとか見ても面白そうなんですよね。
ただこれベータ版とかだったり、まだ出始めたばっかりなんですが、今後こういったものがどんどん増えてくるんじゃないかなっていう感じですよね。
ちょっと怖いですよね。
いつかはこの今作っているデザインカンプをぶち込んだら、サイトを作ってくれるようになったりするんでしょうか。
するかもしれないですね。
それがどこまでの完成度なのかっていうのもあれなんですが、今後はできるようになるんじゃないかなとは思いますね。
怖いですよね。
だからどういうふうに差をつけるのかっていうのが問題になってるというか議論になってはいるんですが、なんかこうアイディアとかありますか。
コーディングはAIが得意なところだと思いますし、じゃあデザインはどうなのかってことも。
そうですね。昔やっていたような、それらしいデザインを探して組み合わせてそれっぽいものを作るっていうのも、特にイラスト、界隈とかを見ていると、これもAIの得意とするところだと思うので、人間はどこで差をつけていけばいいんでしょうか。
09:07
難しいですよね。これも最近こう、巷でね、同業の方とお話ししてても、どうすんのどうすんのみたいな感じになってはいるんですが、今おっしゃってたみたいに、とりあえずでいいなら、もう何でもいいっていう感じなんだったらAIでできるようになるかなと思いますね。
先ほど紹介したロリポップさんのもそうなんですが、とりあえずなんかそれっぽく形になって、とりあえず出しておきたいっていうのであればできると思いますが、AIの苦手な部分で言うと前例がないものには対応できないので、例えばこれまでにない切り口で売り出していこうとか、前例があんまりない状態の問題を解決したいとか、そういうのは人間の洞察力だったり直感っていうのも必要になってくると思うので、
そういったものは人間が、で今まで前例があるようなものはAIをうまく使って効率よくっていうのが今後の流れになるかなと思いますね。なので個性を出したいとか差別化をしたいとかになってくるとやっぱり人間の力がまだまだ必要になってくると思いますね。
はい。ではあとはですね、ウェブサイトを作るときに素材っていうのがまた必要になってくると思います。画像だったり動画だったり音楽だったりとか、そういう素材も必要になってくるんですが、これもですね今の話に絡めるとAIでですね、合成の画像を作れたりとかいう話も出てきてます。イラストとか絵の方でAIを使ったことってあります?
いえ、まだないです。
あ、そうなんですね。なんかイラストを描いてらっしゃるので、使ってたりするのかなと思ったんですが、使い方がわからないとかそういう感じですか?
そうです。それもあります。
そうですよね。呪文を書かなきゃいけないとかありますからね。私も一回なんかで試しに作ってみたんですが、突拍子もないなんかサボテンが出てきたりとか、そんな指示しましたっけ私みたいなのが出てきたりするので、まだまだなのかなと思いつつ、次の週にはもうかなり進化してたりするので、ちょっと追うのも大変なんですよね。
そう、素材の話ですよね。素材だったら、私は写真素材は結構アンスプラッシュっていうアンスプラッシュ.comこれを使ってたりするんですが、かけだしちゃんは今まで素材ってどういう風に集めてました?
ほぼほぼACイラストやAC写真ですね。今までのお仕事で使用する画像はクライアントさんがセミナーやってる画像でしたり、持ってる不動産の画像でしたり、ほとんどいただけていたので、あまり自分で集めるっていうことをしてなかったです。
あ、そうなんですね。なんかイラスト書いてとか言われたら、それも込みで作っちゃう感じです?
あの頃は仕事でイラストを書いたことはなかったです。
あ、そうなんですね。私はまあちょっとしたイラストぐらいだったら、もうラフで書いたのがそのまま採用されたこともあって、あ、あーあーみたいな感じで、これラフなんですけどあーみたいな感じで、そのまま掲載されたことがありましたね。ちょっとやめてほしかったですけど、はい。
12:17
で、あと最近だったらiPhoneのカメラの性能がすごく上がってきてるので、そのまま生徒さんでも素材ないので自分で撮りましたみたいなのがすごいクオリティーが高いので、そのまま採用されたりとかっていうこともありますね。
で、あと初心者さんが素材を集めるときにこれ気をつけなきゃいけないっていうのが結構あったりするんですが、かけだしちゃんはどういうところに気をつけて素材集めしてますか?
そうですね、利用規約を読んで使っても大丈夫なのか、どれだけ加工しても大丈夫なのか、とにかく自分もクライアントも安心して使える素材が欲しいなというところを重点的に探していたんですけれども、このあたりも特にスクールで習ったわけではなかったので、昔はですね、他にポイントがあったら教えてほしいです。
利用規約って必ず全部読んでる感じです?
読みます。
すごい。結構読まずになんとなくでつかんでたりとか、利用規約を簡単にまとめてくれてる人の話を鵜呑みにするとか、そういう話も聞くんですが、そうですね、ちゃんと読んだほうがいいですからね。
はい、騙されやすいんで、特にああいうのは真面目に読んでます。
素晴らしい素晴らしい。私は結構趣味で読んでたりするんですけどね。
趣味?
利用規約読むの好きなんですよ。
あと海外の利用規約とかも面白いんですよね。日本では絶対に想像つかないようなことを書いてたりして、こういう場合は我が社では責任負いませんよみたいな面積が書いてたりするんですが、日本だったらだいたい天変地異とか、天才の場合はどうしようもないので責任負いませんみたいなことは書いてたりするんですが、
そこに海外バージョンだったらアクツオブゴッドみたいな神の身業でどうしようもなかったですとか、神様のせいなので私たちはどうしようもなかったです面積みたいな感じで書いてたりするんですね。
より規模が大きくなります。
そうなんですよ。天才とかじゃなくて神様だからもうどうしようもないですみたいな感じだったり、ゾンビが来たのでしょうがないですとか、
それ本気なのか何なのかわかんないんですけど、書いてるとこあるんですね。国によって結構変わったりして面白いですよ。
英語が読めればいつか読んでみたいですね。
そうですね、ぜひぜひ。多分神の身業みたいなところ、ゴッドオブなんとかとかいうのは定型文みたいな感じで。
定型文で神出てくるんですか。
多分出てくるんだと思います。面積事項のとこ必ずあったりするので。
面白いですね。
15:01
そうなんですよ。キリスト教権は結構出てきますね。面白いですよね。
今言ったみたいに利用規約必ず読んでほしいかなと思うんですが、よく初心者さんあるあるで言うと、Googleで画像検索で出てきたのをそのまま使ったりとか、それが恐ろしいことに悪気がないんですよね。
あったから使ったんですけど、ダメなんですか?みたいな感じで言われたりするんですが、ダメですよというところ。
あとウォーターマークって言って、画像の上にこのブランドのロゴが書いてて、使っちゃダメですよみたいなものをそのまま使ってたりとか、これ模様かと思いました?みたいな感じで。
本当に悪気なく使っちゃう方もいるんですが、そういうのダメなんだよと。
ちゃんと著作権とか肖像権とかそういうのをまずお勉強して、利用規約もしっかり読んで守っていてほしいですよね。
Googleでフリー素材って調べて、検索に上がってきた画像は自由に使ってもいいよって思っちゃうパターンもあるんですよね。
フリー素材のものがそのまま出てくる場合も多いんですが、一応元のサイトを見てもらって、そこを元のサイトからダウンロードしないとっていうのはありますよね。
よろしくないスクールとかでは、そういうのを画像を検索して出てきたのを使いましょうみたいなのを言ってる人もいるらしくて、ちょっとそれは鵜呑みにしてほしくないですよね。
グリーンにかけない転職裏話ラジオ、略してグリテンラジオは、転職アプリグリーンの運営メンバーが、個人的一押し企業について語ったり、現場で感じる転職や中途採用のリアルについて話す音声番組です。
毎週月曜朝6時更新です。通勤や休憩時間のお供にぜひお聞きください。詳細はカタカナでグリテンラジオと検索してチェックしてください。
じゃあ、あとはですね、素敵なサイト、サイトデザインがいいなっていうのを語りましょうっていうテーマで見てみましょう。
なんかこんなサイトいいな、素敵だなって思うサイト、なんかありました?最近。
最近見かけていいなって思ったのは、フェリシモさん猫部の猫のおふくちゃんの紹介とかグッズを売っているサイトですね。
下の方にずっとおばあちゃんとおふくちゃんがいまして、スクロールしていくと、おばあちゃんとおふくちゃんが漫画の吹き出しを使って喋るんですね。
もともと原作があってそれが漫画なのか、ちょっとそういったところわからないんですけども、漫画も出てるみたいでして、その漫画の要素、吹き出しで喋るってすごい漫画っぽいなーと、そういうとこが活かされてて、サイト自体も可愛くていいなと思ってます。
18:08
そうですよね。漫画が発祥なんだなっていうのがパッと見てわかりますもんね。
かけだしちゃんがこれ面白いポイントで教えてもらったんですが、一番下、おはぎをあげる、ページトップへ戻りますってボタンがあるんですが、それをクリックしたら、画面がおはぎで埋め尽くされ、ゴゴゴゴゴって感じで上に戻るっていう、こういうアニメーションがね、こういうとこ面白いですよね。
おはぎをクリックしたら下に落ちたり、至る所に仕込まれてる感じで、こういうのすごい好きです。
そうですよね。ちょっとした遊び心がいろんなところにあったりして、これイラスト描いた人が大変だったんじゃないかなって思ってるんですよ。
ですよね。
これ全カット描いてるわけですもんね。
そうですね。やっぱ漫画を描いてる身としてもこういうの面白いなっていう、そういう視点で見たらまた違うかもしれないですよね。
はい。
なるほど、なるほど。
そうですね、私が最近っていうことでもないんですが、ちょっと前からあるのが、カロリーメイトさんのプログラマー向けの特設サイトみたいなのが作られていて、こちらがカロリーメイトプログラマーっていうサイトですかね。
これは通常バージョンっていうものと、プログラマーバージョンみたいなのがあります。
普通のサイトの方は、スクロールしてピヨッとアニメーションと一緒に出てきてっていうものなんですが、画面下の方にCUIモードっていうのがあって、これをクリックすると、CUIっていうのがプログラマーにしかわからないかもしれないんですが、ターミナルって黒い画面と呼ばれるもので、コードを打ち込んで、コマンドを打ち込んで操作するっていう画面なんですね。
これ、本当にプログラマーじゃないと操作できないんじゃないかなと思うんですが、よくあるCDなんとかとか、実行するためのコマンドとかを入力すると、そのページが表示されると。こういうプログラマーにしか伝わらないこの熱い感じ。
よかったらCUIバージョンちょっと見てもらって、そこでHELPって入力してEnterキーを押すと、入力できるコマンドが表示されると思うので、面白いなと思ったら、ぜひCUIバージョンで見てみてください。
はい。こういう感じでですね、素敵だなとか、面白いなって思うサイトって、やっぱ世界観が出てるんですよね。先ほどのおふくちゃんのものだったら、漫画の感じがイラストのかわいい感じもよく出てますし、今私が言ったものだったら、もうプログラマーだったら、おーすごいみたいな感じになるような、あるあるが詰まってるような形になってますし、
そういう自分がそのサイトで伝えたいものは何なのかっていうのが、ちゃんと理解できて表現できてるサイトっていうのはやっぱり素敵ですよね。
21:05
コードがいっぱい。
そうなんですそうなんです。ターミナルを使ったことある人じゃないと操作できないサイトになってますね。
操作もできないんですね。
そうですね。確かに何が何だか。
何が何だかですよね。ドルサイン、ドルマークのすぐ横から入力できるんですけど、ctspaceaboutでエンターキーを押すと、aboutっていうフォルダに移動します。そこでcitcatspaceabout.txtでエンターキー。
はい、怒られた。トットファウンド。
難しいですね。about用のテキストが出てきますね。これもツイッターとかでね、書いておきますので、よかったら試してみてください。
じゃああとはですね、別にトレンドではないし、世界観とかそういう話じゃないかもしれないが、なんかこう忘れられない、ずっと記憶に残ってるようなサイトって何かありますか?
すごいサイトで言うと、私はふわちゃんのサイトかなーって思ってます。
すごいですね。
ポートフォリオサイトの参考にという視点で見てるとですね、デザインはかなり独自路線を突き進んでるんですけども、内容がかなりしっかりしていて、ファンの方にも、ふわちゃんにお仕事を頼みたいなと思っている方にも、欲しい情報がきちんと行き届いている印象があります。
これは参考にできたらいいなと思ってます。
そうですね、デザイン自体は参考にしづらいかもしれないんですが、構成だったり、この今言った世界観だったり、ふわちゃんってこういう人なんだなっていうのがすごくよく出てるサイトですよね。
この以前でもポッドキャストで紹介したかなとは思うんですが、本当にすごいですよ。
見たことない方はね、ふわちゃん.comで行けると思いますので、すごいです。見てみてください。
そうなんですよね。で、私の方も忘れられないサイト、今ちょっともうなくなっちゃったんですが、映画マスクっていう映画の俳優のジム・キャリーさんのサイトがかつてありまして、それがね、もう今でも忘れられないんですよね。
彼のジム・キャリーさんの目玉、片目がドアップで画面いっぱいにバーンと広がっていて、ずっとまばたきしてるだけのページとか、すごかったんですよ。虫がうごめいてるだけのページとか。
なんやこれみたいな感じの、どういう人なんだ。で、ご紹介を見てたら、カナダ出身の俳優みたいな感じの説明があるっていう、不思議な不思議なサイトで今でも覚えてますね。
たぶん画像検索したら、もしかしたら残ってるかもしれないんですが、もう目玉がね、忘れられないです。
あと、よく話題に昇るもので言うと、こちらも俳優なんですが、安倍博史さんのサイトですね。
これ有名ですね。
ウェブ業界の人ならもう、ああ、はいはい、みたいな感じで、ネタとしてもよく使われているんですが、本当に昔ながらのデザインで、っていうのも特徴なんですけど、何よりも読み込み速度が早いと。
24:04
いうのがね、よく引きやに出されてますよね。
なんかこう、サイト、不思議な方法でサイト作ってみました、みたいな感じで、ただこんな感じ作っても、安倍博史さんよりも速度が早くできました、みたいな感じで、安倍博史さんのサイトの読み込み速度と比較して対決してると。
早いサイトの基準になってるんですね。
なってますよね。
安倍博史さんのサイトを超えた、みたいな感じで出てきたりするので、もしご存じない方いらっしゃいましたらチェックしてみてください。
これもね、忘れられないですよね。
はい。
では、今回のテーマ、トレンドのサイトデザインでしたが、かけだしちゃんいかがでしたか?
そうですね。やっぱりAIの登場はびっくりですよね。
素材集めもAIでできてしまうかもしれないし、デザイン担保を出せばいつかそれっぽいコーディングもしてくれる未来がやってきそうです。
だからこそまだ人間が追いつかれてない部分ですかね。
いち早くトレンドをキャッチつつ、自分がトレンドを作ってやるぜぐらいの個性を滲ませつつ、
ただそれでもお客様の要望をうまく引き出して反映させられる、そういったいろんなスキルが必要になってくるのかもしれないですね。
人間的に追いつかれないように頑張っていきたいです。
そうですね。トレンドだからやるとかそういうのではなくて、今言ったみたいにお客様の要望をうまく引き出して反映しながら、
でもトレンドに乗ってないようなもの、古臭いものだったらまた違ってくると思うので、うまく融合させながら、AIもうまく使いながらできるといいですよね。
はい。戦う相手じゃなくてうまく共存できるといいですね。
素晴らしい。素晴らしいまとめですね。その通りです。共存していきましょう。
さて、この番組では感想や質問、リクエストなどをお待ちしております。番組詳細欄にあるリンクよりお気軽にご投稿ください。
Twitterではカタカナでハッシュタグウェブカフェをつけてツイートしてください。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech Academyはウェブデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。 Webクリエイターボックスまなと
かけだしちゃんでした。