＜東京医療保険大学和歌山看護学部…＞

https://wakayama.thcu.ac.jp/

感じたこと

●学校
・色→白・黒・黄緑〜水色のグラデーション
・20~30代の女性
・とにかく明るい・爽やか！
・メインビジュアルが丸くなっていて、個性的！
全面写真じゃないから、余白の白がより爽やかさをupさせてる。キャッチフレーズも目立つ。
・「タイトル→中身、タイトル→中身→タイトル→中身」って感じじゃなくて、流れるように見える感じ。※タイトルが目立っていないってこと。大きな文字になっていない。
・これも画面いっぱいだからフルードイメージかと思いきや、レスポンシブで、タブレットくらいの大きさ(768px)で一回変わるだけ。要素見えなくなってる部分たくさんあった。
・背景グラデーションきれい
・写真&ボックスが重なってるレイアウトで、ボックスにカーソルあてると、写真がふわ〜っと大きくなる！

レイアウトトレースして気づいたこと

・NEWSの写真＆文字の部分の文字は、上下左右のpaddingでいい感じに余白がついてる。コーディング的には、写真も含めて大きなdivで、写真はfigureタグになってる。
・ニュースとインスタの写真の幅は1pxとか4pxとかすごくせまい。
・写真とboxの重ね方、写真が左上→写真が右下→写真が左上。グラデーションの色も交互に違う。
・●はどういうところに配置されてるんだろう？
→見出しの近く✖️２、なんかの要素の角✖️３（装飾？？）
・ベタ塗りの部分がない。全部グラデーション。激しいのもあれば、微妙なのもある。
・見出しの文字を太字にしたりしていない。→見出しとはわかるけど、そんなに目立たせないようにしてる？→
・日本地図に矢印だして場所を示すの、ただ書くよりも分かりやすいし、面白い。

トレースして気づいたこと

・難しそうだと思ってたグラデーション、グラデーションオーバーレイで始まりと終わりの２色指定すれば、簡単にできることに気づいた。
コーディングは、linear-gradientで２色指定してる。画像じゃない。
・使われてるグラデーションは3パターン。
※背景のグラデーションは、薄い水色→めちゃくちゃ薄い黄緑のグラデーション。薄め。（background: linear-gradient(90deg, #C6F1FF, #F4FFE8);）
・日本地図のところの背景に直角にへばりついてる文字はpng画像。
・photoshopのパターンは透過でつくろう！！！
→そうしたら、レイヤースタイルをラスタライズ&カラーオーバーレイでパターンの色が変えられる！
・fontは基本Notosans。
NEWSのタイトルの英語の部分や、日にちの部分は、『brandon-grotesque』。
角が尖っていて、シンプルだけど、少しデザイン性がある。（有名なフォントらしい！）（https://www.buroki-design.com/blog/design_thing/designthing0045/）
・二番目の大きな写真の左部分に、白い台形？のマスクがかかってる。
→なくしてみたら、この写真の左側がガランとして見えた。
→余白が気になる写真があったら使える＆
あえてやってるとしたら、右側の女の子がすごく目立つけど、写真が寂しすぎなくなる。
・すごく長い文章は、13pxで小さめだけど、lineheightが2.6もるから読みやすい。文章の内容で改行せずに、widthを指定して改行されてる。読みやすさは落ちるけど、レイアウト的には綺麗。
・more＆→の前にタイトルいれる

・footerは左にborderで見やすく。