basics

Webデザイン参考サイトを見すぎる「罠」。あなたのデザインが「量産型」になる理由

「Webデザイン 参考」サイトが「個性」を殺す

「Webデザイン 参考」ギャラリーサイトは、インスピレーションの宝庫です。
しかし、これらを見すぎる（頼りすぎる）ことには、大きな「罠」があります。

それは、**あなたの「独自のデザイン」が死に、「流行りの量産型デザイン」になってしまう**ことです。

ギャラリーサイトに載っているのは、どれも「おしゃれ」で「今風」のデザインです。
それらを「参考」にしすぎると、無意識のうちに「流行」に引っ張られ、「どこかで見たような」デザインが出来上がってしまいます。

「Webデザイン 参考」サイトは、「正解」ではなく、あくまで「他人の答え」に過ぎません。

「参考」の前に「戦略（核）」があるか？

なぜ「量産型」になってしまうのか？
それは、「自社の『核』（＝ブランディング）」が決まる前に、「参考（＝デザイン）」を見てしまうからです。

「Webデザイン 参考」サイトを見る前に、まず「自社が『誰に』『何を』伝えたいか」という「戦略（核）」を固めなければなりません。
「核」さえ決まれば、デザインは「流行」ではなく、「核」に基づいて「論理的に」決まります。

• 戦略（核）がない場合:

  「今風の、おしゃれな感じで」（→量産型デザインへ）

• 戦略（核）がある場合:

  「ターゲット（60代男性）に『信頼感』を伝えるため、流行を追わず、文字を大きく、青を基調にしよう」（→独自のデザインへ）

「Webデザイン 参考」から「インスピレーション」を得る方法

では、「参考」サイトは見るべきではないのでしょうか？
いいえ、U-MAは「インスピレーション源」として、あえて「Webデザイン以外の分野」を参考にすることを推奨します。

• 雑誌のレイアウト
• 映画のポスターの色使い
• 建築物の構造美
• 美術館の展示（UI/UX）

「Webデザイン 参考」サイト（Web業界）の中だけでインスピレーションを探していると、デザインは「内輪受け」になり、均質化します。
「業界の外」にある「本物の美意識」に触れることが、「量産型」を脱する鍵です。

U-MA（ウーマ）は「核」からデザインします

私たちウーマ（U-MA）は、「Webデザイン 参考」サイトを見る前に、まずクライアントの「核（ブランディング）」を定義します。
U-MAのデザインは、「流行」から作るのではなく、クライアントの「独自の価値」から作られます。
だから、U-MAのデザインは「量産型」になりません。

「Webデザイン 参考」サイトを見ても、自社に合うデザインが分からない。
「流行り」ではなく、「自社らしさ」を表現したい。
そうお考えなら、ぜひU-MA（渋谷）にご相談ください。
「参考」サイトには載っていない、「あなたの会社だけの正解」を一緒に見つけます。

by U-MA web master

Webデザイン参考ギャラリーサイト6選。U-MAのデザイナーが使う「分析」の視点

「Webデザイン 参考」ギャラリーサイト6選

「Webデザイン 参考」を探すとき、Webデザイナーが日常的にチェックしている、高品質なギャラリーサイト（まとめサイト）を紹介します。

1. SANKOU!

   日本のWebデザイン参考サイトの定番。業種、色、テイスト、レイアウトなど、検索性が非常に高いのが特徴です。

2. I/O 3000

   国内外の「イケてる」サイトを厳選。特に、動き（アニメーション）や技術的に優れたサイトが多く、インスピレーションを受けます。

3. MUUUU.ORG

   縦長のレイアウトに特化。情報量が多いサイト（コーポレートサイト、採用サイトなど）のデザインを探すのに便利です。

4. Awwwards

   世界中のクリエイティブなWebデザインが集まる、権威あるアワードサイト。デザインの「流行」を知るならここです。ただし、デザインが「アート」寄りで、ビジネスの「成果」とは直結しないものも多いので注意。

5. Pinterest

   Webサイトだけでなく、ロゴ、バナー、UIパーツなど、あらゆる「Webデザイン 参考」をビジュアルで探せる最強のツールです。

6. Parts.

   Webサイト全体ではなく、「ヘッダー」「フッター」「ボタン」など、「パーツ」ごとにデザインの参考を探せるサイト。細かいUIデザインに迷ったらここです。

U-MA（ウーマ）流：「Webデザイン 参考」サイトの「使い方」

私たちウーマ（U-MA）のデザイナーも、もちろんこれらの「Webデザイン 参考」サイトを日常的にチェックしています。
しかし、その「使い方」が少し違います。

U-MAのデザイナーは、「おしゃれなデザイン」を探すためにギャラリーを見るのではありません。
クライアントの「課題」をヒアリングした後、その課題を解決するための「戦略（例：信頼感を伝える）」を立て、その**「戦略」を「ビジュアル」に翻訳するヒント**として、参考サイトを見ます。

「このサイトは、なぜ『青色』を使っている？ → 信頼感を伝えるためだ」
「このサイトは、なぜ『写真』が大きい？ → 製品のシズル感を伝えるためだ」

このように、「Webデザイン 参考」サイトを「戦略の答え合わせ」として使うのです。

「参考」の先にある「U-MAのデザイン」

「Webデザイン 参考」サイトは、あくまで「過去の事例」です。
U-MAの仕事は、参考サイトを「真似る」ことではなく、クライアントの「独自の価値」に基づいた、**「世界に一つの正解（デザイン）」**を新しく生み出すことです。

「参考サイトは見た。でも、ウチの会社にどう活かせばいいか分からない」
そうお悩みなら、ぜひU-MA（渋谷）にご相談ください。
「参考」を超える、「あなたの会社だけのデザイン」をご提案します。

by U-MA web master

Webデザイン参考の「集め方」。U-MA流「自分だけの最強スワイプファイル」の作り方

「Webデザイン 参考」、集めっぱなしになっていませんか？

「Webデザイン 参考」サイトをブックマークして、フォルダが「おしゃれなサイト」でパンパン。
...しかし、いざデザインを始めようとすると、「どれを参考にすればいいか分からない」「あのデザイン、どこだっけ？」と、結局使えない。

これは、「Webデザイン 参考」を集める目的が「インスピレーション（感覚）」になってしまっているからです。
参考サイトは「集める」のではなく、「分類（ファイリング）」して初めて「武器（スワイプファイル）」になります。

「Webデザイン 参考」を「武器」に変える分類法

「Webデザイン 参考」を集める際は、「なぜ、これが良いと思ったか？」という「理由」で分類します。
U-MAのデザイナーが実践する「スワイプファイル（参考集）」の分類例です。

• フォルダ1：UI（パーツ）
  • 「ヘッダー（グローバルナビ）」の優れた事例
  • 「ボタン（押したくなる）」の優れた事例
  • 「フォーム（入力しやすい）」の優れた事例
• フォルダ2：レイアウト・構造
  • 「グリッドが美しい」事例
  • 「スマホ（レスポンシブ）で秀逸な」事例
  • 「情報量が多いのに、見やすい」事例
• フォルダ3：世界観・コピー
  • 「写真（ビジュアル）が刺さる」事例
  • 「コピー（言葉）が響く」事例
  • 「色使いが絶妙（ブランディング）」な事例

このように、「なぜ」で分類しておけば、「ボタンのデザインに迷った」→「フォルダ1」を見る、「コピーが書けない」→「フォルダ3」を見る、と、すぐに「答え」を引き出せる「武器」になります。

U-MA（ウーマ）は「戦略」で分類する

私たちウーマ（U-MA）のデザイナーは、もう一歩踏み込んで、「戦略」で分類します。
「Webデザイン 参考」サイトを見つけたら、「このサイトの『戦略（目的）』は何か？」を仮説立てします。

• 「このサイトは、『採用』が目的なのに、あえて『社員の笑顔』を使わず、『厳しい表情』を使っている。なぜだ？ → 『プロ意識』というブランディングか」
• 「このサイトは、『購入』が目的なのに、あえて『価格』を小さく見せている。なぜだ？ → 『高級感』というブランディングか」

U-MAは、「Webデザイン 参考」サイトを「デザイン（見た目）」ではなく、「戦略（思考）」を学ぶための「教材」として分析しています。

「Webデザイン 参考」サイトを「武器」や「教材」に変えたい。
そんな「戦略的思考」を学びたいデザイナーは、ぜひU-MA（渋谷）の門を叩いてみてください。

by U-MA web master

【事例】Webデザインの参考サイトで見るべきは「見た目」ではなく「戦略」

「Webデザイン 参考」サイト、どう見ていますか？

「Webデザイン 参考」と検索して、ギャラリーサイト（SANKOU!、I/O 3000など）を眺め、「おしゃれだな」で終わっていませんか？
Webデザインの「参考」サイトを見る目的が「インスピレーション」だけなら、それは時間の無駄かもしれません。

プロのWebデザイナー、あるいは「成果の出る」サイトを発注したい経営者が「Webデザイン 参考」サイトで見るべきは、「見た目（ビジュアル）」ではなく、その裏にある**「戦略（ビジネス課題）」**です。

「参考」サイトで分析すべき3つの戦略

「Webデザイン 参考」サイトを「教材」に変えるために、以下の3つの視点で「なぜ、このデザインなのか？」を分析しましょう。

1. 1. 目的（ゴール）は何か？

   このサイトの「目的」は何か？（例：商品の「購入」か？ 会社の「ブランディング（認知）」か？「採用」か？）
   その「ゴール」への導線（CTAボタン）は、明確で押しやすいか？

2. 2. ターゲットは誰か？

   「誰に」向けたデザインか？（例：BtoBの堅い業種か？ 10代女性向けか？）
   そのターゲットに合わせた「世界観（フォント、色使い）」になっているか？

3. 3. 差別化ポイントは何か？

   競合他社ではなく、「この会社」を選ぶ理由が、ファーストビュー（最初に表示される画面）で伝わるか？
   「強み」が「伝わる言葉」で表現されているか？

「Webデザイン 参考」とは、「見た目」をコピーすることではなく、この「思考プロセス」を学ぶことです。

U-MA（ウーマ）が「Webデザイン 参考」で重視すること

私たちウーマ（U-MA）が「Webデザイン 参考」サイトを見る時、最も重視するのは「3. 差別化ポイント」です。
それは、U-MAが「ブランディング」に強いデザイン事務所だからです。

U-MAは、クライアントの「独自の価値（＝差別化ポイント）」を定義し、それを「Webデザイン」という「形」に翻訳することを仕事にしています。
そのため、U-MAにとって「Webデザイン 参考」サイトは、「インスピレーション」を得るためではなく、「競合が何を言っているか」「どう差別化すべきか」を分析するための「市場調査」の場でもあります。

「おしゃれな参考サイトは見た。でも、ウチの会社にどう活かせばいいか分からない」
そうお悩みなら、ぜひU-MA（渋谷）にご相談ください。
U-MAが、あなたの会社の「戦略」を「成果の出るデザイン」に落とし込みます。

by U-MA web master

デザイン事務所とWeb制作会社、あなたの依頼に合うのはどっち？

得意領域で比較する

「デザイン事務所とは」という問いの答えは、依頼先選びに直結します。
あなたの目的によって、選ぶべきパートナーは変わります。

• デザイン事務所がおすすめな人:
  • 会社の「顔」となるロゴや名刺を作りたい
  • Webもパンフレットも統一感（トンマナ）を持たせたい
  • 「ブランディング」から相談したい
• Web制作会社がおすすめな人:
  • ECサイトや予約システムなど、「機能」が複雑なWebサイトが欲しい
  • デザインは既に決まっており、「構築（コーディング）」を正確に行ってほしい

「デザイン事務所とは」U-MAの答え

多くのWeb制作会社が「作る」ことをゴールにする一方、多くのデザイン事務所は「伝える」ことをゴールにします。

私たちウーマ（U-MA）は、デザイン事務所として「伝える」ことはもちろん、その先にある「ビジネスの成果」をゴールとしています。
Webサイトもロゴも、成果を出すための「戦略的ツール」です。

もしあなたが「ただ作る」のではなく、「成果の出るデザイン」をお探しなら、私たちにご相談ください。

by U-MA web master

【超入門】Webデザインの「UI」と「UX」の違いとは？わかりやすく解説

「Webデザインとは」＝「UI」と「UX」である

「Webデザインとは」何かを理解する上で、絶対に欠かせない2つの言葉があります。
それが「UI」と「UX」です。

この2つの違いを理解することが、「成果の出る」Webデザインの第一歩です。

「UI」とは？（User Interface）

「UI」とは「User Interface（ユーザーインターフェース）」の略です。
日本語に訳すと**「接点」**となります。

Webデザインにおける「UI」とは、ユーザーが「目にするもの・触れるもの」すべてを指します。

• ボタンのデザイン
• 文字のフォントや大きさ
• レイアウト（どこに何があるか）
• 写真やイラスト

「UIデザイン」とは、「見やすく、押しやすく、迷わない」ように、これらの「見た目」を整えることです。

「UX」とは？（User Experience）

「UX」とは「User Experience（ユーザーエクスペリエンス）」の略です。
日本語に訳すと**「体験」**となります。

Webデザインにおける「UX」とは、ユーザーがそのサイトを「訪れてから、去るまで」の**「一連の体験（ジャーニー）」**全体を指します。

• サイトが「快適」に表示された（表示速度）
• 情報が「スムーズ」に見つかった（情報設計）
• ボタンが「迷わず」押せた（UI）
• 問い合わせフォームが「簡単」だった（EFO）
• 「目的」が達成できて「満足」した

「UXデザイン」とは、「UI」も含めたこれら全ての「体験」を、ユーザーにとって「最高のもの」にするための**「おもてなしの設計」**です。

「UI」と「UX」の関係

「UX」という「大きな目的（快適な体験）」を達成するために、「UI」という「具体的な手段（見やすいボタン）」が存在します。

例えば、「UI」は良い（＝ボタンはおしゃれ）だが、「UX」が悪い（＝どこにボタンがあるか分からない）サイトは、最悪です。
「Webデザインとは」この「UI」と「UX」の両方を、ビジネスの目的に合わせて最適化することなのです。

U-MA（ウーマ）は「UX」からデザインします

「Webデザインとは」を「UI（見た目）」としか捉えていない制作会社は、おしゃれなだけの「使えない」サイトを作りがちです。

私たちウーマ（U-MA）は、「Webデザインとは『UX（体験）』である」と考えます。
U-MAは、クライアントの「ビジネス課題」と、ユーザーの「目的」を両立させる「UX（体験）」をまず設計し、それを実現する「最適（U-MA）なUI（見た目）」をご提案します。

「見た目」だけでなく「体験」からWebデザインを設計したい。
そうお考えなら、ぜひU-MA（渋谷）の「UXデザイン」にご相談ください。

by U-MA web master

Webデザインとは「コミュニケーション」である。U-MAが教える「伝わる」設計術

「Webデザインとは」＝「おもてなし」である

「Webデザインとは」と聞かれると、「見た目を飾る」ことだと誤解されがちです。
しかし、U-MA（ウーマ）は、「Webデザインとは『コミュニケーション（おもてなし）』である」と考えています。

あなたが友人を家に招くとき、どうしますか？
「玄関で迷わないか？」「部屋は快適か？」「飲み物は何か好きか？」
と、「相手（友人）」のことを第一に考えて「おもてなし」を設計しますよね。

Webデザインも同じです。
「訪問者（お客様）」が、「迷わず（使いやすく）」「快適に（見やすく）」「目的（情報）を達成できる」ように、**「おもてなしの設計図」**を作ること。
それこそが「Webデザインとは」の答えです。

「伝わらない」Webデザインの共通点

「Webデザインとは」を「おもてなし」だと理解していないサイトは、訪問者に「不親切」です。

• 独りよがりなデザイン:

  「カッコいい」を優先するあまり、ボタンがどこにあるか分からない。これは「自己満足」です。

• 情報が整理されていない:

  「会社が言いたいこと」が、整理されずに詰め込まれている。これは「押し付け」です。

• ターゲットを無視している:

  シニア向けなのに、文字が小さすぎる。これは「配慮不足」です。

「おもてなし」の心がないデザインは、訪問者にストレスを与え、二度と来てもらえなくなります。

U-MAが実践する「伝わる」Webデザインの技術

では、U-MAはどうやって「おもてなし（＝伝わるWebデザイン）」を設計しているのでしょうか。

1. 1.「ペルソナ」設定:

   「誰」をおもてなしするのか？（＝理想の顧客像）を明確に定義します。

2. 2.「UX（ユーザー体験）」の設計:

   ペルソナが「快適」に「目的」を達成できる「動線（情報の流れ）」を設計します。

3. 3.「UI（ビジュアル）」のデザイン:

   UXに基づき、「見やすく」「迷わず」「世界観が伝わる」ビジュアル（色、フォント、レイアウト）に落とし込みます。

「Webデザインとは」、この「ペルソナ → UX → UI」という「おもてなしの設計プロセス」そのものなのです。

U-MA（ウーマ）は「伝わる」をデザインします

私たちウーマ（U-MA）は、「Webデザインとは『ブランディング（企業の核）』を『おもてなし（コミュニケーション）』に翻訳すること」だと考えています。

あなたの会社の「価値」を、訪問者（お客様）に「最も快適な形」で届ける。
U-MAは、その「翻訳者」であり「おもてなしの設計士」です。

「Webサイトはあるけど、何も伝わっていない気がする」
「訪問者に『不親切』なサイトになってしまっている」

そうお悩みなら、ぜひU-MA（渋谷）にご相談ください。
あなたの「想い」が「伝わる」Webデザインを、ゼロから設計します。

by U-MA web master

【初心者向け】Webデザインとは？ただの「見た目」ではない、その本当の仕事内容

「Webデザインとは」＝「家の設計図」である

「Webデザインとは」と聞くと、多くの人が「Webサイトの見た目（ビジュアル）をきれいに飾ること」を想像します。
しかし、それはWebデザインの仕事の「ごく一部」に過ぎません。

Webデザインとは、**「ビジネスの目的を達成するための『設計図』を作ること」**です。
家を建てる時、いきなり「壁紙の色」から決めませんよね？
「何人家族（ターゲット）が、どう暮らす（目的）か」を考え、「動線（使いやすさ）」や「構造（安全性）」を設計し、最後に「内装（見た目）」を決めます。

Webデザインも全く同じです。
「誰に（ターゲット）」「何を伝え（目的）」「どう行動してもらう（コンバージョン）」かを設計（デザイン）し、その「手段」として、最適な「見た目」や「レイアウト」を決定するのです。

Webデザインの主な仕事内容

「Webデザインとは」具体的にどんな仕事を含むのか、その流れを見てみましょう。

1. 1. 目的の定義（ヒアリング）

   クライアントが「なぜ」Webサイトを作りたいのか（売上UP？ 採用？）、本当の課題を引き出します。

2. 2. 戦略・設計（IA・ワイヤーフレーム）

   「誰に」「何を」伝えるか、サイトの全体像（サイトマップ）や、各ページの「設計図（ワイヤーフレーム）」を作成します。

3. 3. ビジュアルデザイン（見た目）

   ここで初めて「見た目」の登場です。戦略に基づき、ロゴ、色、フォント、写真などを選び、デザインカンプ（完成見本）を作成します。

4. 4. 実装（コーディング）

   デザインカンプを、Webブラウザで見られるようにHTMLやCSSなどのコードに落とし込みます。（※この工程は「コーダー」が分担することも多い）

「Webデザインとは」という言葉は、この1〜4（特に2と3）を指す、非常に「戦略的」な仕事なのです。

U-MA（ウーマ）が考える「Webデザイン」

「Webデザインとは」という問いに対し、私たちウーマ（U-MA）は、**「ブランディング（企業の核）を、Webという場で翻訳すること」**とお答えしています。

多くのWeb制作会社が「3. ビジュアル」や「4. 実装」から仕事を始めがちですが、U-MAは違います。
U-MAは、必ず「1. 目的の定義」と、そのさらに手前にある「御社の『らしさ』とは何か？（＝ブランディング）」から始めます。

なぜなら、「核」のないWebサイトは、いくら「おしゃれ」でも「成果（売上や採用）」に繋がらない「置物」になってしまうからです。

U-MAは、「戦略（ブランディング）」と「設計（Webデザイン）」を一気通貫で行います。
「ただ作る」のではなく、「成果の出る」Webデザインをお求めなら、ぜひU-MA（渋谷）にご相談ください。

by U-MA web master

【今さら聞けない】デザイン事務所とは？広告代理店や制作会社との違いを解説

「デザイン事務所」の主な仕事内容

「デザイン事務所とは」と聞かれると、具体的に何をするところか曖昧な方も多いでしょう。
デザイン事務所は、クライアントの課題を「デザイン」という手段で解決する専門家集団です。
ロゴ、パンフレット、Webサイトなど、ビジュアルコミュニケーション全般を担当します。

広告代理店・制作会社との決定的な違い

よく混同されるのが「広告代理店」や「Web制作会社」です。

• 広告代理店: 総合的な戦略（TVCM、広告枠の買い付けなど）がメイン。デザインは外部（デザイン事務所）に発注することも多い。
• Web制作会社: Webサイトの「構築（コーディング）」がメイン。デザインも行うが、事務所に比べ「設計・構築」の側面が強い。
• デザイン事務所: 「ビジュアル（見た目）」と「概念（ブランディング）」の構築が最も得意。

U-MA（ウーマ）は「ブランディング」に強み

デザイン事務所の中でも、得意領域は様々です。
私たちウーマ（U-MA）は、「デザイン事務所とは」という問いに対し、「クライアントの『らしさ』を見つけ、育てる場所」とお答えしています。

単にカッコいいものを作るのではなく、企業の核となる「ブランディング」から伴走し、ロゴやWebサイトという形に落とし込みます。
「会社の価値をどう伝えたらいいか」とお悩みなら、ぜひU-MAにご相談ください。

by U-MA web master