まず、はじめに。

本来であれば、以下の様なことをしっかりと考えるべきです。

どうやったら使いやすいかな…。どうやったら私たちが提供したい「体験」をしてもらえるのか…。
利用するユーザーさんはどんなシーンで、どのように操作するだろう…。その時に求めているものは何なのか…。
このペルソナ（大きく言うとターゲット）に対しては、こういう設計がいいのか…ダメなのか…。
私たちのWebサイトのゴールである地点まで行ってくれるのか…。（コンバージョンしてくれるのか。）

しかし、私はこの記事では単純に「いいな！」と思ったデザインを取り上げていきます。
どういうところがいいと思ったのかを添えて、色んなWebサイトをストックしていきます。

1.東京メトロ「すすメトロ！」（→サイトを見る）

ファーストビューはこんな感じ

パソコンでの見え方

ここが、いいね！

固定概念を壊している点

鉄道会社の安全対策などの取り組みをこういったデザイン、手法で広報しているところがいいなーと思いました。
こういう情報って硬い表現になりがちというか、かしこまった感じが多いですよね。
そんな中で、誰もが親しみやすいキャラクターを取り入れて、伝わりやすい工夫をしている点がすごくいいなーって思いました。

メニューのデザイン

メニューボタンを押した時の動きや表示のされ方、どちらもいいなぁと思いました。
一般的に、右から左にスライドしてメニューが表示されたり、モーダルウィンドウのような感じで、Webサイトを覆い隠すようなタイプが多いですが、ドアが閉まるような感じの表示方法で面白いですよね。
それに、メニューを開くと、縦幅Maxでナビゲーションを表示している点もあまりなく面白いと思いました。これにより、Webサイトのイメージと合っています。
どんなWebサイトを作る時も使えるデザインではないと思いますが、使えるときには使ってみたいですね。

2.不二食品（→サイトを見る）

ファーストビューはこんな感じ

パソコンでの見え方

ここが、いいね！

余白の使い方

全体的にすごく綺麗な余白の使い方をしている印象です。

色使いがすごく綺麗

配色もすごくいいですよね。不二食品さんの商品が埋もれてしまわない、いや引き立てるくらいの感じですよね。
それに、和のオシャレさが表現されていてすごくいいです。

縦書き文字の使い方、明朝体の使い方

実はかなり表現するのが難しいこの2つ。これを何の違和感もなく、サイトに溶け込ませているのはテクニックですよね。

3.株式会社パム（→サイトを見る）

ファーストビューはこんな感じ

パソコンでの見え方

ここが、いいね！

何の会社なのか分かりやすい！

シンプルに訴えかけてくれます。”「目的地」から旅を面白くする会社”だとダイレクトに書かれているので、とてもわかりやすいですね。
ファーストビューでしっかりと見えます。

Webサイトも”面白い”

言葉だけではなく、Webサイトも楽しいですよね。海や川など水をイメージするようなデザインで、スクロールすると波のように動きます。
こういう表現の方法もいいですね！

持っているメディアがすぐに分かる。

ありがちなのが、この会社ってどんなサービスをしているんだろうということです。
でも、このWebサイトなら”パムのメディア”という風にトップページに分かりやすく記載されているので、探すことなく知ることが出来ます。

まとめ

今週は3つのサイトをピックアップして、どこがいいなぁーと思ったのか、自分なりの感想を書かせていただきました。
Webサイトを作成していて、困ったことがあった時、少しでも参考になるストックとなれば幸いです。
次週も是非ご覧ください！