結果
約半年間の勉強を経て、以下のようなホームページを制作しました。（ホームページ制作に費やした時間は3か月ほどです。）空いてる時間を見つけては少しずつ制作していったのでかなり時間がかかってしまいました。（笑）
[PC版サイト]
[スマホ版サイト]
サイトは、モバイルフレンドリー、SEO対策、ユーザーエージェント判定、jQueryによるアニメーションなどを考慮しました。
サイト制作には、HTML5、CSS3、Bootstrap4のみを学習した状態で取り掛かり、必要な技術や知識はその都度学びながら作業を進めていきました。
使用した言語やフレームワーク
・HTML5
・CSS3
・Bootstrap4
・jQuery
ホームページを作ろうと思ったきっかけ
半年ほど前にwebプログラミングの勉強を始め、徐々に勉強をしていく中で完全オリジナルのホームページを作りたいと思うようになったのがきっかけです。最初は、クラウドソーシングを用いて誰かのためにホームページを作ろうと考えていました。しかし、初心者である私は一つも案件を受注することができませんでした。そこでポートフォリオ作成のためにも現在自分がアルバイトをしている居酒屋のホームページを勝手に作ってみることにしました。（笑）
出来上がったホームページをオーナーに見せてみるとぜひ欲しいということで公開に至りました。
サイト公開までの制作手順
- サイトのデザイン、レイアウト、構造を大まかに決める
- HTML、CSSを記述し、大まかなサイトを作り上げる
- Bootstrap4を用いて余白やレイアウトを調節する
- レスポンシブ対応にするためにスマホ版のサイトを作成する（1~3を繰り返す）
- XAMPPを使用し動作確認
- 文書、写真の用意
- seo対策
- jQueryの実装
- レンタルサーバーを借りる（ロリポップ）
- ユーザーエージェント判定、CSSハックに対応する
- ホームページ公開
1. サイトのデザイン、レイアウト、構造を大まかに決める
正直自分はデザインやレイアウトを決めるのに一番頭を抱えました。デザインの勉強などもしたことがなかったので他の居酒屋ホームページを見まくりました。（笑）たくさんのホームページの中からいいなと思ったデザインを参考にしてサイトを制作しました。
2. HTML、CSSを記述し、大まかなサイトを作り上げる
HTML、CSSを記述し、大まかにサイトを作りました。文書や写真は仮のものを使用し、１で考案したデザインを形にしていきました。
3. Bootstrap4を用いて余白やレイアウトを調節する
CSSのフレームワークとしてBootstrap4を導入しました。制作したホームページの大半はBootstrap4を用いています。フレームワークによりかなりCSSの記述が楽になるのでCSSのフレームワークを学ぶことをお勧めします。自分の思い通りにCSSが反映されない時は、Chromeのディベロッパーツールを用いることで原因を突き止めていました。
4. レスポンシブ対応にするためにスマホ版のサイトを作成する（1~3を繰り返す）
サイトをレスポンシブ対応にする方法はいくつもありますが、自分はPC用サイトとスマホ版サイトを分けて作ることにしました。そのほうが、より自分の思い通りにレイアウトを調節できると感じたからです。手順としては、PC版と同じように1~3を行っていく形です。
5. XAMPPを使用し動作確認
ここまでのプログラミング反映の確認はChromeで行っていました（ディベロッパーツールを使うことでスマホ版のサイトも確認していた）。しかし、スマホ版のサイトを実機で確認がしてみたかったためサーバーが必要になりました。レンタルサーバーは費用がかかるため、無料でサーバー構築ができるXAMPPというソフトを使用しました。少し費用はかかりますが、圧倒的に楽で簡単なのは、レンタルサーバーを借りることです。
6. 文書、写真の用意
自分は、料理の魅力やオーナーの気持ちを伝えれるように文書を作成しました。写真は一部オーナーから頂き、足りない写真は自分のスマートフォンで営業時間外に撮影し編集しました。画像編集には、無料のソフトであるGIMPを使用しました。
7. seo対策
主なseo対策として、サイトに使用するワードについて気を付けました。（スモールワードとビッグワードをうまく使い分けることが大事。）また、HTMLファイル内にメタディスクリプションを記述したり、ファビコンの設定なども行いました。
8. jQueryの実装
サイトに動きを与えるためにjQueryを実装しました。サイトに動きを与えることでよりサイトが使いやすく見やすいものになっていきます。jQueryは、「スクロール幅によってトップに戻るボタンを出現させる」「ドロワーナビを表示させる」「ヘッダーとフッターのHTMLを別ファイルで管理する」といった箇所で実装しました。
9. レンタルサーバーを借りる（ロリポップ）
サイトが完成形に近づいてきたのでレンタルサーバーを借りました。レンタルサーバーはロリポップを使用しました。実践的にホームページをWeb上にアップロードしてみることでホームページの運用を体験しました。個人的にホームページをアップロードする瞬間が一番楽しかったです。（笑）
10. ユーザーエージェント判定、CSSハックに対応する
PC版のサイトとスマホ版のサイトをアクセスした端末によってうまく振り分けれるようにユーザーエージェント判定をjQueryで制御しました。
いざ、サイトを公開しようと思いアップロードしたところブラウザごとにレイアウトが乱れてしまうことが起きていたのでCSSハックにも対応させました。
11. ホームページ公開
自分の思うようなホームページが完成したので公開に至りました。今後は、「Google Search Console」や「Google Analytics」を用いてseo対策がうまく適応されているかどうかを確認しつつ、ホームページを運用していくつもりです。
感想
ホームページを作成してみて一番重要なのは、使用する写真とSEO対策であると感じました。より画質の良く、映える写真を利用することで見栄えのいいホームページになります。またそれを検索上位に表示させるSEO対策も必須です。
レイアウトが思い通りにいかないことが多く、試行錯誤を繰り返すことはとても大変でしたが、その分達成感はものすごくありました。現在HTMLやCSSなどを勉強していてアウトプットする方法を探している方は、オリジナルのホームページやブログを作成し、公開してみるといいと思います。
今後の展望
ホームページの作成当初は、出来上がったサイトを元にクラウドソーシングや近所のお店への直営業から案件を受注することを目標をしていましたが、ホームページが出来上がっていくにつれてより自分の技術を向上させたいと思うようになっていきました。
今後は、今回作成したホームページの運用とともにJavaScriptやそのフレームワークを中心に勉強していきたいと考えています。
ホームページのSEO対策についての改善案や、おすすめするJavaScriptのフレームワークなどありましたら教えてもらえると嬉しいです。