デモサイト構築

事前調査

実際に構築を始める前に、公開に関する前提条件の確認をします。確認事項としては以下のようなポイントが挙げられます。

• ドメインの移管手続きが必要かどうか
• どのサーバーに納品すればいいか
• 公開後のサポート契約が必要かどうか

WEBサイトを公開するためには、サイトのデータの設置場所である「サーバー」と、データの住所（URL）にあたる「ドメイン」が必要です。既存サイトのリニューアルなどで既にお持ちの場合もあれば、新規開設で新たに用意が必要な場合もあります。クライアントの現状を詳しくお伺いし、負担を少なくできるよう柔軟に対応していきます。

環境構築

実装のための環境を準備する工程です。公開する際と同様の環境をプロジェクトごとに用意し、クライアントとレクサ社員のみがデモサイトを確認できるようにしています。

クライアントご自身で更新できるブログ機能を搭載する場合にはWordPressなどのシステムをこの段階で導入します。またWEBサイト上で購入ができるECサイトを制作する場合には、Shopifyなどのサービスを利用します。

設計

いきなりコードを上から順番に書いていくのではなく、全体のデザインを見渡し、CSSの設計をすることからはじめます。この設計を行うことで

• コードの総量が減る
• 実装スピードが上がる
• ミスが減る
• デザインの改善点に気づく

などのメリットがあります。

フロントエンド実装

デザイナーが制作したデザインを実際のWEBサイト上で表示させるために、HTMLやCSS、Javascriptなどのコードを用いて実装します。

ガイドラインに沿って、素早く実装を行なっていきます。ガイドラインの一部をご紹介します。

• 画像サイズ・比率は適切か
• 使用しているタグは適切か
• クラスの使い回しを意識しているか
• 極力コードテンプレートからコピペしているか
• ホバーエフェクトの設定

レスポンシブデザイン（スマートフォンやタブレットなど多様なサイズに対応するデザイン）の実装も標準で行います。

デザイナーからの引き継ぎ事項をもとに進めるのはもちろん、実装中もデザイナーとコミュニケーションを取りながら実装していきます。

モーションデザイン

デモサイトに「モーション＝動き」を実装する工程です。アニメーションを付けて表示したり、ページのスクロールやマウスの動作に合わせた動きを付けたりします。

デザイン制作の工程でデザイナーがアニメーションの方針を決定しており、共有されたイメージをもとにエンジニアが実装します。ある程度まで実装できたら、デザイナーとエンジニアで議論をしながら調整を加えていきます。

CMSカスタマイズ

クライアント用の管理画面のカスタマイズをおこないます。更新作業がわかりやすく、直感的におこなえるような管理画面を目指します。これによって長くご利用いただきやすいWEBサイトになります。

また、制作前の設計段階で決定した機能をこの工程で実装していきます。主に以下のような機能が必要であればこの段階で実装していきます。

• お問い合わせフォーム
• ブログ更新機能
• オンライン決済機能
• オンライン予約機能
• 会員登録システム

また、目的に合わせてCMSを使い分けます。

• ECサイトを構築する場合：Shopify
• ECサイト以外を構築する場合：WordPress

※レクサはShopify expertsに認定されている企業です。

社内チェック・テスト

実装が完了したデモサイトは、まずデザイナーのチェックを受けます。具体的には以下のポイントを確認し、改善点があればエンジニアが修正を行います。

• デザインの再現度チェック
• ブラウザ表示時の品質チェック
• 動作や内容のチェック
• デモサイト全体の使いやすさチェック

ひとつずつ詳しく解説します。

デザインの再現度チェック

デザイナーは詳細な仕様を想定しながら、細かいところまで意図をもってデザインを制作しています。そのためエンジニアが実装する際には、それらが正しく再現されていることが重要です。

ブラウザ表示時の品質チェック

レスポンシブデザインの実装がうまくできているかを確認していきます。

現代ではWEBサイトを表示する端末やブラウザが多岐に渡っています。そのためデザインソフト上で細かく調整されていたデザインでも、ユーザーごとに異なる環境で表示されると改善点が見つかることがあります。

どのユーザーが見ても最適に表示されるよう、様々な環境を想定して表示の確認と改善を行います。

とはいえ、現実的には全てのデバイスで最適な表示をさせることは不可能です。そのため、一般的なデバイスやブラウザに絞ってチェックを行います（受注前に顧客には必ず説明するようにしています）。

動作や内容のチェック

表示や動作に不具合がないか、誤字脱字など内容の誤りがなく正しい情報が掲載されているかを確認します。動作不良や内容の誤りはユーザーの離脱やイメージの低下、トラブルにつながる恐れがあるため、もれなく確認するようにしています。

デモサイト全体の使いやすさ

デモサイトを実際に利用してみて本当に使いやすいか、ユーザーを迷わせる箇所がないか、魅力が伝わるかをユーザーの視点に立って確認します。改善点が見つかった場合は、公開までのスケジュールに配慮しつつ修正を加えます。

ご確認・動作チェック

出来上がったデモサイトをクライアントにご確認いただきます。パソコンやスマートフォンなどお持ちの端末でデモサイトを実際に体験していただき、ご意見やご感想があれば率直にお伺いするようにしています。

またお問い合わせフォームの送信テストやブログの更新など、各種機能の動作に問題ないかを実際に利用してご確認いただきます。