2017年1月11日6 分

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

最終更新: 10月29日

ホームページ作成ツール 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