株式会社 MACHIE　#1日1サイトレビュー

株式会社MACHIE｜泉州地域に特化したデザインにも機能性にもこだわりたい家

■概要
泉南市を拠点に南大阪地域に密着した工務店のサイト

■ターゲット予想
・泉南市に引っ越したいと考えてる人
・泉南市で家づくりを検討されている

■目的予想
・このサイトを通して、申し込んでもらう
・知ってもらう


■印象やキーワード
・爽やかな印象 → 水色や白ベースでボタンは透過を使っているからかも
・ナチュラル → 雲のビジュアルと背景の切り抜きからかも

■フォント
Noto Sans JP（日本語) 
世界中の言語をサポートすることを目標にGoogleがadobeと共同開発したフォントシリーズのサンセリフバージョン

Prompt（英語)
タイのコミュニケーションデザイン会社であるCadson Demakによるサンセリフ製品です。

■カラー
ベース：#ffffff　白
メイン：#94C8DF　明るい灰みの青系の色
アクセント：#31735E　暗い緑系の色

■ブレイクポイント
(max-width:899px、max-width:1140px、max-width:1229px)

■ナビゲーション（ヘッター）

右端にハンバーガメニューとcontactボタンが付いている珍しいタイプ
横幅：70px
フォントサイズ：開く前のcontactなど　10px
　　　　　　　「トップページ」とか　20px
　　　　　　　「Home」とか　11px
・ホバーすると少し動くのが可愛い（少し小さいかもとは思う）
・背景が白や写真だから埋もれることがない
・新たに写真を入れるのではなく左をぼかす表現も素敵だと思った

■メインビジュアル
・フォントサイズ：キャッチコピー 20px　
　　　　　　　　：左端 14px 13px 10px
・キャッチーコピーをどん！と大きく見せていないから写真が大きく見える
・スライドショーで自動で写真が変わるようになっている
・下のラインで次の写真がいつまでが可視化している
・写真の上側が曲線で切り取っていて、青いラインを入れている表現が風が通ってるみたい
・左右端に情報を入れたいときは右は横向きで、左は縦文字にすると安定するのかもしれない

■気づいたこと・感想

見出し：30px（letter-spacing: 3.1px;　line-height: 1.86667;）
本文：16px（letter-spacing: .51px;　line-height: 2.125;）

・雲のビジュアルがゆっくりと上がってきて素敵

・写真を家の屋根の形に切り抜いているのも雰囲気が出ていていいと思った
　その上にさりげなく風見鶏が乗っていることでより家を連想させている。
　縦文字を写真の横に入れるのも素敵だと思った（英語は縁取りすることでビジュアルにもなると思った）

・しっかり余白と文字サイズが揃っているとしっかりグループ化がされていて近い位置においても大丈夫だった

・写真のサイズが違っていても、周りのビジュアルやボタンでバランスが取れていた

・写真を2枚並べて少し曲線にして奥行きを持たせて、真ん中のビジュアルが浮いているように見える工夫がありました。ただボタンにするのでなくロゴのようなものにするの工夫が素敵だと思いました。

・フッターに町と空の写真を入れることで、町づくりをしていると表現していると思った。
・空の写真を入れることで広がっていく感じでナチュルな雰囲気を出せていると思った

今日は「株式会社 MACHIE」のサイトをレビューしてみました！
ビジュアルをうまく活用していてとっても素敵だったので選んでみました。
ビジュアルや背景を工夫してうまく使いこなすことでこなれ感が出せるんだと学べました。たまには挑戦も大事ですね！
ここまで読んでくださりありがとうございました(*ᴗˬᴗ)⁾⁾