Web Design Analysis Vol.2
こんにちは！須藤です。
今回、WEBサイト分析2回目をさせていただきました。
WEBサイト分析2回目ということで、1回目と比べると自分のデザインを見る視点が変わっていたり、見るポイントが増えていたりと、新たな学びや変化を感じることが多かったです。
今回、分析させていただいたサイトは「Digtal Connect」さんのサイトになります。
※模写に挿入し使用しました画像は、ネットで検索したフリー素材の画像を使用させていただいております。
不都合がございましたら取り下げますので、ご連絡いただけますと幸いです。
サイトについて
コンサルタント事業を展開されている、「株式会社デジタル・コネクト様」のコーポレートサイトです。
自分が知っていた「コンサルタント」という事業は、企業の様々な問題を一緒に解決してくれるという知識しかなかったので、実際にコンサルタントとはどのような事業なのかという、サイトを訪問してコンサルタント事業を知りたい一人のユーザーとしても拝見いたしました。
なぜこのサイトを選んだのか
背景や文字の枠など、サイトデザインの肝でもある「質感」に興味を持ったからです。どう表現すればこの質感に近づくのか、難しく、時間もかかったのですが、極力近づけることができました。
デザインについて
サイトの方向性
コンサルタントと聞くと、真面目・信頼という自分の中のイメージがあり、サイトを拝見すると、文字の級数のメリハリ、広く見やすくデザインされているマージン、各ページの装飾にもロゴデザインが流用されているがまとまりが取れている、フォントも固くなりすぎていないなど、真面目・信頼のイメージもありつつ、固くなりすぎていないデザインで、サイトを拝見し学ばせていただきました。
使用されているフォント
主に使用されていたフォントは2種類でした。
Ubuntu
游ゴシック体
Ubuntuのフォントは、IT、現代、スタイリッシュ感もありますが、所々丸みを帯びていることから、サイト全体の雰囲気が固くなりすぎず、親しみやすさや柔らかさも感じました。
レイアウト
マージンがページごとに、広くデザインされていたり、狭くデザインされているようにも見えたのですが、文字の級数や色でメリハリがしっかりとデザインされていたので、バラバラに見えることもなかったです。また、狭いマージンを使用する際の勉強になりました。
配色
企業のロゴの色にも使用されている青色が所々に小見出しとして配置されており、サイト全体を引き締めているように見えました。また、テキストの黒は「#121212」が使用されており、黒でも柔らかい雰囲気が感じ取れたので、色の心理的効果の勉強にもなり、デザインをするにあたり色による効果も改めて学びました。
模写してみました
実際にPC、SPとサイトを模写してみました。
SPの模写をしていた際、文字の級数が小さいなと感じる小見出しや文章が多かったのですが、最近、スマホでサイトを見ていると文字の級数が小さいサイトが増えたと感じました。ですが、サイトを拝見した際、その級数の小ささに慣れてしまっている自分もいるので、級数の使い分けはさらに大切になってくると思いました。メリハリを更に意識してデザインに取り組みます。
質感について
どう再現しようかと考えていた背景や文字枠の質感の部分ですが、XD→Photoshop→XDという感じで、 作業中XDだけでは本サイトの質感に近づけるのは厳しいと感じ、途中、Photoshopを使用したのですが「XDでどこまで表現できるのか再現してみよう」と決め、時間はかかりましたが、XDだけでなんとか質感を近づけました。
装飾を作成していて感じたことは、装飾の光の反射具合が個人的に難しかったです。光が強すぎるとサイトのトンマナと合わなくなり、フォントに対して装飾が浮いてしまったり、デザインが崩れてしまったりしたので、時間をかけて微調整しました。
最後に
今回、初めてコーポレートサイトを模写し、前回とジャンルが違うと、デザインの気づきポイントも全然違ってくるので、模写していて、新たな発見や学びが多かったです。
WEBサイトデザインを作成する際、装飾も使用することもありますが、やはり文字の組み方やマージンが大切になってくるシンプルなデザインこそ難しいなと感じました。コーポレートサイトなどは、装飾を使用せずシンプルにデザインする場合がほとんどだと思うので、ジャンルに偏ることなくこれからも様々なジャンルのデザインを勉強していこうと思いました。