top of page

白紙からホームページを作る11ステップ|ワイヤーフレームテンプレート


白紙テンプレートからホームページを作る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


ja03.png
bottom of page