Webサイトの制作において、いきなりデザインに取りかかるのはリスクの高い進め方です。完成イメージが共有されないまま制作を進めると、「思っていたのと違う」という手戻りが発生し、時間も労力も無駄になってしまいます。

そこで活用するのがワイヤーフレームです。ワイヤーフレームとは、Webページのレイアウトや要素の配置を線と枠で表現した設計図のことです。色や装飾を一切使わず、「どこに何を置くか」だけをシンプルに示します。

この記事では、ワイヤーフレームの基本から具体的な作成手順、活用できるツールまでを丁寧に解説します。初めてワイヤーフレームを作る方でも迷わず進められる内容になっています。

ワイヤーフレームは「設計図」だから、見た目のきれいさは関係ないよ。大事なのは「何をどこに置くか」をハッキリさせること。ここをサボるとデザインの段階で迷子になるから、しっかり押さえておこう。

ワイヤーフレームとは何か

ワイヤーフレームの役割

ワイヤーフレームは、Webサイト制作における「設計図」です。建築でいう間取り図のようなもので、完成形をイメージするための最初のステップとして機能します。

ワイヤーフレームが果たす主な役割は以下の3つです。

• 情報設計の可視化：ページに掲載する情報の優先順位と配置を視覚的に整理できる
• 関係者間の認識合わせ：クライアント・デザイナー・エンジニアの間で完成イメージを共有し、認識のズレを防ぐ
• 手戻りの削減：デザインやコーディングに入る前の段階で構成を確定させることで、後工程での大幅な修正を防ぐ

ワイヤーフレームの3つのレベル

ワイヤーフレームには精度によって3つのレベルがあります。

• ローファイ（Low-fidelity）：手書きやシンプルな図形だけで構成を示す。最も粗い段階で、ブレインストーミングや初期の方向性確認に使う
• ミッドファイ（Mid-fidelity）：ツールを使って要素のサイズや間隔をある程度正確に表現する。最も一般的なワイヤーフレームのレベル
• ハイファイ（High-fidelity）：実際のテキストや画像を配置し、完成形に近い状態まで作り込む。プロトタイプに近い精度

プロジェクトの規模や目的に応じて使い分けますが、一般的なWebサイト制作ではミッドファイレベルのワイヤーフレームが最も活用される場面が多いです。

ワイヤーフレームの作成手順

ステップ1：サイトマップを作成する

ワイヤーフレームを作る前に、まずサイト全体の構成を「サイトマップ」として整理します。サイトマップとは、サイト内のページ一覧とその階層関係を示した図です。

例えば、コーポレートサイトであれば以下のような構成が一般的です。

• トップページ
• 会社概要
• サービス紹介（サービスA / サービスB / サービスC）
• 実績・事例
• ブログ・お知らせ
• お問い合わせ

サイトマップが整理されていれば、ワイヤーフレームを作るべきページが明確になり、ページ間の遷移関係も把握できます。

ステップ2：ページごとに掲載情報を洗い出す

各ページに「何を載せるか」をリストアップします。この段階ではレイアウトを考える必要はなく、テキストで箇条書きにするだけで問題ありません。

例えば、トップページであれば以下のような要素が考えられます。

• メインビジュアル（キャッチコピー＋画像）
• サービスの概要（3〜4つの特徴を簡潔に）
• 実績・導入事例のハイライト
• お客様の声
• 最新のお知らせ・ブログ記事
• CTA（お問い合わせボタン）

ステップ3：情報の優先順位を決める

洗い出した情報に対して、優先順位をつけます。Webサイトではファーストビュー（スクロールせずに見える領域）に最も重要な情報を配置するのが鉄則です。

ユーザーがそのページに訪れた目的を考え、最も知りたい情報から順番に配置していきます。「あれもこれも見せたい」という気持ちを抑えて、情報に優先順位をつけることが質の高いワイヤーフレームの鍵です。

ステップ4：レイアウトパターンを決める

掲載情報と優先順位が決まったら、レイアウトのパターンを選びます。Webサイトで使われる代表的なレイアウトは以下の通りです。

• シングルカラム：コンテンツを1列で縦に並べるレイアウト。LPやブログ記事に多い。スマートフォンとの相性が良い
• 2カラム：メインコンテンツ＋サイドバーの構成。ブログやニュースサイトに多い
• グリッド：コンテンツをカード状に並べるレイアウト。ECサイトやポートフォリオに使われる
• フルスクリーン：画面全体を使うレイアウト。ビジュアル重視のサイトに効果的

最近はスマホからのアクセスが大半を占めるから、シングルカラムのレイアウトを基本にするのが無難。PC表示は後から調整する「モバイルファースト」の考え方が主流だよ。

ステップ5：ワイヤーフレームを作成する

ここまでの準備が整ったら、実際にワイヤーフレームを作成します。作成時のポイントは以下の通りです。

• 色は使わない：グレースケールで作成する。色を入れるとデザインの議論に発展してしまい、構成の確認に集中できなくなる
• 実際のテキストに近い文章を入れる：「ダミーテキスト」の多用は避け、実際に掲載する文章に近い内容を入れた方が、情報量やスペースの感覚がつかめる
• 画像はプレースホルダーで表示する：グレーの長方形に「×」印を入れたものを配置し、画像が入る場所とサイズを示す
• 余白のサイズを意識する：要素間の余白は統一感を持たせる。余白が適切でないと、完成デザインの段階で調整が必要になる

ステップ6：フィードバックをもらって修正する

作成したワイヤーフレームをクライアントやチームメンバーに共有し、フィードバックをもらいます。この段階で構成の問題点を洗い出せれば、デザインやコーディングの段階での手戻りを大幅に削減できます。

フィードバックを依頼する際は「ここで確認したいのは情報の配置と優先順位であり、デザインの議論は次のステップで行います」と伝えておくとスムーズです。

ワイヤーフレーム作成におすすめのツール

Figma

Figmaは、現在のWebデザイン業界において最も広く使われているデザインツールです。ブラウザ上で動作するクラウドベースのツールで、リアルタイムでの共同編集が可能です。

ワイヤーフレーム作成に関しては、コンポーネント機能（ボタンやヘッダーなどのパーツを再利用できる機能）やオートレイアウト機能（要素の配置を自動調整する機能）が便利です。無料プランでも3つのプロジェクトまで利用でき、個人や小規模チームであれば十分に対応できます。

Whimsical

Whimsicalは、ワイヤーフレーム、フローチャート、マインドマップをシンプルに作成できるツールです。Figmaほどの自由度はありませんが、ワイヤーフレーム専用のパーツ（ボタン、テキスト、画像プレースホルダーなど）がプリセットで用意されているため、素早くワイヤーフレームを組み立てられます。

Canva

Canvaは、SNS投稿やプレゼン資料の作成で広く知られていますが、ワイヤーフレームのテンプレートも用意されています。デザインツールに慣れていない方が簡易的なワイヤーフレームを作る用途には適していますが、プロの制作現場では機能面で物足りなさを感じる場合があります。

手書き（紙とペン）

最もシンプルで手軽な方法が、紙とペンによる手書きです。特に初期段階のラフなアイデア出しや、クライアントとの対面打ち合わせでは、ツールを立ち上げるよりも手書きの方がスピーディです。

手書きのワイヤーフレームをスマートフォンで撮影し、チャットツールで共有するという使い方も実務では一般的です。ただし、修正や共有の効率を考えると、正式なワイヤーフレームはツールで作成するのが望ましいといえます。

ツール選びに時間をかけすぎないのもポイント。迷ったらFigma一択で大丈夫。無料で使えるし、業界標準だから覚えておいて損はないよ。

ワイヤーフレーム作成でよくある失敗

デザインを作り込みすぎる

ワイヤーフレームの段階で色やフォント、装飾にこだわりすぎるのは典型的な失敗です。ワイヤーフレームの目的は「構成の確認」であり、ビジュアルデザインは次のステップで行います。色やフォントの議論が始まってしまうと、本来確認すべき情報設計の議論が後回しになってしまいます。

ユーザーの行動を考慮していない

見た目の構成だけを考えて、ユーザーがどのようにページを閲覧するかを考慮していないワイヤーフレームは機能しません。「ユーザーはこのページに何を求めて訪れるのか」「どの情報を見た後にどのアクションを取るのか」というユーザーの行動フローを意識しながら作成しましょう。

スマートフォン版を後回しにする

多くのWebサイトでスマートフォンからのアクセスが過半数を超えている現状を考えると、モバイル版のワイヤーフレームは後回しにすべきではありません。PC版とモバイル版のワイヤーフレームはセットで作成するのが理想的です。

よくある質問（Q&A）

まとめ

ワイヤーフレームは、Webサイト制作の品質と効率を大きく左右する重要な工程です。サイトマップの作成、掲載情報の洗い出し、優先順位の決定、レイアウトパターンの選定という手順を踏むことで、迷いなくワイヤーフレームを作成できます。

ツールはFigmaを基本として、初期のラフ段階では手書きも活用するのが実践的な進め方です。ワイヤーフレームの段階で構成をしっかり固めておけば、デザインとコーディングの工程をスムーズに進められます。

ワイヤーフレームをちゃんと作ると「あ、ここ情報足りないな」「この順番だと分かりにくいな」って気づけるんだ。面倒に感じるかもしれないけど、結果的に制作全体の時間が短縮されるから、絶対やった方がいいよ。

Webデザインのスキルを身につけたものの、「どうやって仕事を取ればいいのか分からない」と悩んでいる方は少なくありません。技術力があっても、営業がうまくいかなければ収入にはつながらないのが現実です。

特にフリーランスとして独立したばかりの方や、副業でWebデザインを始めた方にとって、営業は最大のハードルといっても過言ではありません。しかし、正しい方法と準備を知っていれば、営業が苦手な方でも着実に案件を獲得することは可能です。

この記事では、Webデザインの営業方法を7つに分類して具体的に解説します。それぞれのメリット・デメリットや、営業前に準備しておくべきことも併せて紹介しますので、自分に合った営業スタイルを見つけてください。

営業って聞くとハードル高そうに感じるけど、方法はたくさんあるよ。飛び込み営業だけが営業じゃないから、自分に合ったやり方を探してみよう。

営業を始める前に準備すべき3つのこと

ポートフォリオサイトを用意する

Webデザインの営業において、ポートフォリオは最も重要な武器です。クライアントはデザイナーのスキルを「作品」で判断するため、どれだけ素晴らしい提案をしても、見せられるものがなければ信頼は得られません。

ポートフォリオに掲載すべき情報は以下の通りです。

• 制作実績：実際に制作したWebサイトのスクリーンショットやURL。最低でも5〜10点は用意する
• 制作背景の説明：クライアントの課題、デザインの意図、工夫した点を言語化して添える
• 数値的な成果：PV増加率やコンバージョン率の改善など、具体的な数字があれば強力なアピール材料になる
• 対応範囲：デザインのみなのか、コーディングやWordPress構築まで対応できるのかを明記する
• 料金の目安：大まかな料金レンジを記載しておくと、予算感の合わないクライアントからの問い合わせを防げる

実績がまだ少ない場合は、架空のクライアントを想定した「コンセプトワーク」を制作して掲載する方法もあります。大切なのは「この人に頼んだらどんな成果物が出てくるか」をクライアントがイメージできることです。

提案書のテンプレートを作っておく

営業の場面で提案書をスムーズに出せるかどうかで、受注率は大きく変わります。毎回ゼロから作るのではなく、テンプレートを用意しておきましょう。

提案書には、クライアントの課題に対する解決策、制作の流れ、スケジュール、費用の見積もりを含めます。テンプレートがあれば、クライアントの情報をヒアリングした後すぐにカスタマイズして提出できます。

自分の強みを明確にする

「何でもできます」というアピールは、実は営業においてはマイナスに働くことがあります。クライアントは「自分の悩みを解決してくれる専門家」を求めているため、特定のジャンルや領域に強みを持っている方が選ばれやすい傾向があります。

例えば「飲食店のWebサイトに強い」「LPのデザインが得意」「ECサイトのUI改善に特化」といった形で、自分のポジションを明確にしておくと、営業トークにも説得力が出ます。

Webデザインの営業方法7選

1. クラウドソーシングで実績を積む

クラウドワークスやランサーズなどのクラウドソーシングサービスは、特に経験の浅い段階での案件獲得に有効です。プラットフォーム上で案件を探して応募するだけなので、営業活動のハードルが低い点が魅力です。

ただし、クラウドソーシングには注意点もあります。価格競争が激しいため単価が低くなりがちで、手数料も差し引かれます。長期的にはクラウドソーシングだけに依存せず、実績を積んだ段階で他の営業方法にシフトしていくのが賢い戦略です。

2. SNSで発信して案件を呼び込む

X（旧Twitter）やInstagramなどのSNSを活用した営業は、直接的な売り込みではなく「自分の存在を知ってもらう」ことに重点を置いた方法です。

制作過程の発信、デザインのTips共有、ビフォーアフターの投稿などを継続的に行うことで、デザインに興味のあるフォロワーが集まります。フォロワーの中から直接依頼が来ることもあれば、投稿を見た企業からDMで相談が来るケースもあります。

SNS営業で重要なのは継続的な発信です。週に数回の投稿を数ヶ月続けることで、徐々に認知度が高まっていきます。

3. フリーランスエージェントを利用する

レバテックフリーランスやMOREWORKSなどのフリーランスエージェントは、スキルや経験に応じた案件を紹介してくれるサービスです。営業活動をエージェントに任せられるため、制作に集中したい方に向いています。

エージェント経由の案件は比較的単価が高く、長期契約になるケースも多いため、安定した収入を得やすい点がメリットです。ただし、一定以上のスキルや実務経験が求められるため、初心者には少しハードルが高い場合があります。

4. 制作会社にパートナーとして営業する

Web制作会社は、案件が集中する時期に外部のデザイナーに一部の作業を委託することがあります。制作会社のパートナーとして登録しておくと、案件が発生したタイミングで声がかかる仕組みです。

制作会社への営業は、ポートフォリオと得意分野を記載したメールを送るのが一般的です。一度信頼関係が構築されると、継続的に仕事が発生しやすい点が大きな強みです。

5. 地域の中小企業に直接アプローチする

地域の中小企業や個人事業主は、Webサイトを持っていない、もしくは古いデザインのまま放置しているケースが非常に多いです。こうした企業に対して「Webサイトのリニューアル提案」を行うのは、有効な営業方法です。

具体的には、ターゲットとなる企業のWebサイトを事前に分析し、改善点を整理した提案書を持参してアプローチします。「御社のサイトのここを改善すると、こういう効果が見込めます」という具体的な提案ができれば、受注の可能性は格段に上がります。

6. ブログやYouTubeで専門性をアピールする

Webデザインに関するノウハウをブログやYouTubeで発信するのも、長期的に見て効果的な営業手法です。SEOで上位表示されれば、「Webデザイン 依頼」「ホームページ 制作」といったキーワードで検索したクライアントが自然と集まってきます。

コンテンツマーケティングは成果が出るまでに時間がかかりますが、一度軌道に乗ると「営業しなくても問い合わせが来る」状態を作れます。

7. 既存クライアントからの紹介を増やす

最も成約率が高い営業方法は、既存クライアントからの紹介です。信頼関係のある人からの紹介であれば、初対面の営業と比べて格段に受注しやすくなります。

紹介を増やすためには、納品して終わりではなく、納品後のフォローアップを丁寧に行うことが大切です。定期的な連絡やサイトの改善提案を行うことで、「何かあったらこの人に頼もう」と思ってもらえる存在になれます。

7つの方法を全部同時にやる必要はないよ。まずは1〜2つに絞って集中するのがコツ。クラウドソーシングで実績を積みながらSNS発信を続ける、みたいな組み合わせが現実的だね。

営業メールの書き方と具体例

件名で興味を引く

営業メールは件名で開封されるかどうかが決まります。「Webサイト制作のご提案」のような一般的な件名よりも、「御社の○○ページのCVR改善案をお持ちしました」のように、相手にとってのメリットが伝わる件名にしましょう。

本文の構成

営業メールの本文は、以下の構成で簡潔にまとめるのが効果的です。

• 自己紹介：1〜2文で簡潔に。長すぎる自己紹介は読まれない
• 相手のサイトの分析結果：具体的な改善ポイントを示すことで「ちゃんと見てくれている」と感じてもらえる
• 提案内容：改善による具体的なメリットを提示する
• 実績の提示：ポートフォリオのURLを添える
• 次のアクション：「一度お打ち合わせのお時間をいただけないでしょうか」と具体的な行動を促す

営業で失敗しやすいポイントと対策

価格を安くしすぎる

案件が欲しいあまりに価格を下げすぎると、利益が出ないだけでなく「安い＝品質が低い」という印象を与えてしまう場合があります。フリーランスのWebデザイナーの場合、ホームページ制作の相場は10万〜30万円程度（Web幹事調べ）です。相場を大きく下回る価格設定は避けましょう。

レスポンスが遅い

クライアントからの問い合わせや質問に対するレスポンスの速さは、信頼構築に直結します。即日対応が難しい場合でも、「確認して○日までにご連絡します」と一報入れるだけで印象は大きく変わります。

ヒアリングが不足している

クライアントの要望を十分にヒアリングせずに制作を進めると、修正が増えてお互いに消耗します。初回の打ち合わせでは、ターゲットユーザー、サイトの目的、競合サイト、好みのデザインテイストなどを丁寧に確認しましょう。

安くしすぎると「この人大丈夫かな」って不安を与えちゃうこともある。自分のスキルに見合った適正価格を堂々と提示しよう。価格競争で勝負するのは長続きしないよ。

単価を上げるための戦略

提案型の営業にシフトする

「言われたものを作る」のではなく、「クライアントの課題を解決する提案をする」姿勢に変えることで、単価は自然と上がっていきます。デザインだけでなく、マーケティングの視点やSEOの知識を持っていると、より高い付加価値を提供できます。

サブスク型の保守契約を提案する

サイト制作後の保守・運用を月額契約で請け負うことで、安定した収入源を確保できます。更新作業、アクセス解析レポートの提出、改善提案などをパッケージにして提案しましょう。月額1万〜5万円程度の保守契約でも、複数のクライアントから受注すれば安定収入につながります。

専門特化で差別化する

「医療機関向けのWebサイト専門」「飲食店のLP制作特化」のように、ターゲットを絞ることで「この分野ならこの人」という指名買いが発生します。汎用的なデザイナーよりも、専門特化したデザイナーの方が高単価で受注できる傾向があります。

よくある質問（Q&A）

まとめ

Webデザインの営業方法は、クラウドソーシング、SNS、エージェント、制作会社への営業、地域企業への直接アプローチ、コンテンツマーケティング、既存クライアントからの紹介と、多くの選択肢があります。

大切なのは、自分のスキルレベルや性格に合った方法を選び、継続的に取り組むことです。営業は一朝一夕で成果が出るものではありませんが、ポートフォリオの充実、提案力の向上、信頼関係の構築を地道に続けていけば、案件獲得の道は必ず開けます。

まずは今日からできることを1つ決めて、行動に移してみてください。

営業は「売り込み」じゃなくて「困っている人を助ける」ことだよ。そう考えると、気持ちがだいぶ楽になるんじゃないかな。まずはポートフォリオを整えるところから始めてみよう。

Webサイトの表示速度は、ユーザー体験とSEOの両方に直結する重要な指標です。ページの読み込みに3秒以上かかると、約53%のモバイルユーザーがサイトを離脱するというGoogleの調査結果も報告されています。さらに、GoogleはCore Web Vitalsをランキング要因として公式に採用しており、表示速度の遅いサイトは検索順位で不利になる可能性があります。

しかし、多くのWebサイトは適切な最適化を行うだけで、表示速度を大幅に改善できます。画像の最適化、コードの圧縮、キャッシュの活用など、基本的な施策だけでも劇的な効果が期待できます。

この記事では、Core Web Vitalsの3つの指標を軸に、Webサイトの表示速度を改善する具体的な方法を解説します。

表示速度の改善は「やった方がいい」じゃなくて「やらないと損する」レベルの話だよ。SEOにも売上にも直結するから、優先度高めで取り組もう。

Core Web Vitalsとは？3つの指標を理解する

LCP（Largest Contentful Paint）

LCPは、ページの中で最も大きなコンテンツ要素（メインビジュアル画像、見出しテキストなど）が表示されるまでの時間を計測する指標です。ユーザーが「ページが読み込まれた」と体感するタイミングに近い指標で、Googleの基準では2.5秒以内が「良好」と判定されます。

• 良好（Good）：2.5秒以下
• 改善が必要（Needs Improvement）：2.5秒超〜4.0秒以下
• 不良（Poor）：4.0秒超

INP（Interaction to Next Paint）

INPは、ユーザーの操作（クリック、タップ、キーボード入力など）から、画面が次に描画更新されるまでの時間を計測する指標です。以前のFID（First Input Delay）に代わって採用された新しい指標で、ページ全体を通じたインタラクティブ性を評価します。

• 良好（Good）：200ミリ秒以下
• 改善が必要：200ミリ秒超〜500ミリ秒以下
• 不良：500ミリ秒超

CLS（Cumulative Layout Shift）

CLSは、ページの読み込み中に要素が予期せずずれる現象（レイアウトシフト）の累積量を計測する指標です。「読もうとしたテキストが広告の読み込みで突然ずれた」「クリックしようとしたボタンが画像の読み込みで移動した」といったユーザーのストレスを数値化しています。

• 良好（Good）：0.1以下
• 改善が必要：0.1超〜0.25以下
• 不良：0.25超

LCPを改善する方法

画像の最適化

LCPの遅延原因の多くは、メインビジュアルなどの大きな画像の読み込みに時間がかかることです。以下の対策で画像の読み込みを高速化できます。

• 次世代フォーマットへの変換：JPEG/PNGをWebPまたはAVIF形式に変換する。WebPはJPEGと比較して25〜35%ファイルサイズを削減でき、AVIFはさらに高い圧縮率を実現します
• 適切なサイズの提供：表示サイズに合わせた画像を用意する。幅600pxの領域に幅2000pxの画像を表示するのは無駄が大きい
• srcset属性の活用：デバイスの画面幅や解像度に応じて最適なサイズの画像を自動的に選択させる
• 遅延読み込み（lazy loading）：ファーストビュー外の画像にloading=”lazy”を付与し、スクロール時に読み込む

サーバー応答時間の短縮

サーバーがHTMLを返すまでの時間（TTFB: Time to First Byte）が遅いと、LCPも遅くなります。以下の対策が有効です。

• サーバーのスペック向上：共用サーバーからVPSや専用サーバーへの移行を検討する
• CDN（Content Delivery Network）の導入：CloudflareやCloudFrontなどのCDNを導入し、ユーザーに近いサーバーからコンテンツを配信する
• データベースの最適化：不要なデータの削除、インデックスの追加、クエリの最適化を行う

レンダリングを妨げるリソースの排除

CSSやJavaScriptの読み込みがHTMLの描画をブロック（レンダリングブロック）している場合、LCPが遅延します。

• CSSの最適化：ファーストビューに必要なCSSだけをインライン化し、残りは非同期で読み込む
• JavaScriptの非同期読み込み：script要素にdeferまたはasync属性を追加する
• 不要なCSSとJSの削除：使用していないCSSルールやJSファイルを特定して削除する

LCPの改善は「画像の最適化」が最も費用対効果が高い。WebPへの変換と適切なサイズの提供だけで、多くのサイトでLCPが大幅に改善するよ。

INPを改善する方法

JavaScriptの実行時間を短縮する

INPの遅延の主な原因は、JavaScriptの処理がメインスレッドを長時間ブロックすることです。ユーザーの操作（クリック、タップなど）に対してJavaScriptの処理が割り込み、画面の更新が遅れると、INPのスコアが悪化します。

• 長時間タスクの分割：50ミリ秒以上かかるJavaScriptタスクを複数の小さなタスクに分割する
• 不要なJavaScriptの削除：使われていないJSライブラリやプラグインを洗い出して削除する
• コード分割（Code Splitting）：WebpackやViteなどのバンドラーを使い、ページごとに必要なJSだけを読み込む

サードパーティスクリプトの管理

広告スクリプト、アクセス解析、SNSウィジェットなどのサードパーティスクリプトは、INPを悪化させる主要因の一つです。以下の対策で影響を軽減できます。

• 不要なサードパーティスクリプトを削除する
• 必須のスクリプトにはdeferを付けて非同期で読み込む
• ユーザーの操作後に読み込む遅延実行パターンを検討する

CLSを改善する方法

画像・動画にサイズを明示する

CLSの最も一般的な原因は、画像や動画のサイズが明示されていないことです。ブラウザは画像のダウンロードが完了するまでサイズが分からないため、読み込み後にレイアウトがずれます。

• すべてのimg要素にwidthとheight属性を指定する
• CSSでaspect-ratioプロパティを使い、画像の縦横比を事前に確保する
• 動画やiframeにも同様にサイズを明示する

Webフォントの読み込みによるシフトを防ぐ

Webフォントの読み込み中にシステムフォントで表示され、フォント読み込み完了後に切り替わる際にレイアウトがずれることがあります（FOUT: Flash of Unstyled Text）。

• font-display: swapを指定してフォントの切り替え動作を制御する
• Webフォントをpreloadで先行読み込みする
• フォールバックフォントのサイズ調整（size-adjust）でずれを最小化する

広告スペースの事前確保

広告の読み込みによるレイアウトシフトを防ぐには、広告の表示領域をCSSであらかじめ確保しておきます。min-heightを指定してプレースホルダー的なスペースを確保することで、広告が読み込まれてもレイアウトがずれなくなります。

CLSの改善は意外と簡単で効果が大きい。img要素にwidthとheightを書くだけで解決するケースも多いから、まずはそこからやってみよう。

その他の高速化テクニック

ブラウザキャッシュの活用

ブラウザキャッシュを適切に設定することで、2回目以降のアクセス時にサーバーへのリクエストを減らし、表示速度を大幅に向上させることができます。.htaccessやサーバーの設定でCache-Controlヘッダーを追加し、静的ファイル（画像、CSS、JS）のキャッシュ期間を設定しましょう。

テキスト圧縮（Gzip/Brotli）

サーバーからクライアントに送信されるHTML、CSS、JavaScriptなどのテキストファイルを圧縮することで、転送量を大幅に削減できます。Brotli圧縮はGzipよりもさらに高い圧縮率を実現し、主要なブラウザで広くサポートされています。

CSSとJavaScriptの圧縮（Minify）

CSSとJavaScriptファイルから、コメント、空白、改行などの不要な文字を除去してファイルサイズを削減します。ビルドツール（Webpack、Viteなど）を使えば、ビルド時に自動的にMinify処理が実行されます。

プリフェッチとプリコネクト

link要素のrel属性を活用して、必要なリソースを事前に準備させることができます。

• dns-prefetch：外部ドメインのDNSルックアップを事前に行う
• preconnect：外部ドメインへの接続（DNS＋TCP＋TLS）を事前に確立する
• preload：重要なリソース（フォント、ヒーロー画像など）を優先的に読み込む

WordPressサイトの高速化

キャッシュプラグインの導入

WordPressサイトの場合、キャッシュプラグインの導入が最も効果的な高速化施策の一つです。WP Fastest Cache、W3 Total Cache、WP Super Cacheなどのプラグインを導入することで、動的に生成されるページを静的HTMLとしてキャッシュし、サーバーの負荷を軽減できます。

画像最適化プラグインの活用

ShortPixel、Imagify、EWWWなどの画像最適化プラグインを使えば、アップロードした画像を自動的にWebP形式に変換し、ファイルサイズを圧縮できます。過去にアップロードした画像の一括最適化にも対応しています。

不要なプラグインの整理

WordPressのプラグインが増えると、それぞれのプラグインが読み込むCSS・JSファイルが増加し、ページの表示速度が低下します。使っていないプラグインは「無効化」ではなく「削除」し、定期的にプラグインの棚卸しを行いましょう。

計測と継続的な改善

定期的な計測の重要性

高速化は一度対策して終わりではありません。コンテンツの追加、プラグインの更新、サードパーティスクリプトの追加などにより、パフォーマンスは徐々に劣化します。Google Search ConsoleのCore Web Vitalsレポートで定期的にスコアを確認し、問題が発生したら迅速に対応しましょう。

ラボデータとフィールドデータの違い

パフォーマンスの計測には「ラボデータ」と「フィールドデータ」の2種類があります。

• ラボデータ：Lighthouse、PageSpeed Insightsなどのツールが特定の条件で計測した結果。再現性が高く、開発時の改善指標として有用
• フィールドデータ：実際のユーザーが体験した結果の集計（Chrome UX Report）。Googleのランキング評価に使用されるのはこちら

ランキングへの影響を確認するにはフィールドデータを重視しつつ、改善施策の効果検証にはラボデータを活用するという使い分けがおすすめです。

ラボデータで改善を確認しても、フィールドデータに反映されるまでは28日間かかるよ。改善の効果を焦らず見守ろう。

よくある質問（Q&A）

まとめ

Webサイトの高速化は、Core Web Vitalsの3指標（LCP、INP、CLS）を基準に、それぞれの指標に適した改善施策を実施することが基本です。LCPには画像最適化とサーバー応答時間の短縮、INPにはJavaScriptの実行時間削減、CLSには画像サイズの明示と広告スペースの事前確保が効果的です。

まずはPageSpeed Insightsで現状のスコアを確認し、最も効果の大きい施策（画像のWebP変換、キャッシュ設定、テキスト圧縮）から順に対応していきましょう。高速化は一度の対応で完了するものではなく、定期的な計測と継続的な改善が重要です。

高速化は「地味だけど着実に成果が出る」施策だよ。表示速度が1秒速くなるだけで、直帰率もコンバージョン率も改善するから、ぜひ取り組んでみてね。

Webデザインのスキルを身につけたものの、「実際に案件を取る方法が分からない」「ポートフォリオがないと受注できないのでは」と不安に感じている方は多いのではないでしょうか。副業としてWebデザインで収入を得るには、デザインスキルだけでなく「案件を見つけて受注する力」が不可欠です。

実際のところ、未経験からでもクラウドソーシングや制作会社との連携を通じて案件を獲得し、月5万円の副収入を得ることは十分に現実的な目標です。

この記事では、Webデザイン副業の案件獲得方法を具体的に解説し、未経験から段階的にステップアップしていくためのロードマップを紹介します。

スキルを磨くのも大事だけど、「案件を取る」スキルはまた別物。この記事では営業が苦手な人でもできる方法を中心に紹介するよ。

Webデザイン副業で受注できる案件の種類

案件の種類と単価の目安

Webデザイン副業で受注しやすい案件には、以下のようなものがあります。

• バナー制作：1枚3,000〜10,000円。広告バナーやSNS用画像の制作。制作時間が短く、初心者でも取り組みやすい
• LP（ランディングページ）デザイン：1ページ30,000〜100,000円。商品やサービスの訴求ページのデザイン制作
• Webサイトデザイン（トップ＋下層数ページ）：50,000〜300,000円。企業や個人事業主のWebサイト全体のデザイン
• WordPress構築（デザイン＋実装）：100,000〜500,000円。デザインからコーディング、CMS構築までを一括で対応
• ロゴデザイン：10,000〜50,000円。企業やサービスのロゴ制作
• サムネイル制作：1枚1,000〜5,000円。YouTube動画のサムネイル制作

ポートフォリオの準備

案件受注の9割はポートフォリオで決まる

クラウドソーシングでもSNS経由でも、案件の受注率を左右するのはポートフォリオの品質です。クライアントは提案文やプロフィールよりも、「この人はどんなデザインが作れるのか」を作品で判断します。

ポートフォリオに載せるべきもの

実務経験がない段階でも、以下の方法でポートフォリオを充実させることができます。

• 架空のクライアント案件：実在する業種を想定して、架空のWebサイトやLP、バナーをデザインする。「カフェのWebサイト」「エステサロンのLP」など具体的な設定で制作する
• 既存サイトのリデザイン：気になるWebサイトを分析し、改善案としてリデザインする。ビフォーアフターを見せると説得力が増す
• バナートレース＋オリジナル制作：プロが制作したバナーのデザインを模写（トレース）し、同じテイストでオリジナルのバナーも制作する

ポートフォリオサイトの作成

ポートフォリオの公開方法として、以下の選択肢があります。

• Figmaのプロトタイプ共有：デザインファイルをそのまま閲覧用リンクとして共有。最も手軽
• Notion：ポートフォリオページを作成して公開共有リンクを発行。テキスト説明も入れやすい
• WordPress：本格的なポートフォリオサイトとして構築。WordPress自体の実力もアピールできる
• STUDIOやWix：ノーコードツールで手軽にデザイン性の高いサイトを作成可能

ポートフォリオは「量より質」。10作品並べるより、厳選した3〜5作品を丁寧に見せる方がクライアントの印象は良いよ。各作品に「制作意図」や「工夫したポイント」の説明を添えよう。

クラウドソーシングでの案件獲得

主要なクラウドソーシングサービス

副業でWebデザイン案件を探す際、まず活用すべきなのがクラウドソーシングサービスです。

• クラウドワークス：国内最大級のクラウドソーシング。Webデザイン案件が豊富で、「未経験OK」の募集も多い。手数料は報酬の20%
• ランサーズ：クラウドワークスと並ぶ大手サービス。認定ランサー制度があり、実績を積むと優遇される。手数料は報酬の16.5%
• ココナラ：自分のスキルを「商品」として出品する形式。バナー制作やLP制作をパッケージ化して販売できる。手数料は報酬の22%
• Bizseek：手数料が業界最安級（10万円以下で10%、10万円以上で5%）。案件数は大手に劣るが、手取りが多い

提案文の書き方

クラウドソーシングで案件に応募する際の提案文は、受注率を大きく左右します。以下のポイントを押さえましょう。

• クライアントの要望を正確に読み取り、「理解しています」と伝える
• 自分のスキルや実績を簡潔にアピールする
• ポートフォリオのリンクを必ず添付する
• 納期や対応可能時間を明記してクライアントの不安を解消する
• テンプレートのコピペではなく、案件ごとにカスタマイズした提案文を書く

クラウドソーシング以外の案件獲得方法

SNSでの発信と集客

X（旧Twitter）やInstagramでデザイン作品や制作過程を発信することで、潜在的なクライアントとの接点を作ることができます。特にX上では「デザイナー探してます」という投稿も多く、普段から作品を発信している人に声がかかるケースが珍しくありません。

知人・友人からの紹介

「Webデザインを副業でやっている」と周囲に伝えておくだけで、紹介経由で案件が発生することがあります。個人事業主や中小企業の経営者は、信頼できる知人からの紹介で外注先を探すケースが多いため、身近なネットワークへのアピールは意外と効果的です。

制作会社のパートナー登録

Web制作会社の中には、案件の一部を外部のデザイナーに業務委託するケースがあります。制作会社のWebサイトで「パートナー募集」を探したり、SNSやイベントで制作会社のディレクターとつながったりすることで、継続的な案件獲得につなげることができます。

フリーランスエージェントの活用

実績が増えてきたら、フリーランスエージェント（www.lancers.jp・サイト終了）に登録するのも有効です。エージェントが案件の紹介から単価交渉、契約手続きまでを代行してくれるため、営業活動の負担を減らしつつ高単価の案件を獲得できる可能性があります。

案件獲得のルートは複数持っておくのが安定のコツ。クラウドソーシング＋SNS＋紹介の3本柱が理想だよ。

単価を上げるためのステップアップ戦略

スキルの掛け合わせで単価を上げる

デザインだけでなく、関連スキルを組み合わせることで提供できる価値が増え、単価アップにつながります。

• デザイン＋コーディング：HTML/CSSのコーディングまで対応できると、案件の幅が広がり単価も上がる
• デザイン＋WordPress構築：デザインからCMS構築まで一気通貫で対応できると、1案件あたりの単価が大幅に上がる
• デザイン＋ライティング：LPのキャッチコピーや本文まで対応できると、クライアントの手間が減り重宝される
• デザイン＋マーケティング知識：「どんなデザインがコンバージョンにつながるか」を提案できると、コンサルティング的な立場になれる

継続案件を確保する

副業収入を安定させるために最も重要なのは、単発案件ではなく継続案件を増やすことです。一度取引したクライアントに対して、月次の更新作業やバナーの定期制作、SNS画像の継続制作などを提案しましょう。

継続案件は、毎回の営業活動が不要になり、クライアントの好みや要望も把握しているため効率的に作業できます。

専門ジャンルを持つ

「何でもやります」よりも、特定のジャンル（医療系、美容系、IT系など）に特化した方が差別化しやすく、単価も上がりやすい傾向があります。特定ジャンルの実績が蓄積されると、「この分野ならこの人」というポジションを獲得でき、指名で案件が来るようになります。

副業としての注意点

確定申告の準備

副業の所得が年間20万円を超える場合、確定申告が必要になります。経費（ソフトウェア代、書籍代、通信費など）の領収書は保管しておきましょう。会計ソフト（freee、マネーフォワードなど）を導入しておくと、確定申告の時期に慌てずに済みます。

本業との両立

副業で最も避けるべきは、本業に支障をきたすことです。受注可能な作業量を事前に見積もり、無理のないスケジュールで案件を受けましょう。納期に余裕を持たせることで、品質を保ちながら継続的に活動できます。

契約書の取り交わし

案件を受注する際は、作業範囲、納期、報酬額、修正回数の上限、著作権の帰属などを明記した契約書（または発注書）を取り交わすことをおすすめします。トラブルの多くは「言った言わない」の認識の違いから発生するため、書面で合意しておくことが大切です。

よくある質問（Q&A）

まとめ

Webデザイン副業で案件を獲得するには、ポートフォリオの準備、クラウドソーシングの活用、提案文の工夫が基本的な流れです。まずはバナー制作やサムネイル制作など取り組みやすい案件で実績を積み、LP制作やサイト制作へとステップアップしていきましょう。

月5万円を達成するまでの道筋は「ポートフォリオ制作 → クラウドソーシング登録 → 小さな案件で実績作り → 単価アップ → 継続案件の確保」というステップです。スキルの掛け合わせや専門ジャンルの確立を意識することで、さらなる収入アップも見込めます。

最初の案件獲得が一番大変だけど、1件目さえクリアすれば2件目、3件目はグッと楽になるよ。まずはポートフォリオを仕上げて、今日から応募を始めてみよう。

Webデザインのツール選びは、作業効率やアウトプットの品質に直結する重要なテーマです。長年Webデザインの定番ツールとして君臨してきたPhotoshopと、近年急速にシェアを拡大しているFigma。「どちらを使えばいいのか」「両方必要なのか」と悩む方は少なくないでしょう。

結論から言えば、Photoshopは「画像編集」、FigmaはUI/UXデザイン」というように、得意分野が異なるツールです。どちらかが完全に上位互換というわけではなく、目的に応じて使い分けるのが現在の主流になっています。

この記事では、PhotoshopとFigmaの特徴・強み・弱みを比較し、どのような場面でどちらを選ぶべきかを詳しく解説します。

PhotoshopとFigmaは「競合」じゃなくて「補完関係」にあるツールだよ。それぞれの得意分野を理解して使い分けるのがポイント。

Photoshopの特徴と強み

画像編集のプロフェッショナルツール

Photoshopは、Adobe社が提供する画像編集ソフトウェアで、写真のレタッチ、合成、色調補正、マスク処理など、ピクセル単位の精密な画像操作に特化しています。Webデザインの分野では、ヒーロー画像の加工、バナー制作、写真の切り抜きなどで力を発揮します。

Photoshopが選ばれる場面

• 写真のレタッチ・色調補正：肌の補正、色味の調整、不要な要素の除去など
• バナー・広告画像の制作：テキストと画像を組み合わせたビジュアル制作
• 複雑な画像合成：複数の写真を重ねて自然に見せるコンポジット作業
• テクスチャやパターンの作成：Webサイトの背景やボタンに使用するテクスチャ素材
• 印刷物のデザイン：CMYK対応が必要な名刺やチラシの制作

Photoshopの弱み

Photoshopはラスター（ビットマップ）画像の編集に強い反面、UIデザインのワークフローには向いていない部分があります。

• リアルタイムの共同編集ができない
• コンポーネントの管理機能がFigmaに比べて限定的（Smart Objectはあるが、バリアント管理は弱い）
• プロトタイピング機能がない
• 開発者への受け渡し（デベロッパーハンドオフ）の機能が弱い
• デスクトップアプリのため、環境依存が大きい

Figmaの特徴と強み

UIデザインに特化したクラウドツール

Figmaは、ブラウザ上で動作するクラウドベースのUIデザインツールです。インストール不要で、URLを共有するだけでチームメンバーやクライアントとリアルタイムに共同作業ができます。WebサイトやアプリのUIデザイン、プロトタイピング、デベロッパーハンドオフを1つのツールで完結できる点が大きな強みです。

Figmaが選ばれる場面

• WebサイトのUIデザイン：ワイヤーフレームからデザインカンプまで一貫して制作
• アプリのUI/UXデザイン：画面遷移やインタラクションを含むプロトタイプ制作
• コンポーネントライブラリの構築：再利用可能なUIパーツをチームで共有
• デザインシステムの管理：Variables機能でデザイントークンを定義・管理
• 開発者との連携：Dev Mode（開発モード）でCSSコードや素材の書き出し情報を自動表示

Figmaの注目機能

Figmaの機能の中で、特にWebデザイナーにとって有用な機能をピックアップします。

• Auto Layout：要素の配置を自動調整する機能。テキスト量に応じてボタンのサイズが変わる、カードの高さが内容に合わせて伸縮するなど、レスポンシブなデザインを直感的に設計できます
• Components & Variants：1つのコンポーネントに複数のバリエーション（サイズ、状態、タイプ）を持たせて管理できる
• Prototyping：画面間の遷移やインタラクション（ホバー、クリック、ドラッグなど）をFigma上で設定し、動くプロトタイプとして共有できる
• Variables：デザイントークンをFigma上で変数として管理し、モードの切り替え（ライト/ダーク、デスクトップ/モバイルなど）にも対応

FigmaのAuto Layoutは慣れるまでちょっと大変だけど、一度マスターするとデザインのスピードが格段に上がるよ。CSSのFlexboxと似た考え方だから、コーディング経験がある人は飲み込みが早いかも。

PhotoshopとFigmaの直接比較

料金プランの比較

両ツールの料金体系は以下の通りです。

• Photoshop：フォトプラン（Lightroom付き・1TB）で月額2,380円（税込）、単体プランで月額約3,280円。Creative Cloud全アプリプランの場合は月額約7,780円
• Figma：個人利用のStarterプランは無料（3プロジェクトまで）。Professionalプランはエディター1人あたり月額$16（年額払い）。Organizationプランはエディター1人あたり月額$45

Figmaは無料プランでも基本的なUIデザイン機能が使えるため、個人やスモールチームで始めやすい利点があります。一方、Photoshopのフォトプランは、LightroomとPhotoshopの両方が使えてコストパフォーマンスが高い選択肢です。

学習コストの比較

• Photoshop：機能が膨大なため、すべてを習得するには時間がかかる。ただし、Web用途に限定すれば必要な機能は絞り込める
• Figma：UIデザインに特化しているため、基本操作の習得は比較的早い。ただし、Auto LayoutやVariantsなどの高度な機能は理解に時間がかかることもある

ファイル管理の比較

• Photoshop：PSD形式のローカルファイル。バージョン管理は手動（ファイル名に日付をつけるなど）。Creative Cloudに保存すればクラウド同期も可能だが、リアルタイム共同編集は非対応
• Figma：クラウド上にファイルが保存され、バージョン履歴が自動記録される。URLを共有するだけで閲覧・編集可能。オフラインでの作業は制限あり

目的別のツール選択ガイド

WebサイトのUIデザイン → Figma

Webサイトのレイアウト設計、ワイヤーフレーム作成、デザインカンプ制作にはFigmaが適しています。コンポーネントの再利用、レスポンシブ対応の設計、プロトタイプの作成、開発者への受け渡しまで、UIデザインのワークフロー全体をカバーできます。

写真・画像の加工 → Photoshop

Webサイトに掲載する写真のレタッチ、バナー画像の制作、複雑な画像合成にはPhotoshopが適しています。Figmaにも画像の簡易編集機能はありますが、明るさや色調の細かな調整、レイヤーマスクを使った高度な合成はPhotoshopの領域です。

バナーやSNS用画像 → どちらでも可

バナーやSNS投稿用の画像は、Photoshop、Figmaのどちらでも制作できます。テキストと写真を組み合わせるシンプルなバナーであればFigmaで十分対応可能です。写真の合成や高度なエフェクトが必要な場合はPhotoshopを使いましょう。

チームでの共同作業 → Figma

デザイナー同士の共同作業、クライアントへのレビュー共有、開発者との連携にはFigmaが非常に便利です。URLを送るだけで閲覧でき、コメント機能でフィードバックのやり取りも完結します。

現場のWebデザイナーは「FigmaでUI設計 → Photoshopで画像素材を加工 → Figmaに配置」っていうワークフローが多いよ。両方使えるようになるのが理想的。

PhotoshopからFigmaへの移行を考えている方へ

移行時の心構え

長年Photoshopを使ってきた方がFigmaに移行する際、操作感の違いに戸惑うことがあります。特に以下の点は考え方を切り替える必要があります。

• Photoshopのレイヤー構造とFigmaのフレーム構造は考え方が異なる
• Photoshopのピクセル操作感覚から、Figmaのベクター＋制約ベースの感覚への切り替え
• ファイルをローカルに保存する習慣から、クラウド上で管理する習慣への切り替え

段階的な移行プラン

一度にすべてをFigmaに移行するのではなく、以下のステップで段階的に進めるのがおすすめです。

• Step 1：新規のワイヤーフレーム・UI設計をFigmaで行う
• Step 2：画像素材の加工はPhotoshopで継続し、Figmaに配置する
• Step 3：コンポーネントライブラリをFigmaで構築し、再利用の仕組みを整える
• Step 4：プロトタイプとクライアントレビューもFigma上で完結させる

よくある質問（Q&A）

まとめ

PhotoshopとFigmaは競合ではなく補完関係にあるツールです。Photoshopは写真のレタッチ、画像合成、バナー制作などのピクセル操作に強く、FigmaはUI設計、コンポーネント管理、プロトタイピング、チーム連携に強みを持っています。

WebデザインのUI設計においてはFigmaが主流になっていますが、画像素材の制作にはPhotoshopが依然として必要な場面が多いのが実情です。両ツールの得意分野を理解し、プロジェクトの要件に応じて使い分けましょう。これからWebデザインを始める方は、まずFigmaでUI設計の基本を学び、必要に応じてPhotoshopの画像編集スキルを追加していくのが効率的なルートです。

「どっちが良い？」じゃなくて「どっちをいつ使う？」が正しい問いだよ。両方の基本を押さえておけば、どんな案件にも対応できるようになるから。

Webサイトやアプリの規模が大きくなるにつれて、「ボタンのスタイルがページごとに微妙に違う」「同じような見出しなのにフォントサイズがバラバラ」といったUIの不整合が発生しがちです。これらの問題は、デザインの一貫性を損なうだけでなく、開発効率の低下やメンテナンスコストの増大にもつながります。

こうした課題を解決するのがデザインシステムです。デザインシステムとは、UIコンポーネント、デザイントークン、ガイドラインなどを体系的にまとめた「デザインの共通言語」のことで、Google（Material Design）、Apple（Human Interface Guidelines）、SmartHR（SmartHR Design System）など、多くの企業が構築・公開しています。

この記事では、デザインシステムの基本概念から構築手順、運用のコツまでを解説します。

デザインシステムって大企業のもの、って思われがちだけど、小規模なチームでも「自分だけのルールブック」として作っておくとめちゃくちゃ便利だよ。

デザインシステムの構成要素

デザイントークン

デザイントークンは、デザインシステムの最も基礎的な要素です。色、フォントサイズ、余白、角丸、影などの「デザイン上の値」を変数として定義したもので、デザインとコードの間で共通の値を参照する仕組みとして機能します。

例えば、メインカラーを#3B82F6と直接指定するのではなく、--color-primaryというトークンに格納しておきます。メインカラーを変更する場合、トークンの値を1箇所変えるだけで、サイト全体に反映されます。

UIコンポーネント

UIコンポーネントは、ボタン、入力フォーム、カード、モーダル、ナビゲーションなど、再利用可能なUI部品です。各コンポーネントのデザインパターン（バリエーション、ステート、サイズなど）をあらかじめ定義し、Figmaのコンポーネントライブラリやコードのコンポーネントライブラリとして管理します。

デザインガイドライン

トークンやコンポーネントの「使い方」を説明するドキュメントです。「どのような場面でこのボタンを使うのか」「余白のルール」「アイコンの使用ルール」「文章のトーン&マナー」などを明文化します。

デザイントークンの設計方法

トークンの階層構造

デザイントークンは、以下の3つの階層に分けて設計するのが一般的です。

• プリミティブトークン（Global Token）：色やフォントサイズなどの「生の値」を定義する最下層。--blue-500: #3B82F6のように色名とレベルで管理する
• セマンティックトークン（Alias Token）：プリミティブトークンに「意味」を持たせたもの。--color-primary: var(--blue-500)のように用途名で参照する
• コンポーネントトークン：特定のコンポーネントに限定したトークン。--button-bg-primary: var(--color-primary)のようにコンポーネント名を含める

プリミティブトークンだけでは「何に使う色なのか」が分からないため、セマンティックトークンの設計が重要です。--blue-500ではなく--color-primaryと命名することで、デザインの意図がコードに反映されます。

色のトークン設計

色のトークンは、まずプリミティブトークンとしてカラーパレットを定義し、その上にセマンティックトークンを構築します。

• ブランドカラー：primary、secondary、tertiaryなどのブランドを表す色
• 機能カラー：success（成功）、warning（警告）、error（エラー）、info（情報）
• ニュートラルカラー：背景色、テキスト色、ボーダー色などに使うグレーの階調
• 表面カラー：surface-primary（メインの背景）、surface-secondary（セクション背景）など

タイポグラフィのトークン設計

フォントサイズ、行間（line-height）、フォントウェイト（太さ）、レタースペーシング（字間）などをトークンとして定義します。

• フォントサイズ：xs（12px）、sm（14px）、md（16px）、lg（20px）、xl（24px）、2xl（32px）のようなスケールを定義
• 行間：tight（1.25）、normal（1.5）、relaxed（1.75）などの段階を設ける
• フォントウェイト：regular（400）、medium（500）、bold（700）などを定義

スペーシング（余白）のトークン設計

余白の値をトークン化することで、サイト全体の余白に一貫性を持たせることができます。4の倍数または8の倍数のスケール（4px、8px、12px、16px、24px、32px、48px、64px）が広く採用されています。

トークンの命名ルールは最初にしっかり決めておくこと。途中で変えると全部書き直しになるから、既存のデザインシステム（Material Design、SmartHRなど）の命名を参考にするといいよ。

UIコンポーネントの設計と管理

コンポーネントの粒度を決める

コンポーネントの粒度（どこまで細かく分けるか）は、Atomic Designの考え方を参考にすると整理しやすくなります。

• Atoms（原子）：ボタン、ラベル、アイコン、入力フィールドなど最小単位のUI要素
• Molecules（分子）：検索バー（入力フィールド＋ボタン）、フォームグループ（ラベル＋入力フィールド＋エラーメッセージ）など、Atomsの組み合わせ
• Organisms（有機体）：ヘッダー、フッター、カードリスト、ナビゲーションバーなど、Moleculesの組み合わせ
• Templates/Pages：ページ全体のレイアウトパターン

コンポーネントのバリエーション設計

各コンポーネントに対して、以下の観点でバリエーションを設計します。

• タイプ：Primary（主要）、Secondary（補助）、Tertiary（第3）、Ghost（枠線のみ）
• サイズ：Small、Medium、Large
• 状態（ステート）：Default、Hover、Active、Focus、Disabled、Loading

Figmaでのデザインシステム構築

Figma Variablesの活用

Figmaでは、Variables（変数）機能を使ってデザイントークンを定義できます。色、数値、文字列、ブール値をVariablesとして登録し、コンポーネントのプロパティにバインドすることで、トークンの変更がデザイン全体に即座に反映されます。

さらに、VariablesのModes機能を使えば、ライトモードとダークモードの色セットを切り替えたり、デスクトップとモバイルで異なるスペーシングを適用したりすることも可能です。

コンポーネントライブラリの公開

Figmaで作成したコンポーネントは、チームライブラリとして公開することで、他のファイルからも参照できるようになります。コンポーネントを更新したら、ライブラリを「Publish」するだけで、参照しているすべてのファイルに更新通知が届きます。

デザインシステムの運用と維持

ドキュメントの整備

デザインシステムは構築して終わりではなく、継続的な運用と更新が必要です。各コンポーネントの使用ルール、トークンの命名規則、変更履歴などをドキュメントとして整備しておくことで、チームメンバーが正しくデザインシステムを活用できるようになります。

Storybookを導入すれば、UIコンポーネントのカタログを自動生成でき、各コンポーネントの見た目や挙動を確認しながら開発を進められます。

ガバナンスの確立

デザインシステムの品質を維持するためには、変更管理のルールを決めておく必要があります。

• コンポーネントの追加・変更を誰が承認するか
• 変更の影響範囲をどのように評価するか
• バージョン管理はどのように行うか（セマンティックバージョニングなど）
• 定期的なレビューの頻度とメンバー

デザインシステムは「生き物」だから、放置すると腐っちゃうよ。月1回でもいいから「今のシステムで困ってることない？」ってチームで振り返る時間を作ろう。

小規模チームでのデザインシステムの始め方

最小限の構成から始める

デザインシステムの構築は、大がかりなプロジェクトにする必要はありません。以下の3ステップで小さく始めましょう。

• Step 1：色のトークンを定義する（メインカラー、サブカラー、テキスト色、背景色）
• Step 2：タイポグラフィのトークンを定義する（見出し、本文、キャプションのフォントサイズ・行間）
• Step 3：最頻出のコンポーネントだけを作る（ボタン、入力フィールド、カード）

最初から完璧なデザインシステムを目指す必要はありません。実際のプロジェクトで使いながら徐々に拡充していくのが、現実的かつ持続可能なアプローチです。

既存プロジェクトからの抽出

既にあるWebサイトやアプリのUIを棚卸しして、共通のパターンを抽出するのも有効な方法です。「すでに使っている色」「すでに使っているボタンのスタイル」をリストアップし、それを整理・統一するところからデザインシステムを構築できます。

よくある質問（Q&A）

まとめ

デザインシステムは、デザイントークン、UIコンポーネント、ガイドラインの3つの要素で構成され、UIの一貫性と開発効率を両立させる仕組みです。トークンは「プリミティブ → セマンティック → コンポーネント」の3層構造で設計し、コンポーネントはタイプ・サイズ・ステートのバリエーションを定義します。

まずは色とタイポグラフィのトークン定義から始めて、最頻出のコンポーネントを3〜5種類作るところからスタートしましょう。構築して終わりではなく、継続的な運用とチームでのルール共有が、デザインシステムを「使われるもの」にするための鍵です。

デザインシステムは「作ること」がゴールじゃなくて「使われること」がゴール。チーム全員が使いやすい状態を保つことが一番大事だよ。

Webデザインのトレンドは、テクノロジーの進化やユーザーの嗜好の変化に伴い、常に移り変わっています。フラットデザインからマテリアルデザイン、ニューモーフィズム、グラスモーフィズムと、数年ごとに新しいデザイン手法が登場し、Webサイトの見た目や体験は大きく変化してきました。

ただし、トレンドをすべて取り入れる必要はありません。大切なのは、トレンドの中から自分のプロジェクトに合うものを見極めて、適切に取り入れることです。

この記事では、現在注目されているWebデザインのトレンドを幅広く紹介し、それぞれの特徴と実践的な取り入れ方を解説します。

トレンドを知ることは大事だけど、流行りだからって全部詰め込むのはNG。サイトの目的やターゲットに合ったものだけを選ぼう。

Bento Grid（ベントウグリッド）レイアウト

Bento Gridとは

Bento Grid（ベントウグリッド）は、日本の弁当箱のように四角い枠をパズルのように組み合わせて情報を配置するレイアウト手法です。AppleのWebサイトで多用されたことから注目を集め、多くの企業サイトやプロダクトページに採用されるようになりました。

従来のグリッドレイアウトとの違いは、すべてのカードが同じサイズではなく、大小さまざまなサイズのカードが隙間なく敷き詰められている点です。これにより、情報の優先度を視覚的に表現しつつ、見た目にも変化があって飽きさせないレイアウトが実現できます。

取り入れ方のポイント

CSS Gridを使えば、Bento Gridレイアウトは比較的簡単に実装できます。grid-template-columnsとgrid-template-rowsで基本のグリッドを定義し、grid-columnとgrid-rowでカードごとのスパン（占有する列・行の数）を指定します。

レスポンシブ対応では、モバイル表示時にグリッドを1列に崩す必要があります。デスクトップでのBento Gridレイアウトをそのままスマートフォンに適用すると、カードが極端に小さくなって読めなくなるため注意しましょう。

マイクロインタラクション

マイクロインタラクションとは

マイクロインタラクションは、ボタンのホバー時に微かに膨らむ、スクロールに連動してフェードインする、カート追加時に数字が跳ねるなど、小さなアニメーション反応のことです。ユーザーの操作に対して即座にフィードバックを返すことで、「ちゃんと反応している」という安心感を与えます。

効果的な使い方

マイクロインタラクションが効果を発揮する場面は以下の通りです。

• ボタンのホバー・クリック：色の変化、影の追加、微妙な拡大で「押せる」ことを示す
• フォーム入力：フォーカス時のラベルの移動、バリデーション結果の即時表示
• ページ遷移：コンテンツのフェードイン、スケルトンスクリーンからの切り替え
• 通知：新着メッセージのバッジアニメーション、トースト通知のスライドイン

AI活用のパーソナライゼーション

AIによる動的コンテンツ表示

AI技術の発展により、訪問者の属性や行動履歴に応じてWebサイトのコンテンツを動的に切り替えるパーソナライゼーションが身近になりつつあります。例えば、初回訪問者には基本的な情報を、リピーターには新着情報や関連コンテンツを優先的に表示するといった対応が可能です。

AIによるビジュアル生成

画像生成AIの発展により、Webサイトで使用するイラストやアイコン、背景画像をAIで生成するケースが増えています。特に、統一感のあるイラストセットを短時間で作成できる点は、デザインリソースが限られている場面で大きなメリットになります。

ただし、AI生成画像には著作権やライセンスに関する議論がまだ続いているため、商用利用の際はサービスごとの利用規約を確認する必要があります。

AI生成画像は便利だけど、「他のサイトと似たような画像になりやすい」のが弱点。オリジナリティを出すなら、AI画像を素材として人の手で加工するのがベターだよ。

ダークモードの標準化

ダークモード対応の重要性

OSやブラウザのダークモード機能が一般的になったことで、Webサイトにもダークモード対応が求められるようになっています。ダークモードは目の疲労を軽減する効果があるとされ、特に夜間の利用や長時間の閲覧において好まれる傾向があります。

ダークモードのデザインポイント

• 背景色：真っ黒（#000000）ではなく、濃いグレー（#121212〜#1E1E1E）を使うのが推奨
• テキスト色：真っ白（#FFFFFF）は眩しいため、少し明度を落とした白（#E0E0E0程度）が目に優しい
• エレベーション：ダークモードでは影が見えにくくなるため、背景色の明度差で奥行きを表現する
• カラーの調整：ライトモードのメインカラーをそのまま使うと彩度が高すぎて目に刺さる場合がある。明度を下げるか彩度を抑える調整が必要

CSSのprefers-color-schemeメディアクエリを使えば、ユーザーのOSの設定に応じて自動的にダークモードに切り替えることができます。

3D表現とインタラクティブグラフィックス

Web上での3Dの活用

Three.jsやSpline、React Three Fiberといったツールの発展により、Web上での3D表現が以前よりも手軽に実装できるようになっています。製品のプロモーションページでは、3Dモデルを回転させて全方位から確認できるビューアーや、スクロールに連動して3Dオブジェクトが変形するインタラクションが注目を集めています。

取り入れ方の注意点

3D表現はインパクトがある反面、パフォーマンスへの影響が大きいため、使いどころを慎重に選ぶ必要があります。

• 3Dは「見せたいもの」がある場合に使う（プロダクト紹介、建築ビジュアライゼーションなど）
• 装飾のためだけに3Dを使うのは避ける（ページの読み込みが遅くなるだけ）
• モバイルでの動作を必ず確認する（端末の性能差が大きい）
• 3Dが表示できない環境向けにフォールバック（代替表示）を用意する

アナログ表現の回帰

手描き感のあるデザイン

AIの台頭により、逆に「人の手」を感じるアナログ的な表現が価値を持つようになっています。手描きのイラスト、テクスチャのある紙のような背景、インクが滲んだような文字表現など、デジタルの中にあえてアナログの質感を取り入れるデザインが増えています。

この手法は、温かみや親しみやすさを演出したい場合に効果的です。カフェ、教育、ヘルスケア、子ども向けサービスなどのサイトで特に相性が良い傾向があります。

実装のヒント

• SVGフィルターで手描き風の線のゆらぎを表現する
• テクスチャ画像をオーバーレイして紙の質感を加える
• Google Fontsの手書き風フォント（Caveat、Patrick Handなど）を見出しに使用する

「AIっぽくないデザイン」が差別化になる時代だね。手描きイラストやコラージュ的な表現は、他のサイトとの差をつける有力な手段になるよ。

アクセシビリティ重視のデザイン

インクルーシブデザインの浸透

Webアクセシビリティへの意識が高まる中、「アクセシビリティ対応」はデザインの後工程で行う付加的な作業ではなく、設計段階から組み込むべき要素として認識されつつあります。WCAG 2.2の勧告以降、コントラスト比の確保、フォーカスインジケーターの表示、十分なタッチターゲットサイズの確保などが、デザインの品質基準に組み込まれるようになっています。

実践的な取り組み

• フォントサイズ：本文は最低16px以上を確保する
• 行間：本文の行間はフォントサイズの1.5倍以上を目安にする
• タッチターゲット：モバイルのボタンやリンクは最低44px×44pxのタッチ領域を確保する
• 色だけに頼らない：エラーを赤色だけで示すのではなく、アイコンやテキストでも伝える

ミニマルデザインの進化

「引き算のデザイン」の深化

ミニマルデザイン自体は以前からあるトレンドですが、単に要素を減らすだけではなく、余白の使い方やタイポグラフィの繊細なコントロールによって高い情報伝達力を維持しながらシンプルさを追求する方向に進化しています。

具体的には、大胆な余白、大きなフォントサイズの見出し、限定された色数（モノトーン＋アクセント1色）、写真やイラストを主役にしたレイアウトなどが特徴です。MUUUUU.ORGなどのギャラリーサイトで、洗練されたミニマルデザインの事例を多数確認できます。

よくある質問（Q&A）

まとめ

Webデザインのトレンドは、Bento Gridレイアウト、マイクロインタラクション、AIパーソナライゼーション、ダークモード、3D表現、アナログ回帰、アクセシビリティ重視、ミニマルデザインの進化など、多岐にわたります。

重要なのは、すべてのトレンドを追いかけることではなく、プロジェクトの目的とターゲットユーザーに合ったものを選択し、パフォーマンスやアクセシビリティとのバランスを保ちながら取り入れることです。ギャラリーサイトやデザインコミュニティを定期的にチェックして、常にインプットを続けることが、デザインスキル向上の近道になります。

トレンドは「引き出し」として持っておくのが一番。クライアントの要望やサイトの特性に合わせて、引き出しから最適なものを選べるようになろう。

Webサイトに動きを取り入れると、ユーザーの目を引くだけでなく、操作のフィードバックや情報の視認性向上にもつながります。CSSアニメーションは、JavaScriptを使わずにHTML要素に動きをつけられる手法で、パフォーマンスへの影響も少なく実装できるのが特徴です。

しかし、CSSアニメーションには「transition」と「@keyframes + animation」という2つのアプローチがあり、それぞれの特性と使い分けを理解しておかないと、無駄に複雑なコードを書いてしまう原因になります。

この記事では、CSSアニメーションの基本から実践的なテクニック、パフォーマンス上の注意点までを体系的に解説します。

CSSアニメーションは「transitionで十分か、keyframesが必要か」を最初に判断するのがコツだよ。無理にkeyframesを使わなくていい場面は結構多いんだ。

transitionの基本と使い方

transitionとは

transitionは、CSSプロパティの値が変化する際に、その変化を滑らかに補間するための仕組みです。例えば、ボタンにホバーした際に背景色が瞬時に切り替わるのではなく、0.3秒かけてふんわりと変化させることができます。

transitionの基本構文は以下の通りです。

• transition-property：アニメーションさせるCSSプロパティ（例：background-color, transform, opacity）
• transition-duration：アニメーションの時間（例：0.3s, 300ms）
• transition-timing-function：動きの加減速パターン（例：ease, ease-in-out, linear）
• transition-delay：アニメーション開始までの待機時間

これらをまとめてtransition: background-color 0.3s ease;のようにショートハンドで記述するのが一般的です。

transitionの使いどころ

transitionは「状態Aから状態Bへの変化」を表現するのに適しています。具体的には以下のような場面で活用されます。

• ボタンのホバーエフェクト（背景色・サイズ・影の変化）
• ナビゲーションメニューの展開・収納
• カードの浮き上がりエフェクト（box-shadowとtransformの変化）
• フォーム入力欄のフォーカス時の枠線変化
• リンクテキストの色変化

@keyframesとanimationの基本

@keyframesとは

@keyframesは、アニメーションの各段階（キーフレーム）を定義するCSSの構文です。transitionが「開始と終了の2点間の変化」しか表現できないのに対し、@keyframesは複数の中間地点を指定して、より複雑な動きを表現できます。

キーフレームは「from（0%）」と「to（100%）」の2点で定義することも、「0%, 25%, 50%, 75%, 100%」のように細かく分割して定義することもできます。

animationプロパティの設定項目

定義した@keyframesをHTML要素に適用するには、animationプロパティを使用します。

• animation-name：@keyframesで定義した名前を指定
• animation-duration：1サイクルの所要時間
• animation-timing-function：動きの加減速パターン
• animation-delay：開始までの待機時間
• animation-iteration-count：繰り返し回数（infiniteで無限ループ）
• animation-direction：再生方向（normal, reverse, alternate）
• animation-fill-mode：アニメーション前後の状態（forwards, backwards, both）
• animation-play-state：再生・一時停止の制御（running, paused）

keyframesの使いどころ

@keyframesは以下のような場面で力を発揮します。

• ローディングアニメーション（回転、点滅、バウンスなど）
• スクロール連動のフェードインアニメーション
• 注目要素のパルス（点滅）効果
• スライダーの自動切り替え
• 背景グラデーションのアニメーション

transitionは「AからBへ」、keyframesは「AからBを経由してCへ」みたいに中間の動きも制御できるのが大きな違い。まずはtransitionで済むか考えて、足りなければkeyframesを使おう。

transitionとkeyframesの使い分け判断基準

判断フローチャート

どちらを使うべきか迷った場合は、以下の判断基準を参考にしてください。

• 変化が「開始→終了」の2段階で済むか → transition
• 中間の動きを細かく制御したいか → @keyframes
• ユーザー操作（hover、clickなど）をトリガーにするか → transitionが第一候補
• ページ読み込み時に自動で再生するか → @keyframes
• アニメーションをループさせるか → @keyframes（iteration-count: infinite）
• 逆再生や交互再生が必要か → @keyframes（animation-direction）

迷ったらまずtransitionで実装してみましょう。transitionの方がコード量が少なく、メンテナンスも容易です。transitionでは表現できない動きが必要になった時点で@keyframesに切り替えるのが効率的です。

イージング（timing-function）の使い方

標準イージングの種類

イージングとは、アニメーションの速度変化のパターンを指します。同じ動きでもイージングを変えるだけで印象が大きく変わるため、適切なイージングの選択はアニメーションの品質に直結します。

• linear：一定の速度で変化。機械的な印象になるため、人為的な動きには不向き
• ease：ゆっくり始まり、速くなり、ゆっくり終わる。最も自然に見えるデフォルト値
• ease-in：ゆっくり始まり、加速して終わる。画面外への退出に適する
• ease-out：速く始まり、減速して終わる。画面内への登場に適する
• ease-in-out：ゆっくり始まり、ゆっくり終わる。要素の移動やサイズ変更に適する

cubic-bezierによるカスタムイージング

標準のイージングでは表現できない動きを作りたい場合は、cubic-bezier()関数でカスタムイージングを定義できます。cubic-bezier.comというツールを使えば、ベジェ曲線を視覚的に操作しながらイージングを作成できます。

バウンス効果（弾むような動き）やオーバーシュート（目標位置を一度通り過ぎてから戻る動き）なども、cubic-bezierで表現できます。

パフォーマンスを意識したアニメーション設計

GPUアクセラレーションを活用する

CSSアニメーションのパフォーマンスは、アニメーションさせるプロパティによって大きく異なります。

• 高パフォーマンス（GPU処理）：transform、opacity
• 中パフォーマンス（レイアウト再計算なし）：color、background-color
• 低パフォーマンス（レイアウト再計算あり）：width、height、margin、padding、top、left

要素の移動にはtop/leftではなくtransform: translateを、サイズ変更にはwidth/heightではなくtransform: scaleを使うのがパフォーマンス面で推奨されます。transformとopacityのアニメーションはGPUで処理されるため、メインスレッドをブロックせず滑らかに動作します。

will-changeプロパティの適切な使用

will-changeプロパティを使うと、ブラウザに「この要素はアニメーションする予定がある」と事前に伝えることができ、レンダリングの最適化が促されます。ただし、すべての要素にwill-changeを指定するのは逆効果です。実際にアニメーションする要素にのみ指定し、アニメーション完了後に解除するのが適切な使い方です。

prefers-reduced-motionへの対応

一部のユーザーは、アニメーションによって不快感やめまいを感じることがあります。OSのアクセシビリティ設定で「動きを減らす」を有効にしているユーザーに配慮するため、prefers-reduced-motionメディアクエリを使ってアニメーションを制御しましょう。

MDNのprefers-reduced-motionのドキュメントに詳しい実装方法が掲載されています。

「動きがあるとカッコいい」って気持ちは分かるけど、パフォーマンスとアクセシビリティを無視したアニメーションはマイナス評価になるよ。transformとopacityを中心に組み立てよう。

実務で使えるCSSアニメーションのパターン

フェードイン

ページ読み込み時やスクロール時に要素をふんわりと表示するフェードインは、最も使用頻度の高いアニメーションパターンです。opacityを0から1に変化させるシンプルな実装で、translateYを組み合わせて下から浮き上がるような動きを加えると、より洗練された印象になります。

ホバーエフェクト

ボタンやカードにホバーした際のエフェクトは、ユーザーに「この要素はクリックできる」というフィードバックを与えます。背景色の変化、box-shadowの追加、transform: scaleで微妙に拡大する、transform: translateYで少し浮き上がるなどのパターンが定番です。

ローディングスピナー

データ読み込み中に表示する回転アニメーションは、@keyframesのtransform: rotateで実装します。animation-iteration-count: infiniteで無限ループさせ、ユーザーに「処理中」であることを視覚的に伝えます。

スクロールトリガーアニメーション

Intersection Observer APIとCSSアニメーションを組み合わせることで、要素が画面内に入ったタイミングでアニメーションを発動させることができます。JavaScriptでクラスを付与し、CSSでそのクラスに対してアニメーションを定義するというパターンが一般的です。

よくある質問（Q&A）

まとめ

CSSアニメーションは、transitionとkeyframesの2つのアプローチを適切に使い分けることで、パフォーマンスを保ちながら効果的な動きを実装できます。transitionは「状態Aから状態Bへの変化」に、keyframesは「複雑な多段階の動き」に適しています。

パフォーマンスの観点からは、transformとopacityを中心にアニメーションを設計し、prefers-reduced-motionによるアクセシビリティ対応も忘れずに実装しましょう。過度なアニメーションはユーザー体験を損なう原因になるため、「本当に必要な動き」を見極めることが重要です。

アニメーションは「スパイス」であって「メインディッシュ」じゃない。さりげない動きほどプロっぽく見えるから、やりすぎには注意しよう。

Webアクセシビリティとは、障がいのある方や高齢者を含むすべてのユーザーが、Webサイトの情報にアクセスし、操作できるようにすることを指します。視覚障がい、聴覚障がい、運動障がい、認知障がいなど、さまざまな特性を持つ方がWebを利用しており、こうした方々が不便なく利用できるサイト制作は、もはや「配慮」ではなく「必須要件」になりつつあります。

日本では障害者差別解消法の改正により、民間事業者にも合理的配慮の提供が義務化されました。Webサイトのアクセシビリティ対応は法的リスクの回避だけでなく、ユーザー層の拡大やSEO効果にもつながる重要な取り組みです。

この記事では、Webアクセシビリティの基本概念からWCAGの具体的な対応ポイント、実務で使えるチェック方法までを解説します。

アクセシビリティって「特別な対応」じゃなくて、「誰もが使いやすいサイトを作る」ってことだよ。結果的にすべてのユーザーにとっての使い勝手が良くなるんだ。

WCAGとは？4つの原則と適合レベル

WCAGの概要

WCAG（Web Content Accessibility Guidelines）は、W3C（World Wide Web Consortium）が策定した国際的なWebアクセシビリティのガイドラインです。現在広く参照されているのはWCAG 2.1およびWCAG 2.2で、MDN Web Docsでも詳しい解説が公開されています。

WCAG 2.2は2023年10月にW3C勧告として公開され、認知障がいのある方やタッチ操作に依存する方への配慮を強化する9つの新しい達成基準が追加されました。

4つの原則（POUR）

WCAGは以下の4つの原則に基づいて構成されています。

• Perceivable（知覚可能）：情報やUIコンポーネントが、ユーザーに知覚できる形で提示されていること。画像にalt属性を付ける、動画に字幕を付けるなど
• Operable（操作可能）：UIコンポーネントやナビゲーションが操作可能であること。キーボードだけですべての操作ができる、十分な操作時間が確保されているなど
• Understandable（理解可能）：情報やUIの操作方法が理解できること。一貫したナビゲーション、エラーの特定と修正のサポートなど
• Robust（堅牢）：さまざまな支援技術（スクリーンリーダーなど）で正しく解釈できること。正しいHTMLマークアップ、WAI-ARIAの適切な使用など

3段階の適合レベル

WCAGには達成基準ごとにA、AA、AAAの3段階の適合レベルが設定されています。

• レベルA：最低限のアクセシビリティ。これを満たさないと、一部のユーザーがサイトをまったく利用できない可能性がある
• レベルAA：標準的なアクセシビリティ。多くの公的機関や企業が目標とするレベル
• レベルAAA：最高レベルのアクセシビリティ。サイト全体での準拠は難しいが、可能な範囲で目指す

一般的な企業サイトでは、レベルAAの準拠を目標にすることが推奨されています。デジタル庁もJIS X 8341-3:2016とWCAG 2.2の両方を指標として活用しています。

すぐに取り組めるアクセシビリティ対応

画像にalt属性を正しく設定する

画像のalt属性は、スクリーンリーダーが画像の内容を読み上げる際に使用されます。装飾目的の画像にはalt=””（空文字）を設定し、情報を伝える画像には適切な説明文を記述しましょう。

• 良い例：alt="オフィスで会議中の3名のビジネスパーソン"
• 悪い例：alt="画像" alt="img001.jpg"

十分なカラーコントラストを確保する

テキストと背景色のコントラスト比は、WCAG 2.2のレベルAAでは以下の基準を満たす必要があります。

• 通常テキスト（18px未満）：コントラスト比4.5:1以上
• 大きなテキスト（18px以上、または14px以上で太字）：コントラスト比3:1以上

薄いグレーのテキストや淡い背景色の上のテキストは、見た目がおしゃれでもコントラスト比が不足している場合が多いため注意が必要です。

キーボード操作への対応

マウスを使用できないユーザーのために、Tabキーでのフォーカス移動、Enterキーでの実行、Escキーでの閉じる操作など、キーボードだけですべての機能にアクセスできるようにする必要があります。特に注意すべきポイントは以下の通りです。

• フォーカス順序が論理的であること（DOMの順序と視覚的な順序が一致していること）
• フォーカスインジケーター（アウトライン）が見えること。outline: none;で消してしまうのはNG
• カスタムコンポーネント（ドロップダウン、モーダルなど）もキーボードで操作できること

適切なHTML構造（セマンティックHTML）

見出しタグ（h1〜h6）を適切な階層で使用し、ナビゲーションには<nav>、メインコンテンツには<main>、補足情報には<aside>といったセマンティックなHTML要素を使うことで、スクリーンリーダーがページ構造を正確に把握できるようになります。

見出しのレベルを「見た目のサイズ」で選ぶのはアクセシビリティ的にNG。h1の次がh3になるような飛ばし方は避けて、論理的な階層を守ろう。

フォームのアクセシビリティ対応

ラベルとフォームコントロールの紐付け

すべてのフォーム入力要素には、対応するラベルを紐付ける必要があります。<label>要素のfor属性と<input>要素のid属性を一致させることで、スクリーンリーダーがフォームの入力内容を正しく読み上げられるようになります。

プレースホルダーをラベルの代わりに使用するのは避けましょう。プレースホルダーは入力を始めると消えてしまうため、何を入力すべきか分からなくなる問題があります。

エラーメッセージの伝え方

フォームのエラーは色だけで伝えてはいけません。赤い枠線だけでエラーを示すと、色覚特性のあるユーザーにはエラーが認識できません。テキストによるエラーメッセージ、アイコンの追加、エラー箇所へのフォーカス移動など、複数の手段でエラーを伝えましょう。

入力補助の提供

必須項目の明示、入力形式の説明（例：「半角英数字8文字以上」）、入力候補の表示（オートコンプリート）など、ユーザーが正しく入力できるための補助を提供することもアクセシビリティの重要な要素です。

アクセシビリティのチェック方法

自動チェックツール

手作業ですべてのアクセシビリティ基準をチェックするのは現実的ではありません。以下の自動チェックツールを活用して効率的に問題を検出しましょう。

• Lighthouse：Chrome DevToolsに内蔵されたパフォーマンス・アクセシビリティ監査ツール。アクセシビリティスコアと改善提案を表示してくれる
• axe DevTools：axe DevToolsはブラウザ拡張機能として利用でき、WCAG 2.2の達成基準に基づいた詳細なチェックが可能
• WAVE：Webページのアクセシビリティ問題を視覚的にハイライト表示するツール。エラー箇所とその理由が一目で分かる

手動チェックのポイント

自動ツールでは検出できない問題もあります。以下の手動チェックは必ず実施しましょう。

• キーボード操作テスト：マウスを使わず、Tab、Enter、Escキーだけでサイト全体を操作してみる
• スクリーンリーダーテスト：NVDAやVoiceOverを使って、ページの内容が正しく読み上げられるか確認する
• ズームテスト：ブラウザのズームを200%まで拡大し、テキストが重ならず読めるか確認する

アクセシビリティ対応のビジネスメリット

ユーザー層の拡大

日本には約964万人の障がい者がおり、高齢者を含めるとアクセシビリティの恩恵を受ける方はさらに多くなります。アクセシビリティ対応はユーザー層を広げ、サイトの利用者数を増やす施策として捉えることができます。

SEOへの好影響

アクセシビリティ対応の多くは、SEOの改善にも直結します。適切なalt属性の設定、セマンティックなHTML構造、見出しの階層構造、ページタイトルの適切な設定などは、検索エンジンがページの内容を正しく理解するためにも重要な要素です。

法的リスクの回避

海外ではアクセシビリティに関する訴訟が増加しており、日本でも障害者差別解消法の改正により事業者の対応義務が強化されています。先手を打ってアクセシビリティに対応しておくことは、法的リスクの回避につながります。

アクセシビリティ対応は「コスト」じゃなくて「投資」。対応した結果、すべてのユーザーにとって使いやすいサイトになるから、コンバージョン率の向上にもつながるんだ。

よくある質問（Q&A）

まとめ

Webアクセシビリティの対応は、WCAGの4つの原則（知覚可能・操作可能・理解可能・堅牢）を理解するところから始まります。alt属性の設定、カラーコントラストの確保、キーボード操作への対応、セマンティックなHTML構造の採用は、すべてのWebサイトで実施すべき基本的な対応です。

アクセシビリティは「特定の人のため」ではなく「すべてのユーザーのため」の取り組みです。LighthouseやaxeDevToolsなどの自動チェックツールと手動テストを組み合わせて、継続的にアクセシビリティの品質を向上させていきましょう。

まずは自分のサイトをLighthouseでチェックしてみよう。スコアの低い項目から改善するだけで、かなりアクセシビリティが向上するよ。

複数のWebデザイン案件を同時に進めていると、「あのファイルどこだっけ」「クライアントへの確認事項を忘れていた」といった問題に悩まされることが少なくありません。タスク管理ツール、メモアプリ、スプレッドシートなど、情報があちこちに散らばってしまい、管理コストだけで疲弊してしまう方も多いのではないでしょうか。

そんな悩みを解決してくれるのがオールインワンの情報管理ツール「Notion」です。Notionを使えば、タスク管理、参考デザインの収集、クライアント情報の管理、スケジュール管理などをひとつのワークスペースにまとめることができます。

この記事では、WebデザイナーがNotionをどのように活用すればデザイン業務を効率化できるのか、具体的な使い方を詳しく解説します。

Notionは「なんでもできる」ツールだからこそ、最初は何から始めればいいか迷いがち。Webデザイナーにとって本当に使える機能だけに絞って紹介するよ。

Notionがデザイン管理に向いている理由

情報の一元管理ができる

Notionの最大の特徴は、あらゆる種類の情報をひとつのワークスペースに集約できる点です。テキストメモ、画像の埋め込み、リンク集、タスクリスト、データベースなど、異なる形式の情報を同じページ内で管理できます。

Webデザインの業務では、参考サイトのURL、デザインカンプの画像、クライアントからのフィードバック、修正履歴など多岐にわたる情報を扱います。これらをNotion上に集約しておけば、案件ごとの情報を探す時間が大幅に短縮されます。

データベース機能でプロジェクトを構造化できる

Notionのデータベースは、スプレッドシートのように行と列でデータを管理しつつ、各行を個別のページとして展開できる機能です。プロジェクト名、ステータス、担当者、納期、優先度といったプロパティを自由に設定でき、フィルターやソートで必要な情報だけを抽出することもできます。

さらに、同じデータベースを「テーブルビュー」「ボードビュー」「カレンダービュー」「ガントチャートビュー」など複数の見せ方で表示できるため、目的に応じた情報の確認が可能です。

テンプレート機能で業務を標準化できる

毎回同じフォーマットで案件管理ページを作成するのは手間がかかります。Notionのテンプレート機能を使えば、あらかじめ作成した雛形をワンクリックで複製できるため、新規案件の立ち上げ時間を短縮できます。

案件管理データベースの構築方法

基本プロパティの設計

案件管理データベースを作成する際は、以下のプロパティを設定するのがおすすめです。

• 案件名：クライアント名＋プロジェクト名の形式で統一する
• ステータス：ヒアリング中、デザイン制作中、コーディング中、納品済みなどの選択肢を設定
• 納期：日付プロパティで管理し、カレンダービューで一覧表示する
• 優先度：高・中・低の3段階で分類する
• 単価：数値プロパティで案件金額を記録し、月間・年間の売上を把握する
• クライアント：リレーションプロパティでクライアントデータベースと紐付ける

ビューの使い分け

同じ案件データベースでも、ビューを切り替えることで異なる角度から情報を確認できます。

• ボードビュー：ステータスごとに案件をカンバン形式で表示。ドラッグ＆ドロップでステータスを変更できる
• カレンダービュー：納期を基準に案件をカレンダー上に配置。スケジュールの全体像を確認する際に便利
• テーブルビュー：全案件を一覧表示。フィルターで「進行中の案件のみ」「特定クライアントの案件のみ」などに絞り込める
• ガントチャートビュー：案件の開始日と終了日を横棒グラフで可視化。工数の重なりや空き期間を把握できる

ビューの使い分けがNotionの真骨頂だよ。「今週何やるか」はカレンダー、「今どの案件が進行中か」はボード、「売上の確認」はテーブルって感じで切り替えるのがおすすめ。

参考デザインの収集・管理術

Notion Web Clipperで参考サイトを保存する

気になるWebサイトを見つけたら、Notion Web Clipper（ブラウザ拡張機能）を使って即座にNotionに保存できます。URLだけでなくページのタイトルや概要も自動取得されるため、後から見返す際に内容を思い出しやすくなります。

保存先を「参考デザイン」データベースに指定しておけば、収集した参考サイトにタグやカテゴリを付けて分類・検索できるようになります。

ギャラリービューで視覚的に管理する

参考デザインの管理にはギャラリービューが最適です。スクリーンショット画像をカバー画像に設定すれば、Pinterestのようなビジュアルボードとして参考デザインを一覧表示できます。テイスト（モダン、ナチュラル、ポップなど）やカラー、業種でタグ付けしておけば、案件ごとに必要な参考デザインをすぐにフィルタリングできます。

スクリーンショットの貼り付けとコメント

参考デザインのページ内にスクリーンショットを貼り付け、「この余白のバランスが良い」「フォントの使い方を参考にしたい」といったメモを添えておくと、デザイン制作時の判断材料として活用できます。Notionのコメント機能を使えば、チームメンバーとの意見交換も同じページ上で完結します。

クライアント情報の管理方法

クライアントデータベースの作成

案件が増えてくると、クライアントごとの情報管理が重要になります。Notionでクライアントデータベースを作成し、以下の情報をまとめておきましょう。

• 会社名・担当者名：連絡先と合わせて記録
• 連絡手段：メール、Slack、Chatworkなど優先連絡手段を明記
• 過去の案件履歴：リレーションで案件データベースと紐付け
• 好みの傾向：デザインの好み、NGポイント、フィードバックの傾向をメモ
• 請求情報：支払いサイト、請求書の送付先など

クライアントの「好みの傾向」を記録しておくことが特に重要です。過去の修正指示やフィードバックの傾向を把握しておけば、初稿の段階でクライアントの好みに近いデザインを提案でき、修正回数を減らせます。

リレーション機能で情報を紐付ける

Notionのリレーション機能を使えば、クライアントデータベースと案件データベースを紐付けることができます。クライアントページを開くと、そのクライアントに関連するすべての案件が一覧で表示されるため、取引の全体像を把握するのに役立ちます。

デザインワークフローの構築

案件テンプレートの作成

新規案件を受注するたびにゼロからページを作るのは非効率です。案件テンプレートを作成して、以下のセクションをあらかじめ用意しておきましょう。

• ヒアリングシート：サイトの目的、ターゲットユーザー、参考サイト、好みのテイストなどを記録
• サイトマップ：ページ構成を箇条書きや表で整理
• デザインメモ：配色、フォント、レイアウト方針などの設計メモ
• 進行チェックリスト：ワイヤーフレーム確認、デザインカンプ提出、コーディング開始などの工程をチェックリスト化
• 修正ログ：クライアントからの修正指示と対応状況を時系列で記録

サブタスクとチェックリストの活用

大きなタスクを細分化して管理するには、Notionのサブページやチェックリストが便利です。例えば「トップページデザイン」というタスクの中に「ヘッダーデザイン」「メインビジュアル制作」「フッターデザイン」といったサブタスクを設定し、完了するたびにチェックを入れていきます。

進捗率が視覚的に把握できるため、タスクの漏れや遅延を早期に発見できます。

テンプレートを作るコツは、まず1案件をNotionで管理してみて「毎回必要な情報」が見えてきてから作ること。最初から完璧なテンプレートを目指すと挫折するよ。

Notionと外部ツールの連携

Figmaとの連携

NotionにはFigmaのファイルを埋め込む機能があります。FigmaのURLをNotionに貼り付けるだけで、デザインカンプのプレビューがNotion上に表示されます。クライアントにNotionページを共有すれば、Figmaのアカウントがなくてもデザインを確認してもらえるため、確認フローの簡略化に役立ちます。

GoogleカレンダーやSlackとの連携

Notionのインテグレーションを活用すれば、Googleカレンダーの予定をNotion上に表示したり、Notionのデータベースが更新されたときにSlackに通知を飛ばしたりすることが可能です。チーム開発の場合、Slackとの連携を設定しておくと情報共有がスムーズになります。

Notion AIの活用

Notion AIを使えば、議事録の要約、タスクの自動生成、文章の校正などをNotion上で完結させることができます。クライアントとの打ち合わせメモからタスクを自動抽出する使い方は、作業効率の向上に直結します。

Notionを長く使い続けるためのコツ

構造をシンプルに保つ

Notionで最もありがちな失敗は、ページやデータベースを作りすぎて構造が複雑になることです。情報が見つからなくなったり、どこに何を書けばいいか迷ったりすると、結局使わなくなってしまいます。

おすすめの構成は、トップページに「案件管理」「クライアント管理」「参考デザイン」「ナレッジベース」の4つのリンクだけを配置するシンプルな構成です。必要に応じてページを増やすのは構いませんが、階層は3階層以内に収めることを意識しましょう。

定期的な整理を習慣化する

完了した案件のページを「アーカイブ」ステータスに変更する、不要になったメモを削除するなど、週に一度は整理の時間を設けましょう。情報が蓄積されるほど検索ノイズが増えるため、定期的な棚卸しが欠かせません。

よくある質問（Q&A）

まとめ

Notionは、Webデザイナーの業務に必要な情報をひとつのワークスペースに集約できる強力なツールです。案件管理データベース、参考デザインの収集、クライアント情報の管理、ワークフローのテンプレート化など、さまざまな場面で業務効率を向上させてくれます。

まずは案件管理データベースの作成から始めて、慣れてきたら参考デザインの管理やクライアントデータベースへと徐々に拡張していくのがおすすめの進め方です。一度仕組みを構築してしまえば、案件数が増えても管理コストを抑えられるようになります。

最初は「とりあえず全部Notionに書く」くらいの気持ちで始めてみて。使っていくうちに自分にとってベストな構成が見えてくるから。