sokuhyo（速標）は、商標登録の手続きをWeb上で進められるオンラインサービスのサイトです。白い背景に青を基調とした配色でまとめ、ファーストビューの中央に商標名を入力するフォームを置いている点が大きな特徴です。
本記事では、キャプチャで確認できる画面をもとに、色彩やレイアウト、情報設計、導線の組み立て方を順に分析します。お店の名前や会社ロゴの商標登録をオンラインで検討している方はもちろん、Webサービスのサイトを設計する方にとっても参考になる見本です。
sokuhyo（速標）のサイト概要とデザインの第一印象
sokuhyo（速標）は商標登録の手続きをクラウド上で扱うサービスで、開発と運営は弁理士法人WATTが手がけています。フッターには、運営事務所が徳島県徳島市にあり、日本弁理士会に所属する特許業務法人であることが記されています。サービスの対象は日本国内での商標の出願と登録の手続きで、AIによる事前の調査と弁理士による最終確認を組み合わせた仕組みを打ち出しています。
画面を開いたときの第一印象は、士業の事務所サイトというよりも、アプリやSaaSのサービスサイトに近いものです。角丸のカード、淡いグレーの区切り、アイコン付きのピル型ラベルが整然と並び、手続きの堅さよりも手軽さが先に伝わるトーンに仕上がっています。
ファーストビューは入力フォームを主役に据えた構成
ファーストビューは、訪問者が最初に行う操作をそのまま画面の中心に置いた設計です。上から順にヘッダー、運営体制を示すバッジ、キャッチコピー、入力フォームを積み重ねており、読み進める流れと操作の流れが一致するよう組み立てられています。
告知帯とシンプルなヘッダーで役割を分ける
画面の最上部には、画面幅いっぱいに赤い告知帯が敷かれています。白地が中心の画面の中でこの帯だけが強い赤を使っているため、スクロールする前から自然と目が向く位置づけになっています。
その下のヘッダーは、左にロゴと「弁理士法人WATT 監修」の小さなバッジ、右に「ログイン」のテキストリンクと青い「アカウント作成」ボタンを置いた構成です。グローバルナビゲーションを並べずに項目を最小限へ絞っているため、視線はすぐに中央のコンテンツへ移ります。
バッジを重ねて運営体制を先に伝える
ヘッダーの下には、チェックアイコン付きの白いバッジ、稲妻アイコン付きの紺色のバッジ、データベースのアイコンを添えた淡い青のバッジが2段に分かれて並びます。現役の弁理士法人が開発と運営を担っていること、特許庁のデータと連携したAI判定であることを、文章を読む前にラベルの形で伝える工夫です。
3つのバッジは形をそろえつつ、色と塗り方を少しずつ変えているので単調に見えません。1段目の右側にある紺色のバッジだけが濃い色で塗られており、ラベル群の中にも視線の起点が生まれています。
キャッチコピーとサービス名の見せ方
バッジの下には青い文字のキャッチコピーを置き、その下に大きな太字でサービス名を掲げています。サービス名のうち「sokuhyo」の部分だけを青で表示し、続く説明部分を黒にすることで、名称とサービスの内容をひと目で区別できるようにしています。
サービス名の下には、Webで手続きが完結することを伝える一行を、字間を広めに取ったグレーの文字で添えています。色、サイズ、字間を段階的に変えることで、3行続く見出しにはっきりとした強弱が付いています。
入力フォームを中央のカードにまとめる
ファーストビューの中心には、淡い青の縁取りとやわらかな影をまとった白いカードが配置されています。カードの中には、登録したい商標の名前またはロゴ画像を入れる欄と、商品やサービスの名前を自由に書き込む欄が、番号付きで上下に並んでいます。
1つ目の入力欄には「画像を選択」ボタンが内側に組み込まれており、文字でもロゴでも同じ場所から始められる設計です。2つ目の欄にはソフトウェアやラーメン屋、アパレルといった記入例が薄い文字で示されていて、何を書けばよいか迷わない配慮が見られます。
欄の下には横幅いっぱいの青い判定ボタンがあり、その直前に赤い枠の吹き出し型ラベルを添えてボタンへ視線を誘導しています。ボタンの下には小さな注記と、緑のチェックマークを付けた3つの小さなカードが並び、操作の前に知っておきたい要点を短く整理しています。
フォームのカードの下には、サービスを説明する文章と、概要を箇条書きで並べた白い枠が続きます。ファーストビューで操作を促したあとに、落ち着いて読める説明を置く順番になっている点も参考になります。
配色とタイポグラフィの設計
サイト全体の配色は、白と淡いグレーを土台に、青を主役として赤・紺・オレンジ・緑をアクセントに使い分けています。色ごとの役割がはっきりしているため、要素が多いページでも情報の種類を色で見分けやすくなっています。
青・赤・紺・オレンジの役割分担
青は、アカウント作成ボタンや判定ボタン、各セクションの英字ラベル、本文中の強調語やリンクなど、操作と注目を促す部分に一貫して使われています。赤は最上部の告知帯や特徴カードのラベル、注意を促す文言など、要所の強調に絞って使われています。
紺色はヘッダー下のバッジや手順カードのタグ、フッターの背景に用いられ、画面全体を引き締める役割を担っています。出願までの流れを説明したあとに置かれた「ご利用の流れを詳しく確認」ボタンだけはオレンジで塗られており、青が多い画面の中で次の行動を示す目印として際立っています。
多色のロゴと太字のゴシック体
ロゴは「Sokuhyo」の英字を斜体の太字で描き、1文字ごとに青、ピンク、黄、緑、オレンジといった異なる色を割り当てています。末尾の文字からは流線のような線が後ろへ伸びており、勢いのあるスピード感を形で表現しています。
一方、見出しや本文には癖の少ない太字のゴシック体を用いており、にぎやかなロゴとの対比で画面全体は落ち着いた印象にまとまっています。見出しは黒に近い濃い色、本文はやや明るいグレーで組まれ、読み物の部分と見出しの差が自然に付くよう調整されています。
フッターではロゴを白一色に切り替えて濃紺の背景に載せています。場所に応じてロゴの色数を変えることで、上部ではにぎやかに、下部では控えめに見せる使い分けができています。
英字ラベルと透かし文字でリズムを作る
各セクションの見出しの上には、「FEATURES」「DATABASE」のような青い英字の小見出しや、「FLOW」を白抜きにした青いピル型のラベルが添えられています。和文の大見出しと組み合わせることで、ページを下へ読み進める際に区切りのリズムが生まれています。
手順を説明するカードでは、右上に大きな番号を淡い色の透かしとして敷き、カードの中身を邪魔せずに順番を示しています。見出しの背後に大きな英字を淡く敷いた箇所もあり、装飾を控えめにしながら奥行きを加える手法として参考になります。
カード型レイアウトによる情報設計
ページの中盤以降は、角丸のカードを基本単位として情報を区切るレイアウトで統一されています。カードの並べ方をセクションごとに4列、1列、3列、2列と変えているため、同じ部品を使いながらも単調にならない構成です。
8つのツールを4列のグリッドで一覧化
ツールを紹介するセクションでは、アイコン付きのカードを4列2段のグリッドに並べ、8つのツールを一覧できるようにしています。区分一覧、類似群コードの検索、商標の審決をAIで調べるデータベース、開発者向けのAPI、期限日の計算、知財ニュースなど、商標実務に関わるツールが同じ形式で整理されています。
各カードは、淡い青の角丸の四角にアイコンを収め、その下に太字のタイトルと数行の説明文を置くという共通の構造です。構造をそろえることで、訪問者はタイトルだけを拾い読みしながら目的のツールを探せます。
過去の審決例を調べるセクションでは、2枚のカードの下部に青い文字と矢印を組み合わせたテキストリンクを置いています。カードの中で次に取る行動を短い言葉で示しており、読むだけで終わらせない工夫になっています。
特徴を伝える縦積みのカード
サービスの特徴を紹介するセクションでは、4つの大きなカードを縦に積み、それぞれの左上に赤いピル型のラベルを重ねています。ラベルはカードの枠から少しはみ出す位置に置かれており、立体感と目を引く効果を同時に生み出しています。
カードの中は、青い小見出し、黒の大見出し、区切り線、太字のリード文、グレーの本文という5段階の階層で組まれています。1つ目のカードでは、A・B・Cの判定ごとの結果を青、オレンジ、グレーの縦線で色分けして表示しており、判定による違いを色で直感的に比べられます。
2つ目のカードでは、淡い黄色の囲みで例外事項を示し、オレンジの縦線を添えた段落で重要な一文を強調しています。囲みの色と線の有無を使い分けることで、注意書きと強調したい内容が混ざらないよう整理されています。
STEP表記と矢印で手順を可視化
弁理士による対応を説明するセクションでは、3枚のカードを横に並べ、それぞれの上部に紺色の「STEP 01」から「STEP 03」までのタグを付けています。カードの下端には緑のチェックと運営事務所の名前が共通で入っており、どの段階でも弁理士法人が対応する体制であることを視覚的に繰り返しています。
出願までの流れを示すセクションでは、見出しの中の数字「4」だけを大きな青い文字にして、手順の少なさを印象づけています。その下に4つのカードを横一列に並べ、カードの間に小さな矢印を置いて順番を示しています。
流れのカードは、商標名の入力とAI判定、指定商品の選択、出願人情報の入力、弁理士の最終確認と出願という4段階で構成されています。最後の4枚目だけを淡い青の背景にして見出しを青文字にしており、手続きのゴールがどこにあるのかを色で伝えています。
UI/UXと導線の工夫
sokuhyo（速標）のサイトは情報量が多い一方で、読みたい内容へたどり着くための仕掛けが随所に用意されています。ここでは、Q&A、フッター、長いページを移動するための工夫を取り上げます。
テーマ別に分けたアコーディオン式のQ&A
よくある質問のセクションでは、質問を5つのテーマごとに白いカードへまとめ、各質問の右端に「＋」の記号を置いたアコーディオン形式のデザインで表示しています。画面には質問文だけが整然と並ぶため、長い回答が画面を埋めることがなく、気になる項目を探しやすい見せ方です。
質問の頭には青い「Q.」を置き、テーマ名はカード上部の淡いグレーの帯に表示しています。サービス全般、AI判定と調査、出願と審査の手続き、拒絶理由への対応と登録後の流れなど、利用者が抱きやすい疑問が段階ごとに整理されています。
濃紺のフッターで情報を整理
ページの最下部は、濃紺の背景に白と淡いグレーの文字を載せたフッターで締めくくられています。左から、ロゴとサービスの説明、運営事務所の情報、サポート関連のリンク、法的事項のリンクという4列に分かれており、運営者の情報と各種の規定をまとめて確認できます。
フッターの下段には、商標の区分を第1類から第45類まで横に並べたリンク群が配置されています。本文では扱い切れない細かな情報への入口をフッターに集約することで、上部のコンテンツをすっきりと保っています。
長いページでも迷わせない配慮
画面の右側には、青いピル型の「一番上へ戻る」ボタンが表示されています。縦に長いページの中で、入力フォームのあるページ上部へ戻るための目印になっています。
また、Q&Aではスマートフォンやタブレットからも使いやすいよう設計していることが案内されています。特徴を紹介するカードにもスマートフォンで手続きが完結することを伝えるラベルが付けられており、端末を問わず使えるサービスであることが強調されています。
お店の名前や会社ロゴの商標登録をオンラインで進めるときのポイント
ここからはデザインの分析から少し離れて、sokuhyo（速標）が扱う商標登録について一般的なポイントを整理します。お店の名前や会社ロゴの商標登録をオンラインで検討する際の参考にしてください。
お店の名前を商標登録する意味
お店の名前は、長く営業を続けるほど顧客に覚えられ、ブランドとしての価値が積み上がっていきます。商標登録は特許庁への出願と審査を経て権利が認められる制度で、登録すると指定した商品やサービスの範囲で名称を守りやすくなります。
商標は、使う商品やサービスの種類ごとに「区分」を指定して出願します。sokuhyo（速標）のQ&Aでも、飲食店であれば第43類というように業種ごとに区分が分かれることが説明されています。自分のお店がどの区分に当たるかを把握することが、お店の名前の商標登録で最初に押さえたい点です。
会社ロゴの商標登録と文字の商標登録の違い
商標には、名称を文字として登録する方法と、デザインされたロゴを図形として登録する方法があります。sokuhyo（速標）のQ&Aでは、名前自体を保護したいなら文字の商標、見た目のデザインを大切にしたいならロゴの商標が向いていると説明しており、確実性を高めるなら両方で出願する選択肢も示しています。
会社ロゴの商標登録を考える場合、sokuhyo（速標）ではトップページの入力欄に画像ファイルをドロップするか、タップして選ぶことでロゴの調査ができると案内されています。文字の商標と同じ入口からロゴの確認を始められる点は、ファーストビューのフォーム設計とも一致しています。
オンラインで商標登録を進めるメリット
オンラインの商標登録サービスを使うと、事務所へ足を運ばずに、調査から出願の依頼までを画面上で進められます。sokuhyo（速標）では、画面の案内に沿って入力すれば最短10分で手続きが済むと説明されており、入力と最終確認を終えれば原則として翌営業日には特許庁への出願まで進むと案内されています。
一方で、原則として電話での相談窓口は設けておらず、問い合わせはWebのフォームで受け付ける運用です。手続き中の連絡もメールやマイページで行われるため、オンラインで完結する進め方が自分に合うかを事前に確かめておくと安心です。なお、出願から登録までは特許庁の審査状況によって通常6〜10か月ほどかかるとされており、余裕を持って準備を始めることが大切です。
まとめ：フォームを主役にしたsokuhyo（速標）のデザイン
sokuhyo（速標）のサイトは、白地に青を基調とした配色の中で、入力フォームをファーストビューの主役に据えた設計が際立っています。バッジやカード、英字ラベル、色分けされた縦線といった部品を一貫したルールで使い分けることで、情報量の多い商標登録のサービスを整理された印象で見せています。
Webサービスや士業に関わるサイトを制作する方にとっては、専門的な手続きを行動の単位に分解して見せる構成や、色ごとに役割を持たせる配色の考え方が参考になるはずです。お店の名前や会社ロゴの商標登録をオンラインで検討している方は、実際の画面で入力の流れを確かめてみてください。
