はじめに

ITエンジニア2年目のひよっこです。
趣味丸出しの旅行記のような簡単なWebサイトを作成したので、公開までに行った流れを備忘録がてら記録します。

ちなみに、作成サイトはこちらです。
「わたしの瀬戸内」

前提

文学部出身のバリバリのド文型。
新卒未経験で入った会社の研修で掲示板を作成した際、Webサイト作るの楽しいなと思ったのがきっかけ。単純ですね。
結局画面周りをやったのは研修中だけだったので、体系的な基礎知識のないまま「とりあえず作っちゃえ」という見切り発車です。
Web制作の実務経験のない人間が、練習がてらに作成したものということをご了承ください。

どんなサイトを作ったか

まずは、自分で作ったものを実際に公開するという実績を作ることを一番の目的にしました。

・過去の島旅の思い出を、写真と文章で綴るサイト
・ページ構成、内容、デザインはシンプル
・レスポンシブ対応なし
・データベースは使用なし
・使用言語はHTML5とCSS3のみ

流れ

1.企画

コンセプト設計

・どんなサイトを作りたいか
・それはなぜか
・どんな人に見てほしいか
・見た人にどう思ってほしいか
等をまとめて、作成予定サイトのイメージを固めます。

サイトマップ作成

サイトマップとは、Webサイト全体のページの構成をリスト形式でまとめたものです。
どのページがどのページに紐付いているのかをツリー状に繋げていきます。
　①必要そうなページを洗い出す
　②洗い出したページをグループ分けする
　③ページを階層化する
　④清書（ドキュメント化）する ←私はgoogleのスライドショーを使用しました

ワイヤーフレーム作成

ワイヤーフレームとは、各ページのレイアウトを表した設計書のことです。
どの要素がページのどの位置にあるのかというのを可視化していきます。
　①必要な各ページの掲載する要素を洗い出す（タイトル、写真、テキスト、ナビ、リンク等）
　②洗い出した要素を関連性のあるものでグループ分けする
　③要素の優先順位をつける
　④清書（ドキュメント化）する ←photoshopを使用しました

2.サイト制作

パーツの準備

サイトに使う画像やテキストを準備します。
今回作成したのは旅行の記録サイトなので、私は以下のことをやりました。
　①写真のレタッチ
　②写真のサイズをカテゴリごとに統一（TOPページ用、見出し用、小見出し用等）
　③パーツ用写真の編集
　④説明文の草案

デザインの作成

本来なら、フォントや色や配置等を詰め、「デザインカンプ」というデザイン案を作成します。
が、私はここの工程をすっ飛ばしてしまいました。反省…。
今回作成したのはシンプルなものだったので、頭の中のイメージをコーディングしながら形にすることに支障はあまりなかったのですが、次はちゃんと作りこみます。

コーディング

イメージしている画面になるように実際にコーディングしていきます。

　①エディタをDLする。
　　様々なコードエディタがありますが、私はAdobeが出している「Brackets」を使用しました。
　　コーディングしたらボタンひとつでchrome上で確認できるという優れもの。
　　正直めちゃめちゃ使いやすかったです。
　②HTMLで各ページに必要な要素を書いていく
　　横並びにする作業や、位置・サイズ調整などは後ほどCSSで整えるので、ヘッダーやメニューや画像・テキストなどを一旦全部コーディングします。
　③CSSでイメージに近づける
　　ただずらっと並んでいるだけの要素たちを、CSSを使って整理します。
　④微調整して完成

3.サイト公開

サーバーを借りる

作成したHPをインターネット上に公開するためには、サーバーに作成物を置かなくてはなりません。
私は、「さくらのレンタルサーバ」で一番安いプランを契約しました。

独自ドメインを取得する

ドメインとは、ホームページのネット上の住所のようなものです。
「https://qiita.com/」の「qiita.com」の部分ですね。
「さくらのレンタルサーバ」ではサーバーレンタル時に独自ドメイン取得も希望できるので、一緒にやりました。

独自ドメイン取得にはお金がかかります。
「.com」や「.jp」等の種類によって金額はピンきりです。
私は「.com」」を契約しました（1年契約で3,000円位）。

※デフォルトでついてくる無料ドメインも使えますが、それだと「http://my-setouchi.sakura.ne.jp/」と借りたところの会社名が記載されてかっこ悪いので、完全に見栄えのためだけに課金しました（笑）

ファイルをサーバにアップロードする

いよいよ、PCに保存してあるHTMLファイル・CSSファイル・画像をレンタルしたサーバ上にアップロードしていきます。
通常はFTPクライアントソフトというファイル転送用のソフトを使ってアップロードを行いますが、さくらのサーバにはファイル転送ソフトを使わなくてもアップロードできるファイルマネージャが用意されているので、今回はそちらを使用しました。

次回は、FFFTPやWinSCP等のフリーで配布されているFTPソフトを使う練習もしたいです。

実際にページを確認する

作成したサイトのURLにアクセスしてみて、ページの飛び先や表示位置等、想定通りの作りになっているかを確認していきます。
エディタのプレビューでは問題なくても、サーバに置いたら表示されない画像がある等のケアレスミスを発見しました。
修正したファイルをアップロードし直して、再度確認したら完了です。

おわりに

やっぱり基礎知識は大事

今回、見切り発車でとりあえず作ってみましたが、コーディング中難航する場面や諦めた機能もありました。
そんな時、土台として体系的な知識があったらもう少しできる事も増えたのかなと思ったので、一旦ちゃんと勉強しようと思います。

今後

自分の作ったものがChromeでもIEでもスマホでも見れた時はやっぱりちょっと感動しました。
次は今回省いた「デザインカンプの作成」「FTPソフトの使用」も行い、js等他の言語も使ってもう少し本格的なWebサイトを作成してみたいです。

※ちなみに今回作成したサイトは、サーバが月ごとのレンタルなので恐らく1ヶ月で閉めると思います。（せっかく取得したドメインは1年間有効なので勿体無いのですが。）

ここまで読んでいただけてありがとうございます。
ど素人の備忘録ですが、少しでも参考になる部分があれば幸いです。