【不動産専門】ホームページ制作(HP作成)サービスならPENGUIN2
リンク
総じての所感
- テーマカラーは黄色と黒、ロゴからの引用だけれども目立つ色
- 濃いベタ塗りと太いボーダーが目立つデザイン
- 基本はフォントサイズの強弱で押してくる印象のデザイン
- swell使ってるみたい、なんかクラウドワークスでもよく名前を見るんだけど、何がメリットなんざんしょ?
→よく見るワードプレスのテーマだね、デモサイト見たら分かった
- スクロールでコンテンツがスッスッと現れるアニメーションは無し、そっちの方がいいと思う。
- フォントは"Helvetica Neue"と"Hiragino Sans"、何かwebフォント読んでるのかなっておもったけどそうでもないみたい。
- ボタンの影もベタで付けてある
- 画面幅を1200px以下にすると崩壊する、これはイケてない。
各セクションについて
MV部分
- 全体として
- ちょっとコピー部分、タイトル部分など、フォントの強弱が甘く、視認性弱いかもなぁと思う。ただスマホで見たら文字量多いけどいい感じかも?
全体的にこの辺りはそこまで参考にできないかも?
- 資料ダウンロードボタン
- 黄色ベタで下手したら一番目立つ、アイコン2つで一つはロゴのペンギン、かわいい。
- 矢印アイコンは黒のベタヌキ
- ボタン上の「資料ダウンロードは完全無料!~~」のデザインはもうちょっと出来た気がしないでもない。ただ更新性を考えたらこっちの方がいいのかも...?
- 400者突破
- ここはデザインとしてかわいい。
- 右側の回転している円
- これはざっくりと制作事例を見せるのに良いアイデア、面白い。
- シースリーレーブの時に考えた事例の見せ方、「これが作れます、アレが作れます」という見せ方はしても良いんじゃないかと思えた。ただ、デザインでどう見せるかは考えた方がいい。
- 背景
- 薄黄色で丸と四角、無いと確かにちょっと寂しいというか、右側の円とテキストのアキが気になる。あったほうが良いので間違いない。
"型破り"な~~~
- 画面右の画像
- PCのウィンドウ(imacっぽい?)に各事例が映し出されている、とにかくたくさん事例があるから見せていこうという方針っぽい。
- MVに若干はみ出す形でPCの画面が出てきているのも次コンテンツへの誘導に軽くなっているのでいいかなぁとおもう。
- メインコピー部分
- シンプルに強弱を付けた文字組み、一番立たせたいテキスト、次に立たせたいテキストとシンプル
- レイアウトの組み方として、PC画像自体がMVにはみ出る形になってるのに、コピーとPC画像の配置が下端で合ってて、MVのボタン部分とのマージンが取れているので、そこまで見にくさを感じない、これも面白い。コンテンツは詰めてあるのに読みにくくはならない、
- 目の流れを考えても案外自然に通りそう、画像を優先して上に出す、レイアウト上のアキを作らないやり方で面白い。
- 「"型破り"」を強調したすぎるんだな、こういうテキスト文字組みは参考にしていきたい。
- テキスト部分はちょっと長くて冗長、太字で多少はリズムを付けてるけど、言いたいことが多すぎるのでは。
お金をかけず無限の成長で~~~
- メインコピー部分
- 上まで左寄せでここからは中央寄せ、ただ、「お金をかけず~」の部分が横に大きいので、そこまで目の動きの順番は気にしなくても良さそう。
- フォントの強弱でリズムを付けてるコンテンツ
- ポイントの横並び部分
- メインカラーの黄色を利用したイラスト(istockにありそう)イラスト部分の背景は薄い黄色、それよりも立たせたいテキスト部分は濃い黄色
- 変化を付けたかったけど濃い黄色はイラストの背景には使えないからって消極的理由も考えられるけど…
- イラストのスケール感は合わせてないんだ、とは思った。
- ボタン部分
- ここも黒ベタ影のボタン、資料ダウンロードとかよりは誘導弱めな色味、ちょっと消極的。こういう優劣は意識して付けていきたい
不動産ホームページ制作実績
- 見出し部分
- ここは一般的な英語サブ見出し+日本語見出しの構成、他コンテンツの見出しとちょっと違う見せ方なので、おそらくどのテキストも弱く出来ない+だけど一行だと物足りない、という思考の結果かと。
- アイコンとしてペンギンのキャラをつかってる、こういう使えるキャラクターがいると強いよなぁ…。
- アイコンのペンギンは、デザインとしての物足りなさを回避する為っていうのもありそう、テキストの部分が弱いから。それ以外の意味は無さそうなアイコン
- コンテンツ部分
- ここだけ急にフワッとしたデザイン、なんでだろう。
- 事例の量も見せたいのであればもっと画面幅いっぱいに出したほうがいいのにね。
- 背景
- ちょっとわかりにくかったけど、ここから背景が薄黄色に切り替わってる、ないよりはという感じ?
実は、ココに掲載できていない~~~
- 全体として
- おそらく資料ダウンロードにつなげる所なので、上のコンテンツより強くしてある、コンバージョンにつなげるためにコンテンツ自体でテンションの強弱を付けている…?
- もうちょっと背景の黄色を強くしたりしてもよかったんじゃないかなぁ?
- 見出し部分
- 強調したい「最新の制作実績」部分は下線、点などを使って強調してある。
- びっくりマーク、ペンギンのイラストなど使って目を引くようにしてある。
- 上の制作実績の列挙はここのコンバージョンにつなげる為のオカズだった説
- 各リスト
- サイトのデザインテイストに合わせた黒実線の黄色いチェックマーク、目立つ。
- やっぱりこういうチェックリスト系は目立つべきだよねぇ。
- 下線はborder-bottom: 4px dotted;で入れてある、こっちのほうが楽よね
- リストの下の「などございましたら~~」のところから目線が右からその下のボタンに行くわけだから、チェックリストも含めて中央寄せのほうが良いんじゃないかな…?
- ボタン2つ
- アイコン付きの強めのボタン、ここがコンバージョンです!!
バナー部分