シンプルに考えれば簡単にできる！

シンプルに考えれば簡単にできる！

Web ページや Web アプリを作るのは難しそうに見えますが、簡単にする事もできます。コロンブスの卵の話も少し乱暴な所がありますが、簡単に卵を立てるを証明しました。この記事では、シンプルに考えることで簡単に出来る例を紹介します。

LP 作りを考える

インターネットで、商品を販売したり、メルマガなどに登録を促したりする際に利用される事の多い LP(ランディングページ)があります。 LP の制作は初心者でも受けやすい仕事なので、クラウドソーシングなどを見ていてもこの手の仕事は比較的沢山あります。

しかし、単に LP の制作といっても、どのように作るかで、必要になるスキルや経験は大きく変わってきます。

本格的に HTML や CSS を学習して作る王道のやり方は当然ありますが、実はもっと少ない知識や経験でも作る方法もあります。

勿論、仕上がりにも差が出てくるので、どんな LP を作るかにもよりますがやり方は一つではありません。 出来るだけ、シンプルで最低限の知識でも見かけ上は「似ている」ページを作る事ができます。この記事では、シンプルに LP を制作する例を紹介します。

LP の特徴を考える

LP（ランディングページ）は、商品などを紹介して買ってもらったり、メルマガや何かの会員登録を促すために利用される場合が沢山あります。例えば、Web ページに表示される広告に LP へのリンクを貼って、広告では紹介しきれない商品の特長などを紹介して、購入に結びつけるような目的で使われます。

いろいろ、ポイントはありますが、大切なポイントを考えてみると概ね以下のような特徴があります。

＊　他のページへのリンクを避ける　ー　 LP に来た訪問者を別のサイトに行かないようにする

＊　シンプルなページレイアウト　ー　通常は上から下に順番に見て行くような構成にする

＊　登録や販売のためのフォームを持っている

＊　PC だけではなくスマホでも見やすい

他のページへのリンクを取り除いたり、シンプルなレイアウトにするため、通常の Web サイトを構成するページよりはシンプルな構成になるため、初心者でも制作しやすくなっています。勿論、凝ったアニメーションなどを入れる場合には必要な知識やスキルは必要になります。

こうした制作に必要と言われるスキルは、

＊　HTML / CSS の基本的な知識

＊　フォームを扱うためのプログラミング

＊　スマホ対応のレスポンシブデザイン

というような知識が必要です。

必要な知識レベルはいろいろ！

所が、それぞれに必要な知識レベルはいろいろです。

つまり、HTML/CSS をフルに駆使する必要はほとんどなく、HTML/CSS の最低限の知識でも十分に対応できるという事です。 また、どんなアプリを使って作るかでも、必要な知識の深さは変わってきます。

フォームも、バックエンドのサービスが既にある場合は、フォームのデータを送るだけでも対応できるので、フォームを HTML で書ければ、フォームのデータを処理するプログラムを使わない作り方も可能です。バックエンドのサービスを持っていない場合は、Firebase などを利用すれば、簡単な Javascript のプログラムを書けば対応できます。

レスポンシブデザインは、通常の Web サイトのページに比べればページの構成がシンプルなので最低限の知識があれば比較的簡単に対応できます。

複雑な作り方を作ろうと思えば幾らでも複雑にできますが、今回はいかにシンプルに作るかを考えてみました。

＊　フォームのデータは Firebase に取り込む

＊　フォームに必要な HTML は、「input」「label」「button」「select」を HTML で書ければ十分

殆どの、装飾は Bootstrap などを利用すると、最低限の CSS で十分

レスポンシブデザインは、幅とフォントの調整程度にする

とプログラミングの知識は最低限の、HTML/CSS/Javascript を知っていれば十分に対応できます。

難しいのはページのレイアウト

既に挙げたように、既存の「仕組み」を利用すると最低限のプログラミングの知識でも LP は作れる事になります。 インターネットの情報を駆使すれば、１〜2 日も検索すると、十分に必要な知識は見つけることができます。

では、LP を作成する上で難しいのは何かという事になります。 これは、大きく二つです！

＊　LP の中身（コンテンツ）

＊　LP のデザイン（写真やイラストなどのレイアウト）

です。これらを含めて制作を受ける場合には、LP の中身（コンテンツ）をどのように書いたら良いのかなど、プログラミングとは別の知識が必要になります。LP のデザインも、どこにどのような写真やイラストを配置するかを含めた制作の場合には、全体をまとめるデザインのセンスも必要になってきます。ページのデザインには、センスと経験が必要ですが、多くの場合、LP の中身（コンテンツ）や大まかなページの構成（デザイン）は、依頼元から指定される仕事も沢山あります。この場合は、指定された構成にいかに忠実に作るかがポイントになってきます。つまり、ページのレイアウトが一番のポイントになります。

写真やイラスト、文章の位置を HTML と CSS で調整するには、それなりの知識と経験が必要になってきます。こうしたスキルを上げるために模写などをして、訓練するわけですが、実はとても簡単にやる方法もあります。

それは、細かい調整は「HTML と CSS ではやらない」という、少し乱暴な作り方です。

例えば、イメージの場所などは、HTML と CSS で調整するのではなく、イメージそのものを変えてしまうという方法です。

一番極端な例は、フォトショップなどで基本的な構成は作ってしまって、LP 上にはイメージを縦に並べるだけにする方法です。 イメージの左右上下の余白の調整などは必要ですが、縦に並べるだけなので、初心者でも簡単にできます。必要ならば、文章などもイメージに埋め込んでしまえば、イメージを並べるだけでページが作れます。

LP の場合には、他のページにリンクを貼るケースは殆どないため、この方法で作っても機能的には大きな問題ではありません。

フォトショップなどを使うと位置の微調整は簡単にできるので、HTML と CSS で調整するよりは遥かに難易度が下がります。つまり、初心者でも見た目は同じようなページが簡単に作れる事になります。

まとめ

この記事では最小限の知識で LP(ランディングページ)を作る一つの例を紹介してみました。 フォトショップなどで、イメージのレイアウトをやってしまえば、HTML と CSS を駆使してページの構成を決めるよりは遥かに優しくなります。

勿論、限界もありますが、大抵の LP は要求された感じに比較的簡単に仕上げる事が可能になります。 LP の場合、Web ページの機能自体はシンプルなので、十分に実用になるページにすることができます。しかも、短時間で簡単にできるので、例えば、受注価格を低く抑えることもできるので、仕事の獲得のチャンスも大きくなります。

特に、期間限定の商品の販売や集客などに LP を使う場合には、スピードも重要な要素の一つですし、ページの利用期間も限定的です。 したがって、この手の制作でも十分なページを作る事が可能になります。

こうしたページの制作ならば、1 ヶ月も勉強しなくても早ければ数日の学習でも LP を制作することは十分にできます。

あとは、知識を増やして、できることを増やしていけば、成長と共に一番合った方法で制作ができるようになります。

シンプルに考えて、どの知識があればできるかを考えてみると簡単な答えは意外に見つかるということです。実は、これが、短期間で実力をつける一番の近道といえます。