サイト分析 #01

4月は、デザイン研究所さん主催の#クリキャラに参加しています！

デザイン研究所 | 読んでデザインを学ぶ参考ブログ
https://desaken.com/
CREATORS CARAVAN | クリキャラ 1ヶ月で身につける新しい世界の見つけ方。オンラインセミナー＋1ヶ月限定コミュニティ
http://creatorscaravan.com/

セミナー動画を視聴しましたが、まさに今私の課題となっている、デザインを見る目を養うにはどうすれば良いかが分かりました！

言語化強化期間なので、少し時間をかけてサイトのデザイン分析をしていきます。

サイト分析は以下の通りに行います。

① What, How, Where
② Why
③ Who, When

初めてなのでとりあえずこのテンプレで！慣れてきたら変えるかな…？

今回参考にしたギャラリー、サイトはこちら。

【ギャラリー】
Web Design Clip | Webデザインギャラリー・クリップ集
https://www.webdesignclip.com/
【参考サイト】
株式会社 DEPOT（デポ）| 山梨を拠点に活動する｢社会を豊かにする仕事」専門のブランディング会社
http://www.depot-yamanashi.jp/

今回のサイトは横スライド型のコーポレートサイトです。面白いデザインでした！ですが、横スライドだとページ全体のスクショができないんですね😂気になる方は、上リンクより飛んでみてください。

①
What: 配色
How: 白、黒、濃い緑、薄い緑
Where: サイト全体
②
Why: コーポレートカラーが濃い緑色? それに合う色で、洗練された雰囲気を出すため、黒と濃い緑は明度を合わせて、色を増やさないようにしている。薄い緑色はアクセントで、こちらも白と明度を近くすることで、シンプルで洗練されたイメージに。
③
配色をカラフルにしないようにしているのは、ブランディング会社のため、ユーザー(Who)がサイトを訪問した際(When)に洗練されている印象を与えるため。
――――――――――――――――――――――――――――――――――
①
What: 背景
How: 白、黒、幾何学模様、枠が直線や斜線で封筒の折り目のよう
Where: サイト全体
②
Why: 幾何学模様や直線が、シャープでプロフェッショナルな印象を与える。会社の強みである「クリエイティブな力」を表現するため、常に形を変える幾何学模様をサイト全体に配置している。
③
直線や幾何学模様をあしらっているのは、会社の強みである「クリエイティブな力」を、ユーザー(Who)に印象つけるため。常に形が変化しているのは、この先も(When)会社は変化し続け、さまざまな形で「社会を豊かにしていく」という意思を表しているかもしれない。
――――――――――――――――――――――――――――――――――
①
What: 縦スクロールで画面が横に動いていく。
How: プレゼン資料のようにも見えるし、絵本のページをめくる感覚にもなる。巻物を読んでいく感覚にも近い。
Where: サイト全体
②
Why: ブランディング会社のため、企画・提案する際のプレゼン資料のよなサイトデザインにしているかも。絵本のページをめくるような感覚になるのは、シンプルに情報をまとめて反復させているから?
③
コンテンツを反復することで、まるでページをめくっているような感覚になった。普通縦スクロールのところをサイトを横動きにしたのは、遊び心からかもしれない。見出しのテキストがストーリー性を帯びていることで、巻物や絵本を読み進めているイメージを強くする。ユーザー(Who)がストーリーを感じやすいデザインである。

サイト全体の分析は以上です！

正解を求めるのではなく、自分なりに分析して取り組んでみました。こういうのは正解は制作者しか分かりませんよね！でも、こんな意図で作られたのではないか？と想像することは重要だと思います。
①ではユーザー視点、②では「なぜ」そう感じるのかを深掘りし、③ではさらにその先を想像してみました。

アニメーションやもっと小さな点についても分析したいと思ったのですが、キリがなさそうと思ったので、大まかな背景、配色、スクロールの３点を挙げました。

何だか物足りない気もしますが、一旦これで終わりです！😂