読者です 読者をやめる 読者になる 読者になる

sbsk's web design analysis.

日々のこと、思ったこと、感じること。

5,東京メトロ

10日間お休み。

いろんなことがあった〜。仕方ないこと。

 

どういう風に分析していったらいいのか、いまいち。

寸法を見てみるのもいいなと、思った。

あ、あとフルスクリーンショットができるようにしたから

たくさんキャプチャ載せなくていいかな^^

いや、画像小さくなってみにくいだけかな?

 

ま、とりあえず久々に。

 

 

f:id:sugary621:20160527000936p:plain

 

東京メトロのサイト。

基盤になっているカラーは白、グレー、ブルー。

 

誠実なイメージ。路線?ごとにカラーを変えて検索しやすく。

初めに表示される画面に路線検索がきているから

探さなくていいし、ユーザーの使いやすさが重視されていると思う。

 

こんな感じの電車とかの交通のサイトを見に来る人は

遅延だったり、乗り換えだったりを確認しにくる人がほとんどかな〜。

だから、メトロ関連のイベントなどの情報はあまり需要ないから

トップにもってきつつも下のほうに位置している。

 

画像やボタンのリストの感覚は15pxに統一されている。

(これも、何か決まりであるのかな。。。。。?)

 

縦のラインも見えて整理されたサイトなんじゃいかなと。

でも、グレー多めで少しボンヤリしている気がした。

 

 

うぅ、明日も1限、、

課題が溜まってきて勉強しないといけないことも増えてきて。。

サボりがちだけど、週に三回をめやすに分析やwebに関すること

書いていければいいな。

4,chiffon cake MARIE

1日お休みした!急遽呑みにいって帰りが遅くなったから。

お酒全然飲めないけど、居酒屋さんに行くのとお酒飲んでる人を見るのは好き。

 

今日は、シフォンケーキ専門店のウェブサイト。

シンプルで、写真をふんだんに使っているから

1つめで見た、SAKUZANさんに似ているかも。

(次は、有名どころの会社のウェブサイト分析?の予定。)

 

f:id:sugary621:20160517183639p:plain

 

おしゃれなシフォンケーキ屋さん。!

シフォンケーキの画像が自動でスライドするの、かわいい!

いろんな種類があるんだなぁ、と、初めに思う。

そこから、どんなのがあるのかな?とワクワクさせてくれる!

けど、メニューを早く見たい人がいたら少し苦痛かなと思う部分も。

メニューが書かれたトップのシフォンケーキのリンク先には

一つ一つに写真が載ってないから、さっき見た美味しそうな色の

シフォンケーキはどれ?ってなるかも、と。

(あくまでも個人的な意見で)

日替わりでケーキを提供しているそうなので、

そこは仕方ないかなと感じつつ。

 

f:id:sugary621:20160517184740p:plain

 

コンセプト、メニューの紹介。

ただ単にリンクを貼るだけじゃなくて

そのページの説明も加えているところがいい。

ナチュラルな色の組み合わせで自然な感じ。

 

f:id:sugary621:20160517184747p:plain

f:id:sugary621:20160517184755p:plain

 

スタッフさんたちのブログ、お知らせもトップページに。

 

f:id:sugary621:20160517184756p:plain

 

特徴的だなと感じたのはフッターが地図だということ。

フッターが地図というよりもフッターがない。

まとまってリンクがあるからフッターにサイトマップが必要ないからかな。

基本的にネットショップではなくお店の紹介だからいらないのかも。

 

 

シンプルにまとまっていて、色に真っ黒がない柔らかい感じ。

(真っ黒がないのはどのサイトでも同じかも。。。)

ヘッダーが必ずしも必要ではないということ。

定まった形はあるんだろうけど、どれも必須ではなくて

必要に応じて変えていけばいいんだなと感じた。

 

 

んん〜個人的にデザインが好きで選んだけど

分析できるものではなかったかも><

まあ、今までのものもそうかもしれんけど。。。。。

 

 

 

さよなら。

 

 

3,流山病院

こんばんは、3日目。

他の課題と勉強を放置しての更新。

ウェブサイトのスクショのストックが無くなったら

更新が止まってしまうのか、単に時間がなくなって止まってしまうのか、、

(三日坊主な自分はどうしたら持続させれるのかが一番難しい。)

 

今日は、ジャンルを変えて今日は病院。

病院のウェブサイトは寒色ベースで淡々とした感じをイメージしてたけど

全然違ってびっくりした!っていうのが最初の感想。

 

 

f:id:sugary621:20160515230220p:plain

 

ヘッダーからイメージ覆された感じ。

ユーザーの年齢層も幅広い病院だからかな

メニューが大きめ+アイコン付きで見やすい。

問い合わせるための電話番号がタイトルと同じ並び、大きさ!!

 

アクセスや休診情報、受付時間が

最初に開いページで確認できるのもいい。

 

f:id:sugary621:20160515230226p:plain

 

その下には、患者さんの目的別にページ移動できるリンク。

色分けもされていて、すぐに目がつくしアイコンも可愛らしく優しい感じ。

 

f:id:sugary621:20160515230235p:plain

 

使われている写真もすごく明るい看護師さんや患者さんが写っていて

すごく印象がいいし、病院の恐怖心も軽減される気がする。

 

f:id:sugary621:20160515230604p:plain

 

中身のページは左のメニューが固定されて

患者さんの目的の部分は上に固定されている。

 

f:id:sugary621:20160515230609p:plain

 

 

基本的に、目的とお知らせ以外は緑で統一された色使い。

お知らせも、医療機関向け、患者さん向け、求職者向けに分けられていて

必要な情報だけ目に付くようになっている。

患者さんは、求職に関する情報なんて必要ないわけで、、

無駄に全部見るより、色分けされた患者さん向けの情報にだけ

目を通せたらほうが絶対いいもんなあ。

 

RGBを基調とした色の優しい彩度になっているから

がちゃがちゃしてなくてうるさくないね。

 

 

地元の病院のウェブサイトを覗いたら

見てられないようなサイトだった、、、、、、、

改変して見やすいようにレイアウトの練習もしてみよ!

 

 

今日はこれにて退散っ

2,成人式前撮り stadio zero

 

こんばんは。二つ目。

今日は、結婚式や七五三の撮影スタジオゼロの

成人式前撮りのページ。

 

基本的にワンカラムのサイト

トップには、お祝いメッセージ、撮影のざっくりとした種類と値段

撮ったときのイメージ写真が使われて、問い合わせとアクセスが書かれたヘッダー。

 

f:id:sugary621:20160514230155p:plain

 

撮影を目的としたスタジオのサイトだから、トップには大っきい写真。

ヘッダーはかなりスッキリしていて、タイトルと右上の小さいメニュー。

写真に目がいって綺麗!な写真って感じるけど、

ちょっとメニューが小さい気がする。個人的に。

あぁ、こんなところにメニュー隠れていたの、って感じ。

(だいたい気になることはトップのページに来てるけど、、値段とか。)

 

f:id:sugary621:20160514230200p:plain

 

メニューアイコンにカーソルを持ってくると開くメニュー一覧。

文字の大きさ間隔も見やすく、簡潔なメニュー。ホバーで右に動く小さめ動き。

 

f:id:sugary621:20160514230713p:plain

メッセージ。シンプルでかわいい!

余分な枠がない分、周りの振袖姿の女の子にも目がいくし、

和柄のマークがちりばめられているのも、個人的に好き。

フォントは明朝体じゃないゴシックっぽい(わからない;;)から

女性らしさが出ている、柔らかい感じ。

ここでは、メニューがまったくない。

 

f:id:sugary621:20160514230209p:plain

 

下に行くに連れて、メニューが固定されているわけではないから、

また、新たに撮影方法のところで、トップにメニュー登場!

これも、固定ではないから、この部分にだけ。

トップに固定されたタイプのメニューしか見たこと無かったから新鮮!

ページの途中にメニューを入れちゃうのもありなのか〜

スタジオ撮影か、ロケーション撮影か、、

メッセージの部分ではメニューいらないけど、ここでは欲しい!って

(個人的に)思うところにあるから、ストレスじゃないと思った。

白地背景で出てきてくれるメニューが自然で、いい!

 

f:id:sugary621:20160514230206p:plain

 

ヘッダー。白地だったところから、少しベージュのいろが入って

切り替わりがわかる、印象少し変えてくれる感じ。

前撮りするには問い合わせは必須。見やすさと探しやすさ!

トップページは必要な情報ありつつもごちゃごちゃしてないから

問い合わせにも行きやすい。明朝体じゃないので柔らかくて迎えられてる感じ!

堅苦しくなくて、緊張せずに電話嫌いの私でも電話できそうって思う。

(成人式も前撮りも終わってるけど!)

 

f:id:sugary621:20160514233121p:plain

 

これは、中身のページ。メニュー>プラン。

レイアウトはどのページも同じ。

真ん中にタイトル、右にメニュー

その下に長めの写真を挟んでメニューのタイトル。

 

f:id:sugary621:20160514233316p:plain

シンプルな中にしっかり色分けされているのもいい。

スタジオ撮影はピンク

ロケーション撮影は紫。

どちらも女性らしさが表れている。

 

 

 

1つ目を書いてから思ったけど、

書いた後にも、あぁ、こういうところも良いとか工夫されてるとか

気づくこと多くて、、、、どうしよう。追記で書いちゃうか。

1つ1つこのペースでいいのかと思いつつ、結構楽しくて、、、、

1記事にざっくり3、4つウェブサイト載せるときもあると思うけど。

 

 

 

今日はおしまい。

1,SAKUZAN

初めて。素直に良いな、素敵だなと思ったもの。

 

食器(うつわ)を取り扱っているお店のウェブサイト。

一枚のワンカラムレイアウト。

文字は黒のみで、写真は少し青みがかった自然の色。

 

f:id:sugary621:20160513224328p:plain

 

トップページは4枚の写真が切り替わる。

画面いっぱいに写真を置くスタイル。は個人的に好き。

左上に固定されたSAKUZANのロゴマーク。

メニューはホバーで文字下に動きのあるライン。

色は写真だけで、文字などは黒で統一されることで

うつわの色味などがナチュルに伝わってくる感じがする。

 

f:id:sugary621:20160513224840p:plain

 

固定されたメニュー。

左上のマークは写真にかからなくなってメニューに統合された。

SAKUZANの説明。山の風景の画像に文字を乗せている。

文字の間隔やフォントサイズちょうどよく読みやすい。

フォントは丸みがあって優しい感じ。

『美しさを、美味しさから。』は明朝体で差別化され、

SAKUZANのコンセプトが強調されていると思う。

 

f:id:sugary621:20160513224333p:plain

お知らせ。点々で書かれた円はロゴマークにも使用されているマークで

繰り返し使用されてパターン化され、まとまりがあるように思う。

画像の上にカーソルをもってくると、写真下のラインが伸びてくる使用。

シンプルだけど、リンクが貼られているのが感じられるので

ストレスがないように感じる。

 

f:id:sugary621:20160513224339p:plain

商品紹介。画面いっぱいの画像をもってくることで、

お知らせのページからの変化がわかる。

ライン代わりに写真を持ってくるのがいいな。

 

 

f:id:sugary621:20160513224342p:plain

 

写真の載せ方は、お知らせページと同じなので安定感。

文字は左揃えでラインが見えるレイアウトで見やすい。

 

f:id:sugary621:20160513224350p:plain

 

ACCESSになるとき、また画像が幅全体に表示されて切り替え。

 

f:id:sugary621:20160513224839p:plain

 

地図も画面いっぱいの地図。

 

f:id:sugary621:20160513224843p:plain

 

ヘッダーにのみ、うつわの模様みたいなもので表現されたラインがある。

濃いめの色で下の土台となって安定感が生まれているように感じる。

 

 

 

 

初めて文字で自分の思っていることを書いてみた。

どんな風に書いたら、見たらいいのか定まってないけど

いつか明確にもっといいところを見つけて、うまく表せられるように。

 

 

追記

 

思ったのは見てて圧迫感がなくスマートに見れたなということ。

結構、固定のメニューバーにカラーが入ってて

見ているのメニューの存在で圧迫感があるサイト。

個人的には好きじゃなくて、、、、、

上の方につきまとう邪魔者に思えてしまうことが多々、、

カラーがあり固定されていると、行きたい情報のところに

すぐに行けるメリットがあるのはわかる。

けど、そのページで見たいことが、そのメニューバーのせいで

遮られてしまっているように感じる。ストレスフル!(?)

それがココになくて、シンプルでどのページ見ても馴染んでいる。

そこが、好きかも!と、改めておもったから追記。

 

 

webサイトの分析

 

 

 

漠然と良いなと思うだけじゃ無くて

なぜ良いと感じるのか、見やすいと感じるのか。

 

 

 

🌝⭐️