MENU
  • 企業情報– About –
    • 採用情報– Recruit –
    • 特色・社内写真・イベント
      • Ailesystem「30周年記念」
      • 健康経営の取り組み
    • アクセス
  • システム開発– System –
    • 開発製品紹介
      • アプリ更新履歴– Update –
        • UNIPro2
        • Progress21
        • B-POP
    • Kintoneでシステム開発
  • Web制作– Web Service –
    • レイスタープランRaystar
    • モナルミナプラン
    • シャレースプラン
    • Webメンテナンスサービス
    • コンサル・ディレクション
    • マニュアル
  • ツール– Browser tool –
  • ゲーム– Game –
  • 制作実績– Works –
    • ホームページ
    • システム
    • ソフトウェア
  • ブログ– Blog –
  • お問合せ– contact –
  • ショップ– Online Shop –
    • UNIPro2
    • Progress21
    • B-POP
    • UniversePro
  • – cart –
株式会社エールシステム|長野県小諸市 - システム開発・Webサイト制作
  • 企業情報– About –
    • 採用情報– Recruit –
    • 特色・社内写真・イベント
      • Ailesystem「30周年記念」
      • 健康経営の取り組み
    • アクセス
  • システム開発– System –
    • 開発製品紹介
      • アプリ更新履歴– Update –
        • UNIPro2
        • Progress21
        • B-POP
    • Kintoneでシステム開発
  • Web制作– Web Service –
    • レイスタープランRaystar
    • モナルミナプラン
    • シャレースプラン
    • Webメンテナンスサービス
    • コンサル・ディレクション
    • マニュアル
  • ツール– Browser tool –
  • ゲーム– Game –
  • 制作実績– Works –
    • ホームページ
    • システム
    • ソフトウェア
  • ブログ– Blog –
  • お問合せ– contact –
  • ショップ– Online Shop –
    • UNIPro2
    • Progress21
    • B-POP
    • UniversePro
  • – cart –
株式会社エールシステム|長野県小諸市 - システム開発・Webサイト制作
  • 企業情報– About –
    • 採用情報– Recruit –
    • 特色・社内写真・イベント
      • Ailesystem「30周年記念」
      • 健康経営の取り組み
    • アクセス
  • システム開発– System –
    • 開発製品紹介
      • アプリ更新履歴– Update –
        • UNIPro2
        • Progress21
        • B-POP
    • Kintoneでシステム開発
  • Web制作– Web Service –
    • レイスタープランRaystar
    • モナルミナプラン
    • シャレースプラン
    • Webメンテナンスサービス
    • コンサル・ディレクション
    • マニュアル
  • ツール– Browser tool –
  • ゲーム– Game –
  • 制作実績– Works –
    • ホームページ
    • システム
    • ソフトウェア
  • ブログ– Blog –
  • お問合せ– contact –
  • ショップ– Online Shop –
    • UNIPro2
    • Progress21
    • B-POP
    • UniversePro
  • – cart –
  1. ホーム
  2. ブログ
  3. お知らせ
  4. Web制作お知らせ
  5. Webサイト デザイン要件まとめ

Webサイト デザイン要件まとめ

2024 2/01
2023年12月26日2024年2月1日
目次

レスポンシブのブレイクポイント

各デバイス(PC、タブレット、スマホ)などの画面サイズに応じたデザイン変更のポイント

  •  PC:~960px
  •  タブレット:959px~600px
  •  スマホ:599px~
  •  ロゴ:120px~
    • 横長のサイトロゴとして利用しやすいサイズを推奨
  • サイトアイコン:512px × 512px
    • ブラウザのタブなどに表示されるアイコン
  • 多少デザイン案のサイズやブレイクポイントがズレていても調整して対応は可能です
  • 別のブレイクポイントを利用したい場合は、追加の御見積となります
  • レスポンシブのデザインがない場合は、弊社にておすすめのレイアウトに調整いたします
  • レイアウト構築後の大きな改修は承れませんのでご承知おきください

カラー「一括設定可能な範囲」

全体を一括で変更可能なカラー指定です。個別にスタイルで色は変更可能です。
(サイトカラーから逸脱しない範囲)

  • サイトメインカラー
  • テキストカラー
  • リンクカラー
  • 背景色
  • ヘッダー背景色
  • ヘッダー文字色
  • フッター背景色
  • フッター文字色
  • フッター直前エリア背景色
  • フッター直前エリア文字色

サイドバー「一括表示対応」

下記の区分けでサイドバーの表示非表示が対応かのうです。また、左右どちらに配置するかも一括で変更かのうです。左右の表示は下記の区分けごとではなくサイト全体となります。

例:ブログページにサイドバーを表示すると、全ブログ記事に一括でサイドバーが表示されます。

  • トップページ
  • 各ページ
  • ブログページ
  • ブログの記事一覧ページ

トップページ「メインビジュアル」

メインビジュアルには「静止画」「スライド」「動画」より選択可能です。
各どれを選択しても、テキストやリンクボタンを重ねて表示することが可能です。
(テキスト・ボタンにアニメーション設定も可:有料)

静止画像
スライド(最大5枚)
動画(スマホ・PC)

トップページ「コンテンツ内スライド記事」

スライダーで記事のアイキャッチ画像を自動的にスライド表示させることが可能です。(有料)
PC・スマホでスライドの表示数(例:PC画面3枚表示・スマホ1枚表示)を設定できます。
目立たせたい記事への誘導におすすめです。

  • 矢印・ページネーション(ドット)

ナビゲーションメニュー

基本4種の配置が可能です。

  • ヘッダーナビをロゴの横に(右寄せ)
  • ヘッダーナビをロゴの横に(左寄せ)
  • ヘッダーナビを下に
  • ヘッダーナビを上に

記事一覧

カテゴリー毎に記事の一覧を表示可能です。主なデザインパターンは下記。
こちらのパターンに合わせたデザインなら調整可能です。

カード型
テキスト型
リスト型
リスト交互型
サムネイル型
ブログ型

制作実績(デザインの参考)

  • Web制作お知らせ

    シナノカメラ工業様「雷報」専用LPを制作しました

    2025年5月23日
  • ネットショップ

    万年堂(にゃん年堂)様

    2024年2月1日
  • コーポレート

    金丸物産 金井きのこ園様

    2024年1月24日
  • イベント

    キッズ・サーキット in 佐久 様

    2023年10月18日
  • 組合

    長野医療生活協同組合 様

    2023年10月18日
  • 病院・クリニック

    小林クリニック七瀬 様

    2023年10月18日
Web知識 Web制作お知らせ Web制作
  • 2023年版:ビジネス成長のためのホームページガイド – Webデザインと戦略的アプローチ
  • Bing Image Creator(Copilot)の使い方
目次

〒384-0083
長野県小諸市大字市665-9
TEL 0267-25-5990 (代)
FAX 0267-26-1324

  • プライバシーポリシー
  • 特定商取引に関する表記
  • サイトマップ

© 2023 Ailesystem Inc.

目次
当サイトは分析の為にCookieを使用しています。サイトを閲覧する場合はCookieの使用に同意したことになります。OKプライバシーポリシー