先週見たWEBサイト、いくつかの感想。 #2
REREです。2回目の投稿にして、この導入部分をどれくらい書くべきかを悩んでいます。勉強のためだけなら特にいらないのでは？でもnoteに書いている以上…ね？みたいな葛藤をしつつ、今週も始まります。
武田薬品の患者サポートプログラム TOMO
イラスト、特にそよ風が吹いているような演出がいいな！心地よさみたいなものを感じる。人物に顔はなくて、自己投影ができる余地がありつつ、キャラクターには顔があって、寂しくない。キャラクターの抜けた感じ、柔らかさも絶妙。
まずしっかり棲み分けをするTOPページ。長いけど大事な文章を載せる時は、短く簡潔に言い切った見出しが大切そうだ。
棲み分けしたからこそ、最初のアニメーションが成立しているのかも？コンテンツへの関心が高いユーザーが見ている前提であれば、やや長くても離脱率は少なめかな。むしろ、柔らかいイラスト・世界観を最初に見せることで、心理的ハードルを下げ、安心感や親しみをもって読み進められそう。
TOPの各セクションもリズミカルな配置で明るい印象。見出しも小さくて、テンポよく読んでいける。
TOPから各ページへのリンクには、例えば「TOMOのはじめかた」なら「ご利用にあたっての準備、登録の流れをご紹介」のように、全て補足情報まで記載があって遷移先がよりクリアになる。不安がある方に安心を届けようとする、サポートプログラム自体のスタンスを、細かいところからも感じられそう。
はじめかたのページ。ページ頭に概要がまとまっててわかりやすい！aboutもページ頭に見出しがまとまってていいな。
MEJINAVI2024｜目白大学がまるっとわかるメジナビ
イラスト、動き、写真、色、全てがとっても楽しそうでわくわくする！
読み込み時「MEJINAVI2024」のあとは、各要素がバラバラに出現する。同時にワラワラと動くことで、様々な人がそれぞれ活発に動いているような…賑やかさが演出できる気がした。
たくさんの色を黒が締めている。黒の線＋カラフルというのが、デザインでもイラストでも踏襲されていて一体感がある。
横スクロールになった際、画面下に「SCROLL」と表示されるのが親切だと思った。動きが変わる時にアナウンスしておくの、大事かも。
MESSAGESはそのまま学科紹介になっている。学科ごとに抽象化したアイコン＋学科の一般的な説明じゃなくて、イキイキとした先輩たちの写真＋実体験という具体性が、より活気を感じられるコンテンツを作っているのかも。
このMESSAGESは数が多く、特にSPの2カラム表示だとかなりスクロールすることになる。つまり途中で飽きるかもしれない。ランダムに出現する吹き出しが、画面にリズムをつくって、飽きを回避するのに役立っている気がした。
HARUTA 2024 Spring/Summer 特設サイト
有機的なシェイプと（スクロール時の）右上ロゴの、縮んだり膨らんだりする動き、どこか浮遊感を感じる写真配置になんだかうきうきする。
潔い白背景や袋文字、行頭を揃えず自由な配置のFVの文章からは、軽やかさを感じる。
シェイプや各要素のランダム性＝自由さは、開放感があるという印象にも繋がっているのかも。
なるほど！と思ったのが、ブランドロゴを左上に、キャンペーンロゴを右上に配置しているところ。こういう、大見出し的なものが2つある状態って、割とあると思うのだけど、こんなふうに整理できるのか。PCでは右上ロゴが追従するけど、SPでは追従させずコンテンツに集中させる棲み分けも。
ハンバーガーメニューはなく、右下に「ALL SHOES」へのリンクが。キャンペーンサイトはコンテンツが少なく、スクロールでどんどん見てもらうことが大事だけど、「ある程度みて、雰囲気がわかったら、さくっと全部みたい」みたいなニーズがあるのかな…？