【Sample】カフェサイト

概要

職業訓練校の課題でカフェサイトのデザイン、コーディングを行いました。

  • クライアント:Was cafe(架空)
  • 制作:140時間
       ワイヤーフレーム、デザインカンプ/40時間
       コーディング(レスポンシブ含む)/100時間
  • 使用言語:HTML、CSS、JavaScript
  • 制作ツール:Illustrator、Photoshop、Visual Studio Code

完成品

サイトを見る

デザインのポイント

「オシャレ」かつ落ち着いた空間をイメージし、コーヒーの色味をベースにしたサイト

に仕上げました。「地域の方が気軽に立ち寄れる場所」を目指し、特に50代~80代をメインターゲットに設定し、シンプルで読みやすいデザインにしました。

制作を通じて学んだこと

初めてのWebサイト制作では、コーディングのしやすさを意識したデザインに挑戦しました。レスポンシブ対応に苦戦し、時間がかかりましたが、頑張った結果、様々なデバイスで閲覧可能なサイトに仕上げることができました。特に、ハンバーガーメニューがJavaScriptでスムーズに動いたときは大きな達成感がありました。デザインはシンプルでしたが、「集客」という目標に向けて、まだ改善の余地があると感じています。それでも、Webサイトを完成させたことは大きな喜びと達成感を得ました。