Webデザインの基礎ガイド：設計・素材・参考事例

Webデザインはページの見た目や情報の配置、使いやすさを設計する工程を指します。Web制作は企画・設計・デザイン・コーディング・公開までを含む、サイトをつくる作業全体を指して使われます。

目的とターゲットを決め、サイト全体の構成（サイトマップ）を設計し、ワイヤーフレームで各ページの要素と配置を固めます。そのうえで配色やフォントなどの見た目をデザインし、コーディングに渡します。

ワイヤーフレームはページの要素と配置を線や箱で示した設計図です。紙や表計算ソフトでも作れますが、FigmaなどのデザインツールやWeb制作向けの作成ツールを使うと共有や修正がしやすくなります。

UI（ユーザーインターフェース）はボタンやメニューなど利用者が目にして操作する部分を指します。UX（ユーザー体験）はサイトを使う中で利用者が得る体験全体を指し、UIはUXを形づくる要素の一つです。

業種やテイスト、配色などで絞り込めるWebデザインのギャラリーサイトが便利です。参考サイトを集めて関係者と共有すると、デザインのイメージを早い段階ですり合わせられます。

フォントごとに利用条件（ライセンス）が異なります。無料でも商用利用やロゴへの使用、加工に制限があるものがあるため、使う前に配布元の利用規約を確認してください。

必要です。スマートフォンから閲覧する人が多く、Googleもスマートフォン向けの表示を基準にページを評価しています。画面幅に合わせて表示を切り替えるレスポンシブデザインが一般的な対応方法です。

ページ数、デザインの作り込みの度合い、写真やイラストの手配、コーディングやCMS導入の有無などで変わります。依頼前に目的と必要なページを整理し、見積もりの内訳で比べると判断しやすくなります。