私が選ぶ Good Web Design 2022
こんにちは！株式会社フォークのWEBデザイナーのoyamadaです。
今回は社内のデザイナーみんなで、今年2022年に見たサイトで、
特に印象に残ったサイトを勝手にレビューしちゃおうという社内note企画の内容を記載した投稿ページです。
企画概要
2022年に見たWEBサイトのなかで、特に印象に残ったサイトを
【私が選ぶ Good Web Design 2022】として3つご紹介します。
※サイトの記載順はランキングではありません
サイトレビュー内容
①サイト名＋リンク
②ジャンル
③タイプ
⑤選んだ理由
ハッシュタグ風のキーワード（#写真が素敵 #余白の美 etc）を記載
私が選ぶ Good Web Design 2022は！？
私、oyamadaが選ぶ３つのサイトは、全て同じ企業様のサイトで、
コーポレートサイト、キャンペーンサイト、採用サイトの3つです。
その企業様というのが、「私らしい働き方」に出会える女性向けキャリアスクールSHElikesを運営するSHE株式会社さんのサイトです。
実は、何を隠そう私もこのスクールの会員で、スキルUPの学習にいつも活用させていただいております＾＾（早くも種明かしｗ）
先日、やっとマーケティング講座の課題制作を提出することができました。私は、SHElikesのサービスをテーマとして「マーケティングトレース※1」をおこないました。
その際、企業の情報収集作業の一貫として、SHE株式会社さんの関連サイトをいろいろ拝見したのですが、サイトの目的に合わせて、ブランディングが
上手くデザインに落とし込まれているところに気が付き、今回私が選ぶ Good Web Design 2022に選ばせていただきました。
※1マーケティングトレースとは？
ブランディングテクノロジー株式会社CMO 黒澤友貴氏が考案。「マーケティングトレース」とは、任意企業の商品やサービスのマーケティング戦略を想像しながら、マーケティングのフレームワークに落とし込んで分析するトレーニング方法のこと。
SHE株式会社コーポレートサイト
①SHE株式会社
②コーポレート
③シンプル／エレガント／先進的
⑤選んだ理由
★★★★★
この企業のVISIONである「一人一人が自分にしかない価値を発揮し、熱狂して生きる世の中を創る」が、MV、ブランドメッセージ、ステートメント、デザイン全体で表現されているところが素晴らしい！
企業の想いを一番反映できるコーポレートサイトは特に、
一貫したブランディングとデザイン設計が感じられました。
一番はじめに開いた時のローディングアニメーションで、
You are ～と他人から呼ばれる様々な言葉が切り替わり、
「私たちを定義するものなんて、何もない。」のメッセージが現れ
こちらのMVに切り替わるというストーリー仕立て。
（引用元：SHE株式会社）
「SHE is NO ONE」、直訳すると「彼女は誰でもない」。
そして、その後に続く、「だからこそ 何にでもなれる」というブランドメッセージを掲げ、それに合うMVで構成されています。
身体のまとわりついた布のようなもの（＝固定概念の象徴？）を脱ぎ捨て、澄み切った空に解き放っているような女性のビジュアルから何ともいえない開放感。
ベースカラーをホワイトで構成し、写真以外はシンプルに無彩色でまとめられたデザイン。色や装飾など、余計なものを添加しないところもコンセプトに合わせているのでしょう。
一度身につけてしまった固定概念を自ら取っ払い、真っ白な状態に戻れば、誰でもいつだって好きな色に自分で染まることができる。
そのような、人の可能性を諦めない企業という強いメッセージが込められているのが伝わってきます。
ステートメント部分では、歴史的なヒロインで有名なジャンヌ・ダルクを引用することで、ジャンヌ・ダルクの勇敢さや偉業のイメージも重ねあわせることができ、言葉とイメージが相乗効果で強い企業メッセージを作り出しているデザインだと思いました。
（引用元：SHE株式会社）
（引用元：SHE株式会社）
（引用元：SHE株式会社）
#写真が素敵 #余白の美 #言葉とビジュアルとデザインの相乗効果 #強いメッセージ性
SHElikes秋の大型タイアップ企画LPサイト
①女性向けキャリアスクールSHElikes
シーライクス秋の特別コンテンツ「今年もあと3ヶ月。変わるなら、ラストチャンス」公開中。MacBook Proやリッツ・カールトン日光など豪華景品が当たるキャンペーンも実施中！
②キャンペーン
③シンプル／エレガント／パステル／モダン
⑤選んだ理由
★★★★★
こちらは、秋のキャンペーンLPサイト。キーカラーがオレンジに設定され、全体的に秋の紅葉をイメージさせる季節感を表現されているのが伝わってきます。
SHElikesのサービスのブランドサイトから、イメージカラーはピンクとグリーンのグラデーションを使用しているのですが、背景でキーカラーに合わせて秋仕様にグラデーションを調整されているのでしょう。ブランドイメージのSHElikesらしさも忘れずに表現されているところに感心。
また、最近フォーク社内のデザイナーでも話題になった、
短納期・短期間使用のLPでコスパの良い
PCでもSP版のデザインを見せる手法『SP流用型』で作られているのも見逃せないポイント！
＜他、PC版デザインの工夫されているのが分かるポイント＞
・スマートフォンでもすぐにページにアクセスできるように二次元バーコードも左下に固定で設置
・SPデザインのFVでの情報を補うような、「キャンペーンのインセンティブと応募するボタン」を画面左に固定で設置
・無料体験レッスンに参加する（LPのコンバージョン）導線をPCユーザー向けに考えたUIで確保しているところ。
・実は、SP版の応募するの導線入り口は重複しているが、SP版の方を丸いあしらいにし、PC版のボタンデザインをスクエア型にすることで、役割は一緒だが、見た目で重複してないように見せているところが流石！
現在はキャンペーンが終了し、
以下のようなデザインに変更されているのですが、応募期間中と見比べてみると、PC版のインセンティブ情報や応募ボタンなどがトルツメされるため、SPのMVもそれに合わせて調整されているのがわかります。
どこが調整されているか気が付きましたでしょうか？
「この秋、～」のコピーが右側だと全体的に要素が右に偏ってしまうので、コピーを左側に移動させてバランスを調整したのだと思われます。
ちなみに、こちらのキャンペーンは、イメージモデルを担当さた元AKB48の峯岸みなみさんが表参道駅広告のコピーライティングに挑戦された広告企画のタイアップでもありました。
「変わるなら、ラストチャンス」という手書きのキャッチコピーは、峯岸みなみさんが書いたのかな？？と想起して、私も峯岸さんとはじめてみようかな！と、共感と親しみも湧いてくるようなデザインにまとまっているなとも思えました。
#全体のトンマナが揃っている #LPこそSP流用型デザイン #ブランドらしさも忘れてないところ #手書きのキャッチコピーで親しみやすさ
SHE株式会社採用サイト
①SHE株式会社
②リクルート
③エレガント／シンプル／先進的／パステル／モダン
⑤選んだ理由
★★★★★
採用サイトのキャッチコピーは「しなやかに熱狂する。」
その「しなやか」という言葉にとてもマッチした色使いとレイアウトで構成され、淡いくすんだトーンのパステルカラーで優しい大人の女性らしい印象が感じられる。
（引用元：SHE株式会社採用サイト）
コーポレートサイトでは、モノトーン＆シンプルなデザインでまとめられ、
純化されたデザインからは、『何にでもなれる』というメッセージが強調されていたと思われます。
それに対して、採用サイトではカラフルな色使い、レイアウトも、KVの人もランダムに配置したり、インタビュー部分の写真のアングル、大きさとサイズ感、そして揃える位置をあえてズラして配置しています。
（引用元：SHE株式会社採用サイト）
このデザインから受け取った印象から考察すると、採用サイトでは多様性・一人一人の価値（＝それぞれの色として表現）を大事にしているというメッセージを一番に伝えたいのではないでしょうか。
（引用元：SHE株式会社採用サイト）
企業のVISIONは、「一人一人が自分にしかない価値を発揮し、熱狂して生きる世の中を創る」そして、「しなやかに熱狂する。」というキャッチコピー、サイト全体のデザインから、SHE株式会社さんが求めている人材として、本質的なVISIONに加えて、『変化する時代に柔軟に対応できる「しなやかさ」を持ちあわせて「熱狂」する人。』をなのではないかということがイメージできました。
こちらも、企業の根源的なVISIONを軸として表現しながら、サイトの役割に合わせて一番届けたいメッセージを適切な見せ方でデザインされた素晴らしいサイトだと思いました。
#写真のトーンが合っていて素敵 #女性らしいデザイン #カラフルなのに大人っぽい
最後にまとめ
今回は、同企業さまのWEBサイトデザインを3つご紹介させて頂きました。
「デザイン」という言葉は、人それぞれの解釈があると思うのですが、
私にとってのデザインは、伝えたい想いや届けたいメッセージを具現化するツール（道具）の一つだと考えています。
だから、結局のところ、
ブランディングやマーケティングが土台としてしっかりあった上で、
デザインというツールを上手く使いこなし、機能させることにより、
想い、言葉、そしてビジュアルから受け取るメッセージの威力は、人の心を動かすほどの相乗効果を生み出すのではないかと思います。
その素晴らしいお手本として今回３つのサイトをご紹介させて頂きました。
ということで、以上、私が選ぶ Good Web Design 2022でした(*^_^*)
▼他のフォーク社内のデザイナーのレビュー投稿もこちらでご覧頂けます！
この記事が気に入ったらサポートをしてみませんか？