意外と簡単！？！？ランディングページの作り方【手順と気を付けるポイント】
「自分のサービスや商品を多くの人に知ってもらい為にランディングページを作りたい！」「非エンジニアだけど、自力でランディングページを作ってみたい！」という方に向けたコンテンツです。
今回、独学でHTML、CSS、Adobe XDを学んで実際に企業のランディングページを作ったので、ランディングページの製作時の手順や気をつけた点をまとめてみました。
※別コンテンツ「Webサイトやブログは自作派？？」「デザインにこんな役割があるなんて！？」「自分のホームページにあると役立つ機能」も合わせてどうぞ。
意外と簡単！？！？ランディングページの作り方【はじめに】
実際に制作したランディングページはコチラです。
独学で学びながら制作期間２週間で作成したので、スキル面はあまり参考にならないかもしれません、、、ご了承ください。ランディングページ制作の流れや手順、注意点などは制作にあたって様々な媒体で学んだ内容になっておりますので、初心者の方のお役に立てればと思っております。
意外と簡単！？！？ランディングページの作り方【制作手順】
ここからは実際にどのようにしてランディングページを作っていったのか流れ、手順を紹介していきます。
①メインカラー、コンセプト、目的の確認
ランディングページのデザインをするにあたって重要になるのが、その企業やサービスを表現する為のメインカラーやコンセプトを確認する事です。そして、ランディングページを使って何を達成したいのか目的もしっかりと把握しましょう。
②Adobe XDを使ってページ全体をデザイン
最初に決めたカラーやコンセプトを元に目的を達成できるようにデザインしていきます。Adobe XD自体の操作は、初心者の方でも簡単に使いこなす事が出来るようになっているので、そこまで苦労する事なく始められると思います。
③画像編集、画像作成ソフトを使って素材作り
PhotoshopやIllustratorが主流かと思いますが、今回はiPadに「Affinity Designer」を入れて画像やロゴ等の素材を作成しました。※今後は、Photoshopを使っていく予定です。
④HTML、CSSでコーディング
Adobe XDで作ったデザイン案を元にHTMLとCSSでコーディングをしていきます。 エディターは「Visual Studio Code」を使用しました。こちらのエディターは多くの方が使っていて、わからない事もインターネットで調べれば大体解決出来るのでオススメです。
⑤FTPSを使ってサーバーにアップロード(一旦完成！！)
最後に「Cyberduck」というソフトを使ってサーバーにHTMLやCSSのファイルや素材画像をアップロードして無事に公開する事が出来ました！！
意外と簡単！？！？ランディングページの作り方【気をつけた事】
ここからは、↑の各項目で気をつけたポイントやそれぞれの注意点を紹介していきます。
①メインカラー、コンセプト、目的の確認
効率良くデザインしていく為に、メインカラーだけでなくサブカラーを決めておく事をオススメします。サブカラーを決めておく事で色の使い過ぎを防ぐ事が出来ます。さらにメインカラーとサブカラーの比率もあらかじめ決めておくとデザインし易いです。
②Adobe XDを使ってページ全体をデザイン
どの部分を作る時にも「近接」「整列」「反復」「対比」が出来ているかを気にしながらデザインしました。全てのデザインに意味を持たせられるようにデザインしていくのが良いようです。
③画像編集、画像作成ソフトを使って素材作り
画像編集の際は、素材にも統一感を持たせる事を意識しました。色使いや素材のカテゴリーなど。理由なくイラスト系の素材と写真系の素材をバラバラに使ってしまうとまとまりのないデザインになってしまいがちです。
④HTML、CSSでコーディング
まず、「最初からうまく出来ない！」と覚悟することが重要だと思います。分からない事が出てきたら、その場で様々な動画やサイトを見て一つずつ解決していく事をオススメします。どうしても行き詰まったら、クロームの「検証」を使って、他のサイトの研究をするのも良いかもしれません。
⑤FTPSを使ってサーバーにアップロード(一旦完成！！)
セキュリティを意識して、FTP、FTPS、SFTPの違いを把握しましょう。各ファイルのアップロードは「エックスサーバー」に行いましたが、説明もわかりやすく使いやすかったので、まだサーバーを決めていない方は「エックスサーバー」を使ってみて下さい。
意外と簡単！？！？ランディングページの作り方【まとめ】
今回、独学で得た知識を元にランディングページの「公開まで」を紹介していきましたが、本来ランディングページは改良を重ねて目的を達成させる為のモノなので、改良を続けていく事が重要ということも覚えておいて下さい。皆さんのチャレンジのお役に立てると嬉しいです。
【こちらのコンテンツも合わせてどうぞ】
ホームページの作成前に確認！！〜自分のホームページにあると役立つ機能〜
コメントはまだありません