目標

  • このウェブサイトは、HTML、CSS、JavaScriptを練習するための自習制作として制作されました。

使用ツールの詳細

Adobe Dreamweaver

  • ウェブサイトのコーディングやデザイン作業に使用されました。Dreamweaverはコードエディターとビジュアルデザインツールを組み合わせた強力な開発環境であり、HTMLやCSSの編集が直感的に行えます。

Copilotのデザイン機能

  • ウェブサイトに使用する画像素材作成に活用されました。

Canva

  • タイトルやハンバーガーメニューなどのグラフィックデザイン要素を作成するために使用されました。

デザインの工夫とレイアウト

  •   ウェブサイトのデザインは、訪問者がカフェの雰囲気や魅力を感じ取れるように工夫されています。カラーパレットやフォントの選択には、居心地の良さやリラックスした空間を演出するための配慮がされています。さらに、カフェの雰囲気を伝えるために、写真素材やイラストが効果的に使用されています。
  •   レイアウトは全デバイス対応のワンコラムページとして設計されており、レスポンシブデザインに対応しています。また、メニューはスクロール操作で簡単にアクセスできるScroll To形式が採用されています。これにより、訪問者はスムーズに情報を見つけて閲覧することができます。

サイト確認

目標

  • このウェブサイトは、HTML、CSS、JavaScriptを練習するための自習制作として制作されました。

使用ツールの詳細

Adobe Dreamweaver

  • ウェブサイトのコーディングやデザイン作業に使用されました。Dreamweaverはコードエディターとビジュアルデザインツールを組み合わせた強力な開発環境であり、HTMLやCSSの編集が直感的に行えます。

Copilotのデザイン機能

  • ウェブサイトに使用する画像素材作成に活用されました。

Canva

  • タイトルやハンバーガーメニューなどのグラフィックデザイン要素を作成するために使用されました。

デザインの工夫とレイアウト

  •   ウェブサイトのデザインは、訪問者がカフェの雰囲気や魅力を感じ取れるように工夫されています。カラーパレットやフォントの選択には、居心地の良さやリラックスした空間を演出するための配慮がされています。さらに、カフェの雰囲気を伝えるために、写真素材やイラストが効果的に使用されています。
  •   レイアウトは全デバイス対応のワンコラムページとして設計されており、レスポンシブデザインに対応しています。また、メニューはスクロール操作で簡単にアクセスできるScroll To形式が採用されています。これにより、訪問者はスムーズに情報を見つけて閲覧することができます。

サイト確認