商船三井テクノトレード：採用情報

商船三井テクノトレード：採用情報ページ

TOPページに企業のブランディングと概要

事業内容はすっきりセクションわけしてあり

会社案内で企業理念とビジョン、存在する意義、組織図の明記

企業の大きさから考えると、伝えたいことをコンパクトにすっきりとしたサイト構成で

採用情報のページに見たい知りたい情報がすっきり収められています。

中でもこの表示がトップに来るのは他の採用情報サイトと大きく違います、これが一番伝えたいことなんだと思います。

20代は8%　30台は27%なのに新卒入社5年以内の離職率が0%で、中途採用に力を入れていて男性育休に関する取り組み、平均残業時間や男女比まで公開する、透明性の高い人事と経営なのだと
これだけでも見る人は感じるのではないでしょうか？

その下のキービジュアルにある互い違いのボックスの写真の取り扱いが慎重で

最近、画像をhtmlに設置するとき、widthとheightを書いて、imageにwidth:100% heigh:autoと書くのをえらい人が推奨しているのですが。
（loading=lazyなども併用します）

youtubeや画像が縦方向に高速でスライドするサイトの場合、画像の表示領域が先に確保されていないと、表示のタイミングまで高さが０から変化するせいで
ガクんと高さが変わってしまうのを防ぐコーディングです。

loading=lazyを併用する上の書き方だと、クローラーがイベント起さないために画像のALTを読み込まないというお話
（日々進化しているとの事なので今後どうなるのかわかりませんが）

このサイトは自力でそれを解決していて
imageのbeforeにこの記述をして
width: 100%;
padding-top: 65%;
高さを事前に確保しているんです．．．これは最近勉強して覚えたのですが、
width:100%に対するpadding-topは横幅を基準に高さをだすので、アスペクト比を完全に維持した空っぽのボックスが作れるんです
これ凄いんですよね、中身のないボックスを用意できるのでバックグラウンドだけの空ボックスだって作れちゃうんですが。

それを画像表示前のボックスとして用意するために使い
さらに

こんな事よく思いつくなと思うんですけど、自力でlazyloadingをtransitionで書いてるんですよね。。。

.lazyloaded {
-webkit-transition: all .4s cubic-bezier(.165,.84,.44,1);
transition: all .4s cubic-bezier(.165,.84,.44,1);
-webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
transition-timing-function: cubic-bezier(.165,.84,.44,1);
-webkit-transition-property: opacity;
transition-property: opacity;
opacity: 1;
}

ここにもオタクがいるんだなあと感じました

ボックスの並べ方はちょっと癖があって margin-bottomに-20%とか書いてるのは
本当にこの書き方じゃないとダメ？って思いました。

サイト構成に話を戻しますと。

社員の一日の過ごし方が偽りなく書かれた後。

社長の言葉が「すっきり」これが本当になかなかないです。
取締役 業務部長
山田 雅也さん、本当に素敵

正直どこのサイトも両手を広げて笑顔の社長が、ありえないほどでっかい自分の夢を語っていて気持ちが悪いんですが
このサイトにはそういう事を感じません。
欲しい人材の人物像をすっきり述べた後
「あなたの経験、夢と、自律自責の行動力が、当社で長年蓄積されたノウハウ、チームワークと反応し合い、
世界の船舶輸送や周辺産業への付加価値となって結び付いていく。一緒に、未来を切り開いていきませんか。」

あくまであなたが主役だよという文章
ライターがいるのかもしれませんが、素晴らしいです。
どこかで「参考」にしたいと思います。

採用情報ページは
冒頭の会社を知る、社員の一日、求める人物像のあと社員インタビューになるのですが
社員インタビューだけ詳細ページがあり、たぶんですが全部門を網羅していて、

それぞれの場所でキャリアを積んだ、積んでいる社員の現在の言葉が、あまり飾った言葉でなく書かれていて好印象を受けます。
これならどの職種を目指して入社しようと思っても、入社後の自分をイメージ出来る気がします

HOME

Webサイト100選