これから始める方へ

私が思うWebサイト制作学習の簡単な流れ（HTML〜WordPress）

 

これからweb制作をする勉強がしたいんだけど、

・どんな流れで学んだらいいかな

・どんな知識が必要なのかな

というかた向けの記事です。

私は、web制作（デザイン・プログラム作成）の仕事を生業としています。

（フリーランスです。）

また、デザイン系の学校で非常勤講師としてweb制作の作り方を教えています。

先日、こんなツイートをしました。

よくよく考え、少し調整した内容を書いてみたいと思います。

私が思うWebサイト制作学習の簡単な流れ

1.素材作成（photoshopやSketch）HTML+CSSでwebサイト制作

HTMLがweb制作にあたり一番簡単な言語だと思います。

簡単に言うと、HTMLは開始タグと終了タグで挟めば（マークアップ）完成するので、比較的取り組みやすいです。

また、CSSはデザインや見た目の設定をするためのプログラムで、HTML、PHPなどwebサイトを作るなら、学習必須です。

1.PhotoshopやSketchで簡単でもよいので、素材を並べ構成する。

2.必要な部分を画像として保存（画像アセットなど）

3.プログラムデータ作成を進め、サイト制作完了

という流れで学べるとよいのでは、と思います。

以下、4のスマートフォン&PC表示対応もこの時点で余裕があれば習得できるとよいと思いますが、

覚えることが多すぎる。

PC向けのサイトをいくつも作って、2のサーバーやドメインを使って公開していく練習をしてからの方が身につけやすいかなと感じます。

2.サーバー・ドメイン・SSLの使い方や設定方法を覚える

サーバーについて

プログラムデータを制作するだけ完成ということは、仕事上ほぼないです。

データをサーバーにアップロードして納品完了です。

wordpressなどのCMSはwebサイト上で操作して、サーバー内のサイトフォルダやデータベースを書き換えます。

（記事作成前まではサーバーに自分でデータを上げる作業もよくやります）

レンタルサーバーの申し込み方、管理画面の使い方、FTPクライアントソフトを使ったサーバー接続の方法などこちらも覚えることは多くあります。

独自ドメインについて

また、サイト制作の際は、取得した独自ドメインを使うことが多いです。
（creative-rush.siteのようなサイトアドレスのことをドメインといいます）

自分でオリジナルの名前を決めて、購入できるのが独自ドメインです。

独自ドメインの取得方法、サーバーとの接続設定（ネームサーバー）なども覚える必要があります。

SSLについて

SSLというセキュリティ設定があります。（アドレスをhttp://→https://に変える）
SSL化はGoogleが力をいれているところでもあるので、必須事項になるかなと思います。

この辺りになると、webデータを制作して、サイト公開ができるようになります。

3.メールフォーム系のCGIやJSなどカスタマイズや使用法

実際の仕事になると、CGIやJavascriptを使いながらサイトにお問い合わせフォームをつけたり、スライダーや機能をつけたりする必要も出てきます。

自作するよりまず先に、フリーで使えるCGIやjsを自分のサイトに組み込む練習をするのがいいのではないでしょうか。

メールフォームでCGIを使うと、パーミッションなどの設定も勉強できます。

4.MediaQueriesなどスマートフォン&PC表示対応
（レスポンシブ）

Media Queriesは、CSSでの設定です。画面幅に合わせてサイトデザインを変えることができます。

PCは横長の画面ですが、スマートフォンは縦長でwebサイトをみることが多いかと思います。

サイトデザインや表示内容をデバイスに合わせて変更した方が見やすいです。

現在の仕事では、スマートフォン向けに設計・制作して、PCでも表示できるようにするという概念の方が強いです。

表示ファイルごと切り替える場合もありますが、CSSで画面幅を認識させて調整するレスポンシブwebデザインのタイプの方が、現在依頼が多いです。

また、figureを100%表示させたり、レスポンシブでよく使うCSS設定も覚えておくといいと思います。

5.wordpressを使いこなす

wordpressはCMSの1つです。

CMSはコンテンツマネジメントシステムの略で、システムを組むことができない人でも自由にサイトを更新・編集できる仕組みのことです。

wordpressは世界で1番人気のあるCMS。（2018年シェア/webサイト全体の31%）

wordpressでつくって！という制作依頼も多いです。

プラグインとよばれる拡張機能が多いので、予約システムやスライドショー、翻訳機能、アクセス解析などできることも広がりがあります。

しかし、

・投稿記事ってどうやって書くのか（そもそも投稿記事ってなんなのか）

・プラグインってなんなのか

・アドレスの調整はどこでするのか

・メディア？固定ページ？

・MySQLってなに？

・更新通知が出ているけどどうしよう！

などなど、初めて使う自分を想像しただけでも、覚えることはたくさん。

なので、まずwordpress自体の基本操作、世の中にあるテーマを選んで、カスタマイザーで調整など、wordpressの使いかたの学習をじっくり進めていくのがよいと思います。

6.wordpressテーマカスタマイズや作成

また、wordpressの使用言語はPHPです。

希望の設定を実現させるため、本格的にやっていくのであれば、カスタマイズやテーマ作成学んでいくことになります。

function.phpで機能を調整したり、実際に勉強でテーマを自作してみるのもいいと思います。

web上にも多くの情報があるので、調べつつ、作っていくといいですね。

まとめ

思いつくことをザラザラっと書いてしまったので、専門用語も多くて、難しかったらごめんなさい。

こんな感じかなあと感じています。

覚えること多いな…と思いました。

調べつつ、続けつつ、がいいかと思います。

参考になれば幸いです。