WEB制作

WEB制作

導入してわかった無料ヒートマップツール「Microsoft Clarity」のメリットとデメリット

画像はイメージ

無料ヒートマップツール「Microsoft Clarity」がWebマーケティング界隈で話題のようなので、試しに使ってみた系のメモ。

導入するか迷っている人もいるかと思うので、ぶっちゃけると、無料だけどタダより高いってこともないし、Worfpressとかだったら2~3分でサクッと導入できるのでやって損はないんじゃないかしらん。

Microsoft Clarityのメリット

今のところメリットしか見つからないけど、いくつか挙げてみる。

ヒートマップだけど超簡単

Web界隈の人なら職種問わずヒートマップという言葉くらいは聞いたことがあろうかと思うが、なにやら専門的過ぎて自分じゃ使えなさそう・・・と存在しないものとして考えている人もいるのではないだろうか?

界隈でヒートマップを知らないとなるとモグリの可能性も否定できないが、要はユーザーがWebページのどこをクリックしたかとか、スクロールの具合なんかがわかるというツールである。

Googleアナリティクスでも、細かく設定すればスクロールの調査なんかもできるそうだが、あれは設定画面がコロコロ変わるしややこしすぎるし、面倒くさい。そもそもワンオペの個人サイトとかだと、費やすエネルギーが割に合わない。

Clarityはそんな面倒臭さは全然なく、導入も結果の表示もとっても簡単だった。

細かい設定をやると難しいのかわからんけど、細かい設定を何もしなくても十分過ぎるほど解析できるのは優秀と言える。

Web業界を牛耳っているGoogleのWeb系ツールより、妙な感じもするけどMicrosoftのツールの方が使いやすいって、Googleのツールって実は使いづらいのではないかと思いたくもなる。

画面レコーディングの鮮烈すぎる

ビジュアルで閲覧者のスクロールやクリックなどが動画として再生する機能が凄すぎる。

業界初とかではないと思うけれど、Web解析の界隈ではこんな解析手法が使われていたとは、ある意味、驚きである。

スクロールやクリックの具合を記録できるなら、それを実際のWebページと掛け合わせれば実現できる機能ではあるが、実際の閲覧者がこんなふうに見てんのか・・・と妙なショックを感じたり、新鮮な驚きがある。

サイトを運営している人でも、自分のサイトをユーザーが閲覧している姿を後ろから眺める経験なんて、まずないと思うので解析としてもエンターテインメントとしても、どっちの面からでも導入するメリットがあるかと思う。

当たり前の傾向かもしれないけど、ページの下の方に行くにつれてほとんど見られていないとのも、はっきり提示してくれるのがClarityのメリットである。

Googleアナリティクスみたいに数字ベースではなくて、ビジュアルで映像として見せてくれるため、ビジュアルシンカーなど映像でモノを考える人にもスッと入ってくるだろう。

プラグインなどで簡単に導入できる

結構、Microsoftは本気で作っているらしく、Wordpressとかだったらプラグインで簡単に導入できるようになっている。

Clarity自体のアカウント作成もMicrosoftアカウントを持っていれば一瞬でできるし、プラングインの導入も簡単。

全部込みで2~3分くらいでできちゃうほどの簡単さ。

3日くらい眺めても理解が難しいGoogleアナリティクスなんかも見習ってほしいものだ。

ただ、Microsoft製だからそのへんのプラグインよりは安全性は高いと思うけれど、テーマなどとの相性も絶対ないとは言えないので、ステージング環境(がある人は)で試してからの方がよいとは思う。

処理速度の影響もない(と思う)

導入する前はページ表示とか処理速度に影響するのかしらんと思っていたが、少なくとも体感的には全く影響がない。

コンマ何秒とかでの変化はあるのかもしれないが、一般的には影響がないものと思ってよさそう。

Microsoft Clarityのデメリット

特にないんだな、これが。

以下は人によってはあるかもしれないという程度のデメリット。

ダメ出し多数で現実の厳しさを突きつけられる

メンタルが弱い人とか、自分のコンテンツに絶対の自信がある人は、実際のユーザーのバチクソ利己主義な閲覧の仕方を知って落ち込むかもしれない。

ページの下の方に作り込んだ何かがあっても、実際には誰一人そこまでスクロールしてくれなかったり、人気ページでも特定の部分しか読んでくれていない現実を突きつけられる!!

年金定期便が届いて、絶対に暮らせないほどの金額のショボさ加減に落ち込んだ時と同じような、ありのままの現実の見せつけ方である。

個人サイトとかで自己満足でOKだったり、いつまでも夢の世界の住人で快適に過ごしたい場合は、導入しない方が精神的には良いかもしれない。

企業サイトの担当者とかだったら、即クビが飛ぶことはないとしても、改善すべきことばかりで残業がめちゃくちゃ増えたり、心療内科に通わないとならなくなるかもしれない。

ちょっぴりこっぱずかしい(きゅん)

ヒートマップツールが初めてだと、ちょっぴりこっばずかしいかも。初恋みたいな。

なんせ、長年サイト運営をやってる人でも、ユーザーが自分のサイトを見ている様子を生で見る機会はないだろうから、ある種の小恥ずかしさを感じるかもしれない。

でも、気づきはあると思うから、次の一手を考えるヒントにはなるだろう。

人は痛み無くして得るものはないのだ。

WEB制作

WebP(ウェッピー)とか言うクソうざい画像形式を使う人間の神経が理解できない

画像はイメージどころか、もはや空想や妄想の類である

たまに制作者的な意味で意識高い系のWebサイトを閲覧しているとき、ふと色々な意味で保存したくなるような画像を掲載していた場合、画像をローカルに保存したのはいいけども、拡張子がWebPとかいうクソ形式でドギマギした経験はないだろうか?

皆さんも1度や2度、いや、もしかしらそれ以上、そんな経験があることだろう。

インターネッツの世界では先祖代々3形式の画像が使われてきた

WebPの圧倒的なウザさを理解するために、Web上で先祖代々使われてきた歴戦の三銃士についておさらいしておこう。

Gif形式

1987年に登場した古参。岐阜じゃなくて、ジフと呼ぶのが一般的。

登場当時のコンピュータは16色とか、ハイスペックなものでも256色とかしか表示できなかったが、Gifは伝統的に256色までの表示しかできない。

従って、写真や滑らかな美少女イラストなどには向かない。

一見すると過去の産物とか時代遅れで存在しているわけがないと思えるが、驚くことに2024年現在のインターネッツでもアニメーションが使えることから、Web上のちょっとしたアニメーションなどでけっこう使われている。むしろWeb上のアニメーションと言えばGifというくらい。

その間に出現して消えていったFlashなどと違って、ブラウザ標準で対応している枯れた技術で安定的なことも人気の理由だろう。

Jpeg形式

フルカラーに対応していて、ファイルサイズと画質はトレードされるが、一番多用途で汎用的。

関連する形式として、Jpeg2000という高画質を目指しただけの圧倒的にいらない子も存在する。PhotoshopはCS6でも書き出せるものの、一般的なデジカメやOS、ブラウザが全く対応してない。

そのため、一般消費者には全く普及していない。これは高画質を実現するの犠牲として、処理がJpegの100倍くらい重たいのが原因らしい。医療などの特殊な分野や、日本の免許証やパスポートの写真には、画質重視なのと利権絡み(?)でJpeg2000が使われているという。

PNG形式

フルカラーでjpeg特有の圧縮ノイズがいや~んな画質重視の時に使われる。デザイン的な意味では、透過が使えるのでアイコンやロゴなどに使われることも多い。

画質がいいんだったら常にPNGを使えばいいというわけではないが、ファイル容量が大きくなってしまうのでjpegと使い分けるべきだが、企業のWebサイトなどでは出来損ないの低賃金の雇われデザイナーなどが、どうでもいいイメージ画像に2MBとか3MBとかの恐ろしく重い画像を吐き出しているので注意。

それなりのリテラシーがあれば問題なく使い分けられるが、使いわけにはそれなりのリテラシーが必要なわけで、そこに付け込んできたのがWebPなのかもしれない。

WebPの読み方はウェッピーだと(笑)

Googleが2010年に発表した新時代の画像形式。

Photoshopで書き出せるようになったのは2022年のバージョンからなので、CS6などの古いバージョンでは標準機能としては書き出せない。

世界がひっくり返るほどの真新しい機能がないのが特徴なものの、よりファイルサイズに対して高画質であり、アニメーションや透過にも対応していたりと、過去の三銃士たちの特長を全部取り入れているようなフシがある。

人間は堕落する生き物だ。使い分けを考える必要がないことから、一部のニュージェネレーションたちには使われているということだろう。

WebPがウザい理由

まず、書き出すのに最新のPhotoshopだとか、対応した変換ツールなどが必要になる。

OS標準の画像ビューアーで表示できなかったり、使い慣れたソフトに読み込んだりできない場合が多く、ネットでダウンロードした画像をプライベートで使おうと思った時に不便を感じる。

う~ん、やっぱり過去の3形式があれば事足りんだけどね。

ファイルサイズだって、微妙な画質の違い程度だったらJpegの圧縮率を下げれば済むこと。ネットの回線やデバイスのスペックもアホみたいに上がっているのだから、使い勝手を犠牲にしてまで新形式に替える必要はないと思う。

キヤノンがEOS Mを葬り去って新しくレンズマウントごと作ったRシリーズという新型ミラーレスカメラみたいに、企業の商売の一環なんだろうけどね。

一般ユーザーにしたらどっちも迷惑な話だ。

WEB制作

苦節10年、クリエイターの生命線であるポートフォリオを嫌々作り直して思ったこと

画像は新潟の車麩 (記事とは関係ありません)

クリエイターと言っても底辺から頂点まで色々あるが、知っている範囲だと主に底辺~中流Webデザイナーの界隈では、就職や転職など己を試される場(笑)において、学歴や資格よりも、むしろ1000倍大事なものがポートフォリオである。

ポートフォリオ以上に大事なものがあるとすれば、一流の人脈とか芸大卒とかの学歴なのだが、おいそれと簡単に手に入るものではないので、諦めてポートフォリオ作りで休日を潰した方がマシである。

学歴とか資格とか、少なくとも底辺界隈では何の役にも立たないかんね!!

みんな間違っているポートフォリオ作りのキモ

拙者は底辺Webデザイナーの器なりに、生意気にもポートフォリオらしきものを常備している。

さすがに、ネットのどこの馬の骨かわからない人間には見せる気はしないが、酒の一杯でも奢ってくれる他人になら誰にでも見せられるシロモノだ。

ところでだが、WEB界隈で仕事をして10年を超えるほど時が経ってから、ようやく自分を含めて世間一般のポートフォリオが間違いだらけの産物であることに気がついた。

ポートフォリオが間違いだらけだと気付いたきっかけ

気がついたきっかけは夢でお告げがあったわけでなく、自分の能力やテイストに合わない、もっと簡単に言うと、マインドが合わない仕事なり会社なりに繋がってしまうことが極端に多いのが異常だと思ったことである。

つまり、ポートフォリオを見せた相手に、何か大きな勘違いをされているという仮説を立てることができる。

はぁ~・・・、って溜息出るわ。

みんなもそんな経験の一つや二つはあることだろう。

誰も知らないポートフォリオの本当の役割

暗闇を提灯片手に歩く底辺Webデザイナーの方向性を示す道標がポートフォリオの本当の役割である。

つまり、ポートフォリオに載せる作品は吟味しなければ意味がない。

自意識過剰になって、意識しまくって、自分が今後もやりたいテイストや技術系統のものだけを厳選してチョイスするのが正しいポートフォリオの姿。

ポートフォリオは履歴書や活動の記録ではないから、関わった案件を列挙するのだけはクリエイター人生が終わるからやめるべき。

たとえキミがたまたまデカい会社のトップページ(の一部分。小さいバナーとか)をデザインしたからと言って、今後やりたいテイストでなければ、そのトップページのキャプチャは載せない方がよい。

嫌々やらされた汚れ仕事の作品は載せる価値ゼロ!!

学生か経験者の転職でも違ってくるけれど、転職を想定した場合、前職で上司に嫌々やらされた汚れ仕事とか、背に腹はかえられぬの心意気でやったゴミ案件とかは、基本的にポートフォリオの掲載には適さない。

望まない案件なわけだから、あなたの理想ではなかったはず。そんなものを代表作みたいに載せてはいけない。

万が一、そんなゴミ案件しか制作物がない場合は、一応は仕事として取り組んだわけだから一定の社会的な価値が多少はあると考えられるため、習作だけよりは載せる意味はあるから、そういう場合は載せるのもやむを得ない。

ポートフォリオ自体も作品である

これに気づくのに10年かかったというのもアレだが、ポートフォリオはそれ自体が作品なのである。

底辺Webデザイナーなんかだと紙のデザインなんてよくわからんからと、適当にキャプチャを貼ってコンビニで印刷して終わらせる、ちょろいぜ!! なんて人もいるかもしれないけれど、まぁ、自分がそんな感じだったわけである。

見せ方は色々あるけれど、タイパやコスパを考えると、IllustratorとかPDFに書き出せるソフトで作って、紙版とPDF版があれば良いと思う。

ナウい人だとWebポートフォリオみたいなのをがっつり作るのかもしれないけど、自分みたいな昭和生まれ(笑)だと、やっぱ紙の安心感というのも感じるんだよね。温もりみたいな。

紙とPDFが昭和生まれ(笑)にはしっくりくる

中立的で冷静な思考回路で考えても、Web媒体は陳腐化が激しいし、閲覧に通信環境やデバイス、一定のITリテラシーが必要だから、PDFの方がどんな相手にも提出しやすくて汎用的に長く使えるんじゃないかしらん。ケースバイケースだけど。

キミが20歳前後の若者だとしても、ポートフォリオを見る相手がそれなりの立場にある昭和の遺物って可能性は高いしねー。

そして、やはり最も大事なのはポートフォリオ自体も作品だと思って作ることだ。レイアウトとか構成、見出しのフォントとかは人生かかってると思って最低3日は考えた方がいい。

心に余裕がある人は、デザイン系の専門学校の卒業展とかに行くと色々な若い人の作品やらポートフォリオっぽいものが見れたりするから、暇だったら行ってみるといいかもしれない。所詮は学生って感じの作品も多いから、必ず収穫があるとは限らないけどね。

どん底で迷える子羊デザイナーに幸多からんことを。