KARTE

PC所感

• エメラルドグリーンを基調とした清潔感のあるデザイン。
• 全体的な印象としてはビジネス向けのサービスという感じだけど、固くなりすぎない・シンプルになりすぎない感じ
• ただ、1stViewを見た所、何のサービスかいまいち分からない、LPの広告コピーも込みで考えないとダメ？
  →そういう所がダメなのかな？とりあえず商品の概要は分からせなくても気にならせるだけでいいのかも。
• webを使った何らかのサービスである事がわかる、顧客分析の何らかのサービスであることは分かる。

• コンテンツ幅

  1205px

  本文サイズ

  16px、weightは500

  h1サイズ

  54px

  h1のサブタイトル

  18px

  フォント

  言わずもがなNoto sans、ただ英字は「GOTHAM」っぽい(有料フォント)

• ボタン部分、コンバージョンにつながるボタンに関してはキーカラーのエメラルドグリーンで対応、一色ベタヌキだけど、同色の影をうっすら入れてある。上品に少し目立つ、シンプルになりすぎない印象。
• イケてると思わせたいが故にデザインにかなり振っている印象
• 想定顧客はおそらく女性的な物が大きめ、事例にアパレル、コスメ、ECサイトがあるため、BtoBのビジネス感と柔らかさ・華やかさを両立させたデザインにしてある。
• グラデーションと曲線をかなり大胆に使って、コンテンツの区切りを作ってる。
• モチーフとしては顧客データを中心に、色んなビジネスに広がっていけるよという円のイメージなんだろうな、それを拡大解釈して各部のデザインに落とし込んでるっぽい。

各セクションについて

MV

• シュッとさせつつ柔らかいイメージ、エメラルドグリーンを使ってるけど画像のトリミングなど柔らかさを見せるデザイン
• キーカラーのエメラルドグリーンを使ってバチッとさせずに、白基調で画像をつかって見せるデザイン
• 使ってる写真は小さいけど背景の緑グラデの模様で幅を広く使っている→小さく縮こまった感じに見せないデザイン
  →背景に柄を使えば縮こまった印象にならない
• 上端に近づくにつれて白くグラデで消えていってるのは、おそらくヘッダーに干渉しないようにしてるかなと。
• 緑だけじゃシュッとしすぎるので、赤青黄緑の円を不揃いサイズで散らすことでちょっとだけ華やかにしている
• 写真のトリミング位置でスマホ、顔の部分だけを外に少し出すことで、注意の引き方を若干コントロールしている、人とスマホ(情報端末)というイメージ
• 逆にテキストの方は黒字(#00100e)のみでタイポグラフィのみで情報を整理して見せてる。
  右側の画像・デザインの柔らかさに対して、信頼感、ビジネス向け、という印象を見せる。
• 写真背景の緑のラインや緑影自体にはそこまで深い意味は無さそう、上記の画面を広く見せ、シンプルに見せ過ぎない意図だけじゃないかな。
  →必要性があったら、それを解決するデザインのポケットを持っておきたいね、太い曲線を配置する

MV下の操作画面スクショスライド

• 上記MV上にて、訴求が足りてないなと感じた具体的なサービス内容をここで見せている、MVをイメージ訴求に使った分の見せ方？
  →ぼくだったら1stViewの画像の所にサービスの画面を置いちゃおうとか考えちゃう、イメージ訴求より具体性を考えちゃう、ここは直した方が良いかも。
• きっちり伝えたいから画面を大きくつかってしっかり見せる、クリックして拡大なんて逃げはしない。幅も前後の画面を含めて、画面幅いっぱい使ってスライドにしてる、アイコンも画面端に置いちゃう、これも画面を広くつかってるように見える。
• 見出し、本文の所は小さめ
• 画像スライドには流行りの薄めの影で背景領域と画像の教会を区切っている。モダンかつ上品でスッキリしてみえるんだけど、ディスプレイの質が悪い人たちにはあんまりウケないから良くないんじゃないかなぁ…？

カスタマーデータを軸にCX向上に寄与します

• h1見出しはキーカラーを濃くしたもの、やっぱりこういうカラバリだよね。
• h1見出しは小さめサブタイトル(weight500)withアイコンとデカ見出し文字(weight700)、これも流行りだよね。
• 本文weightは500、Mediumだね。
• ここも画面をいっぱいに使って画像を装飾、KARTEのサービスを包括的にイメージと共に示す役割
• 背景のグラデーションは白から若干黄色を入れた緑、下に行くにつれ青みが入った緑という変遷
• バナーのボタンは特筆すべきぽいんとは無し、右に画像、左にテキスト、アイコンは「>」
  →最近はアイコンを書かないか「>」とするパターンが多いよなぁ、これも流行りか…
• 画像の部分は、顧客のデータから発展的に何が出来るのかをイメージ図で描いたもの。
  単純に顧客データを中心に、６つの事ができますよっていう図から少し発展させて、くるっとした線でフワッと囲む的な…？
  あとは線自体にもグラデを使って、顧客データから外側に行ってますよ、という意味合いを付けてる。
  →最低限意味のない装飾ではなく、意味のある装飾をしたいっすね。グラデは薄い→濃いで目線の移動を若干誘導できる、俺覚えた。
• この画像にたいしても薄い影、まあ流行りよね。

ご提供プロダクト

• ここも見出し部分の要素は一緒
• 画像を横に並べてるけどシンプルに並列に並べないで斜めに並べちゃうのがおしゃれ、あとは全体として曲線的な配置のデザインにも合ってる
• 各々の画像は色付きグラデ影の画像で見せてる、要素自体も若干グラデというか、縁白インナーシャドウで内側色付きにしてて要素の種類を色々あるよと見せつつあんまり色感をバキッと出さない感じ
• リンク部分はすげーシンプル、動きもなくtext-decorationで下線をhoverで出し消しする感じ
• 上下にテーマである要素の円、これも若干のつまらなさの回避

KARTEの主な機能

• 急に濃い緑のベタこれもキーカラーをそのまま濃くしたもの
• 各々のキーカラーを活かしたイラストと機能の名前のシンプルな見せ方、煩雑な説明はここではやらない。
• リンクのボタンになってる、アイコンのボタンは右下に「＞」を置くのみ、これでええやろの精神
• これもリンクボタンにはうっすらシャドウ

コンバージョンエリア

• ここでコンバージョンエリア、ここらまで来て「気にはなるけど何が何やら」の人向けに見せてる感じなのかな？
• 背景はキーカラーを元にした若干のグラデーション、そこまでしっかりグラデしてることは見せない、つまらなさ回避
• 構成要素はシンプルに、白文字
• 画像の所は各画像の区分も見えなくてええやろの精神なのかな、影入れるとちょっと印象が損なわれてみえちゃうからかな？

導入インタビュー

• ここも特に見出しは変えず
• 横並びのボタンでタブ変え表示
• 見出しの頭に引用符を薄くドカッと置いちゃうアイデア、リンク先の記事からそのまま引用して置いてるよって意味だから、本来の意味も損なわれてないって考え方でいいのかな
• 導入の背景、誰のインタビューかっていうのを左線一本でまとめちゃう見せ方
• ここのボタンはキーカラーを使わず黒で行っちゃう、
• 画像自体は角丸にしてある、サイト全体の印象として柔らかめに見せたいというのあるだろうけど、流行りでもある
• タブボタンによる内容の出し分けについて、コンテンツ自体の高さは変わってなさそうなので、その辺りはちょっとどうなんだろうか、見え方としてこれが正解なんだろうか…。

オンボーディング・サポート

• ここで背景が薄いグレーに、意味はないけどコンテンツの領域を区切りたい意図かなと
• ここの画像もフワッとしたMVのトリミングの形の様な柔らかさ、背景にグレーと緑で二色しいて、つまらなさを回避ってイメージかな？薄グリーン一色だけだとつまらなかったんだろうな…。
• セミナー・イベント、お役立ち資料の所は一般的な見せ方、ただ横に二列並べてて領域の使い方は広め
• ボタンは白角丸ボタンに薄い影
• 中の要素はalign-item: center;的に縦位置中央寄せ
• 画像にはうっすらborder、hoverすると画像部分以外の色が変わる感じ