インターネットの発展に伴い、Webサイトを構築することの重要性が増し、企業や個人が自分のWebサイトを開設したくなります。しかし、プログラミングの知識やWebデザインを知らないなら、自分で応答式Webサイトを立ち上げるのは難しいでしょう。実際、プログラミングを知らない個人やスタートアップ企業では、資金がないため、信頼できる応答式Webデザインプラットフォームを探すことがWebサイト構築の第一歩となります。

代表的な応答式Webデザインプラットフォーム

記事の概要

  • 応答式Webページの利点
  • Webデザインプラットフォームのおススメ
  • StrikinglyでWebサイト作成するプロセス

RWDと呼もばれる応答式Webデザインは、英語のRESPONSIVE WEB DESIGNの略語であります。RWD開発ツールを使用してWebサイトを設計すると、異なるデバイスに応じてサイトを適応させることができ、コードの乱れ、画像と文字サイズの異常、タイポグラフィ、フォーマットの混乱などの問題が発生しません。

もうひとつの理由は、スマートフォンでWebを閲覧する人が増えていることで、PCでしか閲覧できないWebサイトでは、トラフィックを失ってしまう可能性があります。今、応答式Webページの設定を選択することは、必要性があると言えるでしょう。では、どこで応答式Webサイトを立ち上げればいいのでしょうか？ 応答式Webデザインに対応したプラットフォームとしては、以下のものがあります。

  1. Wix

応答式Webデザインプラットフォーム

こちらの画像はWixから取っています

Wixはドラッグ＆ドロップ式のエディタを使用してWebサイトを構築するため、プログラミングの知識は必要ありません。また、約510種類のテンプレートが用意されており、いずれも基本的には応答式Webデザインです。Wixは個人のブログから小規模なオンラインストアまで、いくつかのタイプのWebサイトを構築することができ、無料で試すことができます。困ったことがあれば、日本語対応のアフターサービスも利用できます。

応答式Webデザインプラットフォーム

こちらの画像はWeeblyから取っています

Weeblyでは、同じくドラッグ＆ドロップのシンプルなアプローチで応答式Webデザインを行うことができます。50種類以上のテンプレートが用意されているほか、RWD応答式Webデザインや、マーケティング、Eコマース、ブログなどの高品質なアプリケーションが組み込まれています。Wix同様、Weeblyも無料トライアルが可能で、有料プランは年間11,000円から、最も高いものでも年間55,000円となっています。

  1. Strikingly

応答式Webデザインプラットフォーム

Strikinglyの商品から受けた画像

Strikinglyは、多くのファンと良い評価を得ていることから、「モバイル時代の最高の無料応答式Webデザインプラットフォームであろう」と言われています。

また、応答式Webデザインのやり方など、Webデザインに関する記事が多数掲載された公式ブログも内蔵されています。ブログを閲覧することで、Webデザインの知識を深めることができます。

Strikinglyは、もちろん応答式Webデザインにも対応しています。下記の例は、Strikinglyを使って作成した応答式Webデザインです。全体的にデザインスタイルが統一されており、PCでもモバイルでも快適に閲覧できることがわかります。

PC端末の応答式Webデザイン

Strikinglyの商品から受けた画像

これらは、応答式Webデザインへの対応が推奨されている主要なWebデザインプラットフォームの一部です。ここでは、Strikinglyを使って、応答式Webデザインのプロセスを紹介します。

モバイル端末の応答式Webデザイン

Strikinglyの商品から受けた画像

1.Strikinglyにアクセスし、アカウントを登録する

Strikinglyは、Facebookアカウントのログインに対応しています。もちろん、自分のメールを使ってアカウントに登録することもでき、このステップはとても便利です。

2.テンプレートを選ぶ

企業のマーケティングにも、個人のWebサイトにも、ニーズに合ったテンプレートが見つかり、各テンプレートは応答式Webデザインに対応しています。このステップでは、様々なテンプレートの中から一つを選び、Webサイトを作成します。

テンプレート編集画面に入った後、左下のモバイルマークをクリックすると、サイト構築の際にモバイルに切り替えることができます。

ロゴ、ナビゲーションバー、背景などのマークアップ部分が変換・適応されていることはもちろん、応答式Webデザイン技術に対応していますので、両ページへのあらゆる修正や同期にも対応しています。

応答式Webデザインのテンプレート

Strikinglyの商品から受けた画像

3.セクションの追加

Strikinglyのテンプレートには豊富な機能領域が組み込まれており、必要なコンテンツに応じて対応する機能を追加することができます。 例えば、ストアには、ショッピングカート、決済方法、注文管理、会員制度、商品表示などの基本機能があります。ある程度、Strikinglyの独自のストアセクションは、大規模なeコマースプラットフォームに匹敵します。ストアセクション以外にも、様々な便利な機能があります。これらはすべて設定可能で、高度なカスタマイズが可能なので、ニーズに応じて追加していくことができます。

4.SEOとディテールの充実

Strikinglyのテンプレート編集ページは、検索エンジンに見つけてもらいやすくしたり、Webサイトの露出を増やすことができるSEO機能など、便利な小さな機能をたくさん見つけることができます。

また、Strikinglyはドメインの設定にも対応しており、無料でセカンダリドメインを取得することができます。 良いドメインを設定することで、SEO対策だけでなく、Webサイトのトラフィックを増やすことができます。

5.プレビューと公開

すべての設定が完了したら、「プレビュー」をクリックして、端末でのWebページの表示を確認します。チェックして確認した後、左下の公開ボタンをクリックすると、応答式Webデザインが完了します。

応答式Webサイトの設定についてまだ疑問がある場合は、ブログ記事が多数掲載されている公式ブログをチェックしてみてください。

Strikinglyに登録し、いずれかの有料プランを選択すると、14日間の無料トライアルができますので、体験後に自分に合ったプランを選択しましょう。

レイアウトデザインに迷っている方は、これを見たらいかがでしょうか

もちろん、Strikinglyは無料で使えますし、応答式Webデザインにも対応していますので、ぜひ試してみてくださいね！