TOKIOテラス#1日1サイトレビュー
#21
サイトレビュー（インプット）の合間に制作（アウトプット）をして気づいたこと
■コンテンツ同士の間、デザインが単一になりやすい
■PCデザインはできても、SP用デザインの引き出しが少ない
今回はこちらのサイトのトップをレビューしつつ、FVのPCとSPデザインの分析をしてみたいと思います。
【サイトの概要】
TOKIOの国分太一がスタートアップ企業の取り組みをインタビューするTOKIOテラスの番組紹介
【サイトの目的】
キャストと対談企業の紹介
【ターゲット予想】
TOKIO（特に国分太一）に興味のあるファン
対談を受けたい企業や取材を受けたスタートアップの経営者・広報
【FV・全体的な印象】
暗い無彩色が基調、全体的にスタイリッシュ
スタートアップのブレストで使われそうなボードを意識しているのか、洗練されているけど情報量はある感じのトップ
【キーワード】
スタイリッシュ、メタリック、モダン
【カラー】
【フォント】
'Roboto'
Googleのデザイナーによって開発されてた欧文フォント
MeiryoやArialと比べて字間が若干狭いように感じる
游ゴシック体
游ゴシック（Yu Gothic）は、Windows 8.1とMac OS 10.9から標準搭載されているフォントです。
cssでfont-familyとして指定する場合は次のように記述します。
font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
直接関係ないですが↓
IEのサポート終了について
CSSでfilterとかmix-blend-modeを気兼ねなく使えるようになるのは嬉しいです
【デザインについて】
トップはブロークングリッドレイアウト
境界線をあえてはずすとレスポンシブ対応がかなり難しくなりそう
今回のサイトは実装はPCファースト、SPのトップ見るとそこまでブロークンで構成されている感じはしない、スマホから初めてサイトを訪れた人は「斬新なデザイン」とは思っても「ブロークン」とは感じないかもしれない
【実装とレスポンシブ対応】
気になる実装ですがブレイクポイントは1601px以上 / 1600-769px / 768px以下の3つ
トップをコンテナ.tokiot_container内の.tokiot_top_mv_secに4つのステッカーが格納され、それぞれposition指定で配置されている
「次回放送日」とか「25:20-26:20」などparagraph、spanタグはvw指定で画面幅のサイズによって可変（font-size:3.875vwとかの数値ってどう計算してるんだろう）
【追記：コードトレースをしてみて】
実際にトップの一部をレスポンシブ含めてトレースしてみました。感じとしては、「ブロークンのレスポンシブ対応は難し」かったです。ほとんどpositionで座標を指定するので、cssを書いてはブラウザで確認→修正の繰り返しです。実務でどのように実装しているかはわかりませんが、この調整はかなり時間がかかると思う。
ただコンテンツ量がFVに収まりきらずスクロール前提の分量なので、font-sizeとleft rightをしっかり設定できれば、ブレイクポイントは2,3つで済みそう
(トレースしてみた様子)
この記事が気に入ったらサポートをしてみませんか？