WEBデザイン考察#4
webデザイナーを目指して勉強中のるるです。
日々の日課としてwebデザイン考察を始めましたが、毎日投稿だと続かない！と思ったので一週間ごとにまとめて投稿することにしました。
まず、考察にあたり自分の今の課題を整理。
課題
・デザインの引き出しが少なく、オリジナルサイトを作成する際にアイデアやレイアウトが浮かばない
・技術的に作れないパーツがあるなど、妥協を繰り返すことでテーマがぶれていき、一貫性やデザインに込めた意味が薄れていく。
とにかく今は初歩の初歩、という段階なので、
「シンプルでオーソドックスなレイアウトの型を作れるようになる」ということを目標に、考察を進めていきます。
慣れてきたら考察だけではなく、既存サイトのトレースも行っていく予定です。
Studio Tremo
カテゴリ：フォトスタジオ
ターゲット：カップルの女性、家族を持つ母親、成人式の前撮りなど記念日の撮影を考えている人
サイトの目的：自社のブランドイメージ向上
イメージ：シンプル、高級感、日本的、清潔感
事業内容：婚式当日、ロケーション前撮り、家族写真の3つの撮影をメインに行うフォトスタジオ
気付き
・高級感を出すには深みのある色が使われることが多いが、サイト全体が明るい光の入った儚げな印象で美しい
→写真の明度、露光量を上げている？
→「撮影プラン」のセクションの背景にライトのような光が使われている
→写真をホバーすると白くなったり、ヘッダーやインスタグラムの写真が白みがかっている
→たっぷりとした余白。セクション間の余白は大体150~250px、見出しとコンテンツ間の余白は70~100px、左右の余白は左130px,右140px
・女性的な印象がある
→明朝体YakuHanMPs_Notoを使用
→ナビゲーションを縦書きにしている
→リードや見出しを中央揃え
アイデアメモ
・フッターに婚姻関係にある男女の写真を不透明度を下げてさりげなく表示
→何か物足りないけど装飾入れたくない場合に使える手法だと感じた
・見出しの20px下に英語表記を入れる
→デザイン性と理解しやすさの両方を担保
自分の好きだと感じたデザイン
・写真の上に白文字で文字を入れる
ROBOTI
カテゴリ：AI.ロボット
ターゲット：飲食店
サイトの目的：資料請求、お問い合わせ
イメージ：シンプル、現代的、誠実、スピード感
事業内容：配膳、業務用掃除ロボットの販売
気付き
・商品を横スクロールすることででサイトに動きや面白さを加え興味を引くことができることに加え、さりげない商品案内になっている
→商品を知ってもらう＋サイトに興味を持ってもらえるようにしている
・口コミを横スクロールする場合、スクロールバーを下に表示することでUIを高めている
・虹色の長方形の線を流れるように配置されている
→時代の流れに乗っているような未来感やスピード感をユーザーに与え、ロボットという現代的な分野の商品を提供している企業らしさを出している
・IT系はポイントで青を用いることが多い
→誠実さ、真面目さを印象付ける
・資料ダウンロードとお問い合わせボタンをヘッダー上部に固定して表示することでコンバージョン率を上げている
アイデアメモ
・最初写真とヘッダーの背景が同化しているが、スクロールするとヘッダーの背景が白くなる
・写真の不透明度を下げて暗くした背景を用い、左側に大きい白文字で見出しを書くことでおしゃれで現代的な印象を出すことができる
・企業サイトらしいちょうどいい余白感やフォント、レイアウト構成
・画像をホバーすると画像が大きくなる
株式会社インフォマート
カテゴリ：IT
ターゲット：電子化することにより業務効率化を図りたい企業
サイトの目的：自社のブランドイメージ向上
イメージ：シンプル、信頼、現代的、新しさ
事業内容：業務をデジタル化する仕組みを提供する
気付き
・緑が印象的。IT企業の場合青が使われることが多い中、あえてロゴの緑と黄緑をサイト全体のアクセントカラーとしているのが企業の印象を強めている。
また、ロゴを彷彿とさせる緑の曲線が大胆にあしらわれたメインビジュアルや画像を用いていることも、企業イメージを強く印象付けている。
・トップの「しごと。スマート。インフォマート」とというキャッチコピーが非常に印象的。ひらがなとカタカナで誰でも理解しやすく、人目で事業内容がわかるような言葉で表現されているのが秀逸。
フッターにもロゴではなくこのキャッチコピーを大きく表示しているのも目を惹かれた。
・上にスクロールするとヘッダーが表示される。
下にスクロールするときに邪魔だな・・・と感じるリスクもなく、また上に少しスクロールするだけでいつでもナビゲーションから別のリンクへ飛べるので、UI的にも優れている。
はとの里動物病院
カテゴリ：医療
ターゲット：兵庫県にお住まいの動物を飼われている女性の方
サイトの目的：診療予約を促す
イメージ：シンプル、キュート、おしゃれ、安心感
事業内容：犬･猫･エキゾチックアニマルの総合病院
気付き
・所々に散りばめられた手書きのようなタッチのイラストや、ころんとしたフォントのZen Kaku Gothic New、背景のストライプがキュートな印象。
動物に「さん」をつけた可愛らしく優しさのある言葉の表現を用いていたり、女性のイラストが多用されていることから、特に女性をメインターゲットに置いているように感じた。
・セクションの背景を単一色で塗りつぶさず淡い色のストライプを使用しており、画面上に常に白があることで清潔感が感じられる。
・ストライプというカジュアルなデザインや温かみのあるオレンジをポイントで使用することで、地域の人が身近に感じられるような親しみやすさを演出している。
・オーソドックスなコーポレートサイトの場合はメインビジュアル直下にコンセプト（会社の概要）が配置されていることが多いが、病院の場合は利用者が自発的に病院を探している場合がほとんどなので、すぐ目的のページに辿り着けるような案内メニューをメインビジュアルの下に配置している。
・ネットでの予約方法や必要なものなど、診療の流れが非常に細かく親切に記載されているので、利用者が安心して受診することができる。
遠野ジンギスカン
カテゴリ：飲食
ターゲット：旅行者、ふるさと納税で何を購入するか探している人
サイトの目的：地域活性化。遠野ジンギスカンの美味しさや人の和を生み出す文化が、全国の方々に広がることを目指す
イメージ：シンプル、力強さ、エキゾチック
事業内容：遠野市の精肉店が集まって立ち上げた、遠野ジンギスカンを広めるプロジェクト
気付き
・セクションの間にジンギスカンの写真を横幅いっぱいに表示したり、スクロールでたくさん表示しているので、ジンギスカンがどういったお肉でどういった調理をして食べられているのかという実際のイメージが伝わる。
→写真を多めに配置すると、具体的なイメージが伝わりやすい。
・力強いゴシック体の見出しやメインビジュアルの縦書きのナビゲーション（日本風）と、大きく大胆に配置したサンセリフ体のあしらい（海外風）が合わさっていることから、どこか国を跨ったエクゾチックな印象がある。
→日本国内に限らず、海外も意識している？
また、手書き風の書体を用いたロゴからも伝統や地域性を感じる。
・深みのある赤色がアクセントカラーとして用いられている。
この色は高級感のある焼肉店などでよく使用されている印象がある。
アイデアメモ
・英字のあしらいを円形にぐるぐる回したり、横スクロールで動きを加える
・写真のスクロールを上下に並べ、左方向と右方向で反対に動かしている
・セクションの間に画像を配置し、画像は固定したまま、他の要素が動いているように見える表現
改善
・メインビジュアルから下にスクロールするとヘッダーが画面上部に固定されるが、本文の文字と重なって見えずらい箇所があるので、白の背景をつけ
ると良いと思った。
Ready Crew
カテゴリ：サービス
ターゲット：費用をかけたくない、できるだけ早く効率的に発注先を選びたいという企業
サイトの目的：資料請求、お問い合わせ
イメージ：シンプル、力強さ、コーポレートサイト
事業内容：要件や相性にマッチしたパートナー企業（発注先）を紹介するビジネスマッチングサービス
気付き
・力強く訴えかけるような情熱的な印象で、メッセージを強く訴求したいという企業の思いが表現されている
→字面の大きいNoto Sans JPを使用
→フォントの太さが900とかなり太め
→赤色が多用されていること
→大胆な文字の大きさ（見出し38px,メッセージ36~48px)
→メインビジュアルなど、使用されている写真の人物がかなり大きく大胆に配置
→「合う会社と、会う」というキャッチコピーをフッターに大きく配置されており、インパクトがある。
アイデアメモ
・ヘッダーに軽くドロップシャドウがかかっている。
・No.1のメダルのデザインが高級感がありクオリティが高い
・よくある質問をホバーすると、バーが左から右へ表示される
・見出しの下の罫線のデザインが企業サイトらしさとスタイリッシュさを演出
・写真やメダル等の要素を除くと完全に赤と無彩色（黒白グレー）しか使用されておらず、シンプルながらもコーポレートらしさのあるサイトになっている。
レイアウトメモ
・コンテンツ幅：1120px
・セクション間のマージン：120~170px
・コンテンツ内側上部のマージン：80px~130px
改善
・文字が太いことで、文字が潰れて見える箇所が複数ある。
特に、「よくある質問の質問部分」や「ヘッダーのナビゲーション」については強く訴えかける必要はない項目なので、もう少し文字の太さを細くして、メッセージや見出しなどの強く訴求したい箇所とのコントラストをつけると良いのではないかと感じた。
VALUES
カテゴリ： web/it/デジタル/テクノロジー/マーケティング
ターゲット：対企業
サイトの目的：自社のブランドイメージ向上
イメージ：シンプル、信頼感、安心感、幾何学的、モダン
事業内容：経営課題のコンサルティング、課題解決、販売促進の支援など、データテクノロジーとマーケティングノウハウを活用して課題解決をサポートする
気付き
・現代的な印象がある。
→長方形や円形の図形が組み合わさった要素がメインビジュアルに多数配置されており、大きくなったり小さくなったり形や配置が変わっている
→図形の組み合わせがグラフやwebサイトのレイアウトにも見えることから、それぞれの課題に合わせた柔軟なアイデアを提供するという企業形態を体現している？
・幾何学的でころんとした印象
→キャッチコピーにフォントTitillium Webが使われている
→小さい図形の集合体が密集している
ゴルフダイジェスト
https://company.golfdigest.co.jp/
カテゴリ： スポーツ・IT
ターゲット：対企業
サイトの目的：自社のブランドイメージ向上
イメージ：シンプル、清潔感
事業内容：「ゴルフ場予約」「ゴルフ用品販売」「広告・メディア事業」「レッスン事業」「練習場ビジネス」
気付き
・ヘッダーやフッターなど、ゴルフボールや芝生を連想させる円形を多用している
・スポーツ関連にしては清潔感を感じるデザインだと思ったら、ITに関連したサービス展開をしていたので納得した。画像とゴルフボールを連想させる円の図形を用いていることからゴルフにまつわる事業であることは伝わるので、全体的に清潔感のある仕上がりにすることでIT×スポーツをうまく掛け合わせている。
→ポイントの青色
→余白感（セクション間の余白120~160px、コンテンツ幅1200pxと1280px)
→文字サイズ（Noto Sans JP" - 400 本文 １５px、見出し22px）
→整列（左揃え）
・トップページは各ページへの案内とお知らせ、最新情報のみなので新規顧客の獲得が目的ではない＝自社ブランドイメージを向上させるためのコーポレートサイト？
Smart相談室
カテゴリ： メンタルヘルス
ターゲット：メンタル不調を抱えている従業員を持つ企業
サイトの目的：資料請求、お問い合わせ
イメージ：シンプル、ポップ、安心感、優しさ、親しみ
事業内容：法人向けオンライン相談窓口
・安心感、優しさが感じられる。
→あしらいに流動的な図形や円形、ドットを用いている
・親しみやすいポップな印象
→オレンジ、青、ピンクなどカラフルで楽しい配色
→相談者が安心して頼れるように、気軽に相談しやすい印象を持たせている
・コンテンツの配置にストーリーがある
感想
・どこのサイトを見ても、コンテンツ間の余白やコンテンツの背景から見出しまでの余白など、ある程度大きさの幅はあるものの、完全に各セクションごとに統一されているサイトは存在しないことに気がついた。
自分がサイト制作を行う際は分かりやすいようとりあえず各セクションで同じ幅にしておこう・・・と思ってしまいがちなので、今後はコンテンツごとの余白感をどのように決めているのかを意識しながら考察を進めていきたい。
・Noto Sans JPがオーソドックスなサイトにおいてよく使われていることが分かった。信頼感があり清潔感があるのはもちろんですが、太く大きくすることで力強い印象も持たせることができるので、使いやすい万能フォントだと思った。
・ヘッダーは通常流し見程度でじっくり見ることが少なかったが、キャッチコピーがあるだけで目を引きやすく記憶に残りやすかった。
・英字のあしらいを大胆に配置し、動きを加えることで一気にサイトの面白さが生まれていた。特に、ファーストビューに動きを取り入れることで、ユーザーを惹きつけて画面を下にスクロールしたくなるような工夫をしているサイトが多かった。
・デジタル系の企業のコーポレートサイトは、見出しの左側に⚪︎などの記号があり左寄せになっているか、下に直線が引かれているデザインが多かった。
・朝の20分ぐらいで毎日考察していたため、表面的な部分しか考察ができておらず全体的に短く浅い内容になってしまった。
１日１サイトだとどうしても内容が薄くなり記憶にも残りずらいため、１週間１サイトのレベルでもいいのでとにかくもっと深く観察・考察をしていきたいと思った。
・感じた印象を言語化するのが非常に難しく、もどかしかった。
また、自分の考察を裏付ける根拠となる知識が圧倒的に足りておらず、なぜこう感じたのか？という理由を考えても自分の考えに自信を持てなかった。
もう少しデザインに関する知識（レイアウトや配色のルールなど）を蓄え、「〇〇というルールに則ったデザインだから〇〇に見える」というような根拠のある考察ができるようになりたい。
この記事が気に入ったらサポートをしてみませんか？