サイトデザインレビュー

PCで見た所感

• MVに白いたまごっちを使用、ターゲット層も踏まえた画像の選定
• 全体的にたまごっちパッケージデザインの手書き感はいれつつもモノトーンでまとめて「ガチのやつ」感を演出
• コンテンツの区分けには白とグレーでたまごっち画面の縁だったたまごの殻が割れた様な形をつかっている。最下部は、これもたまごっちの丸みを意識した処理としてる
  →ちなみに区切りの付け方はシンプルに:beforeでsvg画像をmaskで使って置いている。
• スマホファーストで作りつつ？タイトルのブロックとコンテンツブロックを横に並べ、タイトルはコンテンツ内画面追従のつくり。スマホファーストで考えた時のコンテンツ幅の狭さ対策として覚えておきたい。
• 色味は大人向けっていうのもあり少なめ、白・黒・オレンジ
• コンテンツ内の区切りはborder:dotted
• リンクアイコンは本文っぽい細さの「＞」、こういうのでもいいんだよな。
• フォントはNoto sans、やっぱこれだよね
• たまごっちを意識したドットっぽいフォントは「Tiny5」、これもGoogle fonts、FigmaだとかCanvaだとかでデザインしているんだろうか
• 全体的なフォントサイズ、

  リード文

  19px

  コンテンツ説明

  15px

• サイト内で使ってる黒は漢の「#000」、これやっても良い時代なんだよな…！
• ちょっとしたあしらいとして「DAI-TAMAGOTCHI-TEN」を左右に縦にして配置、こういうあしらいを覚えておきたい

スマホで見た所感

• やっぱりスマホで見た時の方が成立している見た目
• 文章関係のレイアウトはremとかemとかで設定してるんだな、そうするべきだよな、うん
• 全体的なフォントサイズ、

  リード文

  19px

  コンテンツ説明

  16.6644px

• ちょっとしたあしらいとして「DAI-TAMAGOTCHI-TEN」を左右に縦にして配置、こういうあしらいを覚えておきたい

所感

PCで見た時にコンテンツを三列に並べつつそれが連動してして動いて見える仕組み、人間一列しか見れないよねっていう所で案外普通に読めるし、情報を一覧で見せれるなど面白いなと思ったのでメモ。

所感

基本スマホ偏重にデザインしつつ、PCでの見せ方を考えるのにあたってピックアップ。
左側にCVを置いてPC画面に適合した見せ方としてる。
1000pxで左のコンバージョンエリアを非表示にしてページ下部にボタン表示
840pxで画面両脇の青エリアが非表示になる
メニューの処理も左からニュッと出てくるスタイルだけどこのデザインもまた可愛い、大胆な角丸。
これはスマホの時は全画面メニューになる。

• 派手な青色がかわいい、「#1823ff」
  青みに全振り、くすみとかは一切させてない青。
• コンテンツ部分のベースになってるのは本当に若干オレンジとくすみを入れた白。
• 同系統のくすみっぷりで、コンテンツの区分けを柔らかく表示、ギリ白が見えるから、大きなアイコンとして白い色のものがフワッと使える

スマホの所感

• 本文フォントは14pxくらい？ちょっと読みにくいかも
• フォントの部位については、ページ下部の「さっそくADAYをはじめよう」の所は540px以下でvwでフォントサイズが変化する作り

PC所感

総じて...

• 青がメインカラー、アクセントに黄色、王道の色の組み合わせ
• MV下のコンテンツ部分も斜線で薄めの背景色を区切って若干デザインをシンプルすぎないように見せてる
• 角丸を随所に使う。BtoBでビジネス用のサービスだけれどカチっとしすぎな印象にしてる？
• リンクボタンは横を丸めたアクセントの強い青色でベタ抜き、hoverするとちょっと色が薄くなってちょっとだけ上にフワッと上がる。影が無い状態からも影も付く、フワッと浮いてるイメージなんだろうな。
• 各部の見出しについては英語は無いと寂しいからっていう飾りなんだろうな、黄色いアクセントをつけてシンプル過ぎないようにしてる。
• 見出しのフォントサイズは40px、上に英語で黄色いアクセントカラーが着いた英語を入れて、つまらなくなりすぎないようにしてる。
• PCの場合コンテンツ幅は1050px、左右パディングは40px
• 使用しているフォントは安定の「Noto sans」やっぱこれだね

ヘッダー部分

文字サイズは小さめ(14px)

MV部分

ゴシック体でコピーと提供サービスの画像、斜線の色分けでピッとしたデザイン、信頼感とビジネス感を訴求BtoBのサービス提供会社って感じ

サービス解説部分(要するにお知らせ部分)を総じて...

「業務に応じた最適なソリューションを提供」部分

ここもペタッとしたイラスト・画像でサービスをわかりやすく解説

その下の具体的に提供されるサービス部分については、上の全体的な画像と色で対応してわかりやすく解説(ただ、ちょっと関連性が分かり辛いかも？なにか相関性があるよって記号が一つあるとわかりが良いかも。)レンポジ画像に手間を加えて安っぽく見せない工夫は見習いたい。

「バクラクAIエージェント」部分

青い色と同系色のグラデーションでビジネス的な硬さと信頼性、左側に使用しているそれっぽい画像でIT感を出している、でもこれ、それっぽいだけでどういう意味なんやろ、遷移先見てみてもよくわからんかった。

「選ばれる理由」部分

ここはちょっと扱い軽めなのかしらね？画像とかも使ってないし。その後の「お客様の声」部分には背景色がしいてあるからちょっと軽めっぽい扱いなのかしら。テキストのみで明快に解説と実績をだしていく形

「お客様の声」部分

ここはまだ提供しているサービスについての解説コンテンツの一つだから、横幅を決めた中でメインカラーよりちょっと赤みが入った薄い青色。ちょっと色味を足してデザインに変化をつけてもいいわよね。
同系色で彩度だけ変えちゃったりしがちだから学んでおきたい

中身のコンテンツは全体的に配置をピシッと合わせた、レイアウト。これもまた硬くしっかりしたイメージ。あんまりやりすぎるとうるさくなっちゃうから使ったり使わなかったりしたいよね。

「お役立ち資料、セミナー」部分

ページ下部で改めてコンテンツを見せたいっていう所で大きくバナー的に画像とテキストで見た目を組んで配置。右下に「詳しく見る」で配置。
資料のキャプチャを小さく横に並べつつ解説をドンと見せる感じとか、画像バンっと置いて空いてる所にテキスト置くとか、こういう画像とテキストを上手に組み合わせる工夫はやりたいね。
やっぱり文字に影つけるのはイマイチだよ。今どき

CVエリア

ここは横幅いっぱいにコンバージョンしたい項目を明快にドンドンと置いてる。ここもつまらなくなりすぎないように「資料ダウンロード」の所でレンポジ画像でそれっぽい画像を入れている。

フッター

改めてサイトの全体が分かるようにナビゲーションを置くのと、ロゴ、住所、サービス一覧などを列挙、まあこうだよね、うん。

タブレット所感

総じて...

• ブレークポイントは1080px、
• 特に大きな工夫はなく、最低限の見た目を確保している印象、スマホのデザインでありつつタブレットの見た目も最低限保証している印象。
• フォントサイズはスマホから変化無し

SP所感

総じて...

• おそらくサイト自体はPCで見ることを前提にしてるデザインの可能性がある。スマホ用になにか力を入れているという感じはない。
• 特にPCで書いた様な特筆すべき事はないかもね。

MV部分

角丸で画面端から横にマージンがあるデザイン、これはちょと珍しいかも。なんでこうしてるのかが見えてこない、横幅いっぱいにしたらよかったのに。