blog

初学者のひとりごとメモ

フラスコやビーカーなどに液体が入っている写真

カテゴリ: 学習メモ

タグ:

デザイン分析練習会3~中外製薬~

投稿日:2024年3月10日

ラボの先生と見学の方も加わり、これまでよりも交わされる情報が多かった。

今回のお題

中外製薬TOP

これまでとはまた違った雰囲気のサイトを分析してみようという趣向。
ターゲットが「一般・患者」「医療関係者」「株主」の3種類いる(メインは株主)。

自分の分析

STEP1:デザインをパッと見たときの印象を言語化する

  • インテリジェンス
  • かっちり←角丸が少ない
  • 清潔感
  • 誠実さ
  • (胡散臭くない)爽やかさ
  • 規則正しい←がちがちのグリッドレイアウト
  • 落ち着いている←斜め線がない

STEP2:ロゴ・文章・写真からブランド理解を深める

  • 「自分達の利益よりも患者さんのことを考えますよ、怪しい会社ではありませんよ」という姿勢を見せる
  • 【ロゴ】コピーは細めのゴシックで強すぎず、ロゴタイトルは太いゴシックで力強く
  • 【ロゴ】タイトル横に入っている縦線は何だろう……?と思っていたら、別のページではこの縦線の右側にコピーが入っていたので、単に機能上必要で入っている模様(先生のご指摘より)
  • ブランドサイトは別途設けられている。コーポレートサイトと別になっているのは何故?
    →先生「コーポレートサイトは株主向けに「(事実や根拠に基づいた)信用」を、ブランドサイトは一般向けに「(根拠などではなく人柄やイメージから来る)信頼」を発信する役割を担う。それぞれに目的が違う

STEP3:レイアウト・余白を分析する

  • 余白は全体的に「広すぎない」くらいの印象、ギチギチにならない程度かな。
    コンテンツ幅に対する左右余白は基本広めに取られているが、一部コンテンツ(カテゴリ一覧、About)は余白なしのタイリング(他の製薬会社もこのパターン多かった)

STEP4:色味を分析する

  • ベースカラー:#ffffff
  • メインカラー:#eaf5fc
  • アクセントカラー:#006bcf
  • 青基調で「清潔感」「インテリジェンス」を感じさせる
  • 全部が全部じゃないけど、セクションごとに背景色をベースとメインで入れ替えている

STEP5:フォントを分析する

  • Hiragino Kaku Gothic Pro
    同じ角ゴでもZen角などと比べると、角がよく目立ち、曲線部の反りが強く、きっちりした印象を抱かせる。「おっ、やっぱ専門サイトだな」と思わせるというか、ちょっと「姿勢を正して読まないと」と思わせるというか
    でも、一般の人をシャットアウトするような固さがあるわけではない。ただ、こういうサイトでふわふわ親しみやすすぎ・優しすぎてもちょっと心配になるから、「適度に締めている」という感じか

STEP6:あしらい

  • あしらいがそんなに多くない。各セクションのタイトル下に色薄めの英語でセクションタイトルを繰り返しているくらい

STEP7:アニメーション

  • TOPへの矢印はアニメーションで下から出る(ちょっと端っこすぎる&小さすぎる気もする)

一言で言うと「   」っぽい

「首相官邸などの政府系サイト」っぽい

課題・気付き

  • 「~っぽい」とそれぞれの根拠(枝葉)がまだ上手く繋がっておらずバラバラになっているので、そこをまとめるといい

先生からのご指摘

  • 「固めの会社に勤めている営業マン」っぽいページ。くだけた感じがない。でも先進性もほしい
  • 分析するときに写真に印象が引っ張られてしまうので、一度写真を消した状態も分析してみるといい
  • 汎用性の高い作りになっている=「特徴がない」という特徴を持たせ、あまり固有のイメージを抱かせないようにしている(写真も明らかに素材で統一感がない)。ロゴもそんなに特徴づけないようにしているので、突飛なことしない感じの文化かも
  • このサイトのようにグリッドに従えば従うほど、隙なく固く見える
  • opacityを設定している箇所があっても、「透明=澄んだ印象」とも限らない。下の画像との相性もあるし。
    どちらかといえば「圧迫感を減らす」というのが情緒的な役割だが、このサイトに限っては、レスポンシブしたときに写真同士の境界線がなくなるので、「この帯タイトルが上と下どっちの写真を説明したものかを示す機能性」を優先しているのかも?
  • このサイトは「製品の宣伝」ではなく「企業のことを知りたい人」向けの「コーポレートサイト」=株主などが見ることを想定されている。ブランドサイトの「イメージ」に対して、「事実」を伝えるページ。あとはリクルーティング。とにかく固めにする。「信用(根拠を見て信じる)」を担うサイト
  • ではブランドサイトとは?→「ブランドイメージ」=「自分達がどこに向かおうとしているのか」「自分達の考え・ビジョン・マニフェスト」を伝える。抽象的なイメージ。かっちりしすぎると「つまらない会社だなぁ」になるので、コーポレートサイトとは分けて用意している。「信頼(根拠などはなくても人柄を信じる)」を担うサイト
  • カード型で情報が並んでいる(スマホ対応を意識)・写真がでかい(昔は表示の遅さがあってあまりできなかった)などの「今っぽさ」がある
  • 「デザイン」=「付加するもの」という思い込みがまだある。「何も持たせない・意味合いをマイナスしていく」というパターンもある。だからこのサイトも、「各コンテンツの中に入れる情報を邪魔しない」ために「特徴がない」という特徴を持たせている

最新のblog記事

  1. 学習メモ

    学習メモ

    XAMPPで複数サイトを管理したい

    2024年6月3日
  2. 制作日誌

    アクセシビリティ向上日誌3【ワイヤー編】

    2024年5月6日
  3. 学習メモ

    学習メモ

    CSS Nite リアルタイムでコードを共創できるオンラインエディターCodePenを活用しよう

    2024年4月26日
  1. 1
  2. 2
  3. 9
  4. 10