【公式】さくらさくみらい中途採用サイト

リンク

総じての所感

各セクションについて

ヘッダー

全体
スクロールすると白背景で出てくる

MV

全体
雲、ピンクの原っぱ(かな？)鳥、イラストをアキが気にならない程度にスキッと配置している構成、こういう塩梅は真似したいよね
写真
トリミングした枠の中で色んな写真を見せるやり方、流行りだよね
左下のバナー
最大10万円の所、ここはなんで緑の六角形なんだろう、違う色でばなーを配置したかったんだろうけどね。
右下のピンクの桜の背景も寂しかったからが半分？あとはリンクの→に目がいくよね、ねらったかどうかは分からないけど。
線の矢印がはやりっぽいかな？自分が見てるサイトがそういうサイトなだけ？
右上のボタン
「募集園一覧」「資料請求」の色は、サイトのメインカラーを決めた後に横展開した色かな？
若干緑味の入った薄い青と薄い紫。罫線で括るのはサイト全体としてリンクボタンはそうする、というルールなんだろう。
ただそこまで厳密にやってるわけじゃない。
こういうの守ったほうが良いと思うんだけどなぁ…、そこまで気にしなくてもいいのかな...。

笑顔のサイクル

コンテンツ区切り
波線というか山のような緩やかな曲線でモヤッと区切りを表現して、必要以上に空きを感じさせないように柄をおいてある。
柄の色味は背景のピンクと同系色の濃いめのくすみピンクと白、このくらいのカラバリでいいのだな
左の図
手書きの丸、中心にロゴに使ってる桜のマークを配置して、桜を中心に子ども、保護者、職員を笑顔にしていってますよ、というイメージ図。
見出し
この辺りはよく見るサブ見出し、本見出しの構成、サブ見出しはサイトカラーのピンクの濃いやつ、大見出しは本文。
→サブ見出しは小さいけど本文よりも強い要素だぞっていう意味合いもありつつ色をつけているイメージ、要素のランク付けは大事だぁね。
どちらも細字、フォントウェイトは400、レギュラーのウェイトですな。
→文字サイズだけで強弱をつける、はやりのやり方

さくらさくみらいの4つのポイント

コンテンツ区切り
ここは上からだんだんと黄色にグラデーションしていく真ん中の薄いオレンジみたいなところ、多分その次の黄色い背景のところで一区切りっていう意味合いでグラデーションでコンテンツをつくってるんだと思う。確かに読んでみると「さくらみらいについて」っていう意味合いのコンテンツの流れである、
見出し
ここは上の見出しとはちょっと違う、文字の寄せ位置が違うっていうのもあるけど、サブ見出しとメイン見出しでテキストの色が一緒。 →見出しとして上と違って一文を分けてる構成っていうのもあるけど、上の「さくらみらいについて」っていうコンテンツの流れの子の要素だよっていうのもあるかと思われる。
文字の寄せ位置は、ポイントが左から並んでるから目の動きとしては左に見出しが合ったほうが自然じゃないかな～って思ったけど、ポイントだからどこから目に入ってもいいよね、気になる所から読めるコンテンツだよっていうのがあるかもしれない、考えすぎかもしれない。
各POINTの項目について
こないだ即パクった構成、偶数奇数で段を上げ下げして、線で繋いで見せるのはちょっとなかったのでパクっちゃった。
アイコンが丸、画像のトリミングも丸という組み合わせ、サイトの丸い雰囲気に沿ったデザイン。
中央寄せの本文が意外に良い、改行無しだと案外中央寄せもいいなぁと思った。
→でもやっぱり目があっちこっち行っちゃうから無しかなぁ…
各項目の見出しは若干大きいんだけど、それだけじゃ区別するのに弱かったみたいでウェイトをミディアムにあげてある、リンク部分は各項目ごとに罫線を付けたボタンにするのがうざったかったのか、テキストとアイコンの組み合わせにしてある。
確かにうざったいかもしれない、レベル感としてルールに縛られずにレベル落とすところは落とす勇気がほしいよね。

さくらさくみらいの4つのポイントの下のボタン部分

コンテンツ区切り
ここまでで一つの流れだと言わんばかりにグラデーションしていきつつ黄色背景
各ボタン
このサイトで使える色でパステルカラーに並行展開してのカラーバリエーション。ソリッドに一色同系統で乗り切るサイトではないので、これもあり。
サイトの中でいろんな色を使ってると華やかさがあっていいですな。
逆にビジネス系だと色を沢山使うと硬さが無くなるため、その辺りは気を付けて装飾を考えていきたい。
ただ、ボタン内の配色は黄色や緑という点で左右で方針を統一したデザイン。
イラスト
サイトで使っているイラストはおそらく文字色と同じ茶色を使って、線のみで書かれている、柔らかくてかわいいけど子供っぽくはない、ターゲット層に向いたイラスト。
リンクボタンは、トップページで共通ルールの背景ピンク罫線ボタンが初出、アイコンは細い矢印、リンクアイコンの大なりを本当に見ない。

さくらさくみらいの勤務地

イラスト
手書きのかわいいイラスト、勤務地がある所にサイトで使っている桜のマークでしるしつけてるのもかわいい。
上から配置しちゃって土地がわかりにくくならないように桜を上に被せるんじゃなくって、線のしたに被せてるのも配慮がちゃんと為されている。

インタビュー部分

全体
見出し、項目ともに中央寄せ、コンテンツ自体に優先順位はなく、並列に並べてどれか気になる物を見てね、という項目なので、こういう見せ方は大いにありだと思う。
各項目
シャドウじゃないけど、項目の形を罫線で縁取った物を少し傾けて背景に敷いている
→まず思うのは、インタビューは強めの生地だからほかの項目より少し差をつけたかったと見られる。
→罫線はリンクの項目、っていうことで罫線をみせつつ、変化球の見た目を作りたかったんだろう、という印象。
念の為矢印のアイコンも付けてリンク項目であることは強くアピール。
画面左上のアイコンは桜のモチーフを大きくして配置、結構このモチーフ使ってるんだけど、あんまりしつこく感じないな、毎回用途というか感じさせ方を変えて使えば良いのかもしれないね。
別にロゴを勝手に使ってるわけじゃなく、自分で決めたモチーフの形を使ってるだけなので問題無いし、
さくららくみらいに所属してるスタッフっていう意味合いも通るしいいやり方。
テキストは相割らずレギュラー、変わらずだね。
左上のアイコンの配色はサイト内で使ってるもので強めの色を多色横展開したもの。サイトの中で既に使用してるものも、初めて使うものもある。

お知らせ

見出し
ここは左が最新だからっていうのもあって、見出しは左寄せ。
各項目
ちゃんとwebサイトと整合性を取ってデザインされたサムネイル、画像はサイト内の要素に合わせて角丸にしてある。タイトルのウェイトははミディアム、本文抜粋はレギュラー。
こういうので日付いれないケースってあるんだな、まあ要らなかったら書かないっていう考え方もあるよね。でも思い切った印象
ちゃんとサムネイルがデザインされてると、こういう項目も華やかにみえますね。
お知らせ一覧リンク
ここはそこまで目立つ必要がないリンクっていう認識で罫線ボタンではなく、テキスト＋アイコン、こういうコンテンツに対するレベル付けを、ちゃんとしないといけない、本当に。

よくあるご質問

Entry

フッター