ホームページを作成する前に準備したいこと

WEB担当者として仕事をしている人や、新しくWEB担当者になるなどサイト作りに関わるようになったときに、戸惑うことも多いのではないでしょうか。ホームページの制作過程がどのように進んでいくのか、把握しておきたいと考える人もいると思います。

もちろんどんなホームページを作るのかによっても変わりますが、進んでいく工程にはある程度法則があります。WEB制作のについてわかりやすくご紹介していきたいと思います。

サイトの方向性を決める「要件定義」

ホームページを制作するうえで最も重要といえるのが、要件定義です。どんなホームページにすれば自社のイメージにあったデザインや構成になるのか？どんな機能が必要なのか？などホームページ全体の方向性を決めていきます。

ホームページの要件定義を決める密なコミュニケーション

制作していくうえで依頼主と制作側の誰がどこまで担当するのかを細かく決めておき、相違がないようにしっかりと打合合わせをし話を詰めていきます。後々揉め事になりそうなことはできるだけ細かく決めておくことで、トラブルを未然に防ぐことにも繋がります。

サーバーのバージョンの見直し

同時にこのタイミングで見直してほしいのが、サーバー周辺の環境です。例えばサーバーのバージョンが古すぎてしまうと、いざホームページを作っても正常に動かない事態が起きてしまうことも少なくありません。ドメインの場所や取得する方法なども決めておくようにします。

ホームページの大枠を考える

他にもサイトの大枠についても考えます。ホームページではユーザーのゴールをどこに設定するのか？（例えば商品やサービスの購入か？問い合わせなのかなど）ホームページのターゲットは？ペルソナも含め戦略を考えていきます。

ターゲット層が明確になっていると、デザインを決めるときにもユーザーに適したデザインにできます。例えば男性向け商品を販売するホームページなのに、女性向けのファンシーなデザインでは商品の良さが伝わりにくくなってしまいます。

また、どこまでSEO対策をするのかサイトにはどんな機能が必要なのかなど細かく定義していきます。

ホームページの設計図「ワイヤーフレーム」

サイトの全体的な要件が決まったらサイトのワイヤーフレームを考え設計していきます。ホームページでは各ページにどのようなレイアウトにするのか？どのような要素が必要なのかを考え、サイトの骨組みを決めていくことを「ワイヤーフレーム」といいます。

もしこの時点でテキストの配置が決まっているのであればダミー表記で入力しておき全体のバランスを見てもいいと思います。ワイヤーフレームを作成する為のソフトですが「作業のしやすさ」を一番に考えファイルの相互性も考慮して決めるようにしてくださいね。

パワーポイントを使うのが一般的ですが、なかにはAdobeXDやExcelなどを使うケースもあります。作業がしやすい、慣れているものを使ったほうが作業効率も高まります。

コミュニケーションが鍵となる「デザイン」

ホームページの骨組みが決まったら次にデザインを考えていきます。ホームページの見た目を決める重要な部分になります。ワイヤーフレームはあくまでも骨組みになりますので、

デザインがホームページの印象を決めるすべてといっても過言ではないのです。

デザイナーさんと密にコミュニケーションを取り、ホームページを仕上げていきます。ワイヤーフレームを忠実に再現するケースもあれば、デザイナーさんからアドバイスをもらうこともあります。

実際にワイヤーフレームをもとにホームページを作成しても、一度で全体の完成図を想像できる人のほうが珍しいはずです。デザインを出した段階であれこれフィードバックが発生し、ホームページのデザインをいじらなくてはいけなくなることもあります。

お客様の目線に立ってデザインを考えるのがポイントです。

ホームページのコードを作成「実装」

ワイヤーフレーム→デザインが終わったら次は、実際にブラウザで動くかどうかを考える必要があります。デザインをHTMLに起こしていき、アニメーションや見た目の演出も決めていきます。

特に動的な実装を施すサイトに関しては、システムの組み込み作業が複雑化してしまいます。フロントエンド側、バックエンド側での役割分担、コミュニケーションを積極的にとること、ディレクターがその間に立ち適切な指示を行うとスムーズです。

実際に動くようになったホームページに不具合がないかどうかテストを検証し試していきます。表示画面の不具合や機能が動作するのか、できる限り幅広い視点で実機して確認します。またユーザーの利用の多いデバイスなどはより注意していく必要があります。

まとめ

ホームページの作成はすべての工程に専門的な知識を必要とします。デザインを考えたりワイヤーフレームを考えるのは難しいかもしれません。

ただディレクターやデザイナーと円滑なコミュニケーションができているかどうかを考え、基本的なホームページ作成の流れを把握しておくことも重要なことです。