こんばんは、デザイナーのMです。

8月31日。この日付を見るだけでわけもなくソワソワざわざわした気分になりませんか？私はなります。
学生時代の夏休みの思い出は年々遠くなりにけり…でも毎年この時期が来るたび自然と心がざわざわする。何故でしょう、不思議です。
それって8月31日とか関係なく、単に月末だからでは？とか言ってはいけない。

さて、こんなざわざわする日は可愛い動物でも見て気持ちを切り替えるのが一番です！（急に何？）

今回はそんな可愛いの権化たる「ねこ」をテーマに、WEBサイトをデザインする上で参考になりそうなサイトをいくつかピックアップしてみました。

・テーマ性が分かりやすい
・トレンドを押さえている
・ねこかわいい

こういった点を中心に集めています。

クリニック系から商品のランディングページまで…デザインや構成、ユーザビリティ、配色、画像の活用の仕方が素敵なサイトばかりなので、よければ参考にしてみてください。
参考にするだけでなく、デザインイメージを固めようと迷いながらギャラリーサイトをひたすら回遊している方々の、ちょっとした気分転換にもなれば幸いです。

早速見ていきましょう。

　

※記事は2022年8月現在の内容になります。

　

優しい・ぬくもり・やわらかい系

■NECOREPA/ほごねこクリニック（ネコリパほごねこクリニック）

大阪府泉南郡熊取町にある保護猫専用の不妊手術病院のホームページ

NECOREPA/ほごねこクリニック

丸みのある画像やフォントがやさしく温かいイメージを与えているホームページです。
やわらかいオレンジ色をメインに、要所に置かれたワンポイントイラストや点線が親しみやすさを表現する上で効果を発揮しています。
クリニック系のサイトのデザインでは、ユーザー側にどう安心感を伝えるのか？が最も重要だと言えます。こちらのサイトはそのポイントを丁寧に押さえている印象があり、非常に勉強になります。

　

■猫壁（にゃんぺき）

株式会社LIXIL様が運営されている、マグネットパネル製品を紹介するホームページ

猫壁

壁を手軽にキャットウォークに変身させるマグネットパネル製品について、写真とイラストで利点や使い方が分かりやすく説明されているホームページです。
トレンドを押さえたシンプルなラインアートが効果的に配置されており、薄いピンク色と相まってとても可愛いですね。
キャッチコピーとリードテキストのジャンプ率が心地よく、言葉の意味がすっと入ってきます。読みやすいサイトです。

　

可愛い・明るい・ポップ系

■ねこ松

千葉県松戸市にある猫専門ペットシッターのホームページ

ねこ松

ポップなフォントやワンポイントイラスト、画像の形を猫のシルエットに切り取るといった、可愛らしさに重点を置いた工夫が明るい印象を与えているホームページです。
ユーザー側に対する問いかけや事業の特徴紹介をよく練った上で端的に配置することで、ペットシッターについてあまり知らない層にも内容を分かりやすく、楽しく伝えています。

　

■保護猫カフェ285（ニヤゴ）

三重県津市にある保護猫カフェのホームページ

保護猫カフェ285

淡いパステルカラー系をメインに、斜めストライプやワンポイントイラストがそれぞれカラフルに散りばめられ、キュートな印象を与えているホームページです。
色は多く使えば使うほどデザインの舵取りが難しくなるものですが、こちらのサイトでは要素ごとの区切りを意識した配色を行い、可愛らしいビジュアルやコンテンツのトーンを揃えることでまとまりを出しています。バランスの取り方が絶妙です。

　

おしゃれ系

■ねこねこ食パン

日本全国にて展開されている高級食パン専門店のホームページ

ねこねこ食パン

食品を推す系のサイトでは、商品にしっかり目がいくように配色と写真の配置を行う必要があります。こちらはそのバランスの取り方について非常に勉強になるホームページです。
にゃんともおいしい高級食パンをコンセプトに、落ち着いた配色で食パンを引き立てています。雑味のない、ミルキーなやわらかいサイトカラーがおしゃれです。

　

■RINN

猫の健康をサポートする商品の企画・デザイン会社のホームページ

RINN

メリハリのある文字の使用や、縦横のグリッド（デザインのブロックライン）を壊して動きを出すといった雑誌風の工夫がスタイリッシュな印象を与えるホームページです。
クオリティの高い写真素材とおしゃれなレイアウトはWEBデザインにおいて非常に重要な要素ですが、こちらはそれを目視で実際に体感できるサイトだと思います。ねこおしゃんてぃかわいい…

　

シンプル系

■Tokyo Cat Specialists

東京都港区にある猫専門病院のホームページ

Tokyo Cat Specialists

ファーストビューのすぐ下に、病院や診療に関するそれぞれの情報と詳しく見るリンクが非常に分かりやすく設置されているホームページです。困りごとがあってサイトを訪れたユーザーに対して、今見たいと思う情報を分かりやすく提供する。これをデザイン時に丁寧に心掛けることで、この病院で診てもらえたら安心だという印象を与えることができます。
シンプルな色味やフォントで情報をすっきりとまとめつつ、リンクボタンには印象的な動きを付けることでメリハリを付け、目を惹いています。細かいところまで気配りが行き届いている、美しいサイトです。

　

ランディングページ系

■PETKISS（ペットキッス）

ライオン商事株式会社様が運営されている、ねこ用歯みがきおやつ紹介ホームページ

PETKISS

手書き風のあしらいやストライプ、水玉などを効果的に使用した、見ている人を楽しい気持ちにさせるランディングページです。
ランディングページは、ユーザーの足を止めるためのインパクトを追うことはもちろん大切なのですが、まずゴールとターゲットを明確にしてからコンテンツごとの区切りをはっきりとさせ、ユーザーが簡単に情報を受け取れる環境を作るのが大前提としてあります。
こちらのサイトは商品説明の配置に様々な工夫がされており、可愛いと見やすさが良いバランスで同居しています。

　

■Qoobo（クーボ）

ユカイ工学様が開発・販売されている、クッション型セラピーロボット紹介ホームページ

Qoobo

商品を引き立たせるために計算して配置された、わかりやすくてシンプルなデザインが持ち味のランディングページです。
伝えたい要素が多すぎて、逆にわかりにくくなってしまうランディングページデザイン…あるあるです。こちらのサイトのように、写真とイラストのバランスを上手く取り、情報を明確にまとめることはとても大切です。

　

おまけ

最後に、デザイン参考とは少し毛色の違うサイトを紹介します。

■うちのこメーカー

株式会社GRIT様が運営されている、猫イラストを無料・簡単に作成できるWEBサービス

うちのこメーカー

パーツを選択していくだけで、自分の愛猫のイラストが簡単に作れるWEBサービスです。イラストを生成するだけでなく、なんとそのイラストで自分だけのグッズを作成することもできます。
生成パターンは2億パターン（！？）以上！絵が描けない人でも可愛いうちのこイラストが手軽に作れるのはすごいですね。シンプルかつ統一感のあるラインアートは昨今のトレンドをしっかりと押さえています。とっても可愛いです！

　

　

いかがでしたでしょうか。

8月31日に限らず、モノづくりをしているとどこまでもついて回ってクリエイターに襲い掛かってくる謎の焦燥感。適度なプレッシャーであれば製作者にいい影響を与えてくれることもありますが、過度なプレッシャーはメンタルに響いて重大なミスなどの原因になってしまうので非常に厄介です。

当記事の可愛いねこオーラで、メンタルを良い方向に連れて行くお手伝いができていれば幸いです。