

おしゃれなサイト、やさしいサイト
おしゃれなウェブサイト、やさしいウェブサイトをまとめました。
まとめてみました、と言っても3つだけですが。
10月のベスト3です。
パジャマライフ- ほぼ日刊イトイ新聞

ほぼ日さんの特集ページです。タイトルが『パジャマライフ』っていうのもやさしいなと思いますね。
- 一目で「あ、なんかいいな」と最後まで見てしまった。
- モデルさんのふたりがまた素敵。
- やさしいアニメーション。写真がふわーと出てきてふわーっと消えていく動き。トップの写真から2枚目の写真への動き(見せ方)がとても素敵。『transition』と『opacity』の使い方が素敵。
- 写真(画像)を縦並びにしているだけのシンプルな作り。(テキストは一切使っていないのがシンプルでいいですね。)
- 画像はPC用とスマホ用で別のものを用意している。
- コーダーさんにとっては楽かも。シンプルコーディング。
- ふとしたときにまた訪れてしまう。
holo shirts.

オーダー専門のシャツ屋さんのホームページ。やさしい余白がとても心地がいいです。
- 写真の見せ方が素敵。
- ミシンの動きを表現しているアニメーションが素敵。jQueryで動きをつけている。
- トップページではテキストを使っていない。『position』で画像を配置している。
- 残念ながらレスポンシブ対応はしていないが素敵なので全く問題ないなと思ってしまう。PC表示をスマホでそのまま見れる。
- 『how to order』のページが好き。バランスが上手だなと思ってしまう。
- 余白のバランスが素敵。コーディングすごく時間がかかっただろうなと思う。
- シャツが欲しくなる。
park | 調布 深大寺の生活道具・うつわ・ドーナツ・カフェ・オンラインストア

東京都調布市深大寺・神代植物公園近くの生活道具を扱うショップさんのウェブサイト。とにかくやさしい、のんびりカフェをやりたいなと思ってしまいます。
- 写真の統一感が素晴らしい。
- 文字サイズが秀逸。小さな文字でもしっかり読めます。
- 無駄がない、とはこのことですね。余白が居心地良く存在しています。
- レスポンシブ対応も素晴らしい。スマホ
- トップページのメイン画像は『background-image』でコーディングしている。スライダー(スライドショー)は使わずにシンプルに1枚だけ見せる。余計なものがないのがやさしさの秘訣かもしれませんね。
- 『park』のロゴがサイト全体のイメージ通り。
- 店舗に行ってみたくなる。家が近かったらなと思ってしまう。
park | 調布 深大寺の生活道具・うつわ・ドーナツ・カフェ・オンラインストア
参考サイト
さいごに

