はじめてのElementerブログ

新米デザイナーのアピ子です。はじめてElementorを使ってサイト制作をした連載ブログです。

Elementer

Elementerは無料で使えるノーコードのWordPressページビルダーのプラグイン。

お客様がリニューアルサイトにて投稿を更新することから、ワードプレスを使用することが両者で合意され、ノーコードで思い通りのデザインを素早く作り上げることができるElementerを使用することが決まりました。

事前に使用できるウィジェットの確認をしておきましょう!

ノーコードで栄えの良いサイトを作れますが、制作者の応用で少しHTMLやCSSでカスタマイズすることもでき、奥行きが出たり栄えるサイトにすることができます。

自由に表現できるのが利点のElementerですが、お客様との契約時にしっかり要件や条件を含ませご説明し認識させないと、何でも実現できてしまうため、制作者の首を絞めかねません。

【超重要】お客様と流れを共有する←すごく大事

お客様相手は苦手ではありませんが今回はかなり苦戦し、納品が延び延びの赤字プロジェクトになってしまったので、反省を込めてその話を・・・

サイト制作はコミュニケーションが超大事ですので、ひとつの参考にしてください。

作業前に、以下の条件を定め、共有することが重要です。

下記はフォーマットとしてヒアリングシートなどにまとめ、依頼の都度、お客様にご記入をお願いしましょう。必ず提出期限をお伝えしてください。

  1. 目的: リニューアルの目的を明確にすることが必要です。例えば、デザインの改善、SEO対策、ユーザビリティの向上などが考えられます。
  2. コンセプト: リニューアル後のサイトのコンセプトを決めることが重要です。例えば、シンプルでモダンなデザイン、ユーザビリティに優れたサイト、SEOに強いサイトなどが考えられます。
  3. ターゲット: ターゲット層を明確にすることが必要です。例えば、年齢層や性別、趣味や興味関心などが考えられます。
  4. コンテンツ: リニューアル後のサイトで提供するコンテンツを決めることが重要です。例えば、ブログ記事、商品紹介ページ、お問い合わせフォームなどが考えられます。
  5. スケジュール: リニューアル作業のスケジュールを決めることが重要です。例えば、作業開始日時、納品日時などが考えられます。
  6. 見積り範囲の作業を確認
  7. 見積り外の作業発生・トラブルがあった時:再見積りとなることがあることを共有しましょう。

お客様と共有する「サイト制作のフロー」

  1. 顔合わせ:はじめに顔わせしてすぐにコミュニケーション開始できるようにします。
  2. ヒアリング: お客様からリニューアルに関する情報を収集します。例えば、現在のサイトの問題点や改善点などを聞き取ります。この時できるだけ参考とするサイトをお聞きしましょう。(ヒアリングシート提出依頼)
  3. コンテンツ原稿の提出をお願いする
  4. ワイヤーフレームの提案:
  5. 設計: サイトの構成やページ数などを設計します。重要ページも数枚決めておきましょう。
  6. 重要ページとその他のトーン&マナーのご説明
  7. カンプ提案:2案まで、デザイン修正は2回まで(テキスト・画像差し替えは含まない)など作業範囲を決めておく必要がある
  8. 制作: サイトの制作を行います。エレメンタープロを使用する場合は、ドラッグ&ドロップで直感的にページを作成することができます。
  9. テスト: サイトの動作確認や表示確認などを行います。
  10. 納品: サイトを納品します。

ITリテラシーに疎いお客様への注意事項

クライアントがITリテラシーに乏しい場合、コミュニケーションが特に重要です。確実に理解し合い、期待を明確に伝えましょう。

初めにクライアントと面談し、彼らの要望とビジョンを把握しましょう。細かいニーズや優先事項を尋ねることが大切です。

技術的な用語や概念をできるだけシンプルな言葉で説明し、クライアントが理解しやすいように心掛けましょう。

  1. 特殊制作例:デザインがないとコンテンツが決められないという方は「一般的なサイト制作ではなくなるので、別途お見積りが必要です。」とお伝えしましょう!<一番下に注意事項を記載しました>
  2. 制作範囲: 制作範囲を明確にするこ。例えば、ページ数や機能の追加・削除などが考えられます。
  3. 納期: 納期を明確にする。例えば、制作開始日時や納品日時などが考えられます。
  4. 修正回数: 修正回数。例えば、何回まで修正可能かなどが考えられます。
  5. 費用: 費用を明確にする。例えば、制作費用や追加機能の費用などが考えられます。
  6. コミュニケーション: コミュニケーション方法を明確にすることが必要です。例えば、メールや電話などでの連絡方法や連絡時間帯などが考えられます。
  7. サポート契約の提案:クライアントが適切なサポートを受けることができるように、サポート契約の提案を考慮しましょう。

以上の注意事項を共有することで、お客様とのトラブルを未然に防ぐことができます。また、お客様に不安を与えることなく、スムーズなサイト制作を進めることができます。

お客様がデザインがない状態でコンテンツを決めることになる場合、制作者の負担を最小限にする

  1. テンプレートを使用:
    • デザインがない場合、既存のウェブサイトテンプレートを活用することが有用です。テンプレートはデザインのフレームワークを提供し、コンテンツを配置しやすくします。WordPressなら、多くのプリデザインのテーマが利用可能です。
  2. デザイン要件の整理:
    • お客様に対して、デザインに関する基本的な要件を整理して明確にします。色、フォント、ロゴの使用、イメージのスタイルなどを特定し、最低限のデザインガイドラインを設定します。
  3. ウェブサイトの機能優先順位:
    • コンテンツの決定において、ウェブサイトの機能の優先順位を確立しましょう。どの部分が最も重要で、ユーザーに提供するべき情報かを明確にすることで、コンテンツ制作の優先順位を設定できます。
  4. プレースホルダーの使用:
    • テンプレートやデザインのない段階では、コンテンツの代わりにプレースホルダーテキストとダミー画像を使用してページの構造を確立できます。これにより、後でコンテンツを追加する際の配置が容易になります。
  5. スケッチやワイヤフレーム:
    • デザインがない場合、ウェブサイトのスケッチやワイヤフレームを作成し、ページの配置と構造をプレゼンテーションしやすくします。これにより、お客様とのコンテンツの配置に関する議論を効果的に進められます。
  6. デザインの段階的導入:
    • デザインプロセスを段階的に進め、コンテンツが決定されるにつれてデザインを追加・調整します。最初に基本的なデザイン要素を導入し、コンテンツが具体化するにつれてデザインの詳細を調整できます。
  7. フィードバックループ:
    • コンテンツを追加する際、お客様と継続的なフィードバックループを確立しましょう。コンテンツが追加されるごとにお客様のフィードバックを受け、必要に応じて調整を行います。
  8. プロトタイピングツールの活用:
    • オンラインのプロトタイピングツールを使用して、ページのプロトタイプを作成することで、デザインとコンテンツを同時に検討しやすくなります。
  9. 柔軟性とコミュニケーション:
    • お客様とのオープンなコミュニケーションを維持し、柔軟に対応しましょう。デザインやコンテンツに対する変更が生じることを予想し、それに適切に対応できるよう準備しておきましょう。

デザインがない状態でのプロジェクトは挑戦的ですが、上記の戦略を採用することで、制作者の負担を最小限に抑え、効果的にプロジェクトを進めることができます。

tec note

テクニカル | あれこれ作業報告

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

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

IT TOOL」をご存じですか?

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

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

実績多数、低価格で本格的なサイトができると好評いただいております。

詳しくは弊社HPをご覧ください。

アピステクノロジーの実績紹介はこちら↓