9. 株式会社バンディット(デザイン・建設)　コーポレートサイト #1日1サイトレビュー

こんにちわ、ayakaです。

今回は、株式会社バンディットのコーポレートサイトをレビューさせていただきます！

Bandit Co.｜商業施設の建設工事全般に関する企画・設計・施工

サイト選びは下記から行いました。

Web Design Clip | Webデザインギャラリー・クリップ集

レビュー

⓪このサイトを選んだ理由: 

・色々なジャンルのサイトを分析しようと考えている最中、ギャラリーサイトの上位1ページ目を探していた際に建設関連のサイトを発見した。そのサイトが建設工事のイメージではなく、デザインを連想させる独特な雰囲気を感じさせるものであったため。

・ページが短い中でも閲覧者に会社の印象を残せるサイトは、優れていると感じたため。

① サイト概要:

・会社概要

・サービス・実績紹介

・採用ページ

・ブログ

・お問い合わせ

② 目的:

・商業施設運営会社からの建設工事の依頼を増やすため。

③予想ターゲット層:

・新規商業施設のオープン、又は商業施設のリニューアルを考えていて、デザインも含み企画から施工までの全ての委託を希望する不動産会社や他の商業施設運営会社

④全体の印象:

・白・黒を背景としたデザインで、各コンテンツも概要が短くまとまっているので、シンプルでコンパクトなサイトになっていて見やすいと感じた。

・「construction」コンテンツの概要文だけでなく、ファーストビューにて外で絵を描くアーティストを連想させる写真と、「about us」コンテンツ直後にて、デザインのテーマについての話し合いで書記が黒板に案を書き留めるシーンを連想させるショート動画があることで、建設工事だけでなくデザインも会社で行っている雰囲気が更に伝わった。

⑤配色:

白・黒

・上記の３種類の白で各コンテンツの背景で3色を使い回している。

・フッダー背景: 黒

⑥フォント:

・Cardo (Sans-serif)
・Noto San JP

・Cardoとは:
古典・聖書等で用いられるサンセリフ体フォント。高品質・高級な雰囲気を演出したいときに用いられる。

Cardoフォントのサンプル画像:

(引用元: https://fonts.google.com/specimen/Cardo#glyphs)

参考:

https://fonts.google.com/specimen/Cardo#about
https://www.freebestfonts.com/cardo-font

⑦余白:

・各コンテンツを背景色で区切る形となっているため、隣接したコンテンツ間の余白が狭く設定されている。

⑧競合サイト: 

株式会社サンリット建設 | TOP

山京建設株式会社 | オフィシャルサイト - 相模原市

https://www.charme.design/

⑨このサイトのデザインから学べる事:

ー良い点として学べること

レイアウト:

・閲覧者に会社やお店が提供している商品・サービスを覚えてもらうには、各コンテンツで概要文を記載するだけでなく、ファーストビューやページの中間の位置で商品・サービスを連想させる動画・写真・イラスト等を入れることが有用であること。

・ページの長さを短くするには、隣接したコンテンツの背景色を別々にして各コンテンツ間の余白を狭く設定する必要があること。

フォント:

・英文字に用いられるフォントの１つに「Cardo」があり、高級感を演出したいときに適していること。

その他:
・建設の設計をサイトでイメージさせる方法の１つに、初めにトップページが表示されるときと、トップページから他ページに移り変わるときに、複数分割された白い紙が１つ１つめくられる様なモーションをつけるという方法があること。

ー改善策を考える上で学べること

・(課題): 

スライド表示形式で画像を掲載する際、画像下の・を押して画像をスライドさせる形だと、PC版、iOS版共に・は小さいボタンなので押しにくく、不便さを感じる可能性がある。

(改善策&学べること):

閲覧者にとって操作がしやすいように、画像下の複数個の・を設けつつ、・がある行の両端に「◁　▷」といった矢印を設ける必要がある。

画像の表示形式について考えるときも、その操作の仕組みは閲覧者が利用しやすいものかどうかを都度検証することが重要である。

PC版の外観

iOS版の外観(PC版との相違部分のみ)

最後までお読みいただき、ありがとうございました。