見出し画像

#1日1サイトレビュー【040】ウズウズカレッジさん

こちらのサイトでYakuHanJPという約物半角専用フォントがあることを初めて知りました!!便利🥰

【概要】
ITスクールのwebサイト

【ターゲット】
ITスキルの授業と、就活サポートどちらも受けたい20代

【目的】
スクールの概要を知ってもらい利用につなげる

【印象】
元気、ダイナミック、さわやか

【メインビジュアル】
・「キャッチコピー」と「就活スーツの20代くらいの方の画像」と「職業名のボタン」で、就活のことまでサポートしてくれるITスクールであることが自然と分かる。
・絵の具のようなグラフィックデザインがサイトの上下に配置されていておしゃれ、スクール入ったら未来を描いていけるぜ!😼っていうメッセージ?

【コンテンツ】
・セクションタイトルは英字とオレンジの下線で統一。
・ロゴ、ハンバーガーメニュー、youtubeリンク、動画教材リンク、法人向けリンクは四つ角に配置され、スクロールしても追従してくる。
・PERFORMANCE オレンジの文字使っている部分多い、それでも見づらくならないのはジャンプ率が高いのと、グループ化されてるからかな。
数字の背景に絵の具を落とした?ようなグラフィックがある。
・SPONSOR WHAT'S UZUZ COLLEGEのセクションでは画像左、テキスト右の配置だったのでSPONSORはその逆の配置にして、全体的に見てバランスを取っている?
・BULLETIN BOARD 就活のための記事のエリア。左側に最新の記事、右側には記事が2列に並び、スクロールできるようになっている。このサイトは記事発信がメインではないと思うので、この配置が場所を使いすぎずすっきりしていていいと思った。

【カラー】
元気、ポップな印象

サイトレビュー2_アートボード 1

ベースカラー:白#fff、薄いグレー#fafafa、薄いオレンジ#f5c299
メインカラー:青#238191、オレンジ#e66700
文字:黒#333、白#fff、オレンジ#e66700

【フォント】
セクションタイトル:Oswald
テキスト:YakuHanJP, "Noto Sans Japanese", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;

YakuHanJP:約物半角専用のWebフォント(YakuHanJPはゴシック体、約物全部が対象)
これをfont-familyの最初に指定するだけで、かっこ「」などの約物と呼ばれる記号を半角にすることができる。

へえー!!めっちゃ便利やん😳

ゴシック体か、明朝体か、丸ゴシックか?約物全部を半角にするか、かっこだけ半角にするか?でfont-familyの記述の仕方が変わるようです。(詳しい記述名は下記サイト)

こちらのサイトで勉強させてもらいました🙇ありがとうございます!!


【レスポンシブ】
・youtubeリンク、動画教材リンク、法人向けリンクが角に配置されていたのが、下部に固定されている。背景色がはっきりと違うので並んで配置されていてもタップ場所が分かりやすい。
・BULLETIN BOARD 記事部分は横スクロールできるようになっている。

画像1


この記事が気に入ったらサポートをしてみませんか?