はじめに
この章の目的
Webサイト作りで使うツールは、用途によって大きく分かれます。まずは「レイアウトを考える」「UI（画面デザイン）を作る」「実際にサイトを組む・公開する」の三つです。本書では代表的なツールと特徴、選び方の目安を分かりやすく紹介します。
何を学べるか
具体的には次のことが分かります。例えば、紙や簡単な図で構想を整理する段階に向くツール、見た目を整える段階でよく使われるツール、そしてコードを書かずに公開できるサービスの違いと利点・注意点です。
想定読者
初めてサイトを作る方、作り直しを検討している方、担当を見直したい方を想定しています。専門用語は最小限にして、実例で理解できるように説明します。
本書の構成
第2章で定番ツールを押さえ、第3章でワイヤーフレームや構成作成の方法を紹介します。第4章ではノーコード系の実作業ツールを取り上げ、第5章で選び方の目安をまとめます。まずは全体の流れをつかんでください。
まず押さえたい定番
Figma
- 概要: ブラウザで使えるUI設計とプロトタイピングツールです。画面レイアウトを素早く作り、クリックで動きを確認できます。チームで同時編集できるのでフィードバックが早く回ります。
- 向いている場面: ワイヤーフレームやPC／スマホの見た目を固めたいとき。共同作業が多い案件。
- 使い方のコツ: コンポーネントを作って再利用すると効率が上がります。プラグインでアイコンやダミーデータを簡単に入れられます。
- 具体例: ランディングページのヒーロー部分のレイアウトを複数案作り、ボタンの動作をプロトタイプで試す。
Adobe Photoshop / Illustrator
- 概要: 写真加工や細かなビジュアル作成に長けた定番ツールです。ロゴや高解像度のバナー作成に便利です。
- 向いている場面: 画像補正や複雑な合成、印刷用データの作成。ピクセル単位で調整したいとき。
- 使い方のコツ: Photoshopはラスタ（写真）、Illustratorはベクター（ロゴ）向けに使い分けます。書き出し時にWeb用の最適化を忘れないでください。
- 具体例: 商品写真をきれいに補正してヘッダー用の横長画像を作る。
Canva
- 概要: ブラウザ上でテンプレートを選び、ドラッグ＆ドロップで作れるツールです。デザイン初心者でも短時間で見栄えの良い素材が作れます。
- 向いている場面: バナーやSNS用画像、簡単なヘッダーを手早く作りたいとき。チームでテンプレ共有もできます。
- 使い方のコツ: テンプレートをベースに色とフォントをサイトに合わせて調整すると統一感が出ます。無料素材のライセンスも確認しましょう。
- 具体例: キャンペーン用のバナーをテンプレを編集して30分で作る。
ワイヤーフレーム・構成用
目的と使い分け
ワイヤーフレームはサイトの骨組みです。見た目ではなく、レイアウトや情報の配置、導線を決めます。早く共有して方向性を固めることが主な目的です。
Balsamiq（手書き風ワイヤー）
特徴：手書き風の見た目で細部にこだわらず大枠を示せます。ブロックやボタンをドラッグして短時間でたたき台を作れます。
向いている場面：初期段階で案を多数出すとき、クライアントへ“ラフ”であることを伝えたいときに適します。
使い方ポイント：ページごとにモックを作り、主要導線（例：トップ→カテゴリ→詳細）を必ず用意します。注釈は簡潔に書き、画面ごとの目的を明記してください。
Miro / FigJam（オンラインホワイトボード）
特徴：共同編集に強く、サイトマップ、ユーザーフロー、ブレインストーミングに便利です。付箋や矢印で関係を視覚化できます。
向いている場面：チームで構成を詰めるときや会議で合意形成するときに役立ちます。
使い方ポイント：テンプレートを活用し、担当や優先度を色分けします。後で画面設計に移すため、要素ごとに命名規則を決めておくと管理が楽になります。
短いワークフロー例
- 付箋で要件出し（Miro）→ 2. サイトマップ作成（Miro）→ 3. ページごとのワイヤー作成（Balsamiq）→ 4. フィードバックで修正（Miro）
この流れで進めると、設計がスムーズに進みます。
実際にサイトを作るツール（ノーコード系）
ブラウザ上でドラッグ＆ドロップしながら、そのまま公開できるサービスを紹介します。コードを書かずに見た目を作れるので、ポートフォリオやサービスのランディングページ（LP）に向いています。
主なサービスと特徴
- Wix：テンプレートが豊富で導入が簡単です。初心者でも短時間で形にできます。アプリ追加で機能拡張しやすく、小規模な店舗ページや個人サイトに合います。
- STUDIO：デザインに強く、日本語サポートが充実しています。デザイン通りに実装しやすく、デザイナー寄りの人におすすめです。
- Webflow：デザイン自由度が高く、細かい動きやレスポンシブ調整ができます。学習は必要ですが、見栄え重視かつ将来コードに近い出力が欲しい場合に便利です。
- Framer：アニメーションやインタラクション表現に優れ、プロトタイプ寄りの表現が得意です。動きのあるLPや実験的なデザインに向きます。
選ぶときのポイント（実務的）
- 操作の簡単さ：短時間で公開したければWixやSTUDIOが向きます。
- デザインの自由度：細かく作り込みたいならWebflowやFramerが適します。
- 機能性：ブログやCMSが欲しい場合はWebflowやSTUDIOのCMS機能を確認してください。
- 料金と公開条件：無料プランは広告やサブドメイン制限があるため、本番運用は有料プランを検討しましょう。
実際の使い方のコツ
- テンプレートをベースにして、余計な要素を整理すると制作が早くなります。
- スマホ表示で必ず確認してください。多くの訪問はスマホからです。
- 独自ドメインとSSLを設定して信頼性を高めましょう。
- フォームや解析ツール（Google Analyticsなど）を早めに導入すると改善に役立ちます。
以上を踏まえ、自分の目的（スピード重視／デザイン重視／拡張性）を基準に選ぶと失敗が少ないです。
選び方の目安（ざっくり）
目的に合わせて、使うべきツールの方向性をざっくりまとめます。まずは用途別のおすすめと、その理由を短く説明します。
プロとしてWebデザインを学ぶ
おすすめ：Figma ＋ Photoshop / Illustrator
理由：FigmaはUI設計・プロトタイプ・共同編集に強く、実務で使われます。PhotoshopやIllustratorは画像加工やロゴ制作で補助的に使います。学習に時間を投資すると現場で役立ちます。
まずは簡単にサイトを公開したい
おすすめ：Wix / STUDIO / Webflow（ノーコード系）
理由：テンプレートとホスティングが一体で手早く公開できます。Wixは直感的、Webflowはデザイン自由度が高めです。コードを書かずに済ませたい場合に便利です。
構成やワイヤーフレームだけ整理したい
おすすめ：Balsamiq、Miro、FigJam
理由：低精度のワイヤーフレームは素早く検討できます。MiroやFigJamは共同作業に向き、アイデア出しから整理まで使えます。
バナーやサムネなどだけ作りたい
おすすめ：Canva
理由：テンプレートやサイズ設定が豊富で短時間で作れます。簡単な素材作りならまずCanvaを試してください。
選ぶときのコツ：目的、予算、チームの人数や将来の拡張性を優先して選びます。まずは無料プランやトライアルで使い勝手を確かめると失敗が少ないです。
