まず、はじめに。
本来であれば、以下の様なことをしっかりと考えるべきです。
どうやったら使いやすいかな…。どうやったら私たちが提供したい「体験」をしてもらえるのか…。
利用するユーザーさんはどんなシーンで、どのように操作するだろう…。その時に求めているものは何なのか…。
このペルソナ（大きく言うとターゲット）に対しては、こういう設計がいいのか…ダメなのか…。
私たちのWebサイトのゴールである地点まで行ってくれるのか…。（コンバージョンしてくれるのか。）
しかし、私はこの記事では単純に「いいな！」と思ったデザインを取り上げていきます。
どういうところがいいと思ったのかを添えて、色んなWebサイトをストックしていきます。
1.東京メトロ「すすメトロ！」（→サイトを見る）
ファーストビューはこんな感じ
パソコンでの見え方
ここが、いいね！
固定概念を壊している点
鉄道会社の安全対策などの取り組みをこういったデザイン、手法で広報しているところがいいなーと思いました。
こういう情報って硬い表現になりがちというか、かしこまった感じが多いですよね。
そんな中で、誰もが親しみやすいキャラクターを取り入れて、伝わりやすい工夫をしている点がすごくいいなーって思いました。
メニューのデザイン
メニューボタンを押した時の動きや表示のされ方、どちらもいいなぁと思いました。
一般的に、右から左にスライドしてメニューが表示されたり、モーダルウィンドウのような感じで、Webサイトを覆い隠すようなタイプが多いですが、ドアが閉まるような感じの表示方法で面白いですよね。
それに、メニューを開くと、縦幅Maxでナビゲーションを表示している点もあまりなく面白いと思いました。これにより、Webサイトのイメージと合っています。
どんなWebサイトを作る時も使えるデザインではないと思いますが、使えるときには使ってみたいですね。
2.不二食品（→サイトを見る）
ファーストビューはこんな感じ
パソコンでの見え方
ここが、いいね！
余白の使い方
全体的にすごく綺麗な余白の使い方をしている印象です。
色使いがすごく綺麗
配色もすごくいいですよね。不二食品さんの商品が埋もれてしまわない、いや引き立てるくらいの感じですよね。
それに、和のオシャレさが表現されていてすごくいいです。
縦書き文字の使い方、明朝体の使い方
実はかなり表現するのが難しいこの2つ。これを何の違和感もなく、サイトに溶け込ませているのはテクニックですよね。
3.株式会社パム（→サイトを見る）
ファーストビューはこんな感じ
パソコンでの見え方
ここが、いいね！
何の会社なのか分かりやすい！
シンプルに訴えかけてくれます。”「目的地」から旅を面白くする会社”だとダイレクトに書かれているので、とてもわかりやすいですね。
ファーストビューでしっかりと見えます。
Webサイトも”面白い”
言葉だけではなく、Webサイトも楽しいですよね。海や川など水をイメージするようなデザインで、スクロールすると波のように動きます。
こういう表現の方法もいいですね！
持っているメディアがすぐに分かる。
ありがちなのが、この会社ってどんなサービスをしているんだろうということです。
でも、このWebサイトなら”パムのメディア”という風にトップページに分かりやすく記載されているので、探すことなく知ることが出来ます。
まとめ
今週は3つのサイトをピックアップして、どこがいいなぁーと思ったのか、自分なりの感想を書かせていただきました。
Webサイトを作成していて、困ったことがあった時、少しでも参考になるストックとなれば幸いです。
次週も是非ご覧ください！