【架空】パン屋さんのサンプルサイト制作
ご覧いただきありがとうございます。
コーダーの、まついちです。
この記事では、私が制作したパン屋「Kumanopan」のサンプルサイトについて、制作過程と技術を紹介します。
特に、コーディングスキルをアピールできたらと考えています。
サンプルサイトURL:
https://sample-site-02.vercel.app/
サンプルサイト制作の動機
このサンプルサイトは、私のポートフォリオとして制作しました。
実際のWeb制作業務を考慮し、一般的なWebサイトで求められる多くの技術要素を取り入れています。
普段はコーディングをメインにしていますが、今回はWebデザイン工程にも挑戦し、制作の全体像を学ぶ機会としました。
写真やロゴの素材は、Webデザイナーのみさから提供してもらっています。
サイトの目的とコンセプト
架空のパン屋「Kumanopan」のご主人から依頼をいただいたイメージで、Webサイトを制作しました。
サイトの目的は、Kumanopanの認知度を上げ、実店舗への集客を増やすことです。 SNSやブログとの連携を強化し、お客様との接点を大切にしながら集客アップを目指します。
ターゲット層は20〜30代の働く女性。
コンセプトは、「いつも頑張っている自分への、ちょっとしたご褒美。お気に入りの特別なパン屋さん」です。
温かみのある配色と柔らかな雰囲気を重視し、お店の魅力がしっかりと伝わるデザインを心がけて制作しました。
SEO対策
このサイトには、検索エンジンが内容を理解しやすく、ユーザーにとっても便利なサイトを構築するため、さまざまなSEO対策を導入しています。
具体的なSEO施策については、以下の通りです。
セマンティックマークアップ
検索エンジンがウェブページの内容を理解しやすくするため、HTML5の適切なタグを使用しています。これにより、検索エンジンがページの構造と内容をより正確に把握できます。
※セマンティックマークアップ…コンピュータに意味が伝わるようなタグ付けのこと
クリーンコード
読みやすく、メンテナンスがしやすいコードを書くことを常に心掛けています。
これは、他の開発者が容易に理解し、メンテナンスや拡張がスムーズに行えるようにすることが目的です。
具体的には、以下の原則と方法を採用しています。
わかりやすい命名: すべての変数、関数、クラスなどに対して、直感的に意味が伝わる名前を付けるようにしています。これにより、コードの目的や動作を理解しやすくなります。特にCSS設計においては、BEMを採用し、モジュール化された再利用可能なスタイルを作成しています。
単一責任の原則: 各クラスや関数は一つの責任を持つように設計しています。これにより、コードの変更が必要になった場合に、影響範囲を最小限に抑えることができます。
適切なコメント: コードの意図や重要なロジックについては、適切にコメントを追加しています。これにより、他の開発者がコードを読み解く際の助けとなります。
コードのフォーマットと整形: 一貫したコードスタイルを維持するために、フォーマッターツールを使用し、コードを整形しています。これにより、コードが読みやすくなり、見た目の美しさも保たれます。
DRYの原則: 同じコードを繰り返し記述しないようにしています。共通のロジックは関数やモジュールにまとめ、再利用可能な形にすることで、コードの冗長性を避けています。
コードの分割とモジュール化: 複雑な機能やロジックは、小さなモジュールに分割し、それぞれが単独で機能するように設計しています。これにより、コードの管理がしやすくなり、新しい機能の追加や既存機能の変更が容易になります。
パフォーマンス最適化
ページ速度を向上させるため、さまざまなパフォーマンス最適化技術を導入しています。
具体的には、以下の方法を採用しました。
画像の圧縮: 高品質な画像を使用しつつ、Web用に最適化された圧縮技術を採用しています。これにより、画像のファイルサイズを大幅（今回は66%）削減し、ページの読み込み速度を向上させています。
遅延読み込みの実装: ページが初めて読み込まれる際に、すべてのコンテンツを一度に読み込むのではなく、ユーザーがスクロールしたときに画像やその他のリソースをロードする遅延読み込みを導入しています。これにより、初期読み込み時間を短縮し、ユーザーが必要とするコンテンツをすばやく表示することができます。
非同期読み込みの実施: 必要に応じて、JavaScriptファイルの非同期読み込みを行っています。これにより、ページの初期レンダリングに影響を与えずにスクリプトを読み込むことができます。
これらの最適化技術を組み合わせることで、ユーザーが快適にページを閲覧できるようにしています。
サイトマップとスキーママークアップ
検索エンジンによるインデックス強化のために、サイトマップとスキーママークアップを導入しています。これにより、ウェブサイトの全体構造が明確になり、検索エンジンがページを適切にインデックスできます。
※検索エンジンによるインデックス…Webページの内容をデータベースに登録し、検索結果に表示できるようにすること
※サイトマップ…Webサイト全体のページ構造を示すファイル
※スキーママークアップ…Webページのコンテンツを検索エンジンに理解しやすくするためのコード
適切なメタタグとSNS連携
オープングラフタグやTwitterカードの設定を行い、SNSとの連携を強化しています。これにより、SNS上でシェアされた際にも、情報が適切に表示されます。
メタタグの最適化
タイトルタグ、メタディスクリプション、キーワードなどのメタタグを最適化し、検索エンジン結果ページ（SERP）でのクリック率を向上させるよう努めています。これにより、ユーザーが検索結果からサイトに訪れる可能性を高めています。
レスポンシブデザイン
あらゆるデバイスで最適な表示ができるようにレスポンシブデザインを採用し、スマートフォンやタブレット、デスクトップなど、どのデバイスでも快適に閲覧できる体験を提供しています。
アクセシビリティ対応
ウェブサイトがすべてのユーザーにとって使いやすいものとなるよう、以下のアクセシビリティ対応を実施しました。
セマンティックHTMLの使用: HTML5のセマンティックなタグを使用することで、ページの構造を分かりやすくしています。これにより、スクリーンリーダーなどの支援技術がコンテンツを正確に解釈し、利用者に伝えることが可能になります。
※セマンティックマークアップ…コンピュータに意味が伝わるようなタグ付けのこと
代替テキストの提供: 画像に対して説明的なalt属性を使用しています。これにより、視覚障害を持つユーザーがスクリーンリーダーを通じて画像の内容を理解できるようになります。
色コントラストの確保: テキストと背景の色のコントラストを十分に高く設定し、視認性を向上させています。これにより、色覚異常を持つユーザーや視力が低下しているユーザーでもコンテンツを読みやすくなります。
フォーカスの管理: キーボード操作でナビゲーションが容易に行えるように、フォーカスの順序を適切に管理しています。これにより、マウスを使わずに操作するユーザーにも快適な利用体験を提供します。
ARIAラベルの使用: スクリーンリーダー利用者に対して追加情報を提供するために、ARIAラベルを使用しています。これにより、ボタンやリンクなどが正しく理解され、使いやすくなります。
これらの取り組みにより、ウェブサイトは多様なユーザーにとってよりアクセスしやすいものとなり、すべてのユーザーが平等に情報を得られる環境を提供しています。
使いやすいUIを目指して
サンプルサイトでは、UIの見栄えと使いやすさを実現するために、いくつかの工夫を凝らしています。
分かりやすいナビゲーション: ユーザーが迷わないような構造を持ち、簡潔でシンプルなメニュー配置を採用しています。これにより、初めて訪れるユーザーでも直感的に操作が可能です。
レスポンシブデザイン: あらゆるデバイスで最適な表示ができるように、レスポンシブデザインを採用しています。デバイスのサイズに応じてレイアウトが自動的に調整されるため、どんな環境でも一貫した使用感を保つことができます。
また、複数の知人にフィードバックをもらうことで、ユーザー体験の改善も行いました。
実装したアニメーション
サンプルサイトでは、ユーザー体験を向上させるために、さまざまなアニメーション効果を取り入れています。
スムーズなローディングアニメーション: ユーザーの待ち時間が長く感じないよう、ローディング画面を導入しています。これにより、ページが読み込まれる間もユーザーにポジティブな体験を提供します。
スライドショー: ファーストビューにスライドショーを導入しました。
これにより、パン屋さんのおすすめの商品やお店の雰囲気がサイトを訪れてすぐに伝わります。
ページトップボタン: 長いページを閲覧しているユーザーもスムーズにトップに戻ることができます。
また、スクロールエフェクトの効果でページ内の移動が快適になります。
ふわっと登場するセクション: 各UIやセクションがふわっと登場するアニメーション効果を取り入れています。これにより、ユーザーに視覚的な楽しさと動きのあるインターフェースを提供しています。
もう１つの狙いは、セクション間を飽きずにテンポよく読み進めていただくことです。
サイトに使用した技術
このサンプルサイトの制作には、さまざまな技術とツールを使用しています。
HTML5とCSS3: ページの構造とデザインの反映に使用しています。
Sass: 高度なスタイルシート管理のために使用し、再利用性を高めています。
JavaScript: インタラクティブな機能を追加し、ユーザーエクスペリエンスを向上させています。
GitHubとGit: バージョン管理とコードの履歴管理に使用しています。
Visual Studio Code: 開発環境として使用し、コード補完やデバッグなどを強化しています。
Vercel: サイトのホスティングに使用し、簡単にデプロイできる環境を提供しています。
Figma: ワイヤーフレーム、デザインカンプの作成に使用しました。
まとめ
今回のサンプルサイト制作において、特に以下のポイントに注意して取り組みました。
ポイント1: ユーザー体験の向上
常にユーザーの立場に立ち、使いやすさと快適さを最優先に考えました。
シンプルで直感的なナビゲーションを実現し、情報が迅速かつ効果的にアクセスできるようにしています。
ポイント2: 高品質なデザイン
「kumanopan」に足を運びたくなってもらえるサイトになるように、パンが美味しく見えるデザインになるよう気をつけました。
配色やフォント選びにこだわり、パン屋さんならではの温かみのあるデザインを目指しています。
ポイント3: 最新技術の活用
HTML5、CSS3、JavaScriptといった最新のWeb技術を駆使し、インタラクティブで動きのあるサイトを作成しました。
また、Sassを用いることで、スタイルシートの効率化と再利用性を高めました。
ポイント4: SEOとパフォーマンス最適化
検索エンジン最適化（SEO）を徹底し、セマンティックHTMLや適切なメタタグの使用、画像圧縮や遅延読み込みなど、さまざまな手法を導入しました。
これにより、検索エンジンでの評価を向上させるとともに、ユーザーに快適な閲覧体験を提供しています。
ポイント5: コードのメンテナンス性
コードが読みやすく、長期的に維持しやすいように工夫しました。
わかりやすい命名、単一責任の原則、適切なコメント、フォーマットと整形、DRY原則、コードの分割とモジュール化を徹底し、他の開発者が容易に理解し、変更を加えることができるようにしています。
ポイント6: アクセシビリティ対応
すべてのユーザーが等しくサイトを利用できるように、アクセシビリティにも配慮しました。
セマンティックHTML、代替テキストの提供、色コントラストの確保、フォーカスの管理、ARIAラベルの使用などを徹底しています。
記事は以上になります。
ここまで目を通していただき、本当にありがとうございます。
気になることや聞いてみたいことなどありましたら、些細なことでも構いません。
お問い合わせからご連絡いただけますと嬉しいです。
お仕事のご依頼やご相談など、お気軽にお問い合わせください。