日頃より株式会社SMO南小国のホームページをご覧いただき、誠にありがとうございます。
この度、当社公式HPにて、WebサイトやLP（ランディングページ）の構成案（ワイヤーフレーム）をブロックの配置だけで簡単に作成・可視化できるツール「WIRE STUDIO — Webサイト構成案の作成ツール」を公開いたしました。
「ホームページのリニューアルや新ページ作成の打ち合わせで、完成イメージを視覚的に共有したい」「専門的なデザインソフトを使わずに構成案をさっと作りたい」「PC・スマホそれぞれでの見え方をあらかじめ確認したい」といった、Web制作・広報・マーケティングの現場でのコミュニケーションをスムーズにするツールです。
入力したデータはすべてお使いのブラウザ内だけで処理され、外部サーバーへ送信・保存されることは一切ありません。未公開のプロジェクトや社内の提案資料も安心・安全にご作成いただけます。
WIRE STUDIOの主な特徴
- ブロックを並べるだけの直感操作 ヘッダー、ヒーロー（メインビジュアル）、画像＋文章、カード一覧、お知らせ、FAQ、料金表、問い合わせフォームなど、Webサイトに必要な要素をパレットからクリックまたはドラッグ＆ドロップするだけで自由に配置・編集できます。
- PC・タブレット・スマホの見え方をワンクリック切り替え PC（1200px）、タブレット（768px）、スマホ（375px）それぞれの画面サイズでのレスポンシブな見え方を即座に切り替えて確認できます。
- ナンバリング注釈（メモ）機能 各ブロックに対して自動ナンバリング付きの注釈（メモ）を追加可能。「どのようなコンテンツを入れるか」「どういった動作をするか」などの指示を添えた説明資料が作れます。
- 選べる豊富な出力形式（PNG / PDF / ZIP / JSON） 作成した構成案は、単体PNG画像や全ページまとめたPDF資料、ZIP圧縮画像として書き出しが可能。データ保存用JSONファイルを書き出しておけば、後から再編集やチームでのデータ共有も行えます。
- すぐに試せるページひな形（プリセット）搭載 「トップページ」「会社概要」「サービス紹介」「お問い合わせ」「LP（ランディングページ）」などの基本パターンを標準搭載。ゼロから作るだけでなく、ひな形をベースに素早く構成案を作成できます。
基本的な使い方
【1】ひな形を選ぶ、またはブロックを配置する
- 画面中央の「＋ ページを追加」から目的に合ったひな形（トップページ、お問い合わせ等）を選ぶか、左側のパレットから必要なブロック（ヒーロー、画像＋文章など）をクリック・ドラッグして追加します。
【2】文字の編集や表示デバイスの切り替え
- 画面上のテキスト（見出しや説明文）を直接クリックして打ち直します。
- 上部ヘッダーの「PC」「タブレット」「スマホ」ボタンで、デバイスごとの表示の崩れや見え方を確認します。
- 必要に応じてブロック右上のボタンから「注釈」を追加し、補足説明や指示事項を入力します。
【3】構成案を書き出す・保存する
- 上部右側の「書き出し ▾」メニューをクリックします。
- 用途に合わせて「このページをPNGで保存」「全ページをPDFで保存」「データを保存（.json）」などを選択して保存します。
▶︎ Webサイト構成案の作成ツール「WIRE STUDIO」のご利用はこちらから