Web制作

2020.02.03

ホームページの作り方【入門編】

こんにちは。アイスクウェアの横山です。
今回はホームページの作り方をご紹介します。

 

ちなみに私は学校へも行かず、職場で先輩に教わることもほとんどなく、独学でホームページ制作の技術を習得しました。
そのため、一般的に使用される技法なのかよくわからない点もあるのですが、良ければ参考にしてみてください。

①サイトの要件定義

・サイトの目的の明確化
・目的を元に必要な要件を定義する

②設計

・構成を設計します
・必要ページやサイトマップなどを作成します

③ワイヤーフレーム

・ワイヤーフレームを作成します
ただし、弊社の場合は少人数で短時間で工数をかけずに制作するケースが多いため、省略する場合もあります。
最近はAdobeのXDなどが使用されるようですが、私はIllustratorかExcelで作成します。

④デザイン

・デザインを起こします。
この時に使用するソフトは私の場合、AdobeのPhotoshopを使います。

デザインをする際に使うサイトの素材については、Adobe stockやPIXTAなどから画像素材を購入したり、
カメラマンが構成に合わせて必要なカットの撮影を行ったりします。

⑤htmlコーディング

Photoshopで作成したデザインがfixできたら、それを元にhtmlを作成していきます。
ちなみに私のhtmlコーディング環境はローカル環境にMAMP、cssはsassで書いています。
スマホ対応のレスポンシブデザインの調整もここで行っていきます。sassを使っているとレスポンシブが劇的に楽になりますね。

⑥jqueryなどで動作を調整

Javascriptはあまり詳しくないですが、Jqueryくらいなら多少知識があります。
簡単な動作について調整していきます。

⑦phpなどを使用したフォームの動作確認

最近はphpでフォームを作成します。
フォームのプログラムは基本的に使いまわししていることはここだけの話です。

⑧サーバーにアップ

指定のドメインに関連づいているサーバーにデータをアップすれば完了。
ホームページの完成です。

さぁここまで説明すれば誰でもホームページができるはず。
クック○ッド風に説明してみました!
みんなのつくれぽ待ってまーす!

次回はもう少し掘り下げて説明できたらいいな。