blog

初学者のひとりごとメモ

手描きでプロトタイピングを作成している人の画像

カテゴリ: 勉強会

タグ:

デザイン分析練習会2~松栄建設~

投稿日:2024年3月1日

デザイン分析練習会第2回。
私がコロナで臥せっていたため、少し間が空いてしまった。

今回のお題

松栄建設TOP

自分の分析

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

  • 優しさ
  • 温かさ
  • ナチュラル
  • ガツガツしていない、余裕がありそう→無理な売り込みなどがなさそうで、これなら相談してみてもいいかも、と思わせる

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

  • 角ばったゴシック調のきっちりかっちりした路線は守りつつ、「の」の傾き具合や「ま」の懐の広さで、垢抜け過ぎない絶妙な愛嬌、人懐っこそうな印象を与えるロゴ
  • 「営業はしません」=「目先の利益ばかり追求しません」というイメージを持たせる。きな臭い噂が多く、かつ顧客にとって少なくない額のお金が動く業種なので、まずこうした悪い印象を払拭してもらえると相談しやすい
  • 写真もイラストも、工事現場、建てたお家の中はもちろん、この地域の名所や人々の生活まで題材にしている。地域密着、この地域が好きで地域をよく知る人たちの集まりであることが窺える
  • キーワードに「たね」「成長」とあるので、やはり「ナチュラル」がひとつ方向性としてありそう。「自然を大事にする」という意味合いではなく、自分たちや街の成長を自然物に見立てるという意味合い

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

  • body全体を囲むアクセントカラーの枠。まとまり感が出る
  • 視線誘導は緩やかに左右に振り、適度に動的な印象を与える。見飽きにくい
  • FVやSYOEI MAGAZINEのセクションなど、雲のような形状に切り抜いた写真が多い←はみ出さずスクエア型の領域に日付を収めることが出来るので収まりがいい
  • タイル状の記事が並ぶセクションは余白狭め、他は広め

STEP4:色味を分析する

  • ベースカラー:#ffffff
  • メインカラー:#eff2e5
  • アクセントカラー:#aebc33、#e1ee79、#ffd85f
  • とにかく「ナチュラル」な風合い(「環境に配慮して」等の文言は無いが)
  • 調和や平穏さ

STEP5:フォントを分析する

  • Noto Sansがメインなので、字がボリューミーに見える。letter-spacingも使っていないところが多い
  • 英字部分は一部Quicksand
  • リードと各セクションタイトルは縦書きで統一されているので区別がしやすい。テキスト本文よりも頭に意味が入ってくるまでの時間が短いので、「テキストを読んでいる(読まされている)」という感覚になりにくい。看板のようなポジション?
  • SYOEI MAGAZINEセクションはText Me One、SYOEI部分のみ白抜き(text-shadow)。あーあるよねこういう

STEP6:あしらい

  • ところどころにあしらわれたオレンジが、リードにもある「しあわせのたね」のイメージ?
  • 各セクション背景にメインカラーの角丸四角
  • イントロダクション部分の背景には薄いドットが方眼状に並んでおり、建築関係らしさが見える。固すぎないながらも整然とした印象

STEP7:アニメーション

  • トップの写真群はズームアップクロスフェード
  • メニューボタンは少しずれて並んだ二本のバーが、hoverで上下揃う形。「カチッ」とはまるような感触が心地よい
  • 一部のリンクはhoverでオレンジのアンダーライン
  • 取り組みセクションはインジケーター付きのスライドショー。左端が見切れているので、「この次は何だろう」とついつい見てしまう

一言で言うと「   」っぽい

  • 「お昼の情報番組」。民放よりもe-テレのような、「(センセーショナルで刺激的な情報ではなく)落ち着いていて上質さを感じる情報番組」

課題・気付き

気付くと情緒面の分析ばかりになってしまう。デザインにおける機能性というものがまだまだわかっていない。

最新の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