HTML＆CSSに挑戦
こんにちは、Komachiです。
今回は、私がはじめてHTMLとCSS を使って制作したサイトについてご紹介します。
それまでは WordPress を使ったサイトのみ経験があり、コーディングは初挑戦でした。
※私が通ったWEBの職業訓練校については、別記事で詳しく触れています。
WEBサイト作品
ここでは、私がスクールで制作した2つのサイトをご紹介します。
実際に作ったのは各サイト3ページずつになりますが、制作の雰囲気を感じてもらえたら嬉しいです。
※レスポンシブ対応はまだ一部のみです。スマホで見ると表示がずれることがありますが、ご了承ください。※あくまでも初心者作品です＾＾
1作目：
- サイトタイトル：エターナバイオ株式会社
- テーマ：コーポレートサイト
- 使用技術：HTML／CSS
- 感想：最初からコードで作ったサイトに感激！
2作目：
- サイトタイトル：秘境のはちみつ M’s Honey
- テーマ：ECサイト（オンラインショップ）
- 特徴：トップページと商品ページにスライダーを導入（画像が自動で切り替わる演出をJavaScriptで実装）。
- 感想：初めて動いた瞬間は感動！
サイト制作の基本ステップ
HTMLやCSSを学べば「すぐにサイトを作れる！」と思っていたのですが、
実際はコーディングに入る前の準備が意外と多いことに気づきました。
スクールで学んだ基本ステップは以下のとおりです。
- リサーチ・調査
競合サイトや市場を調べ、方向性のヒントを集める。 - 戦略設計
コンセプトやターゲット（ペルソナ）を明確にし、サイトの目的を決める。 - 情報設計
サイトマップやワイヤーフレームを作成し、全体の構成を設計する。 - コンテンツ制作
文章や写真、動画など、サイトに載せる素材を準備する。 - デザイン
色・フォント・レイアウトを整え、世界観や雰囲気を表現する。 - 実装（コーディング）
HTML／CSS／JavaScriptを使ってサイトを形にする。 - テスト・修正
表示やリンクを確認し、必要に応じて調整する。 - 公開・運用
サーバー・ドメインを設定して公開し、SEOやアクセス解析を行いながら改善していく。
私の通ったスクールでは「30社リサーチ」という課題があり、最低30社分の同業サイトを分析しました。ヘッダーやフッターに何を入れているか、トップページの構成や導線などを比較し、自分のサイト設計に活かしました。（正直かなり大変でした…！）
余談：秘境のはちみつについて
2作目で制作した「秘境のはちみつ」のサイトは練習用の架空プロジェクトですが、実は以前、本当に秘境のはちみつを製品化しようと動いた時期がありました。
コロナ禍で海外渡航や物流が難しくなり、一旦諦めたものの、今でも「いつか実現したい」と思っています。
本当に素晴らしい蜂蜜🍯で、みんなにぜひ食べてもらいたい！
実は今も自分たちの分だけ個人的に輸入しているので、製品化できる前に欲しい方は…こっそり連絡ください（笑）
蜂蜜（ミツバチ🐝の生態）は本当に奥が深くて、「ハニーハンターをやりたい」と思ったことがあるくらいです（笑） また記事にできたらと思っています。
