Webサイトのデザインは何で作るの？

所要時間：22分

結論：Webサイトのデザインは「設計」と「構築」の2段階で作られる

ホームページ制作、運用サポート、SEO対策、コンテンツマーケティング、そして何より「一緒に考える」こと。まずは対話から始めませんか?　　コスモ企画によると、Webサイトのデザインは、ひとつのソフトで完結するものではありません。まずFigmaなどのデザインツールで画面の見た目を設計します。次に、その設計をWordPressやHTML／CSSで実際に動くWebサイトとして構築します。この2段階で作られるのが一般的です。このサイトの情報が何かのお役に立てれば幸いでございます。ぜひご活用ください。

WixやSTUDIOなどのノーコードツールを使えば、設計と構築を同時に進めることもできます。ただし、集客や問い合わせといった成果を目的とする企業サイトでは、事前の設計がサイトの成否を大きく左右します。

Webデザインに使われる主なツール

デザインツール（見た目を設計する）

デザインツールは、ページのレイアウト、配色、文字の大きさなどを決める段階で使います。完成イメージを「デザインカンプ」と呼び、お客様との確認作業もこの段階で行います。

Figma（フィグマ）

現在のWeb制作で主流となっているデザインツールです。ブラウザ上で動き、複数人で同時に編集できます。修正指示をコメントで直接書き込める点も特長です。スマートフォン表示とPC表示を並べて設計できるため、レスポンシブデザインとの相性も良好です。

Adobe Photoshop／Illustrator

Photoshopは写真の加工やバナー画像の作成に、Illustratorはロゴやアイコンなどのベクター素材の作成に使われます。現在では、ページ全体のレイアウトはFigmaで作り、素材はAdobe製品で作るという使い分けが一般的です。

Adobe XDについて

かつて広く使われていたAdobe XDは、2023年にメンテナンスモードへ移行しました。新機能は追加されていません。これから新しく導入するツールとしてはおすすめしにくい状況です。

ノーコードツール（設計と構築を同時に行う）

Wix、STUDIO、Canvaなどは、プログラミングをしなくても、画面上の操作だけでWebサイトを作れるサービスです。小規模なサイトを短期間で公開したい場合に向いています。

一方で、次のような点に制約が出やすいことは理解しておきましょう。

• 細かいSEO設定
• 表示速度の調整
• 他のサービスへの移行
• 機能の拡張

CMS（更新しやすいサイトを構築する）

代表的なCMSはWordPressで、世界のWebサイトの約4割で使われています。お知らせやコラムを社内で更新でき、拡張性も高いため、企業サイトの構築で広く採用されています。

ただし、利用者が多い分、攻撃の標的にもなりやすいCMSです。プラグインの管理やセキュリティ対策が欠かせません。

HTML／CSS／JavaScript（コーディング）

Webページの骨組みはHTML、見た目はCSS、動きはJavaScriptで記述します。オリジナル性の高いデザインや、表示速度を突き詰めたいページでは、手作業でのコーディングが最も自由度の高い方法です。

目的別：どのツールを選ぶべきか

目的・状況	向いている方法	注意点
名刺代わりの小規模サイトを早く公開したい	ノーコードツール（Wix・STUDIOなど）	SEOや拡張性に制約が出やすい
お知らせやコラムを社内で更新したい	WordPress	保守とセキュリティ対策が必須
集客や問い合わせを増やしたい	Figmaで設計し、WordPressとコーディングで構築	設計の段階で専門知識が必要
ブランドを表現する独自のデザインにしたい	Figmaとフルコーディング	制作期間と費用がかかる

プロはこう作る：Webサイトのデザイン制作工程

1. ヒアリングと目的設定

最初に、「誰に」「何を伝え」「どんな行動をしてほしいか」を明確にします。デザインの良し悪しは見た目だけで決まるものではありません。目的に合っているかどうかで決まります。

2. 情報設計とワイヤーフレーム

競合サイトと検索キーワードを調査したうえで、ページ構成と情報の優先順位を決めます。この骨組みを線画で表したものが「ワイヤーフレーム」です。SEOの成果の多くは、この段階で決まります。

3. デザインカンプの作成

Figmaで、配色、書体、写真の使い方を含めた完成イメージを作ります。スマートフォンでの見え方を優先する「モバイルファースト」で設計するのが基本です。

4. コーディングとCMSの構築

デザインをHTML／CSSに変換し、WordPressなどに組み込みます。画像の最適化や不要なコードの削減を行い、表示速度を高めます。

5. テスト、公開、保守

複数の端末とブラウザで表示を確認してから公開します。公開後は、アクセス解析をもとに改善を続け、セキュリティの更新も定期的に行います。

デザインがSEOと成果に与える影響

表示速度とCore Web Vitals

Googleは、ページの使いやすさを測る指標としてCore Web Vitalsを使っています。指標は次の3つです。

• LCP（読み込み速度）
• INP（操作への反応速度）
• CLS（表示中のレイアウトのずれ）

大きすぎる画像や過剰な動きを使ったデザインは、これらの数値を悪化させます。現在の状態は、Googleの「PageSpeed Insights」で無料で確認できます。

モバイルファーストと読みやすさ

Googleは、スマートフォン版のページを基準にサイトを評価しています。文字の大きさ、ボタンの押しやすさ、余白の取り方は、見た目の問題であると同時に、評価と成約率に直結する要素です。

AI Overviewsに選ばれる構造

Google検索の上部に表示されるAI Overviews（AIによる概要）に情報が引用されるには、内容が構造的に整理されている必要があります。明確な見出し、結論を先に述べる文章、表やFAQといった要素が有利に働きます。デザインとは、見た目だけでなく情報の構造を設計することでもあります。

コスモ企画のWebデザイン制作

創業1901年、累計300社以上の制作・SEO支援実績

コスモ企画は1901年に創業しました。これまでに累計300社以上のWeb制作とSEO支援を手がけてきました。対応してきた業種は、製造業、建設業、医療、宿泊業、士業、小売、美容などです。業種ごとの集客の特性をふまえたデザインをご提案します。

検索品質評価ガイドラインに基づく設計

Googleの検索品質評価ガイドラインに基づいてSEOを設計します。WordPressの高速化とセキュリティ対策、UI／UXの改善、アクセス解析、コンバージョンの最適化まで一貫して対応します。「見た目が良い」だけでなく「成果が出る」サイトづくりを強みとしています。

行政・公共団体からも選ばれる制作体制

地域トップクラスの制作実績に加え、行政機関や公共団体からも制作のご依頼をいただいています。

透明な料金と、公開後も続く保守サポート

料金体系を明示し、プライバシーポリシーとセキュリティ対策を公開しています。サイトの公開後も、更新、セキュリティ対策、改善のご相談まで継続してサポートします。

よくある質問

Q. Webデザインは自分でも作れますか？

A. ノーコードツールを使えば作れます。ただし、集客や問い合わせの獲得を目的とする場合は、情報設計、SEO、表示速度まで考慮する必要があるため、専門家への相談をおすすめします。

Q. Figmaは無料で使えますか？

A. 無料プランがあり、個人での利用や試用ができます。機能や料金プランは変更されることがあるため、最新の情報は公式サイトでご確認ください。

Q. ホームページのデザインだけを依頼できますか？

A. 可能です。コスモ企画では、デザインのみ、構築のみ、リニューアル、SEO改善など、ご要望に応じて対応しています。

まとめ：ツール選びより「何のためのサイトか」が大切

Webサイトのデザインは、Figmaなどで設計し、WordPressやコーディングで構築するのが現在の主流です。どのツールを使うかよりも、目的に合った設計ができているかどうかが成果を左右します。

デザインの方向性やリニューアルでお悩みの方は、創業125年、300社以上の実績を持つコスモ企画へお気軽にご相談ください。

制作事例