【125naroom】トップページを、まるとせんにしました

トップページ、なんだか動いてません？

まるが2つ、線の上を転がってくるんです。黄色いほうが、ちょっと遅れてきますよー

125naroom のトップページを、新しくしました。
ロゴとナビから始まった「まるとせん」を、トップページにも入れています。

今回、デザインで工夫したところと、つくっていて楽しかったところをまとめておきます。

ひらいてすぐは、文字と1本の線だけ

いちばん上は、「125naroom」「デザインするところ」「デザインってなんだろう」の3行と、画面の端から端まで引いた1本の線だけにしました。

これまでのトップページには、いろいろなものが並んでいました。
今回は、まずひと息ついてもらえるように、余白を多めにとっています。
コーヒーを淹れて、ひと口飲むくらいの間があればいいな、と思っています。

白いまるが先に、黄色いまるはあとから

線の上には、ロゴと同じ ●○ がいます。
ページをひらくと、線が左から伸びて、そのあとに2つのまるが右へ転がっていきます。

最初は、2つのまるがいっしょに動く案でした。
でも、並んで同じ速さで動くと、ただの「飾り」に見えてしまいました。

そこで、白いまる ○ が先に転がり、黄色いまる ● はあとからゆっくり追いかけるようにしました。
● は少しだけ行き過ぎて、戻ってきてから止まります。
追いつきそうで追いつかない、そんな小さなお話があると、ちょっとだけ愛着がわく気がしています。

動きは、ページをひらいたときの1回だけです。
「視差効果を減らす」を設定している端末では、動かさずにそのまま表示しています。

動きの調整がいちばん楽しかった

黄色いまるの速さは、何度も調整しました。
速すぎると追いついてしまうし、遅すぎると待ちくたびれてしまいます。
3秒にしたら、なんだかのんびりした感じになって、ここで決めました。

広告は入れないことにしました

トップページには、広告を入れていません。
いちばん最初に見てもらうページなので、125naroom がどんなところかが伝わることを優先しました。

あたらしい記事は、9つ

ファーストビューの下には、新しい記事を9つ並べています。
見出しは「あたらしい、メモ」です。
カードはほかのページと同じものを使い、トップでは抜粋を省いてすっきりさせました。

いちばん下の「デザインのメモをもっと見る」から、続きの記事を見られます。

スマートフォンでも

スマートフォンでは、まるを少し小さくして、画面の幅に合わせて転がる距離を短くしています。
小さな画面でも、ちゃんと追いかけっこが見られます。

さいごに

トップページは、125naroom の玄関のようなところです。
おじゃまします、と入ってきた人が、ちょっとのんびりした気持ちになってくれたらうれしいです。

黄色いまる、結局追いつかないんですねー

はい。でも、ちゃんととなりにいますよー

ふふたりの小言