ちょっと聞きたいんやけど、WEBデザイナーがホームページを制作する時の流れってどんなん？
そうだねぇ〜、私の場合の話なんやけど、ざっとホームページ制作の流れについて話すね。
WEBデザインに興味あるって人はぜひとも参考にしてみてね。
こんにちは！薬剤師WEBデザイナーのリサです！
今回は個人でホームページ制作を受注するにあたって、ホームページ制作のおおまかな流れについてお話しします。
今から、個人でホームページ制作受注してみたい方や今からWEB制作に関するスキルアップを目指そうと考えてる方向けの内容になっているかなと思います。
ホームページデザインのための情報収集をしていく
まず、クライアントにホームページ制作についてヒアリング
「誰に？」：誰に向けたホームページなのか整理して行って、導線などのアクションのしかた、デザインの方向性をきめていきます。
例）薬局に転職を考えてる方向け、薬局に訪問在宅の依頼をしたいと考えてる患者様向け、ドラッグストアのキャンペーン情報が知りたい人向けなど
「目的」：目的を明確にして、何をつたえるべきか、何を目立たせないといけないのか考えていきます。ここでしっかり条件を絞っていかないと、誰にも刺さらない誰の目にも止まらないWEBサイトになってしまいます。
例）集客アップ、認知度アップ、セキュリティ強化など
「期待する効果」：サイト全体の導線を整えるために、何をユーザーにして欲しいのかを明確にします。
例）資料請求からのお問い合わせ数アップ、SNSフォロワー数アップ、採用・求人申し込み数アップなど
「雰囲気、色味、ロゴ」：ロゴがすでにある場合は、その色味とヒアリング情報をもとに全体の雰囲気やデザイン、ワイヤーフレームといったサイトの骨組みを考えていきます。
ワイヤーフレームやサイトマップなどの準備ができたら、デザインを考える
１、adobeソフトを使う
- photoshop
- Adobe Xd
超！有名なAdobeですが、ソフト代がかなり高いです。フリーランス初期にはかなり痛い出費です。
でも、今ならAdobe通信講座を運営されている【アドバンスクールオンライン】 
からなら通信講座の教材もついてきて、およそ年間8万円するAdobeソフトですが、今なら半額で購入可能です！！
絶対お得なAdobeソフトと通信講座のセットはこちら！ 
▶︎▶︎▶︎
２、figma
こちらはソフトがなくてもネットさえあれば、共有可能です。ブラウザ上で操作できます。共同で作業する際やAdobeを持ってないクライアントさんと確認作業する際はとても便利です。
Figmaは2022年7月に大幅アップデートされ、日本語版に対応しました。抜群に使いやすくなりました！日本語版ありがとう！
私的には操作性はどちらも同じくらいの感じかなと思っています。まず、どっちもUIが似てるので操作しやすいです。
AdobeXdのいいところはオフラインでも操作できるので、飛行機の中とか電波がなくてもやろうと思えば作業できるところですね。やらんけど！笑
ホームページを構築
デザインが完成したら、完了じゃないの？
WEBサイトに載せるために、構築をしていかないとサイト上で見れないよ！
デザインに沿って、ホームページを構築していきます。
ここでは、日本のWEBサイトの全体のシェア率80%を超えている「Wordpress」についてお話しします。
今回は「サーバーもドメインも契約したことがなく、あたらしくホームページを作る」と想定します。
サーバー、ドメインの契約
ホームページが「家」だとすると、サーバーは「土地」、ドメインには「表札」の役割があります。
まずは、「土地」：サーバーを確保してから「家」を建てていきましょう。
＜おすすめサーバー＞
- ロリポップ
- エックスサーバー
【ロリポップこんな人におすすめ】
- 価格・コストパフォーマンス重視の人
- 初めは安くしといて、後々様子見ながらプラン変更検討したい
- ある程度のスピードで、便利に使える範囲であれば問題な人
ロリポップ公式ホームページはこちらから▶︎★月額110円〜/WordPress簡単インストール！ ロリポップレンタルサーバー ★
【エックスサーバーこんな人におすすめ】
- コスパよりもとにかくスペック重視
- 企業ホームページなど中規模以上のサイト制作をする人
- 少しでも表示スピードが早い方がいい人
エックスサーバー公式ホームページはこちらから▶︎ エックスサーバー
自分のWEBサイトはWEBデザイナーのスクールでロリポップを使ってたから、そのままロリポップ使ってます。
でもクライアントさんのホームページや、お仕事でサーバー触る時はエックスサーバーが多いです！
正直、初心者には、サーバー設定画面の見やすさとか使いやすさもエックスサーバーの方が使いやすいです。でも、ロリポップ安いんよ！そこがまた魅力的。笑
独自ドメインを設定する
次に、「表札」：ドメインをつけていきましょう。
<おすすめドメイン>
が結構よく使われるセットです。
なぜなら、このセットでよくキャンペーンをやってるから！
キャンペーンの時にお得に購入して、節約しながらホームページ運用していきましょう。
ここで注意なのが、「独自ドメインが反映されるまでに24～72時間程」かかるということです。経験上、24時間たてばだいたい反映されてることが多いです。
独自ドメインが反映された後、ドメインのSSL化もサーバー上で申請しておきましょう。
1時間くらいでいつも反映されてるイメージですが、急ぎの案件であれば早め早めに進ませておくと安心ですね。
サーバーにWordpressのダウンロード
独自ドメインが反映されたらロリポップ、エックスサーバーともに簡単ワードプレス設定なるものが存在しますので、簡単にサーバー上にワードプレスを設置することができます。
WordPressが設置できたら、デザインをもとに構築していきます。
構築方法にも色々あって
- PHPのプログラミングを使ってオリジナルテンプレートで構築する
- wordpressのテンプレート＋cssコーディング
- wordpressのテンプレート＋elementorなどのノーコードツールを使う
細かくいえばもっともっと、構築方法は山ほどあるんですが、大まかなところで言うとこんなところかなと！
SEO設定、セキュリティ設定プラグイン
プラグインとは、wordpressを構成する上で、必要となる「拡張機能のこと」スマホで言うアプリのようなものです。
プラグインには、オリジナリティを出すためのものだったり、内部のシステム構築のためのもの、バックアップのための便利機能など様々なものがあります。
WPおすすめプラグイン：SEO設定
SEO対策って難しそう。コードが書けないとできないんじゃないの？
コードが書けなくても、便利なプラグインを使えば簡単にSEO設定することが可能だよ！
<おすすめプラグイン>
- All in One SEO Pack
- Yoast SEO
特に大きなこだわりがない限り、このどちらかのプラグインを使用すれば問題ないでしょう。どちらも簡単な設定後に、効力が発揮されるのでDLしただけで安心するのはまだ早いです！
ただし、wordpressを構築する上でSEOに強い有料テーマなどを使用した時はエラーや不具合が出やすいので注意してください。プラグインとテーマの相性には注意です。
ここでよく勘違いされるのが、ここで設定をきっちりすればgoogle検索で常に１位になるんでしょ？ということ。
なるとも言えないし、ならないとも言えないのが事実。
WEBの世界は常に変化し、SEOの順位も上がったり下がったりするのが通常です。なので、この段階でできるのはあくまで最低限のSEO設定になります。
特に、ホームページ制作請け負い初期の時はよく分からず「SEO対策！SEO改善します！順位上げます！」
SEOを改善します！ってなるとかなりのWEBマーケティングの専門知識と長期戦が必要になります。
またこのお話は別のブログでお話しますね。
WPおすすめプラグイン：セキュリティ設定
特に最近個人情報の流出やハッキングなど怖いニュースが流れるよね。
私も昔、クレカの情報が盗まれてカード止めてもらったことがあるよー。まじで怖かった。ここは特に注意して設定していきたいよね。
<おすすめプラグイン>
- Wordfence Security
- SiteGuard WP Plugin
Wordfence Security
ファイアウォール機能でハッカーやウイルスからWEBサイトを守るプラグインです。
<主な機能>
- ハッキングの防止
- スパムコメントのブロック
- サイト内のコンピューターウイルスの撲滅
SiteGuard WP Plugin
不正アクセスからWordPressを守るためのプラグインです。
初期設定の場合、容易に管理画面にログインされてしまうので、WordPressのログインページと管理ページを保護するためにも対策をしましょう。
<主な機能>
- 不正ログイン
- 管理ページへの不正アクセス
- コメントスパム
重複してしまう機能があるので、この２種類を併用する場合は
SiteGuard WP Pluginはこの４種類のみ有効で問題ないと思います。
- 管理ページアクセス制限
- ログインページ変更
- 画像認証
- XMLRPC防御
まとめ
WEBデザイナーがホームページを作る工程にはデザイン以外のものもとても多いので、制作会社や複数人でWEB制作している事業者さんはそれなりにお値段がかさむのもわかりますよね。
もし、個人でやっていきたいと言うことであればこの流れが基本的なところなのかなと思っています。得意なところだけやりたいと言うことであれば、同業者の仲間を募って複数メンバーでお仕事するのもありですね。
