;)
こんにちは。ヤマダです。
最近はギャラリーサイトだけじゃなく、デザインアワードもチェックしています。
僕みたいな凡人からすると、まさに「別世界」なわけですが、めっちゃ勉強になるな～と感じてます。
なにより見てて楽しいんですよね。「マジか～！！」ってなります。いい意味で自分の固定概念を打ち破ってくれる。これからも沢山吸収させてもらいます。
さて、今回はその中で印象的だったサイトをご紹介します。
自分がいいなって思ったところも載せているので、併せてどうぞ。
目次
サイトのご紹介
- 『日本気象協会』様
- https://www.jwa.or.jp/
制作会社はFOURDIGIT様。
マジでレベル高いです。。リクルートサイトもとっても素敵でした。また今度ここでご紹介します。
受賞歴はこちら。漏れがあったらすみません。
組織の特徴・魅力を、デザインと紐づける
わからないなりに、制作背景・意図を推考してみました。
そっちの方が、デザインコンセプトも見えてくる気がするので。
企業の特徴
- 気象・環境・防災分野におけるデータ解析やコンサルティングサービスを強みにしている。
- サービスや事例見る限り、B2B。
キーワード
「自然」「安心、安全」「先進的」「健全・信頼」
もう少し踏み込んで考える
- 自然 × 先進的 = 「透明感」
- 安心 × 信頼 = 落ち着いたカラートーン
めっちゃざっくりですが、自分が見ていたのはこんなところ。
サイト設計やデザインが、上記の要件をどのように満たしているかを基準に閲覧してみました。
気持ちがいいトランジション
一番好きだったところはここでした。
一言でいうと「優しい」。
- フェードインエフェクト
- スライダー
- ホバーアクション
特にスライダーがめっちゃ好きですね。
全体的に、動きとテーマカラー（#3ce35f）で世界観が統一されていて、とても美しいです。
「トランジション1つで、ユーザーへ与える印象がここまで変わるよ」っていう、凄くいい例だと思いました。
あと、今の自分（僕）は「優しさ」とか「柔らかさ」を表現しようとすると、border-radiusとかbox-shadowを使っちゃうかもと思っちゃいました。これは絶対無い方がいいですね。
いい意味でシャープで固く、どう見ても「B2B」です。
レタッチ・写真選定
写真や動画もいいですよね。
フォトショのレンズフィルターで例えると、エメラルドグリーンとかマリンブルー的な施しがされていたり、からっとした写りに加工されていたり…。（ボキャ貧が酷い、誰か助けてほしい。）
動画も、凄く印象に残ります。
田んぼを歩くお母さんと子供のシーンとか、コンセプトやサイトの雰囲気とマッチしています。
余白、行間の使い方
溜息出ちゃうくらい綺麗に余白とってます。
一番すごいなと思ったのは、可読性が破綻してないところです。
デザインの四大原則に「近接」ってあるんですけど、これだけ広くとっても違和感なくまとまってるのが凄いですよね。
ソース見てたんですが
// Ex
.l-main-message-lead .text {
margin: 39px 0 0;
font-size: 1.5rem;
line-height: 2.27;
letter-spacing: 0.03em;
}「line-height」僕だったら怖くてここまで取れません。
でもめっちゃしっくりくるんだよな～いいサイトだな～。
ただこれも、コンセプトや制作背景からの逆算だと思います。
思いつきでこの手法取り入れても、絶対しっくりこない気がする。
コンテンツとして面白いと思った「3分で分かるJWA」
サイトコンテンツに目を向けると、「3分で分かるJWA」が面白いなと。
分野が分野だけに、ユーザー視点で見るとありがたいですよね。
ドロワーで展開されていくのも、すっきりしてていいなと思いました。
あとは「事例」ページの見せ方もシンプルで美しく、激しく好きです。
下層ページは、左端にページタイトルが表示されています。こういった細かい仕様も拘りを感じました。
まとめ
アワードに載るようなサイトってレベル高過ぎて、なかなか実務で活かしづらいところがありますよね。
もちろんそういった面もあるんですが、深く見ていくことで勉強になることが沢山ありました。
なにより、アワードってのがいいんですよね。
僕みたいな単細胞でセンス0のデザイナーにとって、「これは良いデザインとして評価されてます」ってサイトは、審美眼を養う上でとてもありがたいです。
サイトレビューは今後も続けていきます。よろしゅう。
