ピラティススタジオ「Pilates unit103.」さんのサイト制作時のフロー紹介

こんにちは、LINEの名前は「イカくん」ことBUROKIです。
イカが好きなんでこのネーミングにしてるんですが、すごく気味悪がられます・・（笑）

つい先日ですが、今月新宿の高田馬場にオープンした女性専用のピラティススタジオ「Pilates unit103.」さんのwebサイトを制作・公開しました。

Pilates unit103.のオーナー兼レッスン講師を務めるmaicaさんとはインスタグラムを通じてDMより依頼くださり、まずはロゴと名刺デザイン、そして今回のwebサイトとオープンに向けた制作物をほぼすべて任せていただきました。（まさに感謝しかない）

同じデザイナーに複数のデザインを任せることで必然的に統一感を出すことができ、デザイン視点からのブランディングにかなり役立ちますので個人的におすすめです。デザイナーを探す手間も省けますしね・・

「webサイト制作」とひと言でいいますが、一体どんなことやっているの？と疑問に思ったことはありませんか？
実はサイト制作ってデザインするだけではなく、いろんなことをしてるんです。

ロゴや名刺、フライヤーなどと違ってグラフィックソフトを使っただけでは完結しないweb制作。工程はもちろんサイトによって様々ですが、余程効率化を意識した制作をしていない限りは基本的なことは同じです。今回はPilates unit103.さんのweb制作のケースで制作工程を大まかですが紹介していけたらと思います。

工程1. ヒアリング

まずはどんなサイトにしたいか？のヒアリングからはじまります。
どんなサイトで、そのサイトでどんなことをしたいのか、何を見せたいのか・・サイトのゴールは何か？などのヒアリングです。これをすることでサイトに必要な機能が浮かび上がってきますし、場合よってはサイトをつくる必要がないのでは？ということも。

サイトはいわば自分の家のようなもの。家があるというのはかなりの強みではありますが、単に更新情報を見せたい場合なら無料でできるブログも今は豊富にありますし、簡単に投稿・シェアができるSNSのほうが手っ取り早かったりします。そういうところも加味しつつ、サイトの方向性を模索します。

工程2. イメージ、情報共有

ある程度ヒアリングを済ませたあとはロゴデザインと同じく、デザインテイストの共有をします。Pilates unit103.さんの場合はロゴや名刺デザインで大体のデザインテイストが固まっていたので、サイトに落とし込むのもそこまでの難易度はなかったです。
なのでサイトに使用するカラーとテイストの共通認識だけ持っておいて、すんなりと制作に入ることができました。

サイト制作の前に他の媒体のデザインに関わっているとイメージ共有がかなりスムーズになります。テイストの確認のあと、サイトに載せたい情報をいただきます。個人的な経験としては情報はあとから追加されることが多いので、この時点では大まかに共有してもらっても大丈夫です。

そして今回非常に良かったのがカメラマンに撮影された写真がすでに用意されていたんですね。なのでその写真の雰囲気もデザインの方向性を決めるのにいい参考になりました。

工程3. サイト構成考案

いただいた情報とヒアリングした内容に沿って、デザインに入る前にどんなページが必要で、どんな情報をどのページに記載するのか、ボクのほうでサイト全体の設計を組んだサイトマップを作成します。しっかりとした図をつくることもあれば、少ないページのサイトなら整理したテキストで先方に提案することもあります。

今回のPilates unit103.さんの場合はページ数がTOPページ、プラン、アクセス、問い合わせの計４ページだったのでテキストで共有しました。サイトのページ数は単に多ければいいというわけではなく、必要だと判断した場合は単一のページとしてつくり、組み合わせられそうな情報の場合はTOPページに組み合わせることもあります。

「どんなスタジオで、どんな人が講師なのか？」はこれからピラティスをはじめる人にとっては重要な情報だと思ったので、今回のサイトでは別のページとして分けず、TOPページに盛り込みました。なるべく「クリックを減らすサイト設計」もweb制作には重要なことです。クリックよりスクロールするほうが操作としては楽ですからね・・

工程4. ページデザイン

ここまでの工程を経て、ようやくページデザインに入っていきます。まずはTOPページのデザイン。Photoshopなどのグラフィックソフトを使用して１枚の画像としてラフを作成し、先方にサイトデザインの確認をとるのがスタンダードなやり方です。
この時点でサイトに使用するカラーやフォント、レイアウトなどを正式に決定させます。公開までの日数がタイトな場合はラフをつくらず、htmlとcssコーディングをしながらサイト構築していくこともあります。

そしてTOPページ提案後に先方からOKをいただいたあと、TOPページに沿ったデザインテイストで他ページのデザインもしていきます。

工程5. コーディング

デザインが固まったからといってそこで終わりではないのがwebサイト制作の最大の特徴です。
ここからはインターネットで見れるようにするためのコーディング作業です。

デザインは出来てもコーディングはできないというデザイナーも少なくないです。webデザインのフロントエンド（サイトを制作する側。サイトを運営・管理する側はバックエンドといいます）で使用する言語はhtml、css、javascript、phpなどがいまは主流です。それらの言語を使用してコードを書いていきます。

今回は今後ブログなど更新するかもしれないということだったのでブログ作成ツールである「wordpress（ワードプレス）」でのサイト構築にしました。wordpressはブログツールながらサイト制作ツールとしてもかなり優秀で今やどのサイトにも導入が当たり前になっていますね。wordpressでの構築も便利ではありますが、いかんせん「マニュアルのないツール」なので専門的な知識も必要で、習得しなければ導入することも難しかったりします。

ちなみにボクはコーディングする際は「Sublime Text3（サブライムテキスト）」というテキストエディタを利用しています。
なんといっても動作が軽いですし、同じワードのテキストを一括で編集できたり便利な機能が満載なのでおすすめです！

工程6. スマートフォン表示対応

ひとつのサイトに今はパソコンから、スマホから、またはタブレット端末からと様々なデバイスでアクセスすることがある時代・・
それぞれのモニターサイズに合わせてサイトを表示させる「レスポンシブデザイン」でのサイト構築がwebデザイナーには求められています。

ボクがいまサイトのデザイン面で１番重要だと思っているのが、とにかく「ロゴも画像も文字もぼやけさせない」ということです。いろんなサイズのモニターで見られるのが当たり前になっているwebサイト。小さい画面もあれば大きなモニターで見られることもあるでしょう。
それぞれの環境でもストレスなく見れるようにする。逆に言うと、それが出来ていれば凝ったデザインは必要ないとさえいえます。（ちょっと言い過ぎかもですが・・）

なので表示させる写真はできるだけ大きく（横幅のサイズが約2000pxくらい）でも低容量で、画像でのテキストではぼやけてしまう可能性があるので画像テキストではなくgoogleが推奨しているwebフォントを使う、ロゴなどは画像ではなくsvgファイルというベクターで表示される拡張子を選択するなど・・
くっきり表示されるための技術や機能を駆使してサイトを作成していきます。

工程7. ソーシャルでのシェア対応、そしてサイト公開

これはおまけみたいなものですが、サイトをfacebookやtwitterなどのSNSでシェアするときに、TOPページのタイトルや説明文、サムネイル画像が表示されるように設定をします。ブログなどの記事を書く場合は、その記事毎にシェアできるように設定をすることでサイトへの訪問を促すこともできます。

今回のサイトも各ページにサムネイル画像の設置を行いました。
そしてブラウザで見た場合にタブの横に表示される「ファビコン」やTOPページ表示時に表示するロゴのローディング画面も設定し、サイト制作はこれにて完了、正式に公開となりました。

制作したサイトは喜んでもらえたのでひとまずホッとしました。

webサイトは公開してからがスタート

web制作という点ではここで完了ですが、つくるだけでは意味がなく、アクセスしてもらわなければいけません。ネットのいいところは「修正できる」という点です。サイトと向き合い、更新や修正をすることで「生きたサイト」となり、googleなどの検索エンジンにも高評価を受け、よりアクセスされやすいホームページになっていきます。
そのためにはもちろんクライアントさまの努力も必要になってきます。

ホームページはつくっただけでは意味がありません。生きものとしてとらえ、一緒に育てていきましょう。

いかがでしたか？
いろんなことに対応するので、いろんなスキルも必要になり、時間もかかります。web制作を依頼される際に少しでも参考にしていただければ幸いです。最後までお読みくださりありがとうございました。ご依頼ももちろんお待ちしております。