![見出し画像](https://assets.st-note.com/production/uploads/images/120598151/rectangle_large_type_2_66125085e562a77a561bdb7dbd64da7d.jpeg?width=1200)
【真似したくなる!参考サイトを集めてみた!】 暮らし・生活・サービス編
今回は「暮らし・生活・サービス編」ということで、5サイトほどデザインが良いと思ったサイトとまとめました。
個人用まとめサイトですが、参考にしていただければと思います。
●仙台で暮らす、湖山で働く。
医療福祉系の会社が仙台に人材を集めるために制作したサイトです。
地方都市の人口減少は年々進んでおり、特に高齢化社会にとって医療福祉に携わる人材の減少は問題になっています。
福祉系の仕事は明るいイメージがないですが、このサイトではそのイメージを払拭するようなデザインになっています。
ポップなデザインでありながら、カラーの彩度を抑えている点や罫線の使用の仕方なども参考になります。
![](https://assets.st-note.com/img/1698913490246-YzZ4z4yoPq.jpg?width=1200)
TYPE:特設サイト
FONT:Ultra,Zen Kaku Gothic New
COLOR:
![](https://assets.st-note.com/img/1698913541649-X14EEqxi0s.png?width=1200)
●介護施設の防災・減災ガイド –
防災ガイドという、東京都の「東京防災」を思い浮かべる人が多いと思います。
同じ防災でもこちらのサイトは「介護施設」に特化した防災ガイドになります。
メインで使用されている「黒」「黄色」は、危険を知らせるカラーです。
東京防災は彩度が高い黄色を使用していますが、こちらのサイトは彩度を抑えています。
サイト全体のトーンは危険なイメージを伝えながら、介護というジャンルに適した色使いになっていると思います。
![](https://assets.st-note.com/img/1698913772389-4jsC7lEQG9.jpg?width=1200)
TYPE:特設サイト
FONT:Arvo,Zen Kaku Gothic New
COLOR:
![](https://assets.st-note.com/img/1698913875285-OYJd84EkYb.png?width=1200)
●京都移住計画 | 移り住む先の暮らしをつくろう
タイトル通り、京都へ移住するための情報を掲載しているサイトです。
京都の魅力が描かれています。
特にコラムの写真、文字組、フォントサイズ、行間など非常に読みやすく、参考になります。
![](https://assets.st-note.com/img/1698913945631-9WTSlYRVwv.jpg?width=1200)
TYPE:情報サイト
FONT:Poppins, こぶりなゴシック W6 JIS2004
COLOR:
![](https://assets.st-note.com/img/1698914212333-3aTWcivSSx.png)
●食と神戸
神戸の食に関する情報が掲載されているサイトになります。
TOPページの画像をよく見ると、右下にどの地区にお店があるかわかるように地図のイラストがついています。
こちらのサイトのデザインはとてもシンプルですが、ちょっとしたあしらいでオシャレに見せているので参考になります。
![](https://assets.st-note.com/img/1698914374835-W5QPP29a6C.jpg?width=1200)
TYPE:情報サイト
FONT:Barlow,Zen Kaku Gothic New
COLOR:
![](https://assets.st-note.com/img/1698914404918-EJtlBBEVsQ.png)
●MUJI 無印良品 イギリス&日本
無印良品のイギリスと日本のサイトになります。
ここで注目していただきたい箇所が、国や地域によってデザインが異なるところです。
一見変わらないように見えますが、日本のサイトにはランキングがあり王冠のアイコンまで付いています。
方やイギリスのサイトは、ランキングやアイコンといった要素がありません。
地域の文化に合わせたデザインになっているのは、注目すべき点です。
![](https://assets.st-note.com/img/1698914578658-kE1nz55qL0.jpg?width=1200)
![](https://assets.st-note.com/img/1698914578691-SNmtDd34M5.jpg?width=1200)
TYPE:ECサイト
FONT:UK Helvetica,Arial JP Hiragino Kaku Gothic ProN,Helvetica Neue
COLOR:
![](https://assets.st-note.com/img/1698914682482-IbHD5BXI3e.png?width=1200)
![](https://assets.st-note.com/img/1698914692609-J9CLMSF5dO.png?width=1200)
いかがでしたでしょうか?
機会があればぜひ参考にしてみてください。
少しでもお役に立てたら幸いです。
最後までご覧いただきありがとうございました!
この記事が気に入ったらサポートをしてみませんか?