ランディングページで、メッセージやストーリーが9割と前回言いましたが、残りの1割は、プログラミングです。
でも、高度なプログラミングは、さほど必要なく、必要最低限のスキルがあれば、誰でも作れてしまうのが、WEBページの良いところです。
具体的に言うと、HTMLのタグと、CSSについての初心者知識さえあれば、キレイで素敵なページは、作れます。
この時点で、つまずいている人であれば、そこは、歯を食いしばって学習してみることをオススメしますね。
プログラミングテクニック「HTML」
とりあえず、ボクの使っているHTMLのテンプレートを紹介しますね。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Sample</title>
<meta name="description" content="ページの説明">
<meta name="author" content="著作者情報">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="generator" content="MYNT">
<link rel="icon" href="favicon.ico" type="image/xml+svg">
<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="fb:app_id" content="" />
<meta property="og:image" content="" />
<meta name="twitter:card" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:site" content="" />
<meta property="image_src" content="" />
<link rel="stylesheet" href="sample.css">
<script src="sample.js"></script>
</head>
<body>
</body>
</html>
このテンプレートを使って、まずはHTMLを書き始めて、肝心なBODY内を構築していきます。
headタグの大部分を占める
<meta property="og:**">
という箇所は、OGPタグで、SNSなどに、URLが貼り付けられた場合に、表示するサムネイル画像や、文言など重要な情報を登録することができます。
古来からのmetaタグでのdescriptionはSEOでも重要なので、どちらもしっかりと書き込みをしておくことをおすすめします。
注意点としては、あくまでこれは、ユゲタの使っているテンプレートなので、この記事を読んでいる人が使う場合は、
適宜書き換えて、自分用テンプレートとしてお使いください。
プログラミングテクニック「Javascript」
テンプレート内に書いてある、linkタグとscriptタグは、それぞれ、sample.cssとsample.jsを読み込むようにしていますが、
不要であれば、消して使ってもらっても良いんですが、
今どきのwebページは、どうしてもjavascriptを使わないといけない事が発生します。
各種のイベントや、閲覧者による動的な項目の切り替え、表示デバイスにおける、表示の出し分け・・・などなど、
こうした場合に、必要最低限のjavascriptを書くようにしているんですが、
何かのシステムページの場合は、ガッツリ書くことになることは間違い有りません。
でも、ランディングページに限って言えば、できる限りcssとhtmlの構成だけで、工夫して、表現することをおすすめします。
無駄にjavascriptのファイルダウンロードパケットなど、無駄な帯域を消費しなくてもいいし、
そもそも、ページの読み込みが早くなるメリットは、SEOにも、利用者の心理的にもいい方向に働くはずなので、
他の人がなんと言おうと、ユゲタはこの思考をおすすめしたいと思います。
個人的に間違ったやり方と思うのは、何かのフレームワークを使って、めちゃくちゃダウンロードファイルの数や容量が多いページを作ってしまうことです。
1ページだけで、システムなどほぼ必要のないランディングページで、表示されるのに、数秒間待たされるなんて、
どんなに見栄えのいいページを作っても、本来の目的と真逆の効果になってしまう可能性が高いですからね。
個人的な技としては、少量のjavascriptは、htmlファイル内にscriptタグで記述したほうが効率的ですね。
プログラミングテクニック「css」
cssのコーディングテクニックとしては、とにかくフォントにはさほどこだわらないことです。
Googleを筆頭に、無料で使えるwebフォントなどが、たくさん公開されていて、それらを使うことは、webページを作る時の見栄えを良くする上で、
非常に簡易なんですが、同時に、フォントデータの容量は、馬鹿にならないぐらいデカい容量のものが多いので（日本語フォントは特に）、
webページの読み込み速度を遅くする要因になりかねません。
明朝か、ゴシックのフォントが今どきのデバイスやPCには、ほぼ入っているはずなので、
それを利用するような記述を、自分テンプレートで持っておくと、めちゃくちゃ凝ったデザインにはならないけど、
マイナス点も付けられない程度のフォント表示はできるはずです。
あと、最近個人的にこだわっているのが、css内の変数機能を使って、ページ内のcssの値を、整理して一元管理することで、
簡単にテイストが変更できたり、別の色やサイズバージョンなどが作れます。
この辺は、cssと言えども、プログラミングレベルのスキルが必要になるポイントですね。
この意味がわからない人は、一度上級者の書いたcssの中身を見てみるといいでしょう。
めちゃくちゃ整理されてて、キレイで、再構築しやすくなっているはずです。
え？ユゲタのコードはって？
そりゃあ、汚いに決まってるじゃないですか。
プログラミングテクニック「シンプル・イズ・ベスト」
最後に、ランディングページで必要なプログラミングテクニックは、
シンプルにすることと言い切ってもいいでしょう。
HTMLもcssもjavascriptもすべてシンプルにすることで、再構築コストも下がる上、再利用価値も高くなります。
読み込み、レンダリングスピードも早くなることを考えると、シンプルにするメリットはアリアリです。
デメリットがないので、むしろこのシンプルを追求するコーディングスキルを上げるということは、webページ制作スキルが高くなると言ってもいいでしょう。
ちなみに、それぞれの、言語に対してのテクニックを書き出すと
HTMLは、表示に関しては、全てdivタグで構成して、
必要に応じて、IMGタグ、inputタグ、buttonタグなどを使う程度で、
あとは、それをCSSを使って、配置調整をして、
マウスクリックやスクロール座標などのイベントに応じて、Javascriptを書き込む
サーバー系のプログラム言語からは、下に見られがちなフロントエンジニア寄りのプログラム言語ですが、
ここにも、非常に高品位なスキルが必要ということがわかれば、作る面白さも増すかもしれませんね。
こんな事を意識しながら、良いランディングページを作ってみてください。
そして、良いページができたら、教えて下さい。
