『実体験』海外でWebデザイナーとして働いた時の具体的な手順(オーストラリア)

海外(オーストラリア)でウェブデザイナーとして働く際、どういった手順でクライエントとプロジェクトを進めていくのか、わかりやすい情報がなかったのでまとめました。

海外でウェブデザイナーとして働いた経験から、クライエントとのコミュニケーションが大切で、技術的なことを誰にでもわかるように説明する英語力が必要だなと思いました。

こういった質問を受けて困りました😅

• ダイナミックコンテンツとは何？
• レンダリングとは何？

この記事では、オーストラリアのメルボルンで、実際のクライエントに対してWEBデザインの仕事を始める際の実践的なステップと、プロジェクトの完了までのプロセスを１から紹介します。

実際にクライエントに引き渡したデモURLです：　https://hello84836.wixstudio.io/eastern

この記事を読むことで、海外でのウェブデザイン業務の一連の流れがわかり、海外のキャリア構築の参考になると思います。　

プロジェクト始まりのきっかけ

当時、オーストラリアのメルボルンにある Holmesglen(ホルムズグレン)というWEBプログラミングの専門学校に通っていました。

講師からのクライエントを紹介されることになり、友人のウクライナ人のWEBデザイナーと一緒に、実案件であるオーストラリア現地企業のウェブ制作を任されることになりました。

プロジェクト参加者：

• CEO
• WEBマーケター社員
• ウクライナ人WEBデザイナー(友人)
• 筆者

契約・給与体系

サマーテック プログラム（オーストラリア政府規定）

サイズが小さいですが実際の契約書です。オーストラリア政府が実施しているサマーテックというプログラムを通し契約を交わしました。個人情報は伏せています🙇🏻

• 職種：WEB制作
• 契約期間：３ヶ月
• 時給： 約2900円程

クライエントとの対面とプロジェクトの開始

最初の面会では、クライアントとのスモールトークから始め、詳細なヒアリングを実施。それがプロジェクトの始まりでした。

WEBサイトの問題点：

• WordPressで構築されたサイトが古くデザインも悪い
• プラグインが大量にある状態でメンテナンスが難しい
• WordPressプラグインのelementorを使用していて知識のある人がいない

企業の要件内容：

• 一から構築してほしい（サイトマップ→デザイン〜完成）
• コーディングはしてほしくない
• 在籍スタッフがメンテナンスできるよう、ノーコードCMSを使ってほしいが何がいいか提案してほしい
• シンプルでクリーンなウェブサイト
• 競合リサーチをしてほしい

クライアントのビジョンについて深く理解するために、参考にしたいWebサイトや競合他社について話し合いました。Googleアナリティクスを共有し、どのデバイスからのアクセスが多いか、ページ数などを詳細に分析。

現在のウェブサイトはワードプレスのプラグインが多く、管理が困難になっていることから、新しいCMSへの移行を下記の中から検討、比較しました。

1. WIX Studio
2. Webflow
3. SquareSpace

それぞれの料金、機能、使いやすさなどを総合的に評価する比較資料を作成。
クライアントにはこれらの情報を基に選択してもらいました。

クライエントはシンプルで綺麗なWebサイトで、かつ今後もウェブエンジニアなしで更新していきたい移行があったので、更新も簡単でUIも直感的なWIX Studioで進めることになりました。

要件定義

ここでクライエントとミーティングを通して決定した要件を簡単にまとめます。

• プロジェクト期間：３ヶ月
• ページ数：２５ページ
• 既存のWordPressで構築されたウェブサイトは廃止（メンテナンスの効率化）
• サイトマップ作成
• ワイヤーフレーム＆デザインカンプ（Figma使用）
• WIX Studio で構築
• 機能：コンタクトフォーム、ニュース記事（ブログ）

サイトマップの作成

オーストラリアのクライアントのためのウェブサイトでは、直感的でシンプルなユーザーエクスペリエンスを重視します。
サイトマップを作成する際には、必要なページやカテゴリー、ユーザーがどのようにサイトをナビゲートするかを慎重に計画しました。

オーストラリアのユーザーにとって重要な情報が最前面に来るように配置し、簡潔で効果的なナビゲーションを心がけます。

プロジェクトの次の段階では、Figmaを使用してサイトマップの作成に取り組みました。これにより、ウェブサイト全体の構造が明確になり、後のデザインプロセスがスムーズに進む土台が築かれました。

また、ブランドのカラースキームを確立し、クライアントの建物の緑とオレンジをアクセントカラーとして取り入れました。これらの色を基にカラーパレットを作成し、ウェブサイトのビジュアルアイデンティティを強化しました。

コンテンツの計画

各ページに必要なテキスト、画像、ビデオなどのコンテンツを計画。

テキスト、画像、ビデオを慎重に選定し、オーストラリアの市場に適したメッセージやビジュアルを用います。また、SEO対策として、適切なキーワードやメタデータを組み込みます。（これは社内のマーケティング担当者が用意することが多いと思います）

デザイン要素の選定

• 色彩、フォント、レイアウトスタイルを選定する。
• クライエントからのフィードバックを取り入れながら、デザインの草案を作成する。
• オーストラリアのウェブサイトでは、シンプルで明るく活動的なデザインが好まれる傾向があります。クライアントのブランドイメージに合致するようにデザインを調整し、細部までこだわりを持ってデザインします。

ワイヤーフレームの作成

サイトマップを基にFigmaでワイヤーフレームを作成する過程では、クライアントの頻繁なフィードバックが不可欠でした。これにより、デザインがクライアントの要求に沿ったものになるよう細部まで調整を行いました。

その際のデザインのサンプルは本や Pinterest などのサイトを参考にし、真似できる箇所を取り入れながら完成させました。

Wix Studioでウェブサイトを構築

承認されたページデザインを基に、カラーリングとアセットを使用してデザインカンプを作成し、Wix を使ってWebサイトの構築へと進みます。

ここでは、クライアントにWix Studioの契約を行ってもらい、自分のアカウントをクライエントに招待してもらう形をとって構築をしています。

Wix Studio のドラッグ＆ドロップのエディタを駆使して、デザインを具現化。オーストラリアのユーザーに響くようなデザインや機能を取り入れ、サイトの応答性と使いやすさ (UX) を重視します。

Wixにはたくさんのテンプレートやアプリがありますが、ここではデザインカンプの通りにサイトを構築するので、白紙の状態から進めました。

手順としては：

• Wixアカウントにログインし、新規サイトを作成する。
• 選択したテンプレートをカスタマイズまたは空白のテンプレートから開始する。
• ドラッグ＆ドロップエディタを使用して、ページをデザインする。
• 必要に応じてWixアプリを追加する（例：Wixストア、Wixブログ）。

Wix Studioでの開発とレスポンシブデザイン

Wix Studioへの移行後は、デザインカンプに基づいて開発を進めました。グローバルコンポーネントの作成から始め、セクションごとに構築を進めながら、Wixの特有の挙動に対応するために多くの調整が必要でした。

特に、レスポンシブデザインの実装にはAIの限界を感じ、たくさんの手直しとテストが必要でした。

オーストラリアのウェブのトラフィックではモバイルが大きな割合を占めるので、モバイルデバイスでの表示を最適化することがとても重要です。Wixのモバイルエディタを使用して、すべてのページがモバイル画面で適切に表示され、かつ、自身のスマホなどでも確認し、きちんと表示されているかを確認します。

SEOの最適化

WixのSEOツールを使用して、メタタグ、見出し、キーワードなどを最適化する。

オーストラリアのウェブサイトでは、効果的なSEO戦略が不可欠です。WixのSEOツールを活用して、ページタイトル、メタ記述、ヘッダー、キーワードなどを最適化し、検索エンジンでの可視性を高めます。

テストとレビュー、バグFix

サイトが完成に近づいたら、全ページを徹底的にテストします。リンクの動作、フォームの機能、ローディング速度など、ユーザーエクスペリエンスに影響する要素を確認します。また、クライアントや実際のユーザーからのフィードバックを受け入れ、必要に応じて調整を行います。

• サイトの全ページをテストし、リンクやフォームの機能を確認する。
• クライアントにプレビューを提供し、フィードバックを受け取る。

クライアントとの最終レビュー

クライアントからの最終フィードバックに基づき、必要な調整を行う。

そして最後にクライアントと最終レビューを行います。クライアントの最終的な承認を得た後、サイトの公開に進みます。

サイトの公開

クライアントからの承認を得たら、サイトを公開します。公開後も、サイトのパフォーマンスをモニタリングし、必要に応じて追加の調整を行います。

プロジェクトの完了・クライアントへの引き渡し

プロジェクトの最終段階では、ドメインの変更とクライアントへの引き渡しを行いました。このスムーズな引き渡しは、ページ作成の各段階でクライアントからフィードバックを受けていたため可能でした。

サイト公開後は、クライアントにサイトの管理方法をトレーニングします。また、継続的なサポートや保守を提供し、クライアントがサイトを効果的に運用できるようにサポートします。

• サイトの管理方法についてクライアントをトレーニングする。
• 必要に応じて継続的なサポートや保守を提供する。

実際にクライエントに引き渡したデモURLです：　https://hello84836.wixstudio.io/eastern

Wix Studio の使用感

Wix Studio を使用する中で、まだ新しいサービスで情報がかなり少ない、バグや速度の問題、レスポンシブデザインの難しさなど、少し問題がありました。

よかった点

• エンジニアでなくても編集ができるので、クライエントワークに良い
• 簡単な操作 (PhotoShop ができる人なら直感的だと感じた)
• AI でタブレット、スマホサイズのレスポンシブが実装できる（手直し要）
• SEOなどの細かい設定が簡単

悪かった点

• 編集画面の反応が遅く、フリーズしてやり直すことが多々あった
• アニメーションは基本入れない方がいい（パフォーマンス低下が著しい）
• 比較的新しいサービスで情報がかなり少なかった
• レスポンシブデザインの細かい操作がかなり難しい（謎のマージンが入ったりする）

結果的に、Wix Studio は 2023年の8月に出たばかりで、比較的新しいプラットフォームで情報が少なくつまづく事もありましたが、直感的なエディタが幸いして大きなトラブルがなくサイト構築ができました。

最後に

このプロジェクトを通じて、スマホとPCサイズのレスポンシブデザインに主に焦点を当て、３ヶ月という限られた時間の中で効率的に作業を進めました。

コミュニケーション能力、クライアントのニーズを理解する力、積極的な姿勢が求められると再認識しました。また、時には技術的な説明をどれだけ簡単に説明するかなどのスキルも必要だなと思いました。

• 短期留学の語学学校ってどう？(オーストラリア) 海外在住歴７年が考える学校が必要な理由５選

• 【コピペだけ！】Tailwind & Next.js(React) ハンバーガーメニュー完全レスポンシブ対応

• 海外WEBデザインスクール完全解説（オーストラリア・メルボルン）

• ダークモード切り替えボタンの実装方法 (ユーザーの訪問時間によって自動切替)

• React でフォームバリデーションの実装方法 (Joi Validation)