【UI/UX】デザインの参考はどこで探す？｜海外好きが使っている4つの入口

最近は、AIでポンと出したようなデザインを見かけることが増えましたよね。 手軽で便利なのは間違いないのですが、どれも似た雰囲気に見えてしまうことも少なくありません。

本当に良いデザインをつくるには、人が考えて作り込んだ良いものを、たくさん見ることが大事だと私は思っています。

実際、画面を考えるとき、白紙からいきなり描き始めることってほとんどないですよね。 まずは「似たような画面、ほかの人はどう作ってる？」を見に行くところから始まります。

ただ、参考サイトって探せばいくらでも出てくるので、どこを見ればいいのかで迷いがちです。 この記事では、私がふだん使っている入口と、それぞれの使い分けを紹介します。

ちなみに私は海外の事例を見るのが好きなので、ちょっと海外寄りのラインナップになっています。

そもそも、なんで参考を探すのか

「真似するため」と思われがちですが、目的はちょっと違います。 私が参考を見る理由は、大きく2つです。

• 引き出しを増やすため：自分の頭の中だけだと、どうしても同じようなレイアウトばかりになります
• 使いやすさの「当たり前」を確かめるため：ボタンの位置やメニューの開き方は、ユーザーが慣れている形に合わせたほうが迷わせません

前者は「見た目のアイデア」、後者は「使い勝手の答え合わせ」です。 このどちらを探しているかで、見に行く場所が変わります。

入口① Dribbble｜海外デザイナーの作品を眺める

Dribbbleは、世界中のデザイナーが自分の作品を投稿しているサイトです。 アプリの画面、Webサイト、アイコン、イラストまで、とにかく量があります。

サイト：https://dribbble.com/

海外の作品が中心なので、配色や余白の取り方、写真の使い方が日本のサイトとはひと味違って、見ているだけで楽しいです。 「今回はこういう雰囲気にしたいな」というイメージを固めたいときに見に行きます。

入口② Awwwards｜攻めた海外サイトの見本市

Awwwardsは、Webデザインの賞を選んでいるサイトです。 毎日「Site of the Day」が選ばれていて、受賞したサイトや候補になったサイトをギャラリーとして見られます。

サイト：https://www.awwwards.com/

ここに並ぶのは、3Dや大胆なアニメーションを使った、とにかく攻めているサイトです。 業種や使っている技術で絞り込めるので、「アニメーションの参考がほしい」「建築系のサイトを見たい」といった探し方ができます。

Dribbbleと違って実際に公開されているサイトなので、リンクから本物を触れるのもポイントです。 スクロールしたらどう動くのか、自分の手で確かめられます。

入口③ Mobbin｜実在するアプリの画面を確かめる

Mobbinは、実際にリリースされているアプリやWebサービスの画面を集めたライブラリです。 画面単体だけでなく、会員登録や購入といった一連の画面の流れもまとめて見られます。

サイト：https://mobbin.com/

DribbbleやAwwwardsで見つかるのは、どちらかというと「見た目のアイデア」です。 一方でMobbinは、コンセプト作品ではなく実在するサービスの画面なので、使い勝手の答え合わせに向いています。 「ほかのアプリでは、確認ダイアログをどう出してる？」みたいな、細かいところを調べたいときに便利です。

無料でも見られますが、すべての画面を見るには有料プランが必要です。 まずは無料の範囲で触ってみて、合いそうか確かめるのがおすすめです。

入口④ SANKOU!｜日本向けのサイトで答え合わせ

海外の事例ばかり紹介してきましたが、日本の人に向けたサイトを作るときは、日本のサイトも見ます。 そのときに使うのがSANKOU!です。

サイト：https://sankoudesign.com/

国内のWebサイトを集めたギャラリーで、業種、色、レイアウト、フォントの雰囲気など、絞り込みの切り口がとても細かいのが特徴です。 「医療系で、落ち着いた青のサイト」のような探し方ができます。

海外のサイトで「いいな」と思ったアイデアを、日本語のサイトで使うとどう見えるか。 その答え合わせに使っている感じです。

海外の事例を持ってくるときに気をつけていること

海外のデザインはかっこいいんですが、そのまま日本語のサイトに持ってくると、うまくいかないことがあります。 私が気をつけているのはこの3つです。

① 日本語は、英語より文字が詰まって見える

英語は単語のあいだにすき間があって、文字の形も軽いので、大きな見出しを置いても抜け感が出ます。 同じレイアウトに日本語を入れると、思ったより重たく見えます。 見出しの文字数を減らす、余白を多めに取る、といった調整が必要です。

② 求められる情報量が違う

海外のサイトは、大きな写真とひと言だけ、のような思い切った構成がよくあります。 一方で日本では、料金や会社の情報をしっかり載せてほしいと思う人が多いです。 見た目は海外の事例から、情報の並べ方は日本の事例から、と分けて考えています。

③ 動きは「見せたいもの」のためだけに使う

Awwwardsのサイトを見ていると、つい全部を動かしたくなります。 でも、動きが多いと読み込みが重くなったり、読みたい文章が読めなかったりします。 いちばん伝えたいところにだけ動きを付けるくらいが、ちょうどいいと感じています。

おまけ｜作ったデザインを動きで見せるなら animos

最後に、参考探しとは少し違うのですが、最近使っているツールをひとつ。

animosは、作ったデザインを動きのある動画にして見せられるツールです。 用意されたアニメーションのテンプレートに画像や動画を入れて、ちょっと調整するだけで、MP4などの動画として書き出せます。 ぜんぶブラウザの中で完結するので、ソフトを入れる必要もありません。

サイト：https://animos.app/

静止画を並べるだけだと伝わりにくい雰囲気も、動きが付くとぐっと伝わりやすくなります。 海外のデザイナーの作品紹介みたいな見せ方が手軽にできるのも、海外好きとしてはうれしいところです。

まとめ

使い分けをまとめると、こんな感じです。

• 「見た目のアイデア」と「使い勝手の答え合わせ」で、見る場所を変える
• 海外の事例は、日本語と日本の読み手に合わせて調整してから使う

参考探しは、いろんな作品を見られるのでデザインの仕事の中でも好きな時間です。 ただ、見ているだけで1時間たっていた……ということもあるので、何を探しに来たのかは忘れないようにしています。