サイト分析（2021.05.13-05.31）
FORCAS
credit：Shhh inc.さん
クラウドサービスという硬めのサイトの中で各所に工夫を施すことで単調なデザインにならないようにしている。
【工夫されている箇所】
・写真やモックをコンテンツから若干上にはみ出させることで奥行きと動きを出している。
・背景を3つ重ねることでも奥行きが感じられる。
・後ろに敷いてある背景をコンテンツごとに左右に振っている。
・後ろに敷いてある背景やヘッダーにはうっすら影がついている。
・モックを見切れさせる。
・画像を2つ配置する時に若干上下をずらして動きをだしたり、大きい画像の上に小さい画像を重ねることで見せ方を変えている。
FVのキャッチコピーやページタイトルの横に縦線を入れることで大きい文字と小さい文字を一つのグループに見せている。
文字やボタンなどの黒っぽい色には若干青が入っている。
下層ページではFVにビジュアルがない時に背景に薄く画像をいれることでコンテンツとの区切りをつけている。
フッターは要素ごとのフォントサイズにそこまで差がないが色と太さを変えることでそれぞれの役割が分かるようになっている。
フッター直前の「さあ、ご一緒にはじめていきましょう」でも各要素ごとに細かくフォントサイズや太さを変えることで情報の優先順位が付けられている。
TYO - We drive emotions.
credit：studio detailsさん
英語のフォントはEB Garamond
Garamondの特徴
スタンダードかつ洗練さも併せ持ったフォント。
伝統や優雅さを売りにするファッションブランドや化粧品メーカー、ワイナリーなどで使われるケースが比較的多い。しかしオールドローマンで古典的なフォントでもあるため、IT系の企業が使うこともある。
FVはコピーとその下の文字のジャンプ率を大きくする、太さ・色を変えることでメリハリを出している。→決まって見える。
FVではまず会社の想いを知ってもらうためにコピー大きく配置。スクロールすると「emotion」の文字がズームされ映像が流れる。
→より「感情を駆り立てる」というコピーの内容が引き立っている。
FV直下でフルスクリーンで実績を見せることで実力の高さをアピール、また芸能人を載せることで信頼感を与える。
See our workでは特に見出しがないが、左側にFVから使われてこなかった色かつ大きいボタンを配置することで引っ掛けている。
Topicsは他のコンテンツに比べると見出しの文字が大きくないが余白を十分に取ることで視界に止まるようにしている。
Workではclientとtypeが上の見出しよりも下のサムネに近いのに成立している、グルーピングされている。
→フォントサイズが小さいためか
Topicsではテキストの下に薄く線を敷くことでのっぺりした印象を避けている。また線があることで1個1個、バラバラせず1列に揃って見える。
About usのmisson、visionはサイトの中でも重要な箇所のため、社内の映像やロゴのアニメーションをいれることで魅力的に見せている、また行間を2倍以上取ることでしっかりと読んでもらうように設計している。
サイト内で使われているフォントや要素の黒は青が若干入っている。
→青とオレンジは捕色の関係のため調和する、またコントラストが強いためテキストがしっかり読める。
メニューのテキストは見出しのEB Garamondではなく、DMSansにして使い分けしている。
→Garamondを使うとエモくなりすぎる？サイトを閲覧するときに邪魔になるから？
正円のボタンや要素が線だけで構成されているところ、フォントサイズが大きいところなどが海外っぽいデザインに感じる。
→最先端の映像を作っているTYOを表現するために日本っぽいデザインよりは海外の洗練されたようなデザインの方が合うと考えたのではないか。
しかし「1982年から続いている会社＝伝統のある会社」のためフォントではGaramondを用いることで、最先端の映像を作り上げるクリエイティブカンパニーかつ、歴史のある会社という見せ方を両立している。
ONE CAREER Inc.
credit：IN FOCUSさん
ニューモーフィズムとは
・2020年頃から流行している新しいデザインのトレンド
・ミニマルデザインとの相性が良く、美しく洗練された印象のデザインに仕上げることができる。
・また要素は背景と同じ色を使うためシンプルな仕上がりになる。
・最新のデザインのトレンドであるため見る人に新鮮な印象を与えることが出来る。
サイトの目的
ブランディング、どんな会社か知ってもらう
・下層ページには次のページに遷移する導線が設置されていない。
・メニューはスクロールするとハンバーガーメニューに切り替わるため2回クリックする必要がある。
→サイトの回遊性が低い＝重要ではない。
・取引先企業はトップには載せず下層にさらっと掲載。
・サービス内容は簡単な説明のみ。人事向けサービスの特徴も格納させている。
→詳しいサービス内容や導入メリットなどは、外部のサイトが担っているためお問い合わせや求職者を増やすことは目的ではない。
目的をどうデザインに落とし込んでいるか
ミッションに「業界を透明化する」と掲げられていることやサイトの目的からサイトのカラーをモノトーンに、またボタンはシンプルな仕上がりになるニューモーフィズムを使用。
→要素をシンプルにすることで内容をしっかり読ませたい。
しかしボタンがシンプルな分、目立ちにくいため黒丸をつけたり、余白をあまり空けずにテキストのすぐ下に置くことで視認性を担保している。（動画の再生ボタンも周りに英語のアニメーションをつけることで引っ掛けている。）
デザインをシンプルにする分、冷たい印象になることを避けるためにボタンは丸、写真は角丸にして柔らかい印象にしている。
フォントの色は#333333とグレーを帯びた黒、背景も真っ白ではなく薄いグレーにすることでコントラストが強くなり過ぎないように調整している。
見出しは頭文字だけ大文字、それ以外は小文字にすることで丸みを帯びた形にして可愛らしくしている。（全て大文字だと直線的になるため固い印象になってしまう）
また見出しと本文のジャンプ率を小さく、テキスト同士の余白を狭くすることでこじんまりして可愛い印象を感じる。しかしコンテンツ間の余白は広めに取ることで洗練された印象も持たせている。
またデザインも中身のコンテンツもシンプルな分、会社の温度感が伝わりにくいため動画や各ページに人の写った写真を設置することで社内の雰囲気を感じ取ってもらえるようにしている。
気になったところ
About usページだけキービジュアルがあるが、見出しの位置が右側にあるのが違和感を感じた。（キービジュアルがない場合は左側にある。）
ServiceとRectuitはページタイトル下に写真があるため、キービジュアルにして統一した方がいいのではないか。
STUDIO HAS
サイト内では6種類のフォントが使われている。
見出し：Garamond
Garamondは優雅さや洗練さを感じさせる書体。また癖がなく、可読性が高いためサイトの印象に関わる見出しに選んだと考えられる。
ヘッダー、FVの説明文：Helvetica
読ませるテキストではないため無機質なHelveticaを選定。
日本語の見出し：Ryumin
→先端やウロコに柔らかさを持たせた親しみやすい雰囲気の書体。Garamondと雰囲気を合わせつつも冷たい印象にならないように、またこのサイトでは「物語」という言葉を使っているため小説と同じ明朝体を使用している。
日付、タグ：century gothic
幾何学的な書体のため造形的な美しさがある。日付やタグはメインで読ませるものではないため、飾りとしての意味合いで選んだのではないか。
サイト内では「デザインで物語を届けたい」と言っており、風景を物語の象徴として位置付けている。そのため写真はあえてコンテンツを連想させるものではなく風景にしている。またサイトのカラーをモノトーンでまとめることで写真を引き立てている。
余白を広く取る、行間を広めに取ることで優雅、ゆったりした雰囲気を感じる。またボタンや一部の文字を金色っぽい色にすることで上品さも感じる。
SOGA FARM
credit：THREE inc.さん
一般的なトマトは夏に栽培されるが、越冬トマトは冬に栽培される＝珍しい。こだわりの品。
→普通のサイトとは違った見せ方をしたい。
適度に高級感、特別感を持たせるために写真は縦長にし、フォントは明朝体、セリフ体を使用することでスマートおしゃれな印象にしている。
しかしNEWS、STORIES、商品の画像はお客さんで更新しやすいように正方形に近い画角にしている。
フォントが線の細い書体を使っているため色は#000にすることで視認性を担保している。
トップページの下部はグリッドに沿ったレイアウトだが、FV直下のABOUTで見出しと本文の位置をずらしたり、写真を見切れさせる、画像の大きさを変えることで単調な印象を避けている。
ABOUT部分など、見出しと本文は同じような文章量（＝塊）にすることで、位置をずらしたり距離を取ってもバランスが取れている。
サイトの目的は商品を買ってもらうことのため、一番最初の商品を大胆に設置することで商品情報のエリアであることを確実に伝える。
背景の四角からはみ出させたり英語を重ねることで引っ掛ける。奥行きを出している。
LONG SELLERの見出しは隣の写真に対して上揃えにすることで下に余白を作り、洗練された印象を出している？
LONG SELLER部分の商品画像が少しイラストっぽく加工してるように見えた。写真の切り抜きそのままだと浮いてしまったり、重く見えるため加工してるのではないか。
商品画像に黒いフィルターをかけることで高級感を感じさせている。画像の上にテキストを配置しているが商品名とボタンだけだと、ただ置いただけに見えるため簡単な説明を上に添えることで少し複雑性を出している。また画角が若干縦長の正方形。ボタンも縦が長めの長方形になっている。
→縦長の写真と統一感を出すためか。
見出しの組み方も縦組みになっており、ABOUTページのタイトルなどあえて改行している。
気になったサイト
こどもでも読めるように「ひらがな」だけの設定ができる。
STUDIOでここまで綺麗なサイトを初めて見たので選定。
陶芸と彫刻のサイト。手作業で作られてることから線だけで構成されたデザインにしている。シンプルだけど、絡むごとにスクロールのスピードを変えたりしてて単調にみせてないのが良いと思った。
この記事が気に入ったらサポートをしてみませんか？