site-05

https://www.ryden.co.jp/contact/

初めて見た時の印象

動画を見てるみたい!キネティックタイポグラフィをWebサイトで完璧に再現している!デザインと動き、全てが計算し尽くされたサイト。

FV

site05-RYDEN
site05-RYDEN

概要

◆title
RYDEN

◆description
RYDENはWEBサイトを中心に、様々なデジタルクリエイティブを提供するUX創造企業です。ストーリー、アートワーク、Webテクノロジーの3つの柱でユーザーは勿論、クライアントにも最高のUXを提供します。

想定されるターゲット

◆『他とは違う』と思わせるようなストーリー、デザイン、動きを備えたサイト制作を期待している企業さん。
ライデンさんの『熱さ』に共感する人。

気づき

◆spとpcともに完全に綺麗にレイアウトされているのがすごい。
クライアントワークで自分で最初から最後までサイト制作をしてみて、崩れないレイアウトを作るのは大変と感じたところだからなおさらすごいと感じる。(だから、世の中のほとんどのサイトはboxをwrapperで並べて、spとpcでカラム数を変える方法を取ってるんだと気づいた。)このRYDENさんは、marginやtext-alignでひたすら配置してるよう。

◆動きと配置
これだけの動きを、狂いなく付けるにはどうしたらいいんだろう。
◆全体的にものすごく大胆なレイアウトなんだけど、あしらい自体は割とシンプルでくどくないので、『やりすぎ感』がない。足し算だけじゃなくて、しっかり引き算もされてる印象。

site05-RYDEN

◆RYDENさんが制作したWebサイト、とても動きの参考になる。
例:新卒採用:採用・キャリア教育:日立
https://www.hitachi.co.jp/recruit/newgraduate/

背景 #F0E7EB(灰みの白)(背景の模様はどうやってるんだろう。検証で見た感じだと、画像配置ではないみたい…)
文字 #000(黒)
アクセントカラー1 #F00(赤)
アクセントカラー2 #19ACAE(水色)

site05-RYDEN

フォント

このフォントなんだろうって思って調べてみたら、Adobeフォントにあった。モリサワフォントなんだ。
とても可愛い好き。
筆の始まり(?)部分がちょっとアクセントがある。漢字とひらがなの大きさの差があまりないように見える。バランスが今っぽい。読みやすいので、言葉の意味自体を自然に捉えやすい気がする。

全体像

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です