WEB作成ってぶっちゃけ何をやるの？
WEB作成って必要なこと多くて…難しそう…そんなイメージありますよね。
バナーの作成にデザイン…コーディング…そうです。WEB制作って意外とやることが多いんです。
そもそも何から始めればいいのかわからない！
そんなあなたでも、要点をつかんで慣れちゃえば大丈夫！
まずはサイト作成の流れから見ていきましょう。
サイト作成の流れ① どのようなサイトを作るのか企画書を作ろう
まずはどのようなサイトを作成したいか、企画書の作成をします。
お客様の要望を聞き、その会社として必要なものは何か探っていきます。
そのときに聞いておきたいものですが、例えば…
- 作成したサイトを用いて何をしたいのか
- ターゲット層
- サイトを観覧するお客様は何の目的でサイトを観覧するのか
- テーマカラー
- 使用する写真について
こちらは最低限必要なものになってくるかと思います。
ヒアリングシートなどをあらかじめ作ってみるもの良いですね。
サイト作成の流れ② サイトの構成を考えよう
WEBサイトの構成を考えるために必要なものとは
WEBサイトの構成で作るべきものは主に２つあります。
その２つが、
- ディレクトリマップ
- サイトマップ
です。
ディレクトリマップとサイトマップはなぜ必要？
ディレクトリマップとサイトマップがなぜ必要なのかといいますと、こんな理由です
構成を考えても忘れちゃうから（３秒前のことももれなく忘れる）
そしてもう一つはお客様に作るサイトの説明をして認識をすり合わせるために必要です。
ひとつづつどのようなものか見ていきましょ～
ディレクトリマップを詳しく知ろう
ディレクトリマップとは、ホームページの中身を可視化したものなのですが、わかりやすく言うと…
トップ > スタッフ一覧 > 関東のスタッフ一覧
みたいなものをサイトで見たことはありませんか？
このように、トップページからクリックしたらどのページに行くのかを表にしたものです。
また、ディレクトリマップを作る段階でどのようなタグをつけるのか、URLの文末（スラッグ）はどうするのか…なども決めておきます。
後々のサイト作りに役立ったり、顧客への説明に使用できます。
サイトマップを詳しく知ろう
ディレクトリマップ同様、サイトの構造を表したものになります。
ディレクトリマップとは違ってツリー構造になっているのも特徴です。
依頼主に提出するときはディレクトリマップとサイトマップ併せて提出すると親切ですよ～
サイト作成の流れ③ デザインを考えよう
構成を考えたら楽しいデザインづくりの時間です～
制作の流れとしては
- デザインの下書きを作る（ワイヤーフレーム）
- デザインの素材を集める
- 本番のデザインを作る
こんなかんじです。
ワイヤーフレームってなんだろう
ワイヤーフレームとは、簡単に言うとデザインの下書きのようなものです。
あらかじめどこに何があって写真をどこに置くか…などを決めちゃいます。
これは本番のデザインを作るときに後から変更してもオッケーです。
使用するツールに合わせてテンプレートを作っちゃうのももちろんオッケーです。
デザインの素材集め？
作成するサイトで使用したい素材を集めていきます。
素材って何？って思う方もいるかもしれませんが、サイトの飾りつけをするためのものだと思っていただければわかりやすいかもしれないです。
- サイトの飾りつけに使いたい背景画像
- サイトのあしらいをするためのアイコン
などが挙げられます。
最近はフリー素材も豊富なので、利用規約に合わせて普段からいろいろな素材を探しておくのもおすすめです。
★おすすめ写真フリー素材サイト★
- Photo AC（フォトエーシー）
無料で加工や商用利用もOKな写真を多く取り扱っているフリー素材サイトです。（一日にダウンロードできる数に制限あり）
投稿サイトなので日々いろいろな人がいろんな写真を投稿しているため、困ったらまずはPhotoAC！というくらい重宝しています。 - ぱくたそ
幅広い人物写真や風景写真、企業とコラボした写真がダウンロードできるフリー素材サイトです。魅力は何といっても「茜さや」さんのフリー素材がかわいい～！かわいいということは使いやすいということです。
また、ダウンロードの回数が無制限なのもうれしいポイントです。 - スキマナース
シチュエーション不明なナースのフリー素材がたくさんあるサイトです。商用利用もOK！
「使えるものなら使ってみてください」のキャッチコピーで有名です。使ってみたいです。
もちろん各サイトにて人物以外の写真もたくさんあるから（ナースは例外として）サイトの雰囲気に合った素材を探す必要がありますよ
本番のデザインを作ろう
ワイヤーフレームをもとに、実際に色や画像の配置をしたものを作っていきます。
サイトとして挙げる前に仮デザインとしてお客様にお見せしてイメージをつかんでもらいましょう。
サイト作成の流れ④ 仮サイトを作ろう
作ったデザインをもとに仮のサイトを作ってみましょう。
仮のサイトを作るために使用するものはXAMPPが一番便利です。
XAMPPとは何か？を簡単に言うと、一時的に自分のコンピューター上にあるデータをインターネット上にアップできる優れものです。（しかも無料！）
本番でデータを飛ばしてしまってもXAMPPで仮サイトを作成しておけばなんちゃってバックアップもとれちゃったりします。
バックアップ取らずにデータ飛ばしがちなたろいもはいつもお世話になっています～
サイト作成の流れ⑤ 使用するサーバー・ドメインを決めよう
サイトをアップするために必要なサーバーを決めましょう。
サーバーとは、自分のコンピューター上にあるデータをインターネットにつないで見れるようにしてくれるためのものです。
サーバーはいろんな会社から出てるけど、会社によって使いやすかったり使いにくかったりの差がとても激しいので、選び方には注意が必要です
いろいろなサーバーをしようしてWEBサイトを作成しましたが、おすすめはエックスサーバー一択です！
エックスサーバーでは主に以下の点が魅力的です。
- WordPressインストール＆移管がとっても簡単
- SSL化が無料で操作も楽々
- ドメイン永年無料サービスがある
- キャンペーン期間に申し込めば月額693円から始められる
- 季節ごとにプレゼントキャンペーンを行っている
などなど…。キャンペーンはともかくとにかくWordpressの簡単インストールやSSL化の方法まで、使い勝手がいいのでずっと愛用しています。
サイト作成の流れ⑥ サイトを本番環境で作成しよう
仮サイトができたら本番のサーバー環境でアップします。
サイトを上げたときにレイアウトが崩れていないか、だったり動作の確認をして、依頼主に仕様を説明してあげましょう。
サイト作成までの流れはざっくりいうとこんな感じです。
細かく言うともう少しいろいろありますが、それについては今後記事にして追記いきます。
サイト作成で最低限必要なものはこれだ！
サイトを作るために必要なツールをご紹介します。
どちらも有名なのでもしかしたらご存じかもしれません。
Adobe Creative Cloud
バナーの作成、写真の加工、ワイヤーフレームの作成など、あらゆるものに使用できます。
というか、これがないと仕事にならないというくらい必要なツールです。
今ではスマホのアプリなどで画像が加工できたりもしますが、会社でデザインをやるうえで必要不可欠なものなのでマスターしておいて損はないと思います。
WordPress
サイトを作る際に必須のCMSの一つです。
「CMS」とは、Webサイトのコンテンツを構成するテキストや画像、デザインやレイアウト情報（テンプレート）などを一元的に保存・管理できるシステムのことです。
色々なテンプレート（テーマ）があり、基本的にコーディング不要でサイトのデザインも自由につくれて、しかも無料で使用できるので初心者さんでもおすすめです。
今までコーディング作業でサイトを作成していたたろいもには衝撃が走りました
ちなみに、エックスサーバーを使用する場合はWordPressのダウンロード不要でWordpressを始めることが可能です！
エックスサーバーが気になる方は
↓こちら↓
WEBデザインの学校に行く必要はある？どんな学校があるの？
WEBデザイナーになるためには独学か、専門の学校で授業を受けるかで変わってきますよね。
決まった時間にさぼらず勉強ができるのであれば正直どちらでも構わないと思います。
しかし、講師によっては社会人として現場で役に立つ小話なども交えて教えてくれたりすることがあるため、ネットや本には載っていない生の声が聴けるのも魅力の一つといえますね。
まずはどんな学校があるのか、自分に合うのか見ていきましょう
インターネット講座
まず初めにご紹介するのがインターネットでのWEB講習についてです。
インターネット上で講師に教わり、添削したり与えられた課題に沿ってデザインの作成をしていくものになります。
メリットとしては
- 家にいながら授業が受けれる
- 自分のタイミングで課題がこなせる
デメリットとしては
- 家にいるとやる気が出ない人には不向き
- 学費が異様に高いことがある
- 電話やチャットでのサポートはあるが、聞きたいことをすぐに聞くことができない
などが挙げられます。
専門学校
次にWEBの専門学校についてご説明します。
専門学校なので大手が運営していることが多いのも特徴ですね
メリットとしては
- 学校法人なので履歴書にかける
- 対面授業なのでわからないことがすぐに聞ける
- 大手の法人が運用しているので安心感がある
- 入学するためのコネをもらえることもある
デメリットとしては
- 学費が高い
- 必ずしも行きたい職種につけるわけではない可能性がある
などが挙げられます。
★おすすめ★職業訓練校
職業訓練校ということばをきいたことはございますか？
一度離職して、その間に給付金を受け取りながら好きな科目が学べる国の機関になります。
職業訓練校のメリットはこんな感じです。
- 給付金を受けながら無料で好きなことが学べる
- 学校のクオリティが学校法人の専門学校に匹敵する場合もある
- 卒歴を履歴書にかける
- 就職をさせるための機関なので、履歴書の書き方からスーツの着こなし方、礼儀なども学べる
デメリットとしては
- 入学・給付金をもらうための手続きが少し大変
- 入学したいタイミングで必ず行きたい訓練校が生徒を募集しているわけではない
- 受講期間が短い（半年～１年くらい）
- 労働期間中は入学できない
などが挙げられます。
デメリットを加味しても、無料で、給付金を受けながら本当に学びたい授業を受けれるのは魅力的です
おわりに
いかがでしたでしょうか。
なんとなーくぼんやりとWEB作成の流れなどがつかめてきたら幸いです。
自分に合った勉強法でWEBデザイナーを目指していきましょう！
コメント