参考にしたい!おしゃれなモノトーンサイト10選

webサービス

アーティストなら、必ずあこがれたことのあるサイトデザイン。それが、モノトーンサイト。しかし「白・黒」というシンプルな配色は、ちょっと油断するだけで、ダサくなってしまうんですよ。

というわけで今回は、モノトーンでブランディング中のサウンドアーティストのサウンドオルビス(soundorbis)が、アーティスト向けにおしゃれなモノトーンサイトをご紹介します。

アーティスティックなモノトーンサイト15選

アーティスティックなモノトーンサイト。気持ち穏やかに、探してきました。直感的に素晴らしいサイト。参考にしたいポイントを、コメントで添えています。モノトーンサイトづくりの参考にしてください。

1.SHIROKURO.inc.

Mono shirokuroinc

リンクURL:http://shirokuro-inc.co.jp

サイト名も、白黒。まさに、モノトーンのためにあるサイトデザインです。すべての要素が、最高水準でまとまっています。

参考になるポイント
  • スクロールに合わせて、モノクロの画像がフェードイン
  • 色を使うのは、画像のみ
  • 徹底的に、白黒にこだわっている
  • ページ移動の白黒も、気持ちいい

2.合同会社 ならのき撮影所

Mono naranoki

リンクURL:http://naranoki.co.jp

大阪のデザイン事務所・制作会社のウェブサイト。まるで美術館の個展に迷い込んだ感覚、不思議と心地がいいです。

参考になるポイント
  • 個性的。幾何学模様で、動きを出している。
  • 縦書きの日本語フォント
  • 色を出すのは、写真だけ。
  • 無駄なテキストは、一切ない。
  • 常にコンタクトボタンが、スクロール追従。
  • 無駄の一切を排除したデザイン。

3.ブランディングカンパニー SINCE.

Mono since

リンク元URL:https://since2018.jp

ブランド・メディア開発の会社のウェブサイト。ついつい書店で手に取りたくなる雑誌のように、見ているだけでステータスアップする感じがしました。参考にしたいです。

参考になるポイント
  • ブランディングを考えるサイトデザインが学べる
  • モノトーンサイトのフォントサイズが参考になる
  • ブランディングも学べちゃう
  • 方眼紙のような線が、目線の動きを困らせない
  • 3色目のゴールドが、いい味出してる。
  • 右上のお問い合わせボタンが、すごく目に入って連絡したくなる。

4.広告会社 北日本広告社 |企画、デザイン制作、WEB広告|札幌、釧路、旭川

Mono kitanippon

リンクURL:http://www.ad-kitanihon.co.jp

企画、デザイン制作、WEB広告のウェブサイト。このモノトーンサイトは、見ていて飽きません。白黒なのに冷たい感じもなく、むしろ温かみを感じます。人を感じるモノトーンサイトです。参考にしたい。

参考になるポイント
  • 動画を取り入れる手法
  • テキスト一杯でも、邪魔に感じない
  • スクロールするたび流星のようにながれるラインが、美しい
  • スクロールする楽しみがある
  • 右下に出てくるラインが、常にアニメーションしてる。
  • 使用画像も、モノトーン風で統一感がある
  • 白黒のページ送りが、癖になる。

5.Mimicry Design

Mono Mimicry Design

リンクURL:https://mimicrydesign.co.jp

企業や地域の課題を解決する「ワークショップ」を、主に扱う会社のウェブサイト。ミミクリデザインさんのサイトは、心地がいい。モノトーンなのに、すごく読みやすい。どこに目をやればいいのか、迷うこともない。あたたかい。すごく、参考になります。

参考になるポイント
  • カーソルが、心地いい。ドット→リンクを押す場所でドットがおおきくなる。
  • タイトル、見出し、本文の使い分けが参考になる。
  • ブロック要素で動き、背景と速度を変えているので、立体感がある。
  • グレイの背景に、白文字の使い方が斬新。
  • やっぱり、色を使うときは画像のみ。
  • 画像は、カーソルを合わせるとカラーになる。
  • 文章が多くても、おしゃれな配置が学べる。

6.KARIMOKU CAT – カリモクの猫用木製家具

Mono KARIMOKUCAT

リンクURL:https://karimoku-cat.jp/ja/

木製家具メーカー「カリモク」と、猫の健康をサポートする商品をデザインするRINNが立ち上げたブランドのサイト。ムダなくおしゃれ。ある種のモノトーンサイトの完成形だと思いました。ブロックと写真、テキストのスクロールでの動かし方。参考になります!

参考になるポイント
  • コンセプトの猫と、モノトーンがあっている。
  • 色を出すのは、画像だけ
  • フォントが読みやすい
  • ページ移動のアニメーションが心地いい
  • 何をユーザーに見せたいのか、はっきりしている
  • モノトーンのECでも、安心感があって買いたくなる
  • 3ヶ国語対応。英語版が、めちゃおしゃれで、かっこいい!

スポンサーリンク


7.KUROKAWA WONDERLAND

KUROKAWA WONDERLAND

リンクURL:https://kurokawawonderland.jp/

黒川温泉郷が、海外へ向けた合同自主制作プロジェクトのサイト。すごくアーティスティックな雰囲気にあふれております。モノトーンのサイトと、映像作品とサイトの融合が参考になる。サウンドアーティストとして、外せないモノトーンサイトです。

参考になるポイント
  • アーティスティックな雰囲気を学べる
  • 洗礼された動きのあるサイト
  • YouTube動画とサイトが融合しており、
  • ずっと滞在していたい。引き込まれる。
  • もはやサイト自体が、作品。
  • ページごとに、BGMが異なり、ワクワク感がある。
  • 百聞は一見に如かず!

8.Spintank

Spintank mono

リンクURL:https://www.spintank.fr

「spintank」は、フランスのパリにある広報事務所のホームページです。スクロールによりめまぐるしく変わるアニメーションと、演出が特徴的です。

参考になるポイント
  • スクロールするごとの演出がステキ
  • ポインタに合わせて、背景が動く
  • 差し色のイエローの使い方が、うまい。
  • フォントサイズが大きくても、おしゃれ
  • 写真の並べ方のセンスが、勉強になる。
  • 細かいところで、読者を思って作られている。

9.MUGEN MUSOU

Mugenmusou hp

リンクURL:http://mugenmusou.com/

「MUGEN MUSOU」は、オリジナルけん玉やメイクブラシの軸を製作・販売する会社のホームページです。究極的なモノトーンの真髄を味わうことができます。

参考になるポイント
  • 色を出すのは、製品画像のみ
  • テキストはモノトーンで統一している
  • 日本語・英語サイトのデザイン比較ができる
  • モノトーンサイトに合わせて、撮影された写真
  • 究極的なこだわりという感想です

10.COMP

Comp hp

リンクURL:http://mugenmusou.com/

「COMP」は、完全バランス栄養食 COMP のホームページです。モノトーンな雰囲気と、近未来的な商品のコンセプトがガチッとハマっています。

参考になるポイント
  • 未来感とモノトーンのハイセンス感
  • 動的な商品の見せ方
  • 黒いラインの使い方、動かし方
  • 様々なグレーの配色
  • クリエイターやアーティストが好む、マーケティングがわかる
  • 画像はカーソルが乗った時に、カラーにする
  • 商品が、モノトーンのおかげで際立っている

おしゃれに決める!モノトーンのコツとは?

無駄を排除すること

ですね。モノトーンの参考サイトすべてにいえることですが、無駄を徹底的に排除している感じがあります。迷いを感じないんですよね、サイトデザインから。

サイトデザインって、伝えたいことがたくさんあるから、情報を盛り過ぎてしまうんですよ。わたしは何度も経験してきました。その度に、自分で作ったサイト…ダサくなるんですよね。

無駄を排除することが、まず大切なんだと思いました。

白と黒だけじゃ、飽きてしまう

白黒とはいえ、差し色は必要です!

参考にしたいサイトを分析していると、画像や写真で色をだす傾向がありました。

モノトーンであることは、目立たせたい時に色を使うことで、見ている人を驚かせることができます。逆に、白と黒だけでは、見ている人が飽きてしまう気がします。

自分でノトーンブランディングする場合も、白黒だけじゃなくて、見てくれる人を飽きさせない工夫の必要性を感じましたね。

ブランディングに、必要なものとは?

信念を持つこと

ってことも、モノトーン参考サイトを調べながら、感じました。ブレていないんですよ。

たとえば、文字や背景で、白と黒以外は使わない。使うなら、配色パターンとして取り入れる。画像も、カラーにするときは、ここぞというタイミング。のような感じですね。

モノトーンって自分で作るとわかりますが、飽きてくるんですよ。色を使えば、一瞬で魅せるサイトが作れます。白黒だけだと、ごまかしが効かないんです。

モノトーンサイトを作るときには、信念を持ってブレずに作る。自分への戒めに、ちゃんと心に刻もうと思います。

まとめ

今回は「参考にしたい!おしゃれなモノトーンサイト5選」を、ご紹介しました。参考になるポイントを見ながら、ぜひあなたのウェブサイト作りにも役立ててみてください。

やはりプロの作るモノトーンサイト、スゴイかったですね。今後も参考になるモノトーンサイト、追加していきますのでお楽しみに!

記事へのお問い合わせ

サウンドオルビス

926,894 views

あなたの問題を解決するために、情報発信をしています。悩みからの解放宣言。「音楽」「テクノロジー」が得意分野です。

プロフィール
  1. この記事へのコメントはありません。