【day66】株式会社Roots #1日1サイトレビュー

https://rts.tokyo

【概要】
企業イベントの企画・制作チームの公式サイト

【選んだ理由】
親しみのあるイラストとデザイン。イラストとマッチしたデザインはどういうものがあるか分析したい。

【参考になるデザイン（PC）】
・どのエリアも、イラストや、モヨっとした形のイラスト背景が動いていて、サイトに動きがある
・関わるメンバーのイラストが各イベント事例に表示されていて、ユーザにはどういう人が担当しているのかがわかって信頼度があがる
・各エリア名が英字の縦書きで大文字でレイアウトされている
→あしらいとしてもおしゃれ

▼縁は点線の袋文字で英字が縦書きにレイアウトされている

・ボタンはフォントにマッチした影付きの楕円形
→影も、サイトの雰囲気にあわせて、はっきりした色ではなくうっすらグレーの色
→ホバーするとボタン背景とフォントの色が入れ替わる

▼通常時（上）とホバーした時（下）

・ページ背景には、ちょっと濃いベージュで三角や四角、丸の形が下から上に流れる動画になっている
→明るい、楽しい、ポップな印象を与える
→動画だからサイトが結構重い、、
・ヒアリングのエリアでは、各工程を左右に白背景で配置
→緑背景のモヨっとした形に工程に関連したアイコンが書かれていて視認性が高い

▼フニャフニャした線で工程をつないでいる

・各エリアの白色背景は、吹き出しになっているエリアもあれば、全面背景になっているエリアもある
→エリアが異なることが伝わるし、雰囲気も少し変えられる
・イラストに加えて、サブタイトルが手書きで書かれていて親しみやすい印象がある
・チームメンバーの紹介では各メンバーのSNSリンクもアイコンで表示
→メンバーのつぶやきなどを知ることもできるので、信頼できそう

【ターゲット】
自社や提携企業のイベントの、企画や制作を外部に依頼したい企業

【サイトの目的】
・事業内容をしってもらう
・チームメンバーを知ってもらう
・問い合わせをしてもらう

【フォント】
和文：FOT-筑紫A丸ゴシック Std B（Adobe Fonts）
英文：Open Sans（Google Fonts、Adobe Fonts）

【カラー】
メインカラー、テキスト：208b55（緑）
サイト背景：f7ebcf（ピックルみたいなベージュ）
背景：fff
テキスト、フッター背景：444444（ベージュなどに会う柔らかい黒）

【レスポンシブ（SP）】
・PCでは画面右上に配置されていた「お問い合わせ」ボタンが、手書きマークになっている
・おといあわせのエリアなど、PCではイラストが配置してあった部分はSPのサイズにあわせて除いてあるものもある

【感想まとめ】
イラストと楕円や三角、四角などの形、FOT-筑紫A丸ゴシック Stdの丸みのあるフォントがマッチしている。
処理は重たくなっているけど、もしイラストや背景が動いていなかったら、少しのっぺりしたサイトになっていたと思う。雰囲気がすごく好みなサイト〜！

▼PCサイズ キャプチャ