商船三井テクノトレード㈱ #サイト模写⑥

今日はスクールで紹介されているコーポレートサイトの下層ページ模写に挑戦してみました。パッと見てグリッドが多いレイアウトだったので、今回もXDを使用。Photoshopの時と同様、XDもだいぶ手に馴染んできた感じです。なのですが、Mimicを使っても素材がほんの数点しか抽出されないこともあり…前回のLPの模写ではすべて抽出できたのに、この差は何なのでしょうね。抽出できなかった素材はChromeから吸い出したのですが、なぜかぼんやりした画像になっていまして…。「ラスター形式だと拡大縮小化を繰り返すと画像が劣化する」と講座で習いましたが、このあたりと関係があるのでしょうか。取り込んだ画像のぼんやり加減は少々目をつぶるとして、気づいたことを列挙したいと思います。

引用元：商船三井テクノトレード株式会社様（https://www.motech.co.jp/）

気づいたこと

◆トップページだけでなく、すべての下層ページにヒーローヘッダーを配置。商船事業を行っている企業なだけあって、どの画像も海を前面に押し出していて青みがかったトーン。中央のヘッダー文字がよく映える。下層ページをすべてテンプレートした中で、このように大きなビジュアルをページごとに変えていくのは、閲覧していても変化があって面白いと思った。

◆ナビゲーションメニューの文字の下に、ごくごく小さく表示される矢印のようなマーク。カーソルを合わせるたびに、180度ぐるっと回転して、芸が細かいと思った。（今回のトレースでは、キャプチャのときに反映されなかったため、このマークは加えておりません）

◆今回扱ったのは、下層ページの中でも "事業内容" のページ。ヒーローヘッダーの後には、7つの事業内容がグリッド表示で並ぶ。グリッドは余白を取ることなく、画面の端から端まで最大限利用。そのため、ひとつひとつのグリッド画像が大きい。オリジナルサイトでは、中央の白い文字が読めるが、トレース版だと画像がぼやけてしまい、文字が判別しづらくなってしまった。

◆フッター部分はたっぷりと余白を取っており、サイトマップが文字表記で掲載されている。ヘッダーのナビゲーションメニューで行きたいページにアクセスできなかった際に、フッター部分でも飛べるしくみ。今回取り扱った"事業内容" ページに関しては、メインコンテンツエリアの表示がビジュアル主導であるため、行きたいページにすぐ行ける配慮だと思った。

◆ところどころに言語切り替えの"JP | EN"や"TOP/事業内容"といったパンくずリストを配置。文字サイズは12ピクセル。かなり思い切って小さく表示しているのには、何か意図があるのかな。

(traced site)

(original site)