【webサイトができるまで⑨】コーディング・構築

記事
コラム
こんにちは、Leycoです。
普段はwebページ制作を通じて、お客様の商品やサービスをより多くの人へ届けるお手伝いをしています。
(webページとは、ホームページやLP全般のことを指します)

今回、webページ制作に関するお悩みやギモンを持っている方が多いことに気づき、こちらのブログを立ち上げました。
この記事では次のような方を対象に作っています。

・「webページに興味はあるけど、準備とか大変そう」とあきらめたことがある
・webサイトを作ったほうがいいとは思うけど、webに関する知識があまりなくて、使われている言葉も意味がわからない

「自分にあてはまるかも……」と思われた方は、ぜひ最後まで読んでみてください。

今回は「webサイトができるまで」の9回目です。


【webサイトができるまで⑨】コーディング・構築

一般的にwebサイトは、次のような手順で作成されます。
Group 6@3x.png
今回は、「【4】コーディング・構築」です。
「構築」とは、1枚の画像であるデザインをもとに、実際のサイトとしてパソコンやスマホに表示できるようにデータ化すること。
構築にはいくつか方法があるので、サイトの目的に合った方法を選ぶことが大切です。
構築方法と、選ぶポイントをご紹介していきます。

はじめに:「こだわりのデザイン」「修正しやすいデザイン」のどちらを選びますか?

構築方法は大きくわけて2種類あります。
・こだわりのデザインを実現できる構築方法
・後から修正しやすいデザインを作る構築方法

サイトを作る時には、最初に、「こだわりのデザイン」を作りたいのか、「後から修正しやすいデザイン」を作りたいのかということを決めます。
そして、それぞれの目的に合った構築方法を選ぶのです。

それでは、それぞれの方法を見ていきましょう。


【こだわりのデザインを選びたい方へ】コーディングで構築しましょう!

undraw_Programmer_re_owql (1).png

「こだわりのデザイン」とは具体的には、
・画像やテキストなどの配置が非対称
・アニメーションなど動きが複雑
・余白を細かく設定している
などが考えられます。

このような場合は、コーディング=コードを書く方法で対応するのが良いでしょう。

コーディングは、主に
・HTML(サイトの骨組みを作る)
・CSS(デザインや簡単なアニメーションを作る)
・JavaScript(タイミングに合わせた動作など、細かな動きを作る)
という言語で構成されています。
これらを使うことで、さまざまなデザインを再現することが可能です。

一方、コーディングのデメリットとして、
・専門分野になるので、誰でも作れるわけではない
・修正するのがやや面倒
という点があげられます。
コーディングの画面は、慣れるまではわかりづらく、修正も難しいです。

スクリーンショット 2023-10-23 9.36.57.png
(例:このブログの最初の部分です。コードで見ると、このようになっています)

そのため、「コーディングの知識がないけれど自分で修正したい」という方は、別の構築方法がいいでしょう。


【修正しやすいデザインを選びたい方へ】CMSで構築しましょう!

CMSとは、「Contents Management System:コンテンツ・マネジメント・システム」の略で、基本的にはコーディングの知識ゼロでサイトを作ることができます。
テンプレートやテーマと呼ばれる「型」をカスタマイズして、サイトを作る方法です。

よく使われているCMSをいくつかご紹介しますが、どれも「型」をカスタマイズする点は共通しています。

①WordPress
世界的に使われているCMSです。
テーマやプラグインが豊富で、さまざまなカスタマイズができます。
よく使われているので、もし使い方がわからなくなってもGoogleやYoutubeで検索すると参考サイトがたくさん出てくるので、初心者の方でも安心して作ることが可能です。

②Shopify
ECサイトや販売サイトを作りたい方に多く選ばれているCMSです。

③ペライチ
テンプレートの種類も多く、カスタマイズもわかりやすいのが特徴です。

作りやすさが魅力のCMSですが、デメリットもあります。
・余白やアニメーションのカスタマイズはあまりできない
・「テーマ」や「プラグイン」を更新していないとサイトが止まる

基本的に「型」を使って構築しているので、「型」に関連しない部分(文章や色の変更、画像の差し替えなど)の変更は簡単です。
ただ、それ以外のカスタマイズは、CSSなどのコーディングの知識がないと難しい場合があります。

また、定期的に「テーマ」や「プラグイン」は新しいバージョンがリリースされているので、こまめな更新が必要です。


まとめ:サイト完成後を考えて構築方法を選びましょう!

ここまでの内容をまとめるとこのようになります。
Group 34@3x.png

サイトを作った後をイメージして、より良い構築方法を選んでください。

ここまでご覧いただきまして、ありがとうございました。
webサイトを作るときに少しでもお役に立てればうれしいです。

次回で「webサイトができるまで」は終了いたします。
もし、デザインやコーディングなど「webサイト作成のこんなことを聞きたい」ということがございましたら、お気軽にメッセージください。

コーディングに関して、次のようなサービスを出品しております。
よろしければこちらもご覧ください。




サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら