MENU
  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦デザイナーがWebデザイナーに挑戦し、コーディングやデザインマターでの困りごとや調査内容、他の専門家との情報交換等を投稿します。
    • WordPressWordpressのサイト構築あれこれ!
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイトIT TOOL ECサイト
    • レッスン施術サービスレッスン施術サービス予約サイト
    • 美容院予約美容院予約システム
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求
  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦デザイナーがWebデザイナーに挑戦し、コーディングやデザインマターでの困りごとや調査内容、他の専門家との情報交換等を投稿します。
    • WordPressWordpressのサイト構築あれこれ!
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイトIT TOOL ECサイト
    • レッスン施術サービスレッスン施術サービス予約サイト
    • 美容院予約美容院予約システム
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求
  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦デザイナーがWebデザイナーに挑戦し、コーディングやデザインマターでの困りごとや調査内容、他の専門家との情報交換等を投稿します。
    • WordPressWordpressのサイト構築あれこれ!
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイトIT TOOL ECサイト
    • レッスン施術サービスレッスン施術サービス予約サイト
    • 美容院予約美容院予約システム
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求
  1. ホーム
  2. IT TOOL
  3. ECサイト
  4. 新米 WEBデザイナー発信 BtoBサイトデザイン②

新米 WEBデザイナー発信 BtoBサイトデザイン②

2022 10/13
IT TOOL ECサイト Webデザイナ挑戦 デザインチーム
2022年9月18日2022年10月13日
目次

BtoBサイトはPCファースト!

現在、WEB閲覧のデバイス解析では7割がSP(スマホ)といわれていますが、BtoBサイトの閲覧解析では平日の限られた時間によく見られていることから仕事中にオフィスで発注するために閲覧してるといえます。

PCファーストを意識してサイトをデザインした方がよさそうです。

PCファーストでUI設計する場合、広い画面を活かした誘導が重要とゆうことです。スマホのように単純にコンテンツを並べスクロールさせて表示させるより、グローバルナビゲーション、あるいはブレッドクラムナビゲーション(パンくずリスト)などを有効に活用し、できれば画面を動かさなくとも次の動作ができることが理想といえます。

BtoBのUIデザインのポイント

BtoBサイトのUIデザインする上で以下の2つが最も重要になります。

①最短ルートで目的達成(コンバージョン)に誘導する

②ユーザーが求める情報を速やかに提示し、適切に誘導する

WEBデザインの基本構成ポイント

今回、私はBtoBのECサイトですから下記は頭の片隅においておきますが、その他、BtoBサイトデザインをする上で気をつける点をあげてみます。

  1. サービスや製品、企業の特徴が1ページで分かるようになっている
  2. コンテンツ内容では、問題提起→結果→実証→信頼→安心というストーリーで構成されている
  3. 見出しと本文の内容に相違がないようにする
  4. 見出しはユーザーメリット視点で興味が出る言葉を端的に書く
  5. 見出しは20字程度にまとめる
  6. 本文は100~200字程度の簡潔な文章とし、余計な抽象的な言葉を使わない
  7. 図などを適度に配置し、見出しと一緒に流し読みでも理解できるようにする
  8. アニメーションなどの余計な演出をつけない
  9. デザイン性を優先し意味を持たない飾りや写真に面積を使わない
  10. 「なぜそれが大事なのか」「なぜそれが求められるのか」といった理解してもらうためのコンテンツは端折らず丁寧に誰もが分かるように説明する
  11. ページ下部にCTA(Call to Action)を置き1ページで行動できる設計にする
  12. 下部まで行かずしてもCTAを設置する
  13. CTAを押さなかったユーザーも取りこぼさないよう、資料請求や、ブログコンテンツなどを提示してサイト内の回遊を促し、企業への理解を深めさせる

おどろくことに上記は、LPデザインで学んだことと重複してるポイントが多いです(LPについてはまた別の投稿で)。

上記のポイントはWEBデザイナー基本として身につけるべき要項といえます。

続きはまた次回に…

<新米 WEBデザイナー アピコ>

システム開発はアピステクノロジーへ

アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。

「IT TOOL」をご存じですか?

既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。

さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。

ITツール紹介ページはこちら

apicetec technology

あわせて読みたい
アピステクノロジー|ビジネスの問題をITで解決| アピステクノロジーは、中小・中堅企業の支援に力を注いでいる信頼できる「IT導入支援事業者」です。LAMP開発、特注開発を得意とし、安心安価で購入できるITツールや、予約...
企業の問題をITで解決 特注開発センター
  • ECサイト
  • IT TOOL
  • IT導入補助金
  • monaca
  • PC関連
  • Shopify
  • webコーダー挑戦
  • Webデザイナ挑戦
  • Web制作
  • WordPress
  • アパレル
  • エクセル・ワード
  • エンジニア技術MEMO
  • お知らせ
  • コーダー技術MEMO
  • スマートガジェット
  • セキュリティ
  • セルフオーダーシステム
  • デザインチーム
  • どこの国
  • ネットで販売
  • ブログ
  • ブログ
  • ブログ収益化
  • プロンプト
  • マーケティング
  • レッスン施術サービス
  • 会議室予約
  • 回線・インターネット
  • 家事代行予約
  • 未分類
  • 業務効率化
  • 画像生成AI
  • 発注・請求システム
  • 社内用
  • 社長
  • 美容院予約
  • 見積
  • 見積
  • 請求
  • 電気自動車(EV)
IT TOOL ECサイト Webデザイナ挑戦 デザインチーム
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • Shopify基本設定編③~決済登録~
  • WordPressプラグイン(Classic Editor編)

この記事を書いた人

wpmasterのアバター wpmaster

関連記事

  • 修正作業の工数を削減する方法|テンプレートと自動化の活用術
    2025年4月23日
  • 承認フローもSaaSで自動化!見積書業務の効率化に向けた第一歩
    2025年4月23日
  • 見積書の保存・管理に手間をかけない!工数削減できる仕組みを解説
    2025年4月23日
  • 見積業務を完全効率化!作成から承認・送付・保存まで IT TOOL活用ガイド
    2025年4月22日
  • アピス IT TOOL アピス発注・請求システム 機能概要説明【2025年上期】
    2025年4月22日
  • 電子帳簿保存法対応!零細企業 小規模事業者に最適なおすすめアピス 請求書システム
    2025年1月22日
  • IT導入補助金2025|知らなきゃ危ない不正受給の具体例と回避策
    2025年1月19日
  • IT導入補助金2025|2024年との違いを徹底比較!今年注目すべき4つの変更点
    2025年1月10日

コメント

コメントする コメントをキャンセル

カテゴリー

  • ECサイト
  • IT TOOL
  • IT導入補助金
  • monaca
  • PC関連
  • Shopify
  • webコーダー挑戦
  • Webデザイナ挑戦
  • Web制作
  • Wordpress
  • アパレル
  • エクセル・ワード
  • エンジニア技術MEMO
  • お知らせ
  • コーダー技術MEMO
  • スマートガジェット
  • セキュリティ
  • セルフオーダーシステム
  • デザインチーム
  • どこの国
  • ネットで販売
  • ブログ
  • ブログ
  • ブログ収益化
  • プロンプト
  • マーケティング
  • レッスン施術サービス
  • 会議室予約
  • 回線・インターネット
  • 家事代行予約
  • 未分類
  • 業務効率化
  • 画像生成AI
  • 発注・請求システム
  • 社内用
  • 社長
  • 美容院予約
  • 見積
  • 見積
  • 請求
  • 電気自動車(EV)

最近の投稿

  • 100記事書いてもアクセスが増えない?記事リライト後の測定のコツとアクセス数の目安を解説
  • ブログアクセス数が目安に届かない…100記事書いたのにアクセスが増えない人の改善ステップ
  • 100記事書いてもアクセスが増えない?記事リライトのコツとアクセス数の目安を解説
  • 初心者向け:なぜ記事が “表示回数0” のまま放置されるのか?実例で学ぶSEO改善の基本
  • SWELLテーマで埋め込み(oEmbed)がうまくいかない?原因と対処法まとめ

最近のコメント

  1. Elementor Pro ライセンス・更新について に wpmaster より
  2. Elementor Pro ライセンス・更新について に 志村和久 より

アーカイブ

  • 2025年5月
  • 2025年4月
  • 2025年3月
  • 2025年2月
  • 2025年1月
  • 2024年12月
  • 2024年11月
  • 2024年9月
  • 2024年8月
  • 2024年7月
  • 2024年6月
  • 2024年4月
  • 2024年3月
  • 2024年2月
  • 2024年1月
  • 2023年12月
  • 2023年11月
  • 2023年10月
  • 2023年8月
  • 2023年7月
  • 2023年6月
  • 2023年5月
  • 2023年4月
  • 2023年3月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月

APICE

問い合わせ

アピステクノロジー|tec note

  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦
    • WordPress
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイト
    • レッスン施術サービス
    • 美容院予約
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求

 〒224-0032 神奈川県横浜市都筑区茅ケ崎中央42−21 第2佐藤ビル 203

電話番号: 045-532-4480

お問い合せ

© .

目次