白紙からホームページを作る11ステップ｜ワイヤーフレームテンプレート
ホームページ作成ツール Wix は、ウェブデザインの経験や知識がなくても、プロのデザイナーが作成したホームページテンプレートと拡張性の高いアプリを使い、本格ホームページを思い通りに作れることです。
でもWixにはプレデザインされたテンプレートだけでなく、ゼロから自由に作成できる白紙(ワイヤーフレーム)のテンプレートもあることをご存知でしたか？
デザインの知識をある程度持ったユーザーの方にとっては、白紙（ワイヤーフレーム）テンプレートの方が使い勝手が良いかもしれません。
今回は、白紙（ワイヤーフレーム）テンプレートを使ってホームページを作成する11のステップをご紹介します。
01. ホームページの目的を理解する
デザインに取り掛かるまえに、まず考えなければいけないこと、それは「ホームページの目的」です。目的を認識することで、何を伝えたいかがはっきりし、どんな機能が必要かも明確になります。
例えば目的がアクセサリーの販売なら、商品ギャラリーやショッピングカート機能、オンライン決済機能が必要でしょう。もし、自分の作品や音楽活動を広めたいという目的がある場合、オーディオプレイヤーはもちろん、動画やライブ予定表、ダウンロード販売機能やチケット販売機能などが欲しいところですね。
02. アイデアを固める
目的がはっきりしたら、インターネットであなたのビジネスと関連するサイトを見たり、デザイントレンドを研究したり、リサーチにそれなりの時間を費やしましょう。デザインや機能について印象に残ったところや、見せ方が優れていると思ったところを書き留めて、自分のホームページに活かせるところはないか探してみましょう。
手始めに、WixのHTMLテンプレート一覧を覗いてみませんか？デザインスタジオが作成した様々なテーマのテンプレートが見つかるはずです。多彩なデザイン、そして一つひとつデザイナーの個性が詰まっているので、必ずピンとくる1枚が見つかるはずです。
03. 詳細なワイヤーフレームを作成する
重要なステップの一つです。ワイヤーフレーム(もしくはサイトマップ)はホームページの設計図のようなもので、デザインを進めていく上での基礎となります。しっかり考えて作成してくださいね。
すべてのページが含まれていること、どのアイコンからどのページにリンクするかが明記されていることが重要です。まずはラフな下書きで全ページを書き出し、最終的には画像、文章、ビデオ、ボタンなどの細かい構成までスケッチしてみてください。
04. スタイルを確立する
ホームページの目的と構成が決まり、デザイントレンドのリサーチも済んだあとは、ホームページの見た目と雰囲気を決めましょう。例えば、色味、フォント、ヘッダーのデザイン、シェイプ、矢印、イラストなどの使い方などが挙げられます。
Wix エディタでは、デザインメニューの中に、たくさんの背景、色、フォントの選択肢を用意しています。まずは、デフォルトの内容を確認して、どのデザインがホームページにフィットするかを考えてみましょう。
05. 文章は事前に準備する
サイトに掲載する文章の作成に時間をとられ、ホームページ作成全体の進捗に影響することが多々あります。実際にホームページを作り始める前にまずはどんな文章を載せるか、具体的に考えておくのがベストです。会社紹介などの比較的長い文章だけでなく、ヘッダーに載せるキャッチコピーやボタンテキスト(CTAボタン)なども準備しておきましょう。
もちろん、サイト編集中に変更や編集も可能です。ただ、どのページのどのセクションにどんな文章を載せるかが、明確になっていると、デザインがスムーズに進むでしょう。
■画像の使い方のコツ■
Wixエディタには、数百種類の無料写真素材が用意されています。Wixフリー素材から好きな写真を選びましょう。
写真を選んだ後は画像編集ツールを使って、写真を編集・加工することができます！
07. ワイヤーフレームレイアウトを確定する
さあ、ついに Wix が真骨頂をお見せするステップです。
まずは、白紙テンプレート一覧から最適なレイアウトを選びましょう。レイアウトは、サイトのフレームワークのようなものです。ネットショップやお問合せページ、オンライン予約、プロフィールなど、それぞれのページに特徴があり、ニーズに合ったレイアウトが必要になります。
08. デザイン要素を追加する
選択したレイアウトは、あなたのホームページの基礎となります。
ここからは、サイトに必要なデザインを追加して、オリジナリティを出していきましょう。固定ヘッダ、背景画像、ナビゲーションメニューなど、全ページに表示されるパーツから取り掛かるのがおすすめです。そしてそれが終わったら、テキストボックスや画像ギャラリー、SNSフィードなど、各ページのパーツにうつって下さい。
09．コンテンツをアップロード
さあここで、前もって準備しておいたコンテンツをアップロードするときが来ました。画像や文章、動画などを Wix エディタにアップロードしましょう。
このステップが完了したら、コンテンツがデザインとマッチしているかどうかを確認して、必要に応じて修正を加えてください。
10. もう一工夫
必要な機能を充実させ、サイト訪問者に満足してもらうためにも、アプリを使って、ホームページにもう一工夫加えましょう。
何百種類ものアプリをご用意していますが、中でもWixが開発したおススメアプリの例をご紹介します。
オンライン予約機能を加えたい方⇒Wixブッキング
ミュージシャンの方⇒Wixミュージック
Wixで使える拡張機能アプリをチェック >>Wix App Market
11. チェックは入念に！
さあ、ホームページの完成も間近です。
最後のステップは、クオリティチェック。画像の貼り方にミスはないか、リンク先がきちんと設定されているかなど、ホームページの隅々まで確認しましょう。
フィードバック機能を使うと、未公開のホームページでも友人や同僚だけに公開することができます。友達からもらったフィードバックはエディタ内でチェックできます。
最後に：ワイヤーフレームテンプレートでホームページ作成のヒント
デザインするときはルーラーを活用しましょう。
パーツを整列させるときはパーツ配置機能を利用してください。
頻繁に更新しなければならないコンテンツはありますか？リストやブログを追加して、更新をより簡単にしましょう。
Wix の空白ワイヤーフレームテンプレートは、スマホ対応をしています。モバイルエディタを使い、見え方をチェックしてください。
サイト編集中は、こまめに保存するのをお忘れなく！
いかがでしたでしょうか？
ぜひ白紙（ワイヤーフレーム）テンプレートでホームページを作成してみてください！
ライター： Wix Team
