⒈WEB SITE

株式会社LOOPLACE（ループレイス）

⒉概要

古い建物や空間を活かす、不動産再生カンパニーのコーポレートサイトのトップページをレビュー。

今回も「Japan Web Design Gallery」で１番上にあったサイトを採用させていただきました。

サイトレビューの経験値が上がったら、自分でサイトを選んでレビューしたいな。

⒊ターゲット

・古い建物をどうしようか悩んでいる人

・不動産再生の存在を初めて知った人

・既存の建物を再利用したい人

・会社について知りたいことがある人

⒋目的

・不動産再生がどのようなものか分からない人にも、興味を持ってもらう。

・会社について知ってもらう。

⒌構成と印象

全体的に白・黒・グレーでまとめられており一見シンプルに見えるが、メインビジュアルとコンセプト画像にアニメーションをつけることによって印象づけている。

【メニューバー】

・固定でスクロールしてもついてくる。

・ハンバーガーメニューは三本線が上から下に短くなっていて、マウスをのせると同じ長さになって面白い。

・メインビジュアルの上では白文字でロゴとバーは無し。

・コンセプトの上からは黒文字に白背景のバーとロゴ。

【メインビジュアル】

・白背景に黒文字のロゴがアニメーションしてから、ロゴの背景に画像が現れて躍動感がある。

・4枚の画像がスライドショーによって時間でフワッと入れ替わる。

・画像のアニメーションで古い建物が新しく生まれ変わる様子を表現している。

【コンセプト】

・スクロールするとコンセプトが下から出てくる。

・古い建物の正方形の写真がはじめは規則正しく並んでいるのが、下にスクロールするとバラバラになるアニメーション。

・背景写真は古い建物というイメージのため、色がカラーではなく白・グレー・黄土色になっている。

・キャッチコピー、説明文、リンクボタンのみが配置されていて、シンプルでわかりやすい。

・リンクボタンはマウスをのせると背景が黒に、文字が白に変わる。

【注目のコンテンツ】

・コンテンツが横に３つずつ２行並べられている。

・それぞれがリンクで別ページに飛べるようになっている。

・マウスをのせると写真が浮き上がる。

【お知らせ】

・注目のコンテンツ同様、マウスをのせると写真が浮き上がる。

・注目のコンテンツは背景があったが、お知らせは背景なしで差別化。

・１行に４コンテンツが並んでおり、今後増えても大丈夫な設計になっている。

【サイトマップ】

・幅を４分割してそれぞれの項目が縦に並べられている。

・文字とアイコンのみでシンプル。

【ヘッダー】

・黒のバーにロゴとコピーライトのみでシンプル。

⒍色

背景色：#ffffff（white）
文字：#222222（black） 

ボーダー: #707070 （gray）
コンテンツ背景: #F7F7F7 （gray）

ベースカラー：white
メインカラー：black
アクセントカラー：なし

⒎フォント

基本：Noto Sans JP

一部英文・数字：Open Sans

⒏レスポンシブ

・メインビジュアルの写真が縦長になる。

・コンテンツ、お知らせ部分は横並びから縦並びになる。

⒐学び

・デザインはシンプルでも、アニメーションで印象づけることができる。

・古い建物が再生される様子を写真とアニメーションで上手く表現していると感じた。

・SNSアイコンも白黒になっていて、サイトデザインと同一化すると見栄えがいい。

・文字の色は黒でも真っ黒ではなく少し柔らかい黒にすることで、読みやすくなる。

⒑おわりに

今回は他にサイトレビューをしている方を参考に、１回目より項目を増やしてレビューしてみました。

おかげで前回より時間はかかりましたが、じっくり見て様々なことを学べたと思っています。

毎日サイトレビューするつもりでしたが、さっそくこのレビューに２日かかってしまったので（笑）、１日１サイトレビューできたらいいな目標でゆるくやっていこうと思います。

よろしければ「こうした方がいいよ！」などのアドバイスがありましたら、コメントいただけると幸いです。

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

#Webデザイン
#サイトレビュー
#Webデザイナー未経験
#Webデザイナーになりたい