kigoulab これまでは、一般的な制作の流れをまとめた記事ばかりでしたが、今回は具体的にある小規模なホームページを作ったとき時の流れをまとめてみます。事例紹介中心のホームページです。実際の作成手順を読んでイメージしてみて下さい。※企業名等は伏せています。
インターネットで困っている…その原因とは？
スタッフの知人が、検索すると、古い住所ばかり表示されて困るということで困っていました。自社のホームページはなく、住所を正しく伝えるためにも、そろそろホームページを作成した方が良いのではないかとのこと。スタッフが当社で制作を受けられると伝えたところ、ぜひお願いしたいということになりました。
オリエンテーション後、まずは社名で検索すると、古い住所が掲載されたサイトが、たくさん出てきました。調査した結果、1つは、タウンページから情報を取得して表示している物、もう1つがGoogleプレイスです。
上記の場合、本人確認もあるので当社では修正できません。お客様には状況をお伝えして、修正をしていただきました。Googleプレイスは、オンラインから修正が可能で、修正はすぐに反映されます。タウンページはNTTに電話で連絡して修正してもらう必要があります。タウンページが修正された後、iタウンページが修正されて、goo地図が修正されるので、全部の住所情報が修正されるのに１ヶ月以上かかりました。
このように、当社はホームページ制作業者とはいえホームページ制作だけをやっているわけではありません。インターネットにまつわる、さまざまなことからお手伝いしています。
ホームページの骨格を作成。
住所の件に見通しがついたところで、ホームページの作成です。まずはコンサルティングからと行きたいところですが、自分たちにはもともと顧客も多いから、ホームページで積極的に営業するより、事例をきちんと紹介したい、自社の仕事のポリシーを伝えたいということでしたので、まずお客様の要望を最初にきちんと整理して記載し、それに対し、このように対応したという構成を考え、まずは全体のボリュームがわかるような小さなフローチャートをエクセルで作くりました。
各ページには何が入るのかも明記しました。アクセスのページには地図が入りますとかです。
当初、ホームページから集客はしない、住所が正しく伝わればよい。存在証明のホームページで構わないとうかがっていましたので、唯一、コンサル的なことと言えば、ミッションとビジョンを入れませんかと提案したことです。ミッションをホームのコピーとして。ビジョンを会社案内にそれぞれ入れ、会社の社会に対する役割と、目指している方向を明確にすることを提案しました。これで合計8ページのホームページの骨格が出来上がり、内容の説明をした上で、承諾を得ました。
フォトショップを起動しないで組み立てる。
今回、見積もりは、スマホに対応しないバージョンと、スマホに対応したバージョン（レスポンシブウェブデザイン）2案を提示していました。予算の都合もあるので、スマホはなしかなと思っていましたが、採用ページはスマホで見られる比率が高いのではないかということで、レスポンシブ対応となりました。
通常であれば次の段階として、ワイヤーフレームを作成するのですが、レスポンシブ対応であることとコンテンツの量もさほどないことから、シングルカラム（１段組）となるのは、想像できました。トップページは写真全画面表示として、会社のミッションを目立たせるレイアウトとし、各ページはシングルカラムとする。これでワイヤーフレームは脳内でき来たも同然です。
この仕事に着手する前、空いた時間を利用して、レスポンシブウェブデザインのテンプレートを作成していました。何にか仕事があったときに、０から作成するのではなく、共通するひな形から制作したいと考えていたためです。
さっそく、このテンプレートを使い、ホームと、下部階層1つの要素を並べてみました。本文などまだ文章のないところは、ダミーテキストジェネレータを使い、想定される文字数入れていきました。
今までの作り方だと、フォトショップを使って画面単位でデザインした物から、見出しや約物の飾りを画像として切り出し、HTMLに背景画像などとしてあしらうわけですが、今回はスマホ対応ということで、極力容量を減らしたいという考えもあり、フォトショップで画像を作くるより、スタイルシートでできる範囲で約物を作成しました。
用意していたテンプレートで、HTML+CSSワイヤーヤフレーム風のレイアウトをし、その後、約物をCSSで修飾していくという流れです。おかげで、会社ロゴと、イメージ画像以外、画像を使わないページを実現しました。
ここまでの間、フォトショップはホームの画像のトリミング以外使わずに進みました。
ホームのデザインの了承を得る。
ホームの全画面画像は、３パターン用意しました。一押しの１案と、サブの２案です。お客様が選択したのは一押しの案。お客様の業務ドメインと、画像のイメージが合致していて、とてもメッセージ性の高い画像でした。こちらの希望とお客様のイメージがかっちり決まった瞬間でもあり、選定した私としてもうれしかったです。このイメージ画像の上に、ミッションのキャッチコピーとリードコピーを乗せると、とても力強いイメージ画像となりました。
あわや画像対応か
とはいえ、順風満帆で制作進すんだわけではありません。あるコーナーの文章の見せ方を、パンフレットと同じにしたいとのご希望で、その形が、左右から入れ子になっている形態でした。一瞬、画像背景で処理するしかないかなと思いましたが、ネット上のスタイルシートテンプレートをあさり、なんとかスタイルシートだけで実現しました。スタイルシートは奥が深いです。
コピーができてきて合体。スマホの検証も
インタビューからコピーもできてきて、各ページに流し込みして、お客様にご確認いただきました。並行してスマホ用のメニューなどを作り込んで、スマホでの検証を行いました。もともとレスポンシブウェブデザインのテンプレートだったために、すんなりとスマホで表示されていました。
常時SSLの件など、情報が遅れたことも
ちょうどこの頃、Google chromeが常時SSL化されていないウェブサイトに警告を表示するというさなかの頃でした。もともとサーバーはお客様が契約していた某ビジネスサービス会社のサーバーを利用するとのことでしたので、サーバーの検討をすることなく進めてしまった結果、後になって、現状のサーバーでは常時SSLに対応でないことが判明しました。お客様のホームページではアンケートやお問い合わせフォームを設置しておらず、特に支障はないだろうということで当面様子を見るとのこと。ただサイトを制作する前にお伝えできていれば、また変わったかもしれず、悔やまれます。
まとめ
今回の制作では、フォトショップでレイアウトすることなしに、いきなりコーディング段階でワイヤー→デザインと進んだところがポイントです。必ずしもこの方法が良よいわけではありません。大規模サイトの場合はワイヤーヤフレームで対応部署の承諾を得てからデザインを行う流れが多いと思います。デザイナーとフロントエンドエンジニアが別れている場合はなおさらです。
ただ、かなりのグラフィックが、CSSやSVGで作成できる昨今、画面単位のフォトショップでレイアウトを作り込まず、コーディング先行、イラストレーターによるパーツ作成などの方法も検討して良いのではと思います。お客様にはまずデザインありきではなく、途中経過のコーディングデータであっても、要所要所で承諾していただけると、制作を進めやすいのではと思います。
(担当：小山智久）