【SQUARE】 ファーストビューセクションデザイン | First View Section Design

Product Name: SQUARE
Model: NO.6

◆Concept [コンセプト]: 窓 / Window

◆Date of Creation [制作年月日]: 2024/04/03

◆Characteristics [特徴]

• シンプル
• スクエアをライン、タイトル整ったレイアウト
• タイトルや社名の自由入力可能
• 文章の自由入力可能
• 画像からリンク可能
• 通常ウェブサイト版: ヘッダー有
• Shopify版: ヘッダー無
• ヘッダー付きの場合は、動的ハンバーガーメニュー付き
  

◆Outline [概要•コンセプト]

「窓」をイメージさせるデザインに仕上げてあります。

コンセプトは「窓」| Window

概要:
「SQUARE」コンセプトは、窓をテーマにしたシンプルで視覚的に魅力的なウェブデザインです。訪問者に窓から外の景色を眺めるような感覚を提供し、明るく柔らかな雰囲気を演出することを目的としています。

意識したポイント:

1. 画像とタイトルのみのシンプルさ:
      - デザインは極めてシンプルに保ち、画像とタイトルのみを強調。
      - 不必要な要素を排除し、訪問者が視覚的な情報に集中できるようにする。
   
   
2. 窓から景色が見える風景:
      - 画像は窓を通して見える風景のように配置し、自然な景観を強調。
      - 窓枠を模したレイアウトを取り入れることで、リアルな窓の感覚を提供。
   
   
3. 明るさ:
      - 明るい背景とコントラストの効いた画像を使用し、全体的に明るい印象を与える。
      - カラーパレットは淡い色調を基調とし、清潔感と透明感を表現。
   
   
4. 柔らかさ:
      - 柔らかい色合いとフォントを使用し、デザイン全体に柔らかさと温かみを持たせる。
      - 画像の配置やレイアウトも柔らかな曲線を取り入れ、調和の取れたデザインに。

デザイン要素:

- 背景とカラーパレット: 明るいクリーム色や淡いピンクを基調とし、柔らかな印象を強調。
- タイポグラフィ: シンプルで読みやすいフォントを使用し、視認性を高める。
- レイアウト: 画像を窓のように配置し、視覚的に印象的なレイアウトを採用。
- 画像: 自然や風景の写真を使用し、窓からの眺めを再現。

◆Place of use [使用箇所]: ページトップとして

◆Language [使用言語]: html, css, javascript

◆File Structure [ファイル構造]:

...

your project/
├── css
│   ├── reset.css
│   └── style.css
├── docs
│   ├── ReadMe_en.md
│   ├── ReadMe_en.pdf
│   ├── ReadMe_jp.md
│   └── ReadMe_jp.pdf
├── index.html
└── js
    └── main.js

...

4 directories, 8 files