先週見たWEBサイト、いくつかの感想。 #4
REREです。自身の勉強、言語化の練習として感想を書いているのですが、それをnoteで書いてみる実験中です。その4週目。
大竹高等専修学校 | 東京の調理師・美容師の高校
明るい配色、楽しい動き、かわいいイラストの賑やかなデザイン。そして写真がとってもいい…！！！ ふとした笑顔、真剣な眼差し、イキイキとした生徒たちの姿に「あ、嘘じゃないんだ」って思った。このサイトで、デザインや掲載情報の説得力を最後に確実にしてくるのが写真なのかも。
情報がとても充実しているのもいいな。たぶん、一般的な高校ではないところを志望するとなると、保護者の方も不安だと思う。それは、大抵の場合、一般的な高校しか知らないから？というのが理由の1つにありそう。不安を先周りしたQ&Aに、制服洗濯可のような細かい情報、そして学校生活、情報もとことんオープンであることが安心感に繋がりそう。
「中学生の保護者の方へ」のページは、トンマナは一緒だけれど、動きや賑やかさは抑えめで、棲み分けされている！
アクセントの1つになっている、左から右にわたる太めのライン。時にそのカーブに合わせてコンテンツがのっていて、アクセントとコンテンツが両立しているのも面白いなあ。
文字色は#000。これだけ賑やかでよく動くと、真っ黒がいいんだな。締まるな〜と思う。
FVとか、TOPの学科紹介の写真は、調理師科と美容師科で逆に動く。フッターも中央から左右に開くように動く。揃えないことで単調さがなくなって、奥行きがでるのかも。
Harmonies with KUMON | 子育て家族の毎日に、新しい発見を届ける
PCもSPもハンバーガーメニューがない。PCでは、左側に記事のカテゴリ＆「記事を探す」ボタンが常駐。SPでは、右下に「記事を探す」ボタンがあるのみ。ハンバーガーメニューよりも直感的でわかりやすいし、SPはボタンが右下にあることで、ヘッダーまわりに余計な情報がなく記事を読むのを邪魔しなそう！
「記事を探す」を押すと、各カテゴリの詳細やタグ一覧が出現。カテゴリの詳細があるのも親切かも。カテゴリはサイト側が設定しているものだから、そのカテゴリ名だけでユーザーにどこまで情報が伝えられるかはわからないものなのかも。下に箇条書きで概要が書いてあると参考になるし、ユーザーが思っても見なかった情報と出会えたりもしそう。
TOPのスライダーは、記事カテゴリと同じ色のぼかしが入ってる。この形、私は初めてみたかも…！カテゴリ名のテキストカラーよりも印象に残るし、背景ベタとかよりも優しく入るのが、サイトの雰囲気にも合っていると思う。あと、ここがFVになるので、ぼかし自体がサイトの雰囲気／個性を作っているようにも思った。
ベネッセのDX戦略 | ベネッセグループ
ローディング〜FVの動きから素敵。全体的に、明るさやクリーンさ、デジタルっぽさや新しさを感じる。総じてポジティブな雰囲気があると思う。
明るさやクリーンさを感じるのはデザインと写真から。背景と写真とでは、青みや光の存在が共通している気がする。
文字まわりのチラチラした動きや、画像ホバー時のブロックが埋まっていくような動きなど、アニメーションからはデジタルっぽさを感じる。
使われている「TT Hoves Pro」「Noto sans」も、ここ10年以内にリリースされたフォント。ここからもデジタルさやクリーンさを感じるかも。
FV直下、タグが左右に流れていく箇所は写真の形が様々。タグだけだと単調になりそうだから、画像の形に変化をつけ、そこでリズムをつくっているのかも。
そのタグの下には大きな写真。ここまでテキストがメインで続いていたから、次のステートメントの文章が来る前に写真をどーんと載せることでメリハリができるのかも。
ケーススタディのサムネも面白い！実績と人物写真が横並びではなく、片方を捕捉的な感じで添えている。ただ実績を並べるより、人物がいた方がより語りかけてくる感じがあって印象が強い（写真もポートレートでなく、会話の途中を切り取ったものっぽい）。でも人物だけだと何に取り組んでいるのかぱっと見わからない。両方あることで補完しあっていて、それをこういう形でみせれるのか🥺
このサムネ、事例一覧のところでは実績がメイン・人物がサブなのだけど、採用ページでは人物がメイン・実績がサブになっているのもとってもいいなあ。
あれ、OGPの文字も動いてる…！
アニメGIFも指定できるの知らなかった…
先週から体調を崩してしまって、まる1日パソコンを開かない日が続いてソワソワしていました。先月末から毎日何かをつくる、をやってみていて、せっかく続いていたのにストップしてしまった…まだ本調子ではないけれど、ぼちぼち再開していきたいな。
※全文、あくまで自分なりの感想・分析になります。「もっとこうなんじゃない？」というコメントも大歓迎です！
※掲載の取り下げが必要なサイトがありましたら、お手数ですがコメントかXのDMでおしらせください