おしゃれなプロフィールページのコツ｜配色・フォント・自己紹介文

「プロフィールページを作ったけれど、なんだかパッとしない」。そう感じるとき、原因はセンスよりも色・文字・余白のどれかが多すぎることがほとんどです。

この記事では、プロフィールページをおしゃれに見せる基本ルールと、見落とされがちな「読みやすさ」の測り方をまとめます。リンク棚の全テーマの配色を実際に計算した数字、日本語フォント9書体の印象の違い、SNSのプロフィール欄と見た目をそろえるコツ、ジャンル別の考え方まで順に紹介します。

おしゃれに見える基本ルール3つ

1. 配色は3色まで

色を増やすほど華やかになるように思えますが、実際はごちゃごちゃして見えます。まずは3色で組みます。

• ベースの色（背景）: 白・生成り・黒など。画面のほとんどを占める
• メインの色（アクセント）: ボタンや見出しに使う、自分らしい色
• 文字の色: ベースの上で読める濃さの色

色に迷ったら、自分のSNSで普段載せている写真の色みに合わせると、ページとSNSの印象がつながります。

2. フォントは1〜2種類まで

フォントが3種類以上あると、ページが落ち着きません。名前や見出しに少し個性のある書体、本文に読みやすい書体、の2種類までにします。1種類で統一しても十分です。

日本語のページでは、書体の印象がそのままページの雰囲気になります。明朝体は上品で落ち着いた印象、ゴシック体はすっきりした現代的な印象、丸ゴシック体はやわらかく親しみやすい印象です。具体的な違いは後半の書体の節で紹介します。

3. 余白を怖がらない

情報を詰め込むと、見る人が疲れます。何も置かない場所は「もったいない」のではなく、ページをおしゃれに見せる要素です。

• リンクボタン同士の間を詰めすぎない
• アイコン・名前・自己紹介の間に間隔をとる
• リンクが多いときは、似たもの同士でまとめて見出しをつける

「少し寂しいかな」と感じるくらいが、ちょうどいいことが多いです。

「おしゃれ」と「読める」を両立する

おしゃれに見せようとして淡い色を重ねると、文字が読みにくくなります。読みやすさは感覚ではなく、コントラスト比という数字で確かめられます。

コントラスト比は、文字と背景の明るさの差を表す数字です。ウェブのアクセシビリティの国際的な基準（WCAG 2.1）では、普通の大きさの文字は4.5:1以上が目安で、最大は白と黒の21:1です。淡いピンクの地に淡いグレーの文字、のような「雰囲気はいいけれど読めない」組み合わせは、この数字を下回ります。

リンク棚の全テーマを計算した結果

リンク棚のテーマは14種類あります。

このうち10種類は無料プランで、残りの4種類はProプランで使えます。

全テーマについて、自己紹介などの本文と背景、ボタンの文字とボタンの地のコントラスト比を、WCAG 2.1 の計算式で出しました。背景がグラデーションのテーマは、上端と下端の両方を測り、低いほうの数字を載せています。

「枠だけのボタン」は地を塗らず、背景の上に枠と文字を直接描くボタンです。この2テーマは、ボタンの色と背景のコントラスト比を載せています。

全14テーマが、本文・ボタンともに4.5:1を上回っています。 いちばん低いのは、本文がナチュラルの7.87、ボタンがカフェの5.02でした。サロンやカフェのようにやわらかい色のテーマでも、文字は濃い色にして読みやすさを保っています。

この数字は、リンク棚の自動テストで毎回確かめています。本文、ボタンの文字、枠だけのボタン、ページ下部の「Powered by リンク棚」の表示がどれか1つでも4.5:1を下回ると、テストが失敗して公開できない仕組みです。

自分で色を決めるときの注意

テーマの色を自分で変える「カスタム」は、無料プランでも使えます。ただし、自分で選んだ色や、背景に設定した自分の写真は、上のテストの対象外です。色を変えたら、次の3つを確かめてください。

• 淡い背景には濃い文字、濃い背景には白っぽい文字を合わせる
• 明るい色（黄・水色・ピンクなど）は、文字ではなくボタンの地に使う。そのときボタンの文字は黒にする
• 写真を背景にするなら、文字が乗る部分が明るすぎたり柄が細かすぎたりしないものを選ぶ

推しカラーなど、具体的な色ごとの数字は推し活プロフィールに載せるものの記事で11色分を計算しています。

日本語フォントの印象の違い

リンク棚で選べる日本語フォントは次の9書体です。9書体とも無料プランで使えます。

選ぶときの目安

• 仕事の実績や予約を案内するページ: Noto Sans JP、BIZ UDPGothic、Zen Kaku Gothic New のようなゴシック体が、情報をまっすぐ伝えます。BIZ UDPGothic はユニバーサルデザイン（UD）書体で、文字の形が見分けやすいように作られています
• かわいさや親しみやすさを出したいページ: M PLUS Rounded 1c、Zen Maru Gothic、Kosugi Maru のような丸ゴシック体
• お店やハンドメイドなど、手触りを伝えたいページ: Klee One の手書き風
• 文章を読ませたい、落ち着いて見せたいページ: Shippori Mincho の明朝体

Kosugi Maru、Sawarabi Gothic、Klee One の3書体は太字（700）のデータを持っていません。見出しを太くしてメリハリをつけたいときは、ほかの書体のほうが向いています。

書体も色も一から選ぶのが大変なら、下書きから始める方法もあります。リンク棚では自分のサイトやSNSのURLを入れると下書きを自動で作れるので、テーマと書体だけ選び直すと、迷う時間が短くなります。

SNSプロフィール側と見た目をそろえる

プロフィールページは、SNSのプロフィール欄から飛んできた人が見るページです。SNS側とページ側の印象がそろっていると、「同じ人のページだ」と安心してもらえます。

アイコンは同じ画像にする

SNSとプロフィールページのアイコンは、同じ画像にそろえます。小さく丸く切り抜かれて表示されることが多いので、次の点に気をつけます。

• 顔やロゴなど、主役を真ん中に大きく置く
• 集合写真や、文字がたくさん入った画像は避ける
• 暗い写真やぼやけた写真は避ける

自己紹介は3行で書く

SNSの自己紹介は、さっと流し読みされます。3行に分けると伝わりやすくなります。

1. 何をしている人か（肩書き・活動内容）
2. 何を届けているか、どんな人向けか
3. 次の行動（「詳しくはリンクから」など）

たとえば、料理の発信をしている人なら「料理が好きな会社員／平日のお弁当と簡単レシピを投稿中／レシピのまとめはリンクから」。フリーランスなら「Webデザイナー／個人店のロゴとバナーを制作／制作事例と料金はリンクから」のように書きます。専門用語や記号の使いすぎは避けます。

Instagramのハイライトは表紙をそろえる

Instagramのハイライトは、プロフィールを訪れた人が最初に目にする場所のひとつです。

• 表紙（カバー画像）の色やデザインをそろえる: これだけで一気にすっきり見えます
• タイトルは短く: 「自己紹介」「メニュー」「お客様の声」など、中身が想像できる言葉にする
• 古いハイライトは外す: 更新が止まった情報は、かえって印象を下げます

色と言葉づかいもそろえる

SNSの投稿の色み、ハイライトの表紙、プロフィールページのテーマを同じ系統の色にします。言葉づかいも、敬語とくだけた口調が混ざらないようにどちらかに決めます。

ジャンル別のコツ

インフルエンサー・クリエイター

いちばん大切なのは、世界観をそろえることです。Instagramの投稿と同じトーンのテーマを選ぶと、SNSからページへの流れが自然になります。

• アイコンには自分の写真や作品を使い、SNSと同じものにする
• 一番見てほしいもの（最新の投稿、販売中の作品など）を一番上に置く
• 落ち着いたトーン（生成り系・暗い色系）のテーマは大人っぽく見えます

お店・個人事業主

信頼感と、次の行動のしやすさが大切です。

• 白っぽい背景にお店の色を1色足す組み合わせが無難です
• リンクの名前は「予約する」「メニューを見る」「お問い合わせ」のように、押すと何ができるかがわかる言葉にする
• 一番目立つ場所に、予約や購入など一番してほしい行動のリンクを置く
• ロゴがあればアイコンに使う

推し活

推し活のページは、推しカラーをどこに使うかで読みやすさが大きく変わります。載せるものの選び方と、推しカラー11色の計算結果は推し活プロフィールに載せるものにまとめています。