サイト分析 京都・滋賀のシステム開発｜Auto-IDフロンティア株式会社様
サイトの第一印象・キーワード
信頼・スタイリッシュ・誠実・最先端・IT
L游ゴシック体から カッチリと安定した印象を与える一方で柔らかい・ポップな雰囲気も感じる（お堅いサイトではないことPRしている？）
L青緑色から「親しみ・安心感」×「信頼・堅実」の印象を感じる
（暖色だとアクティブ・情熱的な印象を感じるが、寒色なので冷静・落ち着きのつよい会社なのかな、、と思う）
サイトで気づいた点（デザイン面）
アイソメトリック×写真でどういう事業をやっているか直感的にわかる。アイソメトリックがイラストよりもかっこいい・スタイリッシュな印象を与えるのでサイトの雰囲気に合っている
青緑の反対色の朱色をCVやアクセントとして使用している。
流体シェイプを取り入れることで、柔らかい雰囲気を出しつつ、サイト全体で統一感を感じさせ、よりサービスや商品を魅力的に見せている（さりげなく魅力的な演出が可能）（イラストの柔らかい印象との相性抜群）
サイト内にドットのあしらいを入れている（サイト内に動きを感じさせるために使用、線に比べて軽やかでさりげなく、また明るいイメージが得られる＝粒度の小さいドットは洗練・おしゃれな印象をUP）（
ドットは、ラインのように視線を動かす性質もなく、矩形や多角形のような主張する角もないため、誘目性が高い＝目立たせたいポイントや、アクセントにしたい場所に使うと効果的（液体シェイプとあわせることでより魅力的なあしらいに、ドットをずらして配置することで視線が下に向く＝ページのスクロールを促している？）
ジャンプ率が高いので、重要な情報が一目で入ってくる（H2が80px、H3が28px、本文が16px)、余白を十分とることで圧迫感を感じない（余裕を感じる）
全体的に彩度・明度を落としているので、カラフルな色でも派手・元気という印象は感じない
メニュー数が多いのでグロナビは表示させず、左右に固定表示しているのはよい（上下だとメニューを追従させる＝コンテンツが隠れてしまう）
コンテンツの区切り方＝余白を大きくする（160px~）だが、余白をあきすぎると寂しい印象をあたえがち。なので写真をずらして配置する、あしらいを入れるなどの工夫が必要、背景で仕切る、同じコンテンツ内でクリル場合はタイトルのあしらいを工夫するなどが必要
コンテンツを強調したい＝背景を入れる、液体しゃいぷなどのあしらいをさりげなく入れる
液体シェイプの形は同じものを使用すると統一感UP、入れ方は工夫が必要（大目に隠す、傾ける、小さくするなど）
サイトで気づいた点（アニメーション面）
スクロールを促すために、スクロールバーが伸び縮むアニメーションを入れている
画像の切替がわかるようにスライダーの横に1-2-3を入れている（画像が切り替わることが一目でわかる＝親切＝細やかな配慮ができる会社なのかなという印象を与える）
マウスカーソルに合わせて円がうごく＝今どこにいるかが一目でわかる＝Webサイトに不慣れな人でもどこにいるか見失わない、親切（技術力の高い会社であることを簡単に示している）また、押せるボタンにカーソルを充てた際、円が大きくなるので、直感的かつおしゃれに押せる感が伝わる
サイトで気になった点
メニュー内でクリックできる箇所とそうでない箇所の違いがわかりづらい。クリックできる箇所は→を入れるなどし、視覚的にわかるようにしたほうが良いのでは？
この記事が気に入ったらサポートをしてみませんか？